Skip to content

style: update LayersPanel layout styles #2105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
steve8708 merged 7 commits into from
Jul 14, 2026
+78 −65
Merged

style: update LayersPanel layout styles #2105

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5400c3d
style: run formatter and update LayersPanel layout styles
shivanshu11092003 Jul 13, 2026
c06d8ae
feat: make layers panel scrollable and actions sticky
shivanshu11092003 Jul 13, 2026
d9d9a51
style: remove bg-inherit from sticky layers panel action buttons
shivanshu11092003 Jul 13, 2026
a6da2b6
style: restore bg-inherit to sticky layers panel action buttons
shivanshu11092003 Jul 13, 2026
adefa2a
style: update LayersPanel row height to h-7 and add solid backdrop be…
shivanshu11092003 Jul 14, 2026
e301478
fix(design): conditionally collapse lock and hide controls in layers …
shivanshu11092003 Jul 14, 2026
927973b
fix(design): expand lock/hide wrapper on focus-within to support keyb…
shivanshu11092003 Jul 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 78 additions & 65 deletions templates/design/app/components/design/LayersPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import {
IconFrame,
IconLayersSubtract,
IconLayersUnion,
IconLayoutGrid,
IconLock,
IconLockOpen,
IconLayoutGrid,
IconPencil,
IconPlus,
IconSearch,
Expand All @@ -30,8 +30,8 @@ import {
useMemo,
useRef,
useState,
type KeyboardEvent,
type DragEvent,
type KeyboardEvent,
type MouseEvent,
type ReactNode,
type Ref,
Expand Down Expand Up @@ -2047,7 +2047,7 @@ const LayerRow = memo(function LayerRow({
aria-expanded={hasChildren ? isExpanded : undefined}
aria-level={depth + 1}
aria-selected={selectable ? isSelected : undefined}
className="relative min-w-full"
className="relative w-max min-w-full"
draggable={draggable}
onDragStart={handleDragStart}
onDragOver={handleDragOver}
Expand Down Expand Up @@ -2087,7 +2087,7 @@ const LayerRow = memo(function LayerRow({
) : null}
<div
className={cn(
"group flex h-8 min-w-full items-center gap-1 rounded-[5px] pr-1 text-[12px]",
"group flex h-7 w-max min-w-full items-center gap-1 rounded-[5px] pr-1 text-[12px] bg-[var(--design-editor-panel-bg)]",
activeDrop === "inside" &&
"ring-1 ring-inset ring-[var(--design-editor-accent-color)]",
isSelected &&
Expand Down Expand Up @@ -2233,67 +2233,80 @@ const LayerRow = memo(function LayerRow({
) : null}
</button>

{lockable ? (
<Tooltip>
<TooltipTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
className={cn(
"size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
node.locked && "opacity-100",
isSelected && "text-foreground",
)}
aria-label={node.locked ? labels.unlock : labels.lock}
onClick={(event) => {
event.stopPropagation();
onToggleLocked?.(node.id, !node.locked);
}}
>
{node.locked ? (
<IconLock className="size-3" />
) : (
<IconLockOpen className="size-3" />
)}
</Button>
</TooltipTrigger>
<TooltipContent>
{node.locked ? labels.unlock : labels.lock}
</TooltipContent>
</Tooltip>
) : null}

{hideable ? (
<Tooltip>
<TooltipTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
className={cn(
"size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
node.hidden && "opacity-100",
isSelected && "text-foreground",
)}
aria-label={node.hidden ? labels.show : labels.hide}
onClick={(event) => {
event.stopPropagation();
onToggleHidden?.(node.id, !node.hidden);
}}
>
{node.hidden ? (
<IconEyeOff className="size-3" />
) : (
<IconEye className="size-3" />
)}
</Button>
</TooltipTrigger>
<TooltipContent>
{node.hidden ? labels.show : labels.hide}
</TooltipContent>
</Tooltip>
) : null}
{(lockable || hideable) && (
<div
className={cn(
"sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1 bg-inherit",
node.locked || node.hidden
? "w-auto overflow-visible pl-2 pr-1"
: "w-0 overflow-hidden pl-0 pr-0 group-hover:w-auto group-hover:overflow-visible group-hover:pl-2 group-hover:pr-1 focus-within:w-auto focus-within:overflow-visible focus-within:pl-2 focus-within:pr-1",
)}
>
<div className="absolute inset-0 -z-20 bg-[var(--design-editor-panel-bg)]" />
<div className="absolute inset-0 -z-10 bg-inherit" />
{lockable ? (
<Tooltip>
<TooltipTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
className={cn(
"size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
node.locked && "opacity-100",
isSelected && "text-foreground",
)}
aria-label={node.locked ? labels.unlock : labels.lock}
onClick={(event) => {
event.stopPropagation();
onToggleLocked?.(node.id, !node.locked);
}}
>
{node.locked ? (
<IconLock className="size-3" />
) : (
<IconLockOpen className="size-3" />
)}
</Button>
</TooltipTrigger>
<TooltipContent>
{node.locked ? labels.unlock : labels.lock}
</TooltipContent>
</Tooltip>
) : null}

{hideable ? (
<Tooltip>
<TooltipTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
className={cn(
"size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
node.hidden && "opacity-100",
isSelected && "text-foreground",
)}
aria-label={node.hidden ? labels.show : labels.hide}
onClick={(event) => {
event.stopPropagation();
onToggleHidden?.(node.id, !node.hidden);
}}
>
{node.hidden ? (
<IconEyeOff className="size-3" />
) : (
<IconEye className="size-3" />
)}
</Button>
</TooltipTrigger>
<TooltipContent>
{node.hidden ? labels.show : labels.hide}
</TooltipContent>
</Tooltip>
) : null}
</div>
)}
</div>
</div>
</ContextMenuTrigger>
Expand Down
Loading