gamebrary/src/components/Dock.vue

239 lines
5.9 KiB
Vue
Raw Normal View History

2018-10-19 05:15:28 +00:00
<template lang="html">
2021-02-25 05:07:19 +00:00
<nav
2021-03-11 00:06:47 +00:00
:class="['dock d-flex align-items-center justify-content-between w-100',
{ 'position-fixed': isBoard }]"
2021-02-25 05:07:19 +00:00
>
2021-03-10 00:25:34 +00:00
<div>
2021-02-19 22:12:08 +00:00
<b-button
2021-03-10 00:25:34 +00:00
title="Dashboard"
squared
variant="transparent"
2021-03-11 00:06:47 +00:00
class="p-0 ml-2"
2021-03-10 00:25:34 +00:00
@click="handleLogoClick"
2021-02-03 21:04:02 +00:00
>
2021-03-10 00:25:34 +00:00
<img
:src="`/static/gamebrary-logo${darkTheme || board.backgroundUrl ? '' : '-dark'}.png`"
2021-03-18 23:41:28 +00:00
width="32"
2021-03-10 00:25:34 +00:00
/>
2021-02-19 22:12:08 +00:00
</b-button>
2021-02-01 19:38:17 +00:00
2021-03-11 04:24:23 +00:00
<span v-if="pageTitle">{{ pageTitle }}</span>
2021-03-11 00:06:47 +00:00
2021-03-10 00:25:34 +00:00
<b-dropdown
2021-03-11 00:06:47 +00:00
v-if="user && showBoardsDropdown"
2021-03-10 00:25:34 +00:00
:toggle-class="['p-0', { 'text-white': darkTheme || board.backgroundUrl }]"
variant="transparent"
2021-04-01 22:15:56 +00:00
:menu-class="darkTheme ? 'bg-dark' : ''"
2021-03-11 04:24:23 +00:00
:text="board.name"
2021-02-03 21:04:02 +00:00
>
2021-04-01 22:15:56 +00:00
<!-- TODO: create array map with url already fetched -->
2021-03-10 00:25:34 +00:00
<b-dropdown-item
v-for="{ id, name, backgroundColor, backgroundUrl } in boards"
:key="id"
:active="board.name === name"
2021-04-01 22:15:56 +00:00
:variant="darkTheme ? 'primary' : ''"
2021-03-10 00:25:34 +00:00
@click.native="viewBoard(id)"
>
<b-avatar
rounded
2021-04-01 22:15:56 +00:00
class="board mr-2"
2021-03-10 00:25:34 +00:00
:title="name"
2021-04-01 22:15:56 +00:00
:variant="darkTheme ? 'dark' : 'info'"
2021-03-10 00:25:34 +00:00
text=" "
:style="`
${getWallpaperUrl(backgroundUrl)}
2021-04-01 22:15:56 +00:00
${backgroundColor ? `background-color: ${backgroundColor};` : '' }
2021-03-10 00:25:34 +00:00
`"
/>
2021-02-25 05:07:19 +00:00
2021-03-10 00:25:34 +00:00
{{ name }}
</b-dropdown-item>
<!-- <b-collapse
v-if="user"
<b-button
:variant="darkTheme ? 'dark' : 'light'"
class="mt-1 d-none d-sm-inline"
size="sm"
v-b-modal:keyboard-shortcuts
title="Keyboard shortcuts"
>
<i class="fas fa-keyboard fa-fw" aria-hidden />
</b-button>
<hr class="my-1">
2021-03-11 00:06:47 +00:00
2021-03-10 00:25:34 +00:00
</b-collapse> -->
<!-- <b-button
v-if="user"
:variant="darkTheme ? 'dark' : 'light'"
class="mx-1 mb-1 py-0"
size="sm"
>
</b-button> -->
</b-dropdown>
<span v-else>
{{ board.name }}
</span>
2021-03-10 00:25:34 +00:00
</div>
2021-03-11 00:06:47 +00:00
<div class="d-flex">
<portal-target name="dock" />
<b-dropdown
2021-04-08 06:30:38 +00:00
v-if="user"
2021-03-11 00:06:47 +00:00
right
no-caret
2021-04-01 22:15:56 +00:00
:variant="darkTheme ? 'dark' : 'light'"
:menu-class="darkTheme ? 'bg-dark' : ''"
2021-03-11 00:06:47 +00:00
toggle-class="p-0 mx-2 border-0"
>
<template #button-content>
<b-avatar
rounded
size="38"
2021-04-08 06:30:38 +00:00
:src="user.photoURL ? user.photoURL : null"
2021-03-11 00:06:47 +00:00
/>
</template>
<b-dropdown-header>
Hi, {{ user.displayName }}!
</b-dropdown-header>
2021-04-01 22:15:56 +00:00
<b-dropdown-item
:to="{ name: 'releases' }"
:variant="darkTheme ? 'primary' : ''"
>
<i class="fas fa-rocket fa-fw" aria-hidden />
Releases
</b-dropdown-item>
2021-04-12 23:13:15 +00:00
<b-dropdown-item :to="{ name: 'profile' }">
<i class="fas fa-user fa-fw" aria-hidden />
Profile
</b-dropdown-item>
2021-03-11 00:06:47 +00:00
2021-04-01 22:15:56 +00:00
<b-dropdown-item
:variant="darkTheme ? 'primary' : ''"
:to="{ name: 'settings' }"
>
<i class="fas fa-cog fa-fw" aria-hidden />
Settings
2021-03-11 00:06:47 +00:00
</b-dropdown-item>
2021-04-01 22:15:56 +00:00
2021-03-23 23:53:55 +00:00
<b-dropdown-divider></b-dropdown-divider>
2021-04-01 22:15:56 +00:00
<b-dropdown-item-button
:variant="darkTheme ? 'primary' : ''"
@click="session_signOut"
>
2021-03-24 04:58:26 +00:00
<i class="fas fa-sign-out-alt fa-fw" aria-hidden />
2021-03-23 23:53:55 +00:00
{{ $t('global.signOut') }}
</b-dropdown-item-button>
2021-03-11 00:06:47 +00:00
</b-dropdown>
</div>
2020-09-26 00:09:20 +00:00
</nav>
2018-10-19 05:15:28 +00:00
</template>
<script>
2020-09-01 17:47:56 +00:00
import { mapState, mapGetters } from 'vuex';
2021-03-23 23:53:55 +00:00
import SessionMixin from '@/mixins/SessionMixin';
2021-01-25 21:05:35 +00:00
import PinnedBoards from '@/components/Board/PinnedBoards';
2018-10-19 05:15:28 +00:00
export default {
components: {
2021-01-25 21:05:35 +00:00
PinnedBoards,
},
2021-03-23 23:53:55 +00:00
mixins: [SessionMixin],
2019-11-08 19:56:03 +00:00
computed: {
...mapState(['board', 'boards', 'notification', 'user', 'wallpapers']),
...mapGetters(['darkTheme', 'isBoardOwner']),
2021-01-20 22:48:01 +00:00
isBoard() {
return ['public-board', 'board'].includes(this.$route.name);
},
2021-03-11 00:06:47 +00:00
showBoardsDropdown() {
return this.isBoard && this.isBoardOwner;
2021-03-11 00:06:47 +00:00
},
pageTitle() {
return this.$route.meta && this.$route.meta.title;
},
2019-11-08 19:56:03 +00:00
},
2021-02-01 23:20:41 +00:00
methods: {
2021-03-10 00:25:34 +00:00
getWallpaperUrl(url) {
if (!url) {
return '';
}
if (url && url.includes('igdb.com')) {
return `background-image: url(${url});`;
}
const wallpaperObject = this.wallpapers.find(({ fullPath }) => fullPath === url);
2021-03-11 01:13:45 +00:00
return wallpaperObject && wallpaperObject.url
2021-03-10 00:25:34 +00:00
? `background-image: url(${decodeURI(wallpaperObject.url)});`
: '';
},
viewBoard(id) {
if (this.board.id !== id) {
this.$router.push({ name: 'board', params: { id } });
} else {
this.$bvModal.show('edit-board');
}
},
2021-02-01 23:20:41 +00:00
handleLogoClick() {
2021-02-03 21:04:02 +00:00
if (!this.user) {
if (this.$route.name === 'public-boards') {
this.$bvModal.show('authModal');
} else {
this.$router.push({ name: 'public-boards' });
}
2021-02-03 21:04:02 +00:00
}
2021-03-11 00:06:47 +00:00
if (this.user && this.$route.name !== 'dashboard') {
this.$router.push({ name: 'dashboard' });
2021-02-01 23:20:41 +00:00
}
},
2021-02-19 22:12:08 +00:00
// async pinBoard() {
// const payload = {
// ...this.board,
// pinned: !this.board.pinned,
// };
//
// this.$store.commit('SET_ACTIVE_BOARD', payload);
//
// await this.$store.dispatch('SAVE_BOARD')
// .catch(() => {
// this.$bvToast.toast('There was an error renaming list', { variant: 'danger' });
// });
//
// this.$bvToast.toast('Board settings saved');
// },
2021-02-01 23:20:41 +00:00
},
2018-10-19 05:15:28 +00:00
};
</script>
2020-09-26 00:09:20 +00:00
<style lang="scss" rel="stylesheet/scss" scoped>
2021-03-10 00:25:34 +00:00
.dock {
z-index: 1;
2021-03-11 00:06:47 +00:00
height: 54px;
2021-03-10 00:25:34 +00:00
}
.board {
background-size: cover;
background-position: center;
}
2020-09-26 00:09:20 +00:00
</style>