xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: some ui improve 

Signed-off-by: Innei <i@innei.in>
This commit is contained in:
Innei 2024-08-31 12:08:50 +08:00
parent 9c66b33887
commit d4581dbb19
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
3 changed files with 60 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/src/modules/settings/modules/fonts.tsx
View File

@ -82,7 +82,7 @@ export const ContentFontSelector = () => {
<SelectTrigger size="sm" className="w-48">
<SelectValue />
</SelectTrigger>
<SelectContent className="h-64">
<SelectContent position="item-aligned">
{isCustomFont && (
<SelectItem value={readerFontFamily}>{readerFontFamily}</SelectItem>
)}
@ -127,7 +127,7 @@ export const UIFontSelector = () => {
<SelectTrigger size="sm" className="w-48">
<SelectValue />
</SelectTrigger>
<SelectContent className="h-64">
<SelectContent position="item-aligned">
{isCustomFont && <SelectItem value={uiFont}>{uiFont}</SelectItem>}
<SelectItem value={DEFAULT_FONT}>{DEFAULT_FONT}</SelectItem>
{data.map(({ label, value }) => (

5
src/renderer/src/modules/settings/tabs/apperance.tsx
View File

@ -107,6 +107,7 @@ const ShikiTheme = () => {
<div className="mb-3 flex items-center justify-between">
<span className="shrink-0 text-sm font-medium">Code highlight theme</span>
<Select
defaultValue="github-dark"
value={codeHighlightTheme}
onValueChange={(value) => {
@ -116,7 +117,7 @@ const ShikiTheme = () => {
<SelectTrigger size="sm" className="w-48">
<SelectValue />
</SelectTrigger>
<SelectContent align="end" className="h-64">
<SelectContent position="item-aligned">
{Object.keys(bundledThemes)?.map((theme) => (
<SelectItem key={theme} value={theme}>
{theme}
@ -154,7 +155,7 @@ const TextSize = () => {
<SelectTrigger size="sm" className="w-48 capitalize">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectContent position="item-aligned">
{Object.entries(textSizeMap).map(([size, value]) => (
<SelectItem
className="capitalize"

86
src/renderer/src/modules/settings/tabs/invitations.tsx
View File

@ -5,6 +5,7 @@ import {
} from "@renderer/components/ui/avatar"
import { Button, MotionButtonBase } from "@renderer/components/ui/button"
import { CopyButton } from "@renderer/components/ui/code-highlighter"
import { LoadingCircle } from "@renderer/components/ui/loading"
import { ScrollArea } from "@renderer/components/ui/scroll-area"
import {
Table,
@ -14,7 +15,12 @@ import {
TableHeader,
TableRow,
} from "@renderer/components/ui/table"
import { Tooltip, TooltipContent, TooltipTrigger } from "@renderer/components/ui/tooltip"
import {
Tooltip,
TooltipContent,
TooltipPortal,
TooltipTrigger,
} from "@renderer/components/ui/tooltip"
import { useAuthQuery } from "@renderer/hooks/common"
import { apiClient, getFetchErrorMessage } from "@renderer/lib/api-fetch"
import { usePresentUserProfileModal } from "@renderer/modules/profile/hooks"
@ -58,11 +64,12 @@ export const SettingInvitations = () => {
</MotionButtonBase>
</TooltipTrigger>
<TooltipContent>
New invitation
</TooltipContent>
<TooltipContent>New invitation</TooltipContent>
</Tooltip>
<ScrollArea.ScrollArea scrollbarClassName="w-1" rootClassName="flex grow">
<ScrollArea.ScrollArea
scrollbarClassName="w-1"
rootClassName="flex grow"
>
{invitations.data?.length ? (
<Table className="mt-4">
<TableHeader className="border-b">
@ -100,18 +107,31 @@ export const SettingInvitations = () => {
</TableCell>
<TableCell align="center" size="sm">
{row.users ? (
<div
onClick={() => {
presentUserProfile(row.users?.id)
}}
>
<Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
<AvatarImage src={row.users?.image || undefined} />
<AvatarFallback>
{row.users?.name?.slice(0, 2)}
</AvatarFallback>
</Avatar>
</div>
<Tooltip>
<TooltipTrigger>
<button
type="button"
className="cursor-pointer"
onClick={() => {
presentUserProfile(row.users?.id)
}}
>
<Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
<AvatarImage
src={row.users?.image || undefined}
/>
<AvatarFallback>
{row.users?.name?.slice(0, 2)}
</AvatarFallback>
</Avatar>
</button>
</TooltipTrigger>
{row.users?.name && (
<TooltipPortal>
<TooltipContent>{row.users?.name}</TooltipContent>
</TooltipPortal>
)}
</Tooltip>
) : (
"Not used"
)}
@ -120,21 +140,25 @@ export const SettingInvitations = () => {
))}
</TableBody>
</Table>
) : (
<div className="mt-36 w-full text-center text-sm text-zinc-400">
<p>No invitations</p>
) : invitations.isLoading ?
(
<LoadingCircle size="large" className="center absolute inset-0" />
) :
(
<div className="mt-36 w-full text-center text-sm text-zinc-400">
<p>No invitations</p>
<div className="mt-6">
<Button
onClick={() => {
newInvitation.mutate()
}}
>
Create Invitation
</Button>
</div>
</div>
)}
<div className="mt-6">
<Button
onClick={() => {
newInvitation.mutate()
}}
>
Create Invitation
</Button>
</div>
</div>
)}
</ScrollArea.ScrollArea>
</div>
</>