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

fix(web): replace manual height hack in notifications infinite scroll

Browse Source
This commit is contained in:
Pujit Mehrotra
2024-10-25 09:49:35 -04:00
parent 7e4022518d
commit 28f4952599
2 changed files with 48 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/Notifications/List.vue
View File

@@ -62,7 +62,7 @@ async function onLoadMore() {
<div
v-if="notifications?.length > 0"
v-infinite-scroll="onLoadMore"
class="divide-y divide-gray-200 overflow-y-scroll px-6 h-full"
class="divide-y divide-gray-200 overflow-y-auto pl-7 pr-4 h-full"
>
<NotificationsItem
v-for="notification in notifications"

90
web/components/Notifications/Sidebar.vue
View File

@@ -25,54 +25,58 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
<BellIcon class="w-6 h-6" />
</SheetTrigger>
<SheetContent
:to="teleportTarget"
class="w-full sm:max-w-[540px] space-y-3 h-screen"
>
<SheetHeader>
<SheetTitle>Notifications</SheetTitle>
</SheetHeader>
<SheetContent :to="teleportTarget" class="w-full sm:max-w-[540px] h-screen px-0">
<div class="flex flex-col h-full gap-3">
<SheetHeader class="ml-1 px-6">
<SheetTitle>Notifications</SheetTitle>
</SheetHeader>
<Tabs default-value="unread" class="h-full">
<div class="flex flex-row justify-between items-center flex-wrap gap-2">
<TabsList class="ml-[1px]">
<TabsTrigger value="unread"> Unread </TabsTrigger>
<TabsTrigger value="archived"> Archived </TabsTrigger>
</TabsList>
<Button
:disabled="loadingArchiveAll"
variant="link"
size="sm"
class="text-muted-foreground text-base p-0"
@click="archiveAll"
<Tabs default-value="unread" class="flex-1 flex flex-col min-h-0">
<div
class="flex flex-row justify-between items-center flex-wrap gap-2 px-6"
>
{{ `Archive All` }}
</Button>
<TabsList class="ml-[1px]">
<TabsTrigger value="unread"> Unread </TabsTrigger>
<TabsTrigger value="archived"> Archived </TabsTrigger>
</TabsList>
<Select>
<SelectTrigger class="bg-secondary border-0 h-auto">
<SelectValue class="text-muted-foreground" placeholder="Filter" />
</SelectTrigger>
<SelectContent :to="teleportTarget">
<SelectGroup>
<SelectLabel>Notification Types</SelectLabel>
<SelectItem value="alert">Alert</SelectItem>
<SelectItem value="info">Info</SelectItem>
<SelectItem value="warning">Warning</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<Button
:disabled="loadingArchiveAll"
variant="link"
size="sm"
class="text-muted-foreground text-base p-0"
@click="archiveAll"
>
{{ `Archive All` }}
</Button>
<TabsContent value="unread" class="h-[92%]">
<NotificationsList :type="NotificationType.Unread" />
</TabsContent>
<Select>
<SelectTrigger class="bg-secondary border-0 h-auto">
<SelectValue
class="text-muted-foreground"
placeholder="Filter"
/>
</SelectTrigger>
<SelectContent :to="teleportTarget">
<SelectGroup>
<SelectLabel>Notification Types</SelectLabel>
<SelectItem value="alert">Alert</SelectItem>
<SelectItem value="info">Info</SelectItem>
<SelectItem value="warning">Warning</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<TabsContent value="archived" class="h-[92%]">
<NotificationsList :type="NotificationType.Archive" />
</TabsContent>
</Tabs>
<TabsContent value="unread" class="flex-1 min-h-0 mt-3">
<NotificationsList :type="NotificationType.Unread" />
</TabsContent>
<TabsContent value="archived" class="flex-1 min-h-0 mt-3">
<NotificationsList :type="NotificationType.Archive" />
</TabsContent>
</Tabs>
</div>
</SheetContent>
</Sheet>
</template>