Merge pull request #1299 from danielaskdd/fix-safari-popover

Fix i18n direction problem and Safari graph view toolbar popover problem
This commit is contained in:
Daniel.y
2025-04-07 20:32:22 +08:00
committed by GitHub
9 changed files with 186 additions and 165 deletions

View File

@@ -1 +1 @@
__api_version__ = "0139" __api_version__ = "0140"

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -8,8 +8,8 @@
<link rel="icon" type="image/svg+xml" href="logo.png" /> <link rel="icon" type="image/svg+xml" href="logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lightrag</title> <title>Lightrag</title>
<script type="module" crossorigin src="/webui/assets/index-sivPufd7.js"></script> <script type="module" crossorigin src="/webui/assets/index-KA3WYEM0.js"></script>
<link rel="stylesheet" crossorigin href="/webui/assets/index-CQhBIpFe.css"> <link rel="stylesheet" crossorigin href="/webui/assets/index-WCszRhP4.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

View File

@@ -289,7 +289,7 @@ const LayoutsControl = () => {
) )
return ( return (
<> <div>
<div> <div>
{layouts[layout] && 'worker' in layouts[layout] && ( {layouts[layout] && 'worker' in layouts[layout] && (
<WorkerLayoutControl <WorkerLayoutControl
@@ -310,7 +310,14 @@ const LayoutsControl = () => {
<GripIcon /> <GripIcon />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent side="right" align="center" className="p-1"> <PopoverContent
side="right"
align="start"
sideOffset={8}
collisionPadding={5}
sticky="always"
className="p-1 min-w-auto"
>
<Command> <Command>
<CommandList> <CommandList>
<CommandGroup> <CommandGroup>
@@ -331,7 +338,7 @@ const LayoutsControl = () => {
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
</> </div>
) )
} }

View File

@@ -245,8 +245,10 @@ export default function Settings() {
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
side="right" side="right"
align="start" align="end"
className="mb-2 p-2" sideOffset={8}
collisionPadding={5}
className="p-2 max-w-[200px]"
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}
> >
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">

View File

@@ -7,20 +7,32 @@ const Popover = PopoverPrimitive.Root
const PopoverTrigger = PopoverPrimitive.Trigger const PopoverTrigger = PopoverPrimitive.Trigger
// Define the props type to include positioning props
type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
sticky?: 'partial' | 'always';
avoidCollisions?: boolean;
};
const PopoverContent = React.forwardRef< const PopoverContent = React.forwardRef<
React.ComponentRef<typeof PopoverPrimitive.Content>, React.ComponentRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> PopoverContentProps
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => ( >(({ className, align = 'center', sideOffset = 4, collisionPadding, sticky, avoidCollisions = false, ...props }, ref) => (
<PopoverPrimitive.Content <PopoverPrimitive.Portal>
ref={ref} <PopoverPrimitive.Content
align={align} ref={ref}
sideOffset={sideOffset} align={align}
className={cn( sideOffset={sideOffset}
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border p-4 shadow-md outline-none', collisionPadding={collisionPadding}
className sticky={sticky}
)} avoidCollisions={avoidCollisions}
{...props} className={cn(
/> 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border p-4 shadow-md outline-none',
className
)}
{...props}
/>
</PopoverPrimitive.Portal>
)) ))
PopoverContent.displayName = PopoverPrimitive.Content.displayName PopoverContent.displayName = PopoverPrimitive.Content.displayName

View File

@@ -158,7 +158,7 @@ export default function DocumentManager() {
}, []); }, []);
const [showPipelineStatus, setShowPipelineStatus] = useState(false) const [showPipelineStatus, setShowPipelineStatus] = useState(false)
const { t } = useTranslation() const { t, i18n } = useTranslation()
const health = useBackendState.use.health() const health = useBackendState.use.health()
const pipelineBusy = useBackendState.use.pipelineBusy() const pipelineBusy = useBackendState.use.pipelineBusy()
const [docs, setDocs] = useState<DocsStatusesResponse | null>(null) const [docs, setDocs] = useState<DocsStatusesResponse | null>(null)
@@ -499,7 +499,7 @@ export default function DocumentManager() {
<CardTitle>{t('documentPanel.documentManager.uploadedTitle')}</CardTitle> <CardTitle>{t('documentPanel.documentManager.uploadedTitle')}</CardTitle>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FilterIcon className="h-4 w-4" /> <FilterIcon className="h-4 w-4" />
<div className="flex gap-1"> <div className="flex gap-1" dir={i18n.dir()}>
<Button <Button
size="sm" size="sm"
variant={statusFilter === 'all' ? 'secondary' : 'outline'} variant={statusFilter === 'all' ? 'secondary' : 'outline'}