feat(ui): new user menu in sidebar
This commit is contained in:
ArneBo
upsiflu
parent
32cf6c2e3d
commit
7f293d4143
|
|
@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n'
|
|||
import { useStore } from '~/store'
|
||||
|
||||
import Input from '~/components/ui/Input.vue'
|
||||
import Pill from '~/components/ui/Pill.vue'
|
||||
import Link from '~/components/ui/Link.vue'
|
||||
import ActorAvatar from '~/components/common/ActorAvatar.vue'
|
||||
import UserMenu from './UserMenu.vue'
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
import { SUPPORTED_LOCALES, setI18nLanguage } from '~/init/locale'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useStore } from '~/store'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import useThemeList from '~/composables/useThemeList'
|
||||
import useTheme from '~/composables/useTheme'
|
||||
|
||||
import OptionsButton from '~/components/ui/button/Options.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
import Popover from '~/components/ui/Popover.vue'
|
||||
import PopoverCheckbox from '~/components/ui/popover/PopoverCheckbox.vue'
|
||||
import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
|
||||
import PopoverRadio from '~/components/ui/popover/PopoverRadio.vue'
|
||||
import PopoverRadioItem from '~/components/ui/popover/PopoverRadioItem.vue'
|
||||
import PopoverSubmenu from '~/components/ui/popover/PopoverSubmenu.vue'
|
||||
import Link from '~/components/ui/Link.vue'
|
||||
|
||||
interface Events {
|
||||
(e: 'show:shortcuts-modal'): void
|
||||
|
|
@ -30,6 +31,8 @@ const { t, locale } = useI18n()
|
|||
const themes = useThemeList()
|
||||
const { theme } = useTheme()
|
||||
|
||||
const openUserMenu = ref(false)
|
||||
|
||||
const labels = computed(() => ({
|
||||
profile: t('components.common.UserMenu.link.profile'),
|
||||
settings: t('components.common.UserMenu.link.settings'),
|
||||
|
|
@ -50,28 +53,48 @@ const labels = computed(() => ({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Popover>
|
||||
<template #default="{ toggleOpen }">
|
||||
<OptionsButton @click="toggleOpen">
|
||||
<img
|
||||
v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
|
||||
alt=""
|
||||
:src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
|
||||
>
|
||||
<ActorAvatar
|
||||
v-else-if="store.state.auth.authenticated"
|
||||
:actor="{preferred_username: store.state.auth.username, full_username: store.state.auth.username,}"
|
||||
/>
|
||||
<i
|
||||
v-else
|
||||
class="cog icon"
|
||||
/>
|
||||
</OptionsButton>
|
||||
</template>
|
||||
<Popover v-model:open="openUserMenu">
|
||||
<Button
|
||||
@click="openUserMenu = !openUserMenu"
|
||||
class="icon-only">
|
||||
<img
|
||||
v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
|
||||
alt=""
|
||||
:src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
|
||||
>
|
||||
<i v-else class="bi bi-gear-fill" />
|
||||
</Button>
|
||||
<template #items>
|
||||
<PopoverItem v-if="store.state.ui.notifications.inbox + additionalNotifications > 0">
|
||||
<Link :to="{name: 'notifications'}">
|
||||
<i class="bi bi-inbox-fill" />
|
||||
<div :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
|
||||
>
|
||||
{{ store.state.ui.notifications.inbox + additionalNotifications }}
|
||||
</div>
|
||||
{{ labels.notifications }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
<PopoverItem v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop">
|
||||
<Link
|
||||
:to="{name: 'profile.overview', params: { username: store.state.auth.username },}"
|
||||
icon="bi-person-fill"
|
||||
>
|
||||
{{ labels.profile }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
<PopoverItem v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop">
|
||||
<Link
|
||||
:to="{ path: '/settings' }"
|
||||
icon="bi-gear-fill"
|
||||
>
|
||||
{{ labels.settings }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
<hr v-if="store.state.auth.authenticated"/>
|
||||
<PopoverSubmenu>
|
||||
<i class="bi bi-music-note-list" />
|
||||
Change language
|
||||
<i class="bi bi-translate" />
|
||||
{{ labels.language }}
|
||||
<template #items>
|
||||
<PopoverItem v-for="(language, key) in SUPPORTED_LOCALES"
|
||||
:key="key"
|
||||
|
|
@ -80,76 +103,88 @@ const labels = computed(() => ({
|
|||
</PopoverItem>
|
||||
</template>
|
||||
</PopoverSubmenu>
|
||||
<hr />
|
||||
<PopoverItem>
|
||||
<i class="bi bi-heart" />
|
||||
Add to favorites
|
||||
</PopoverItem>
|
||||
<PopoverSubmenu>
|
||||
<i class="bi bi-collection" />
|
||||
Organize and share
|
||||
<i class="bi bi-palette-fill" />
|
||||
{{ labels.theme }}
|
||||
<template #items>
|
||||
<PopoverCheckbox v-model="bc">
|
||||
Bandcamp
|
||||
<template #after>
|
||||
<Popover>
|
||||
<template #default="{ toggleOpen }">
|
||||
<Pill
|
||||
@click.stop="toggleOpen"
|
||||
:blue="bcPrivacy === 'pod'"
|
||||
:red="bcPrivacy === 'public'"
|
||||
>
|
||||
{{ bcPrivacy }}
|
||||
</Pill>
|
||||
</template>
|
||||
<template #items>
|
||||
<PopoverRadio v-model="bcPrivacy" :choices="privacyChoices" />
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
</PopoverCheckbox>
|
||||
<PopoverCheckbox v-model="cc">
|
||||
Creative Commons
|
||||
<template #after>
|
||||
<Popover v-model:open="isOpen">
|
||||
<template #default="{ toggleOpen }">
|
||||
<Pill
|
||||
@click="toggleOpen"
|
||||
:blue="ccPrivacy === 'pod'"
|
||||
:red="ccPrivacy === 'public'"
|
||||
>
|
||||
{{ ccPrivacy }}
|
||||
</Pill>
|
||||
</template>
|
||||
<template #items>
|
||||
<PopoverRadio v-model="ccPrivacy" :choices="privacyChoices" />
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
</PopoverCheckbox>
|
||||
<hr />
|
||||
<PopoverItem>
|
||||
<i class="bi bi-plus-lg" />
|
||||
New library
|
||||
<PopoverItem v-for="th in themes"
|
||||
:key="th.key"
|
||||
@click="theme= th.key" >
|
||||
<i :class="th.icon" />
|
||||
{{ th.name }}
|
||||
</PopoverItem>
|
||||
</template>
|
||||
</PopoverSubmenu>
|
||||
<hr />
|
||||
<PopoverSubmenu>
|
||||
<i class="bi bi-question-square-fill" />
|
||||
{{ labels.support }}
|
||||
<template #items>
|
||||
<PopoverItem>
|
||||
<Link
|
||||
to="https://forum.funkwhale.audio"
|
||||
>
|
||||
<i class="bi-gear-fill" />
|
||||
{{ labels.forum }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
<PopoverItem>
|
||||
<Link
|
||||
to="https://matrix.to/#/#funkwhale-support:matrix.org"
|
||||
>
|
||||
<i class="bi bi-chat-left-fill" />
|
||||
{{ labels.chat }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
<PopoverItem>
|
||||
<Link
|
||||
to="https://dev.funkwhale.audio/funkwhale/funkwhale/issues"
|
||||
>
|
||||
<i class="bi-gitlab" />
|
||||
{{ labels.git }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
<hr />
|
||||
<PopoverCheckbox v-model="share">
|
||||
Share by link
|
||||
<template #after>
|
||||
<Button @click.stop color="secondary" round icon="bi-link" />
|
||||
<Button @click.stop color="secondary" round icon="bi-code" />
|
||||
</template>
|
||||
</PopoverCheckbox>
|
||||
</template>
|
||||
</PopoverSubmenu>
|
||||
<PopoverItem>
|
||||
<i class="bi bi-cloud-download" />
|
||||
Download
|
||||
<Link
|
||||
to="https://docs.funkwhale.audio"
|
||||
class="item"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="bi bi-book" />
|
||||
{{ labels.docs }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
<hr />
|
||||
<PopoverItem>
|
||||
<i class="bi bi-exclamation" />
|
||||
Report
|
||||
<PopoverItem
|
||||
@click.prevent="emit('show:shortcuts-modal')"
|
||||
>
|
||||
<i class="bi bi-keyboard" />
|
||||
{{ labels.shortcuts }}
|
||||
</PopoverItem>
|
||||
<hr v-if="store.state.auth.authenticated"/>
|
||||
<PopoverItem v-if="store.state.auth.authenticated && route.path != '/logout'"
|
||||
>
|
||||
<Link :to="{ name: 'logout' }">
|
||||
<i class="bi bi-box-arrow-right" />
|
||||
{{ labels.logout }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
<PopoverItem v-if="!store.state.auth.authenticated">
|
||||
<Link
|
||||
:to="{ name: 'login' }"
|
||||
>
|
||||
<i class="bi-box-arrow-in-right" />
|
||||
{{ labels.login }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
<PopoverItem v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value">
|
||||
<Link
|
||||
:to="{ name: 'signup' }"
|
||||
>
|
||||
<i class="bi bi-person-square" />
|
||||
{{ labels.signup }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
</template>
|
||||
</Popover>
|
||||
|
|
|
|||
Loading…
Reference in New Issue