gamebrary/src/components/Dock.vue

145 lines
3.5 KiB
Vue
Raw Normal View History

2020-11-21 06:32:26 +00:00
<!-- TODO: only make transparent when x-scrolled -->
2018-10-19 05:15:28 +00:00
<template lang="html">
2020-10-14 00:37:42 +00:00
<nav
2020-11-18 06:06:18 +00:00
class="rounded position-fixed d-flex flex-column p-0 m-2 text-center"
2021-02-01 19:37:40 +00:00
:class="{ 'bg-dark text-white': nightMode, 'border': !nightMode }"
2020-10-14 00:37:42 +00:00
>
2021-02-01 23:20:41 +00:00
<b-button
2021-01-20 22:44:04 +00:00
title="Dashboard"
2021-02-01 23:20:41 +00:00
variant="transparent"
class="my-2 p-0"
@click="handleLogoClick"
2020-11-23 23:36:03 +00:00
>
2020-10-14 00:37:42 +00:00
<img
:src="`/static/gamebrary-logo${nightMode ? '' : '-dark'}.png`"
width="32"
/>
2021-02-01 23:20:41 +00:00
</b-button>
2020-09-26 00:09:20 +00:00
2021-01-25 21:05:35 +00:00
<pinned-boards v-if="$route.name === 'board'" />
2021-02-01 19:38:17 +00:00
<b-dropdown
id="dropdown-1"
text="Dropdown Button"
dropright
right
no-caret
boundary="viewport"
:variant="nightMode ? 'dark' : 'transparent'"
:menu-class="nightMode ? 'bg-dark' : ''"
>
<template v-slot:button-content>
<i class="fas fa-ellipsis-h fa-fw" aria-hidden />
</template>
2021-02-01 23:20:41 +00:00
<b-dropdown-header id="dropdown-header-label">
{{ board.name }}
</b-dropdown-header>
<b-dropdown-item v-b-modal:board-settings>Edit board</b-dropdown-item>
<b-dropdown-item v-b-modal:add-list>Add list</b-dropdown-item>
<b-dropdown-item @click="pinBoard">
{{ board.pinned ? 'Unpin from dock' : 'Pin to dock' }}
</b-dropdown-item>
<b-dd-divider />
<b-dropdown-item v-b-modal:create-board>
<i class="fas fa-cog fa-fw" aria-hidden />
Create board
</b-dropdown-item>
<b-dd-divider />
2021-02-01 19:38:17 +00:00
<b-dropdown-item :to="{ name: 'boards' }">
<i class="fas fa-columns fa-fw" aria-hidden />
Boards
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'tags' }">
<i class="fas fa-tags fa-fw" aria-hidden />
Tags
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'notes' }">
<i class="fas fa-sticky-note fa-fw" aria-hidden />
Notes
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'wallpapers' }">
<i class="fas fa-images fa-fw" aria-hidden />
Wallpapers
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'account' }">
<i class="fas fa-user fa-fw" aria-hidden />
Account
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'settings' }">
<i class="fas fa-cog fa-fw" aria-hidden />
Settings
</b-dropdown-item>
</b-dropdown>
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 {
components: {
2021-01-25 21:05:35 +00:00
PinnedBoards,
},
2019-11-08 19:56:03 +00:00
computed: {
2021-02-01 23:20:41 +00:00
...mapState(['board', 'notification', 'settings', 'user']),
2020-10-21 17:33:22 +00:00
...mapGetters(['nightMode']),
2021-01-20 22:48:01 +00:00
isBoard() {
return ['public-board', 'board'].includes(this.$route.name);
},
2019-11-08 19:56:03 +00:00
},
2021-02-01 23:20:41 +00:00
methods: {
handleLogoClick() {
if (this.user && this.$route.name !== 'boards') {
this.$router.push({ name: 'boards' });
}
// TODO: show login modal / test
},
async pinBoard() {
const payload = {
...this.board,
pinned: !this.board.pinned,
};
this.$store.commit('SET_ACTIVE_BOARD', payload);
this.$store.commit('UPDATE_BOARDS', 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');
},
},
2018-10-19 05:15:28 +00:00
};
</script>
2020-09-26 00:09:20 +00:00
<style lang="scss" rel="stylesheet/scss" scoped>
nav {
width: 50px;
2020-09-30 02:36:27 +00:00
z-index: 1;
2020-11-18 05:55:35 +00:00
background: rgba(255, 255, 255, 0.9);
&:hover {
background: white;
}
2020-09-26 00:09:20 +00:00
}
</style>