298 lines
7.0 KiB
Vue
298 lines
7.0 KiB
Vue
<template>
|
|
<header
|
|
:class="{'has-background': background}"
|
|
aria-label="main navigation"
|
|
class="navbar main-theme is-fixed-top"
|
|
>
|
|
<router-link :to="{name: 'home'}" class="logo-link">
|
|
<Logo width="164" height="48"/>
|
|
</router-link>
|
|
<MenuButton class="menu-button"/>
|
|
<div class="list-title" ref="listTitle" v-show="currentList.id">
|
|
<template v-if="currentList.id">
|
|
<h1
|
|
:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
|
|
class="title">
|
|
{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
|
|
</h1>
|
|
|
|
<list-settings-dropdown v-if="canWriteCurrentList && currentList.id !== -1" :list="currentList"/>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<update/>
|
|
<a
|
|
@click="openQuickActions"
|
|
class="trigger-button pr-0"
|
|
v-shortcut="'Control+k'"
|
|
:title="$t('keyboardShortcuts.quickSearch')"
|
|
>
|
|
<icon icon="search"/>
|
|
</a>
|
|
<notifications/>
|
|
<div class="user">
|
|
<dropdown class="is-right" ref="usernameDropdown">
|
|
<template #trigger>
|
|
<x-button
|
|
variant="secondary"
|
|
:shadow="false"
|
|
>
|
|
<img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
|
|
<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
|
|
<span class="icon is-small">
|
|
<icon icon="chevron-down"/>
|
|
</span>
|
|
</x-button>
|
|
</template>
|
|
|
|
<BaseButton
|
|
:to="{name: 'user.settings'}"
|
|
class="dropdown-item"
|
|
>
|
|
{{ $t('user.settings.title') }}
|
|
</BaseButton>
|
|
<BaseButton
|
|
v-if="imprintUrl"
|
|
:href="imprintUrl"
|
|
class="dropdown-item"
|
|
>
|
|
{{ $t('navigation.imprint') }}
|
|
</BaseButton>
|
|
<BaseButton
|
|
v-if="privacyPolicyUrl"
|
|
:href="privacyPolicyUrl"
|
|
class="dropdown-item"
|
|
>
|
|
{{ $t('navigation.privacy') }}
|
|
</BaseButton>
|
|
<BaseButton
|
|
@click="$store.commit('keyboardShortcutsActive', true)"
|
|
class="dropdown-item"
|
|
>
|
|
{{ $t('keyboardShortcuts.title') }}
|
|
</BaseButton>
|
|
<BaseButton
|
|
:to="{name: 'about'}"
|
|
class="dropdown-item"
|
|
>
|
|
{{ $t('about.title') }}
|
|
</BaseButton>
|
|
<BaseButton
|
|
@click="logout()"
|
|
class="dropdown-item"
|
|
>
|
|
{{ $t('user.auth.logout') }}
|
|
</BaseButton>
|
|
</dropdown>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup langs="ts">
|
|
import {ref, computed, onMounted, nextTick} from 'vue'
|
|
import {useStore} from 'vuex'
|
|
import {useRouter} from 'vue-router'
|
|
|
|
import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
|
|
import Rights from '@/models/constants/rights.json'
|
|
|
|
import Update from '@/components/home/update.vue'
|
|
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
|
import Dropdown from '@/components/misc/dropdown.vue'
|
|
import Notifications from '@/components/notifications/notifications.vue'
|
|
import Logo from '@/components/home/Logo.vue'
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
|
import MenuButton from '@/components/home/MenuButton.vue'
|
|
|
|
const store = useStore()
|
|
|
|
const userInfo = computed(() => store.state.auth.info)
|
|
const userAvatar = computed(() => store.state.auth.avatarUrl)
|
|
const currentList = computed(() => store.state.currentList)
|
|
const background = computed(() => store.state.background)
|
|
const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
|
|
const privacyPolicyUrl = computed(() => store.state.config.legal.privacyPolicyUrl)
|
|
const canWriteCurrentList = computed(() => store.state.currentList.maxRight > Rights.READ)
|
|
|
|
const usernameDropdown = ref()
|
|
const listTitle = ref()
|
|
onMounted(async () => {
|
|
await nextTick()
|
|
if (typeof usernameDropdown.value === 'undefined' || typeof listTitle.value === 'undefined') {
|
|
return
|
|
}
|
|
|
|
const usernameWidth = usernameDropdown.value.$el.clientWidth
|
|
listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
|
|
})
|
|
|
|
const router = useRouter()
|
|
function logout() {
|
|
store.dispatch('auth/logout')
|
|
router.push({name: 'user.login'})
|
|
}
|
|
|
|
function openQuickActions() {
|
|
store.commit(QUICK_ACTIONS_ACTIVE, true)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$vikunja-nav-logo-full-width: 164px;
|
|
$user-dropdown-width-mobile: 5rem;
|
|
|
|
$hamburger-menu-icon-spacing: 1rem;
|
|
$hamburger-menu-icon-width: 28px;
|
|
|
|
.navbar {
|
|
z-index: 4 !important;
|
|
}
|
|
|
|
.logo-link {
|
|
display: none;
|
|
padding: 0.5rem 0.75rem;
|
|
|
|
@media screen and (min-width: $tablet) {
|
|
align-self: stretch;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 2rem;
|
|
margin-right: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.menu-button {
|
|
align-self: stretch;
|
|
margin-right: auto;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
margin-left: $hamburger-menu-icon-spacing;
|
|
}
|
|
}
|
|
|
|
.navbar.main-theme {
|
|
background: var(--site-background);
|
|
z-index: 5 !important;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
@media screen and (max-width: $desktop) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
font-size: 1.75rem;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navbar-end {
|
|
margin-left: 0;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
.user {
|
|
width: $user-dropdown-width-mobile;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
:deep(.dropdown-trigger) {
|
|
line-height: 1;
|
|
|
|
.button {
|
|
padding: 0 0.25rem;
|
|
height: 1rem;
|
|
|
|
.icon {
|
|
width: .5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.username {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar {
|
|
// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
|
|
:deep() {
|
|
.trigger-button {
|
|
cursor: pointer;
|
|
color: var(--grey-400);
|
|
padding: .5rem;
|
|
font-size: 1.25rem;
|
|
position: relative;
|
|
}
|
|
|
|
> * > .trigger-button {
|
|
width: $navbar-icon-width;
|
|
}
|
|
}
|
|
|
|
.user {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-family: $vikunja-font;
|
|
}
|
|
|
|
.avatar {
|
|
border-radius: 100%;
|
|
vertical-align: middle;
|
|
height: 40px;
|
|
margin-right: var(--button-padding-horizontal);
|
|
}
|
|
|
|
:deep(.dropdown-trigger .button) {
|
|
background: none;
|
|
|
|
&:focus:not(:active), &:active {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
$edit-icon-width: 1rem;
|
|
|
|
@media screen and (min-width: $tablet) {
|
|
// We need a fixed width for overflowing ellipsis to work
|
|
--nav-username-width: 0;
|
|
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
|
|
}
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
// We need a fixed width for overflowing ellipsis to work
|
|
width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
:deep(.dropdown-trigger) {
|
|
color: var(--grey-400);
|
|
margin-left: 1rem;
|
|
height: 1rem;
|
|
width: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style> |