Skip to content

feat(web): move notification indicator icons to top-right of bell icon #977

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pujitm merged 2 commits into from
Dec 10, 2024
Merged

feat(web): move notification indicator icons to top-right of bell icon #977

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27b2e5a
feat(web): move notification indicator icons to top-right of bell icon
pujitm Dec 10, 2024
43fedd6
feat(web): remove notification indicator pulse
pujitm Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 11 additions & 39 deletions web/components/Notifications/Indicator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import { BellIcon, ExclamationTriangleIcon, ShieldExclamationIcon } from '@heroicons/vue/24/solid';
import { cn } from '~/components/shadcn/utils';
import { Importance, type OverviewQuery } from '~/composables/gql/graphql';
import { onWatcherCleanup } from 'vue';

const props = defineProps<{ overview?: OverviewQuery['notifications']['overview'] }>();

Expand Down Expand Up @@ -37,46 +36,19 @@ const icon = computed<{ component: Component; color: string } | null>(() => {
}
return null;
});

/** whether new notifications ocurred */
const hasNewNotifications = ref(false);
// watch for new notifications, set a temporary indicator when they're reveived
watch(
() => props.overview?.unread,
(newVal, oldVal) => {
if (!newVal || !oldVal) {
return;
}
hasNewNotifications.value = newVal.total > oldVal.total;
// lifetime of 'new notification' state
const msToLive = 30_000;
const timeout = setTimeout(() => {
hasNewNotifications.value = false;
}, msToLive);
onWatcherCleanup(() => clearTimeout(timeout));
}
);
</script>

<template>
<div class="flex items-end gap-1">
<div class="relative">
<BellIcon class="w-6 h-6" />
<div
v-if="indicatorLevel"
:class="
cn('absolute top-0 right-0 size-2.5 rounded-full border border-neutral-800', {
'bg-unraid-red': indicatorLevel === Importance.Alert,
'bg-yellow-accent': indicatorLevel === Importance.Warning,
'bg-unraid-green': indicatorLevel === 'UNREAD',
})
"
/>
<div
v-if="hasNewNotifications || indicatorLevel === Importance.Alert"
class="absolute top-0 right-0 size-2.5 rounded-full bg-unraid-red animate-ping"
/>
</div>
<component :is="icon.component" v-if="icon" :class="cn('size-6', icon.color)" />
<div class="relative">
<BellIcon class="w-6 h-6" />
<div
v-if="indicatorLevel === 'UNREAD'"
class="absolute top-0 right-0 size-2.5 rounded-full border border-neutral-800 bg-unraid-green"
/>
<component
:is="icon.component"
v-else-if="icon && indicatorLevel"
:class="cn('absolute -top-1 -right-1 size-4 rounded-full', icon.color)"
/>
</div>
</template>
Loading