MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(front): Notifications

This commit is contained in:
ArneBo 2025-03-21 10:29:09 +01:00
parent 89d9aedd9e
commit e31c6c0e74
2 changed files with 172 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
front/src/ui/components/UserMenu.vue
View File

@ -13,7 +13,8 @@ import Button from '~/components/ui/Button.vue'
import Popover from '~/components/ui/Popover.vue' import Popover from '~/components/ui/Popover.vue'
import PopoverItem from '~/components/ui/popover/PopoverItem.vue' import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
import PopoverSubmenu from '~/components/ui/popover/PopoverSubmenu.vue' import PopoverSubmenu from '~/components/ui/popover/PopoverSubmenu.vue'
import Link from '~/components/ui/Link.vue' import Spacer from '~/components/ui/Spacer.vue'
import Pill from '~/components/ui/Pill.vue'
const route = useRoute() const route = useRoute()
const store = useStore() const store = useStore()
@ -75,13 +76,6 @@ const labels = computed(() => ({
/> />
</Button> </Button>
<template #items> <template #items>
<PopoverItem v-if="store.state.ui.notifications.inbox /* TODO: Check: + additionalNotifications */ > 0">
<Link :to="{name: 'notifications'}">
<i class="bi bi-inbox-fill" />
{{ store.state.ui.notifications.inbox /* TODO: Check: + additionalNotifications */ }}
{{ labels.notifications }}
</Link>
</PopoverItem>
<PopoverItem <PopoverItem
v-if="store.state.auth.authenticated" v-if="store.state.auth.authenticated"
:to="{name: 'profile.overview', params: { username: store.state.auth.username },}" :to="{name: 'profile.overview', params: { username: store.state.auth.username },}"
@ -89,6 +83,26 @@ const labels = computed(() => ({
<i class="bi bi-person-fill" /> <i class="bi bi-person-fill" />
{{ labels.profile }} {{ labels.profile }}
</PopoverItem> </PopoverItem>
<PopoverItem
v-if="store.state.auth.authenticated"
:to="{name: 'notifications'}"
>
<i class="bi bi-inbox-fill" />
{{ labels.notifications }}
<Spacer grow />
<div
v-if="store.state.ui.notifications.inbox > 0"
:title="labels.notifications"
style="
background: var(--fw-gray-400);
color: var(--fw-gray-800);
padding: 2px 7px;
border-radius: 10px;
"
>
{{ store.state.ui.notifications.inbox }}
</div>
</PopoverItem>
<PopoverItem <PopoverItem
v-if="store.state.auth.authenticated" v-if="store.state.auth.authenticated"
:to="{ path: '/settings' }" :to="{ path: '/settings' }"

104
front/src/views/Notifications.vue
View File

@ -14,6 +14,15 @@ import useWebSocketHandler from '~/composables/useWebSocketHandler'
import useErrorHandler from '~/composables/useErrorHandler' import useErrorHandler from '~/composables/useErrorHandler'
import useMarkdown from '~/composables/useMarkdown' import useMarkdown from '~/composables/useMarkdown'
import Layout from '~/components/ui/Layout.vue'
import Loader from '~/components/ui/Loader.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Header from '~/components/ui/Header.vue'
import Toggle from '~/components/ui/Toggle.vue'
import Button from '~/components/ui/Button.vue'
import Alert from '~/components/ui/Alert.vue'
import Table from '~/components/ui/Table.vue'
const store = useStore() const store = useStore()
const supportMessage = useMarkdown(() => store.state.instance.settings.instance.support_message.value) const supportMessage = useMarkdown(() => store.state.instance.settings.instance.support_message.value)
const { t } = useI18n() const { t } = useI18n()
@ -90,30 +99,26 @@ const markAllAsRead = async () => {
</script> </script>
<template> <template>
<main <Layout
main
stack
v-title="labels.title" v-title="labels.title"
class="main page-notifications" class="main page-notifications"
> >
<section class="ui vertical aligned stripe segment">
<div class="ui container">
<div <div
v-if="additionalNotifications" v-if="additionalNotifications"
class="ui container"
> >
<h1 class="ui header"> <Header :h1="t('views.Notifications.header.messages')" />
{{ t('views.Notifications.header.messages') }} <Layout flex>
</h1>
<div class="ui two column stackable grid">
<div <div
v-if="showInstanceSupportMessage" v-if="showInstanceSupportMessage"
class="column"
> >
<div class="ui attached info message"> <Alert blue>
<h4 class="header"> <h4 class="header">
{{ t('views.Notifications.header.instanceSupport') }} {{ t('views.Notifications.header.instanceSupport') }}
</h4> </h4>
<sanitized-html :html="supportMessage" /> <sanitized-html :html="supportMessage" />
</div> </Alert>
<div class="ui bottom attached segment"> <div class="ui bottom attached segment">
<form <form
class="ui inline form" class="ui inline form"
@ -141,21 +146,20 @@ const markAllAsRead = async () => {
{{ t('views.Notifications.option.delay.never') }} {{ t('views.Notifications.option.delay.never') }}
</option> </option>
</select> </select>
<button <Button
type="submit" type="submit"
class="ui right floated basic button" secondary
> >
{{ t('views.Notifications.button.submit') }} {{ t('views.Notifications.button.submit') }}
</button> </Button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<div <Alert
v-if="showFunkwhaleSupportMessage" v-if="showFunkwhaleSupportMessage"
class="column" blue
> >
<div class="ui info attached message">
<h4 class="header"> <h4 class="header">
{{ t('views.Notifications.header.funkwhaleSupport') }} {{ t('views.Notifications.header.funkwhaleSupport') }}
</h4> </h4>
@ -178,18 +182,19 @@ const markAllAsRead = async () => {
> >
{{ t('views.Notifications.link.help') }} {{ t('views.Notifications.link.help') }}
</a> </a>
</div> <template #actions>
<div class="ui bottom attached segment">
<form <form
class="ui inline form" class="ui inline form"
@submit.prevent="setDisplayDate('funkwhale_support_message_display_date', funkwhaleSupportMessageDelay)" @submit.prevent="setDisplayDate('funkwhale_support_message_display_date', funkwhaleSupportMessageDelay)"
> >
<div class="inline field"> <Layout flex>
<label for="funkwhale-reminder-delay"> <label for="funkwhale-reminder-delay" style="align-self: center;">
{{ t('views.Notifications.label.reminder') }} {{ t('views.Notifications.label.reminder') }}
</label> </label>
<select <select
id="funkwhale-reminder-delay" id="funkwhale-reminder-delay"
class="ui dropdown"
style="margin-top: 0px;"
v-model="funkwhaleSupportMessageDelay" v-model="funkwhaleSupportMessageDelay"
> >
<option :value="30"> <option :value="30">
@ -206,64 +211,47 @@ const markAllAsRead = async () => {
{{ t('views.Notifications.option.delay.never') }} {{ t('views.Notifications.option.delay.never') }}
</option> </option>
</select> </select>
<button <Button
type="submit" type="submit"
class="ui right floated basic button" primary
> >
{{ t('views.Notifications.button.submit') }} {{ t('views.Notifications.button.submit') }}
</button> </Button>
</div> </Layout>
</form> </form>
</template>
</Alert>
</Layout>
</div> </div>
</div> <Header :h1="t('views.Notifications.header.notifications')" />
</div> <Toggle
</div>
<h1 class="ui header">
{{ t('views.Notifications.header.notifications') }}
</h1>
<div class="ui toggle checkbox">
<input
id="show-read-notifications" id="show-read-notifications"
v-model="filters.is_read" v-model="filters.is_read"
type="checkbox" :label="t('views.Notifications.label.showRead')"
> />
<label for="show-read-notifications">{{ t('views.Notifications.label.showRead') }}</label> <Button
</div>
<button
v-if="filters.is_read === false && notifications.count > 0" v-if="filters.is_read === false && notifications.count > 0"
class="ui basic labeled icon right floated button" secondary
@click.prevent="markAllAsRead" @click.prevent="markAllAsRead"
icon="bi-check-all"
> >
<i class="ui check icon" />
{{ t('views.Notifications.button.read') }} {{ t('views.Notifications.button.read') }}
</button> </Button>
<div class="ui hidden divider" />
<div <Loader v-if="isLoading" />
v-if="isLoading"
:class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
>
<div class="ui text loader">
{{ t('views.Notifications.loading.notifications') }}
</div>
</div>
<table <Table
v-else-if="notifications.count > 0" v-else-if="notifications.count > 0"
class="ui table" :gridTemplateColumns="['auto', 'auto', 'auto', 'auto']"
> >
<tbody>
<notification-row <notification-row
v-for="item in notifications.results" v-for="item in notifications.results"
:key="item.id" :key="item.id"
:initial-item="item" :initial-item="item"
/> />
</tbody> </Table>
</table>
<p v-else-if="additionalNotifications === 0"> <p v-else-if="additionalNotifications === 0">
{{ t('views.Notifications.empty.notifications') }} {{ t('views.Notifications.empty.notifications') }}
</p> </p>
</div> </Layout>
</section>
</main>
</template> </template>