Skip to content

Commit

Permalink
fix: show scrollbar when list table overflows in settings menu (#1266)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NyaaaDoge
NyaaaDoge authored Oct 31, 2024
1 parent 4bdf28e commit 47b200f
Showing 1 changed file with 123 additions and 121 deletions.
244 changes: 123 additions & 121 deletions apps/renderer/src/modules/settings/tabs/lists/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,128 +101,130 @@ export const SettingLists = () => {
<div className="flex flex-1 flex-col">
<ScrollArea.ScrollArea viewportClassName="max-h-[380px]">
{listList.data?.length ? (
<Table className="mt-4">
<TableHeader className="border-b">
<TableRow className="[&_*]:!font-semibold">
<TableHead size="sm">{t.settings("lists.title")}</TableHead>
<TableHead size="sm">{t.settings("lists.view")}</TableHead>
<TableHead size="sm">{t.settings("lists.fee.label")}</TableHead>
<TableHead size="sm">{t.settings("lists.subscriptions")}</TableHead>
<TableHead size="sm">{t.settings("lists.earnings")}</TableHead>
<TableHead size="sm" className="center">
{t.common("words.actions")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody className="border-t-[12px] border-transparent [&_td]:!px-3">
{listList.data?.map((row) => (
<TableRow key={row.title} className="h-8">
<TableCell size="sm">
<a
target="_blank"
href={UrlBuilder.shareList(row.id)}
className="inline-flex items-center gap-2 font-semibold"
>
{row.image && (
<Avatar className="size-6">
<AvatarImage src={row.image} />
</Avatar>
)}
<span className="inline-block max-w-[200px] truncate">{row.title}</span>
</a>
</TableCell>
<TableCell size="sm">
<Tooltip>
<TooltipTrigger asChild>
<span
className={cn("inline-flex items-center", views[row.view].className)}
>
{views[row.view].icon}
</span>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t(views[row.view].name)}</TooltipContent>
</TooltipPortal>
</Tooltip>
</TableCell>
<TableCell size="sm">
<div className="flex items-center gap-1">
{row.fee}
<i className="i-mgc-power shrink-0 text-lg text-accent" />
</div>
</TableCell>
<TableCell size="sm">{row.subscriptionCount}</TableCell>
<TableCell size="sm">
<Balance>{BigInt(row.purchaseAmount || 0n)}</Balance>
</TableCell>
<TableCell size="sm" className="center">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
onClick={() => {
present({
title: t.settings("lists.feeds.manage"),
content: () => <ListFeedsModalContent id={row.id} />,
})
}}
>
<i className="i-mgc-inbox-cute-re" />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t.common("words.manage")}</TooltipContent>
</TooltipPortal>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
onClick={() => {
present({
title: t.settings("lists.edit.label"),
content: () => <ListCreationModalContent id={row.id} />,
})
}}
>
<i className="i-mgc-edit-cute-re" />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t.common("words.edit")}</TooltipContent>
</TooltipPortal>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<ActionButton
size="sm"
onClick={() =>
present({
title: t.settings("lists.delete.confirm"),
content: ({ dismiss }) => (
<ConfirmDestroyModalContent
listId={row.id}
onSuccess={() => {
listList.refetch()
dismiss()
}}
/>
),
})
}
>
<i className="i-mgc-delete-2-cute-re" />
</ActionButton>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t.common("words.delete")}</TooltipContent>
</TooltipPortal>
</Tooltip>
</TableCell>
<div className="overflow-auto">
<Table className="mt-4">
<TableHeader className="border-b">
<TableRow className="[&_*]:!font-semibold">
<TableHead size="sm">{t.settings("lists.title")}</TableHead>
<TableHead size="sm">{t.settings("lists.view")}</TableHead>
<TableHead size="sm">{t.settings("lists.fee.label")}</TableHead>
<TableHead size="sm">{t.settings("lists.subscriptions")}</TableHead>
<TableHead size="sm">{t.settings("lists.earnings")}</TableHead>
<TableHead size="sm" className="center">
{t.common("words.actions")}
</TableHead>
</TableRow>
))}
</TableBody>
</Table>
</TableHeader>
<TableBody className="border-t-[12px] border-transparent [&_td]:!px-3">
{listList.data?.map((row) => (
<TableRow key={row.title} className="h-8">
<TableCell size="sm">
<a
target="_blank"
href={UrlBuilder.shareList(row.id)}
className="inline-flex items-center gap-2 font-semibold"
>
{row.image && (
<Avatar className="size-6">
<AvatarImage src={row.image} />
</Avatar>
)}
<span className="inline-block max-w-[200px] truncate">{row.title}</span>
</a>
</TableCell>
<TableCell size="sm">
<Tooltip>
<TooltipTrigger asChild>
<span
className={cn("inline-flex items-center", views[row.view].className)}
>
{views[row.view].icon}
</span>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t(views[row.view].name)}</TooltipContent>
</TooltipPortal>
</Tooltip>
</TableCell>
<TableCell size="sm">
<div className="flex items-center gap-1">
{row.fee}
<i className="i-mgc-power shrink-0 text-lg text-accent" />
</div>
</TableCell>
<TableCell size="sm">{row.subscriptionCount}</TableCell>
<TableCell size="sm">
<Balance>{BigInt(row.purchaseAmount || 0n)}</Balance>
</TableCell>
<TableCell size="sm" className="center">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
onClick={() => {
present({
title: t.settings("lists.feeds.manage"),
content: () => <ListFeedsModalContent id={row.id} />,
})
}}
>
<i className="i-mgc-inbox-cute-re" />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t.common("words.manage")}</TooltipContent>
</TooltipPortal>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
onClick={() => {
present({
title: t.settings("lists.edit.label"),
content: () => <ListCreationModalContent id={row.id} />,
})
}}
>
<i className="i-mgc-edit-cute-re" />
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t.common("words.edit")}</TooltipContent>
</TooltipPortal>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<ActionButton
size="sm"
onClick={() =>
present({
title: t.settings("lists.delete.confirm"),
content: ({ dismiss }) => (
<ConfirmDestroyModalContent
listId={row.id}
onSuccess={() => {
listList.refetch()
dismiss()
}}
/>
),
})
}
>
<i className="i-mgc-delete-2-cute-re" />
</ActionButton>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>{t.common("words.delete")}</TooltipContent>
</TooltipPortal>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
) : listList.isLoading ? (
<LoadingCircle size="large" className="center absolute inset-0" />
) : (
Expand Down

0 comments on commit 47b200f

Please sign in to comment.