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
|
|
|
<!-- :class="{
|
|
|
|
'bg-dark text-white border-info': darkTheme,
|
|
|
|
'bg-white': !darkTheme,
|
|
|
|
}" -->
|
|
|
|
<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-11 00:06:47 +00:00
|
|
|
width="40"
|
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 00:06:47 +00:00
|
|
|
<small v-if="pageTitle">{{ pageTitle }}</small>
|
|
|
|
|
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-02-03 21:04:02 +00:00
|
|
|
>
|
2021-03-10 00:25:34 +00:00
|
|
|
<template #button-content>
|
|
|
|
<small>{{ board.name }}</small>
|
|
|
|
</template>
|
2021-02-25 05:07:19 +00:00
|
|
|
|
2021-03-11 00:06:47 +00:00
|
|
|
<b-dropdown-item>
|
|
|
|
<span
|
|
|
|
:variant="darkTheme ? 'dark' : 'primary'"
|
|
|
|
v-b-modal:edit-board
|
|
|
|
>
|
|
|
|
<i class="fas fa-pencil-alt fa-fw" aria-hidden />
|
|
|
|
Edit board
|
|
|
|
</span>
|
|
|
|
</b-dropdown-item>
|
|
|
|
|
|
|
|
<b-dropdown-divider />
|
|
|
|
|
2021-03-10 00:25:34 +00:00
|
|
|
<b-dropdown-header>
|
|
|
|
My boards
|
|
|
|
</b-dropdown-header>
|
2021-02-25 05:07:19 +00:00
|
|
|
|
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
|
|
|
|
class="board"
|
|
|
|
:title="name"
|
|
|
|
text=" "
|
|
|
|
:style="`
|
|
|
|
${backgroundColor ? `background-color: ${backgroundColor};` : null }
|
|
|
|
${getWallpaperUrl(backgroundUrl)}
|
|
|
|
`"
|
|
|
|
/>
|
|
|
|
<!-- TODO: create array map with url already fetched -->
|
2021-02-25 05:07:19 +00:00
|
|
|
|
2021-03-10 00:25:34 +00:00
|
|
|
{{ name }}
|
|
|
|
</b-dropdown-item>
|
2021-02-25 05:07:19 +00:00
|
|
|
|
|
|
|
|
2021-03-10 00:25:34 +00:00
|
|
|
<!-- <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> -->
|
|
|
|
|
|
|
|
<!-- TODO: persist value -->
|
|
|
|
<!-- <b-button
|
|
|
|
v-if="user"
|
|
|
|
:variant="darkTheme ? 'dark' : 'light'"
|
|
|
|
class="mx-1 mb-1 py-0"
|
|
|
|
size="sm"
|
|
|
|
>
|
|
|
|
</b-button> -->
|
2021-02-01 19:38:17 +00:00
|
|
|
|
2021-03-10 00:25:34 +00:00
|
|
|
<!-- <b-button
|
|
|
|
:to="{ name: 'releases' }"
|
|
|
|
class="latest-release mx-2 py-0 position-fixed"
|
|
|
|
variant="transparent"
|
|
|
|
size="sm"
|
|
|
|
>
|
|
|
|
<small class="text-muted">{{ latestRelease }}</small>
|
|
|
|
</b-button> -->
|
|
|
|
</b-dropdown>
|
|
|
|
</div>
|
|
|
|
|
2021-03-11 00:06:47 +00:00
|
|
|
<div class="d-flex">
|
|
|
|
<portal-target name="dock" />
|
|
|
|
|
|
|
|
<b-dropdown
|
|
|
|
right
|
|
|
|
no-caret
|
|
|
|
variant="transparent"
|
|
|
|
toggle-class="p-0 mx-2 border-0"
|
|
|
|
>
|
|
|
|
<template #button-content>
|
|
|
|
<b-avatar
|
|
|
|
v-if="user && user.photoURL"
|
|
|
|
rounded
|
|
|
|
size="38"
|
|
|
|
:src="user.photoURL"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<b-dropdown-header>
|
|
|
|
Hi, {{ user.displayName }}!
|
|
|
|
</b-dropdown-header>
|
|
|
|
|
|
|
|
<b-dropdown-item :to="{ name: 'profile' }">
|
|
|
|
<i class="fas fa-user fa-fw" aria-hidden /> Profile
|
|
|
|
</b-dropdown-item>
|
|
|
|
|
|
|
|
<b-dropdown-item :to="{ name: 'settings' }">
|
|
|
|
<i class="fas fa-cog fa-fw" aria-hidden /> Settings
|
|
|
|
</b-dropdown-item>
|
|
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|
|
|
<b-dropdown-item>Log out</b-dropdown-item>
|
|
|
|
</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-01-25 21:05:35 +00:00
|
|
|
import PinnedBoards from '@/components/Board/PinnedBoards';
|
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,
|
2020-10-14 21:53:23 +00:00
|
|
|
},
|
|
|
|
|
2019-11-08 19:56:03 +00:00
|
|
|
computed: {
|
2021-03-10 00:25:34 +00:00
|
|
|
...mapState(['board', 'boards', 'notification', 'user', 'releases', 'wallpapers']),
|
2021-02-21 18:14:46 +00:00
|
|
|
...mapGetters(['darkTheme']),
|
2021-01-20 22:48:01 +00:00
|
|
|
|
2021-02-24 23:41:43 +00:00
|
|
|
latestRelease() {
|
|
|
|
// eslint-disable-next-line
|
2021-02-25 22:43:38 +00:00
|
|
|
const [latestRelease] = this.releases;
|
2021-02-24 23:41:43 +00:00
|
|
|
|
|
|
|
// eslint-disable-next-line
|
2021-02-25 22:43:38 +00:00
|
|
|
return latestRelease && latestRelease.tag_name;
|
2021-02-24 23:41:43 +00:00
|
|
|
},
|
|
|
|
|
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 Object.keys(this.board).length > 1;
|
|
|
|
},
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
const test = wallpaperObject && wallpaperObject.url
|
|
|
|
? `background-image: url(${decodeURI(wallpaperObject.url)});`
|
|
|
|
: '';
|
|
|
|
|
|
|
|
console.log(test);
|
|
|
|
|
|
|
|
return test;
|
|
|
|
},
|
|
|
|
|
|
|
|
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) {
|
2021-02-03 22:14:22 +00:00
|
|
|
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-02-25 05:07:19 +00:00
|
|
|
.latest-release {
|
|
|
|
bottom: .5rem;
|
|
|
|
padding: 0;
|
|
|
|
width: 40px;
|
|
|
|
left: .33rem;
|
|
|
|
}
|
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>
|