fix: align flow board floating sidebar
This commit is contained in:
parent
3f4d850815
commit
9a562db15a
@ -1361,7 +1361,7 @@ export function DrawnixWorkspace({
|
||||
type="file"
|
||||
/>
|
||||
<FloatingSidebarShell
|
||||
className="absolute top-4 left-4 z-20 lg:top-6 lg:left-6"
|
||||
className="absolute top-[18px] left-7 z-30"
|
||||
flowBoardControl
|
||||
>
|
||||
<FloatingLogoPill
|
||||
@ -1370,10 +1370,16 @@ export function DrawnixWorkspace({
|
||||
}}
|
||||
siteLogo={displayLogo}
|
||||
siteName={siteName}
|
||||
tooltip="返回首页"
|
||||
tooltip={null}
|
||||
variant="plain"
|
||||
/>
|
||||
</FloatingSidebarShell>
|
||||
|
||||
<FloatingSidebarRail className="max-h-[calc(100vh-88px)]">
|
||||
<FloatingSidebarShell
|
||||
className="absolute left-6 top-[92px] z-20"
|
||||
flowBoardControl
|
||||
>
|
||||
<FloatingSidebarRail className="max-h-[calc(100vh-172px)]">
|
||||
<FloatingSidebarAction
|
||||
disabled={isSavingNow}
|
||||
icon={Save}
|
||||
|
||||
@ -37,8 +37,9 @@ export function FloatingSidebarShell({
|
||||
type FloatingLogoPillProps = {
|
||||
siteName: string;
|
||||
siteLogo?: string | null;
|
||||
tooltip?: string;
|
||||
tooltip?: string | null;
|
||||
onClick?: () => void;
|
||||
variant?: "pill" | "plain";
|
||||
};
|
||||
|
||||
export function FloatingLogoPill({
|
||||
@ -46,33 +47,53 @@ export function FloatingLogoPill({
|
||||
siteLogo,
|
||||
tooltip = siteName,
|
||||
onClick,
|
||||
variant = "pill",
|
||||
}: FloatingLogoPillProps) {
|
||||
const isPlain = variant === "plain";
|
||||
const trigger = (
|
||||
<button
|
||||
aria-label={tooltip || siteName}
|
||||
className={cn(
|
||||
"pointer-events-auto flex items-center gap-2 text-left transition",
|
||||
isPlain
|
||||
? "h-8 hover:opacity-70"
|
||||
: "h-[52px] w-[52px] justify-center rounded-full border border-black/10 bg-white px-2.5 shadow hover:bg-black/[0.03] hover:shadow-md lg:w-[164px] lg:justify-start lg:px-4"
|
||||
)}
|
||||
onClick={onClick}
|
||||
type="button"
|
||||
>
|
||||
{siteLogo ? (
|
||||
<img
|
||||
alt={siteName}
|
||||
className="h-8 w-8 shrink-0 rounded-full object-cover"
|
||||
src={siteLogo}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-black font-bold text-white text-sm">
|
||||
{siteName.slice(0, 1).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
"min-w-0 truncate font-semibold text-[#111827] leading-none tracking-tight",
|
||||
isPlain ? "text-[20px]" : "hidden text-[15px] lg:block"
|
||||
)}
|
||||
>
|
||||
{siteName}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
if (!tooltip) {
|
||||
return trigger;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
className="pointer-events-auto flex h-[52px] w-[52px] items-center justify-center gap-3 rounded-full border border-black/10 bg-white px-2.5 text-left shadow transition hover:bg-black/[0.03] hover:shadow-md lg:w-[164px] lg:justify-start lg:px-4"
|
||||
onClick={onClick}
|
||||
title={tooltip}
|
||||
type="button"
|
||||
>
|
||||
{siteLogo ? (
|
||||
<img
|
||||
alt={siteName}
|
||||
className="h-8 w-8 rounded-full object-cover"
|
||||
src={siteLogo}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-black font-bold text-white text-sm">
|
||||
{siteName.slice(0, 1).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<span className="hidden min-w-0 truncate font-semibold text-[#111827] text-[15px] leading-none tracking-tight lg:block">
|
||||
{siteName}
|
||||
</span>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">{tooltip}</TooltipContent>
|
||||
<TooltipTrigger asChild>{trigger}</TooltipTrigger>
|
||||
<TooltipContent side={isPlain ? "bottom" : "right"}>
|
||||
{tooltip}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
@ -126,7 +147,6 @@ export function FloatingSidebarAction({
|
||||
)}
|
||||
disabled={disabled || loading}
|
||||
onClick={onClick}
|
||||
title={label}
|
||||
type="button"
|
||||
>
|
||||
{loading ? (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user