kolaente
93c155dd2f
All checks were successful
continuous-integration/drone/push Build is passing
Resolves #3743
244 lines
6.0 KiB
Vue
244 lines
6.0 KiB
Vue
<template>
|
|
<header :class="{ 'has-background': background, 'menu-active': menuActive }" aria-label="main navigation"
|
|
class="navbar d-print-none">
|
|
<router-link :to="{ name: 'home' }" class="logo-link">
|
|
<Logo width="164" height="48" />
|
|
</router-link>
|
|
|
|
<MenuButton class="menu-button" />
|
|
|
|
<div v-if="currentProject?.id" class="project-title-wrapper">
|
|
<h1 class="project-title">
|
|
{{ currentProject.title === '' ? $t('misc.loading') : getProjectTitle(currentProject) }}
|
|
</h1>
|
|
|
|
<BaseButton :to="{ name: 'project.info', params: { projectId: currentProject.id } }" class="project-title-button">
|
|
<icon icon="circle-info" />
|
|
</BaseButton>
|
|
|
|
<project-settings-dropdown v-if="canWriteCurrentProject && currentProject.id !== -1"
|
|
class="project-title-dropdown" :project="currentProject">
|
|
<template #trigger="{ toggleOpen }">
|
|
<BaseButton class="project-title-button" @click="toggleOpen">
|
|
<icon icon="ellipsis-h" class="icon" />
|
|
</BaseButton>
|
|
</template>
|
|
</project-settings-dropdown>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<OpenQuickActions/>
|
|
<Notifications />
|
|
<dropdown>
|
|
<template #trigger="{ toggleOpen, open }">
|
|
<BaseButton class="username-dropdown-trigger" @click="toggleOpen" variant="secondary" :shadow="false">
|
|
<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>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { RIGHTS as Rights } from '@/constants/rights'
|
|
|
|
import ProjectSettingsDropdown from '@/components/project/project-settings-dropdown.vue'
|
|
import Dropdown from '@/components/misc/dropdown.vue'
|
|
import DropdownItem from '@/components/misc/dropdown-item.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'
|
|
import OpenQuickActions from '@/components/misc/OpenQuickActions.vue'
|
|
|
|
import { getProjectTitle } from '@/helpers/getProjectTitle'
|
|
|
|
import { useBaseStore } from '@/stores/base'
|
|
import { useConfigStore } from '@/stores/config'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const baseStore = useBaseStore()
|
|
const currentProject = computed(() => baseStore.currentProject)
|
|
const background = computed(() => baseStore.background)
|
|
const canWriteCurrentProject = computed(() => baseStore.currentProject?.maxRight > Rights.READ)
|
|
const menuActive = computed(() => baseStore.menuActive)
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
const configStore = useConfigStore()
|
|
const imprintUrl = computed(() => configStore.legal.imprintUrl)
|
|
const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$user-dropdown-width-mobile: 5rem;
|
|
|
|
.navbar {
|
|
--navbar-button-min-width: 40px;
|
|
--navbar-gap-width: 1rem;
|
|
--navbar-icon-size: 1.25rem;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: var(--navbar-gap-width);
|
|
|
|
background: var(--site-background);
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
@media screen and (min-width: $tablet) {
|
|
padding-left: 2rem;
|
|
padding-right: 1rem;
|
|
align-items: stretch;
|
|
}
|
|
|
|
&.menu-active {
|
|
@media screen and (max-width: $tablet) {
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
|
|
:deep() {
|
|
.trigger-button {
|
|
color: var(--grey-400);
|
|
font-size: var(--navbar-icon-size);
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo-link {
|
|
display: none;
|
|
|
|
@media screen and (min-width: $tablet) {
|
|
align-self: stretch;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: .5rem;
|
|
}
|
|
}
|
|
|
|
.menu-button {
|
|
margin-right: auto;
|
|
align-self: stretch;
|
|
flex: 0 0 auto;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
.project-title-wrapper {
|
|
margin-inline: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
// this makes the truncated text of the project title work
|
|
// inside the flexbox parent
|
|
min-width: 0;
|
|
|
|
@media screen and (min-width: $tablet) {
|
|
padding-inline: var(--navbar-gap-width);
|
|
}
|
|
}
|
|
|
|
.project-title {
|
|
font-size: 1rem;
|
|
// We need the following for overflowing ellipsis to work
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
@media screen and (min-width: $tablet) {
|
|
font-size: 1.75rem;
|
|
}
|
|
}
|
|
|
|
.project-title-dropdown {
|
|
align-self: stretch;
|
|
|
|
.project-title-button {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.project-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);
|
|
color: var(--grey-400);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style> |