mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-02 06:30:02 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
previously, icons were placed next to bell icon because the status indicators
were not accessible to color-blind users. this commit replaces circular
status indicators with the icons.
This commit is contained in:
Pujit Mehrotra
2024-12-10 13:46:32 -05:00
committed by Pujit Mehrotra
parent 23b1f1ac73
commit 99704a9dbb
1 changed files with 11 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/components/Notifications/Indicator.vue
View File

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