2020-11-01 17:36:00 +00:00
|
|
|
<template>
|
2022-01-16 17:05:12 +00:00
|
|
|
<header
|
2022-06-08 20:21:02 +00:00
|
|
|
:class="{'has-background': background, 'menu-active': menuActive}"
|
2020-11-01 17:36:00 +00:00
|
|
|
aria-label="main navigation"
|
2023-01-24 20:55:09 +00:00
|
|
|
class="navbar d-print-none"
|
2020-11-01 17:36:00 +00:00
|
|
|
>
|
2021-11-22 21:12:54 +00:00
|
|
|
<router-link :to="{name: 'home'}" class="logo-link">
|
2021-11-13 20:28:29 +00:00
|
|
|
<Logo width="164" height="48"/>
|
2021-11-13 14:16:14 +00:00
|
|
|
</router-link>
|
2023-01-24 20:55:09 +00:00
|
|
|
|
2021-11-13 20:28:29 +00:00
|
|
|
<MenuButton class="menu-button"/>
|
2023-01-24 20:55:09 +00:00
|
|
|
|
|
|
|
<div
|
|
|
|
v-if="currentList.id"
|
|
|
|
class="list-title-wrapper"
|
|
|
|
>
|
|
|
|
<h1 class="list-title">{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}</h1>
|
|
|
|
|
|
|
|
<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}}" class="list-title-button">
|
|
|
|
<icon icon="circle-info"/>
|
|
|
|
</BaseButton>
|
|
|
|
|
|
|
|
<list-settings-dropdown
|
|
|
|
v-if="canWriteCurrentList && currentList.id !== -1"
|
|
|
|
class="list-title-dropdown"
|
|
|
|
:list="currentList"
|
|
|
|
>
|
|
|
|
<template #trigger="{toggleOpen}">
|
|
|
|
<BaseButton class="list-title-button" @click="toggleOpen">
|
|
|
|
<icon icon="ellipsis-h" class="icon"/>
|
|
|
|
</BaseButton>
|
|
|
|
</template>
|
|
|
|
</list-settings-dropdown>
|
2020-11-01 17:36:00 +00:00
|
|
|
</div>
|
2021-01-30 16:17:04 +00:00
|
|
|
|
2020-11-01 17:36:00 +00:00
|
|
|
<div class="navbar-end">
|
2022-05-10 23:14:38 +00:00
|
|
|
<BaseButton
|
2021-05-30 18:30:08 +00:00
|
|
|
@click="openQuickActions"
|
2023-01-24 20:55:09 +00:00
|
|
|
class="trigger-button"
|
2021-11-13 20:28:29 +00:00
|
|
|
v-shortcut="'Control+k'"
|
|
|
|
:title="$t('keyboardShortcuts.quickSearch')"
|
2021-05-30 18:30:08 +00:00
|
|
|
>
|
|
|
|
<icon icon="search"/>
|
2022-05-10 23:14:38 +00:00
|
|
|
</BaseButton>
|
2023-01-24 20:55:09 +00:00
|
|
|
<Notifications />
|
|
|
|
<dropdown>
|
|
|
|
<template #trigger="{toggleOpen, open}">
|
|
|
|
<BaseButton
|
|
|
|
class="username-dropdown-trigger"
|
|
|
|
@click="toggleOpen"
|
|
|
|
variant="secondary"
|
|
|
|
:shadow="false"
|
2022-02-13 21:57:33 +00:00
|
|
|
>
|
2023-01-24 20:55:09 +00:00
|
|
|
<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40"/>
|
|
|
|
<span class="username">{{ authStore.userDisplayName }}</span>
|
|
|
|
<span class="icon is-small" :style="{
|
|
|
|
transform: open ? 'rotate(180deg)' : 'rotate(0)',
|
|
|
|
}">
|
|
|
|
<icon icon="chevron-down"/>
|
|
|
|
</span>
|
|
|
|
</BaseButton>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<dropdown-item :to="{name: 'user.settings'}">
|
|
|
|
{{ $t('user.settings.title') }}
|
|
|
|
</dropdown-item>
|
|
|
|
<dropdown-item v-if="imprintUrl" :href="imprintUrl">
|
|
|
|
{{ $t('navigation.imprint') }}
|
|
|
|
</dropdown-item>
|
|
|
|
<dropdown-item v-if="privacyPolicyUrl" :href="privacyPolicyUrl">
|
|
|
|
{{ $t('navigation.privacy') }}
|
|
|
|
</dropdown-item>
|
|
|
|
<dropdown-item @click="baseStore.setKeyboardShortcutsActive(true)">
|
|
|
|
{{ $t('keyboardShortcuts.title') }}
|
|
|
|
</dropdown-item>
|
|
|
|
<dropdown-item :to="{name: 'about'}">
|
|
|
|
{{ $t('about.title') }}
|
|
|
|
</dropdown-item>
|
|
|
|
<dropdown-item @click="authStore.logout()">
|
|
|
|
{{ $t('user.auth.logout') }}
|
|
|
|
</dropdown-item>
|
|
|
|
</dropdown>
|
2020-11-01 17:36:00 +00:00
|
|
|
</div>
|
2022-01-16 17:05:12 +00:00
|
|
|
</header>
|
2020-11-01 17:36:00 +00:00
|
|
|
</template>
|
|
|
|
|
2022-05-08 20:06:48 +00:00
|
|
|
<script setup lang="ts">
|
2023-01-24 20:55:09 +00:00
|
|
|
import {computed} from 'vue'
|
2022-02-13 21:57:33 +00:00
|
|
|
|
2022-08-13 13:26:57 +00:00
|
|
|
import {RIGHTS as Rights} from '@/constants/rights'
|
2022-02-13 21:57:33 +00:00
|
|
|
|
2021-07-25 13:27:15 +00:00
|
|
|
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
|
|
|
import Dropdown from '@/components/misc/dropdown.vue'
|
2022-07-21 12:08:14 +00:00
|
|
|
import DropdownItem from '@/components/misc/dropdown-item.vue'
|
2021-07-25 13:27:15 +00:00
|
|
|
import Notifications from '@/components/notifications/notifications.vue'
|
2021-11-13 14:16:14 +00:00
|
|
|
import Logo from '@/components/home/Logo.vue'
|
2022-02-13 21:57:33 +00:00
|
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
2021-11-13 14:16:14 +00:00
|
|
|
import MenuButton from '@/components/home/MenuButton.vue'
|
2021-10-03 18:48:02 +00:00
|
|
|
|
2022-06-23 01:23:39 +00:00
|
|
|
import {getListTitle} from '@/helpers/getListTitle'
|
2022-09-24 13:20:40 +00:00
|
|
|
|
|
|
|
import {useBaseStore} from '@/stores/base'
|
2022-09-21 00:21:22 +00:00
|
|
|
import {useConfigStore} from '@/stores/config'
|
2022-09-21 01:37:39 +00:00
|
|
|
import {useAuthStore} from '@/stores/auth'
|
2022-06-23 01:23:39 +00:00
|
|
|
|
2022-09-24 13:20:40 +00:00
|
|
|
const baseStore = useBaseStore()
|
|
|
|
const currentList = computed(() => baseStore.currentList)
|
|
|
|
const background = computed(() => baseStore.background)
|
|
|
|
const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Rights.READ)
|
|
|
|
const menuActive = computed(() => baseStore.menuActive)
|
2022-02-13 21:57:33 +00:00
|
|
|
|
2022-09-24 13:20:40 +00:00
|
|
|
const authStore = useAuthStore()
|
|
|
|
|
|
|
|
const configStore = useConfigStore()
|
2022-09-21 00:21:22 +00:00
|
|
|
const imprintUrl = computed(() => configStore.legal.imprintUrl)
|
|
|
|
const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
|
2022-02-13 21:57:33 +00:00
|
|
|
|
|
|
|
function openQuickActions() {
|
2022-09-24 13:20:40 +00:00
|
|
|
baseStore.setQuickActionsActive(true)
|
2020-11-01 17:36:00 +00:00
|
|
|
}
|
|
|
|
</script>
|
2021-10-18 12:21:02 +00:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2021-11-22 21:12:54 +00:00
|
|
|
$user-dropdown-width-mobile: 5rem;
|
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
.navbar {
|
|
|
|
--navbar-button-min-width: 40px;
|
|
|
|
--navbar-gap-width: 1rem;
|
|
|
|
--navbar-icon-size: 1.25rem;
|
2021-11-13 14:16:14 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
2021-10-18 12:33:23 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
display: flex;
|
2021-10-18 12:33:23 +00:00
|
|
|
justify-content: space-between;
|
2023-01-24 20:55:09 +00:00
|
|
|
gap: var(--navbar-gap-width);
|
2021-10-18 12:33:23 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
background: var(--site-background);
|
2021-10-18 12:33:23 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
padding-right: .5rem;
|
2021-10-18 12:33:23 +00:00
|
|
|
}
|
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
@media screen and (min-width: $tablet) {
|
|
|
|
padding-left: 2rem;
|
|
|
|
padding-right: 1rem;
|
|
|
|
align-items: stretch;
|
2021-10-18 12:33:23 +00:00
|
|
|
}
|
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
&.menu-active {
|
|
|
|
@media screen and (max-width: $tablet) {
|
2022-06-08 20:21:02 +00:00
|
|
|
z-index: 0;
|
|
|
|
}
|
2021-10-18 12:33:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
|
2021-10-20 12:33:36 +00:00
|
|
|
:deep() {
|
2021-10-18 12:33:23 +00:00
|
|
|
.trigger-button {
|
2021-11-22 21:12:54 +00:00
|
|
|
color: var(--grey-400);
|
2023-01-24 20:55:09 +00:00
|
|
|
font-size: var(--navbar-icon-size);
|
2021-10-18 12:33:23 +00:00
|
|
|
}
|
|
|
|
}
|
2023-01-24 20:55:09 +00:00
|
|
|
}
|
2021-10-18 12:33:23 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
.logo-link {
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
@media screen and (min-width: $tablet) {
|
|
|
|
align-self: stretch;
|
2021-10-18 12:33:23 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2023-01-24 20:55:09 +00:00
|
|
|
margin-right: .5rem;
|
|
|
|
}
|
|
|
|
}
|
2021-10-18 12:33:23 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
.menu-button {
|
|
|
|
margin-right: auto;
|
|
|
|
align-self: stretch;
|
|
|
|
flex: 0 0 auto;
|
2021-10-18 12:33:23 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
margin-left: 1rem;
|
2021-10-18 12:33:23 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
.list-title-wrapper {
|
|
|
|
margin-inline: auto;
|
2021-11-13 20:28:29 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
// this makes the truncated text of the list title work
|
|
|
|
// inside the flexbox parent
|
|
|
|
min-width: 0;
|
2021-11-13 20:28:29 +00:00
|
|
|
|
|
|
|
@media screen and (min-width: $tablet) {
|
2023-01-24 20:55:09 +00:00
|
|
|
padding-inline: var(--navbar-gap-width);
|
2021-11-13 20:28:29 +00:00
|
|
|
}
|
2023-01-24 20:55:09 +00:00
|
|
|
}
|
2021-11-13 20:28:29 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
.list-title {
|
|
|
|
font-size: 1rem;
|
|
|
|
// We need the following for overflowing ellipsis to work
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
2021-11-13 20:28:29 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
@media screen and (min-width: $tablet) {
|
|
|
|
font-size: 1.75rem;
|
2021-11-13 20:28:29 +00:00
|
|
|
}
|
2023-01-24 20:55:09 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.list-title-dropdown {
|
|
|
|
align-self: stretch;
|
2021-11-13 20:28:29 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
.list-title-button {
|
|
|
|
flex-grow: 1;
|
2021-11-13 20:28:29 +00:00
|
|
|
}
|
2021-10-18 12:21:02 +00:00
|
|
|
}
|
2022-09-15 12:36:43 +00:00
|
|
|
|
2023-01-24 20:55:09 +00:00
|
|
|
.list-title-button {
|
|
|
|
align-self: stretch;
|
|
|
|
min-width: var(--navbar-button-min-width);
|
|
|
|
display: flex;
|
|
|
|
place-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
font-size: var(--navbar-icon-size);
|
2022-09-15 12:36:43 +00:00
|
|
|
color: var(--grey-400);
|
2023-01-24 20:55:09 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.navbar-end {
|
|
|
|
margin-left: auto;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
display: flex;
|
|
|
|
align-items: stretch;
|
|
|
|
|
|
|
|
> * {
|
|
|
|
min-width: var(--navbar-button-min-width);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.username-dropdown-trigger {
|
|
|
|
padding-left: 1rem;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
text-transform: uppercase;
|
|
|
|
font-size: .85rem;
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
|
|
|
|
.username {
|
|
|
|
font-family: $vikunja-font;
|
|
|
|
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
border-radius: 100%;
|
|
|
|
vertical-align: middle;
|
|
|
|
height: 40px;
|
|
|
|
margin-right: .5rem;
|
2022-09-15 12:36:43 +00:00
|
|
|
}
|
2021-10-18 12:21:02 +00:00
|
|
|
</style>
|