2018-10-19 05:15:28 +00:00
|
|
|
<template lang="html">
|
2021-02-25 05:07:19 +00:00
|
|
|
<nav
|
2021-04-21 05:59:08 +00:00
|
|
|
class="dock p-2 d-flex align-items-center justify-content-between w-100"
|
|
|
|
:class="{ '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
|
2021-04-21 05:59:08 +00:00
|
|
|
variant="transparent"
|
|
|
|
v-b-toggle.menu
|
2021-03-11 00:06:47 +00:00
|
|
|
class="p-0 ml-2"
|
2021-02-03 21:04:02 +00:00
|
|
|
>
|
2021-03-10 00:25:34 +00:00
|
|
|
<img
|
2021-04-16 20:47:13 +00:00
|
|
|
src="/static/gamebrary-logo.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-04-21 05:59:08 +00:00
|
|
|
<span v-if="pageTitle" class="d-sm-none">{{ pageTitle }}</span>
|
|
|
|
<sidebar />
|
2021-03-11 00:06:47 +00:00
|
|
|
|
2021-04-19 23:05:45 +00:00
|
|
|
<!-- TODO: move to board page and use portal -->
|
2021-03-10 00:25:34 +00:00
|
|
|
<b-dropdown
|
2021-04-21 05:59:08 +00:00
|
|
|
v-if="user && showBoardsDropdown && boards.length > 1"
|
|
|
|
variant="transparent"
|
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"
|
|
|
|
@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"
|
|
|
|
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-dropdown>
|
2021-04-14 22:45:19 +00:00
|
|
|
|
|
|
|
<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" />
|
|
|
|
</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-01-25 21:05:35 +00:00
|
|
|
import PinnedBoards from '@/components/Board/PinnedBoards';
|
2021-04-21 05:59:08 +00:00
|
|
|
import Sidebar from '@/components/Sidebar';
|
2018-10-19 05:15:28 +00:00
|
|
|
|
|
|
|
export default {
|
2020-10-14 21:53:23 +00:00
|
|
|
components: {
|
2021-01-25 21:05:35 +00:00
|
|
|
PinnedBoards,
|
2021-04-21 05:59:08 +00:00
|
|
|
Sidebar,
|
2020-10-14 21:53:23 +00:00
|
|
|
},
|
|
|
|
|
2019-11-08 19:56:03 +00:00
|
|
|
computed: {
|
2021-04-19 23:05:45 +00:00
|
|
|
...mapState(['board', 'boards', 'notification', 'user', 'wallpapers', 'sessionExpired', 'publicBoards']),
|
2021-04-16 20:47:13 +00:00
|
|
|
...mapGetters(['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() {
|
2021-04-19 23:05:45 +00:00
|
|
|
return this.isBoard && this.boards.length && this.isBoardOwner;
|
2021-03-11 00:06:47 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
pageTitle() {
|
|
|
|
return this.$route.meta && this.$route.meta.title;
|
|
|
|
},
|
2021-04-17 04:40:19 +00:00
|
|
|
|
|
|
|
showDevTools() {
|
|
|
|
return process.env.NODE_ENV === 'development';
|
|
|
|
},
|
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-04-21 05:59:08 +00:00
|
|
|
// handleLogoClick() {
|
|
|
|
// if (!this.user) {
|
|
|
|
// if (this.$route.name === 'public-boards') {
|
|
|
|
// this.$bvModal.show('authModal');
|
|
|
|
// } else {
|
|
|
|
// this.$router.push({ name: 'public-boards' });
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
//
|
|
|
|
// 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>
|