johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🐛 Fix sticky-buttons-on-layers

Browse Source
This commit is contained in:
Eva Marco
2025-12-11 16:39:21 +01:00
parent 3becfcd723
commit 0d8683613c
3 changed files with 143 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
View File

@@ -139,30 +139,29 @@
:variant-properties variant-properties :variant-properties variant-properties
:variant-error variant-error :variant-error variant-error
:component-id (:id component) :component-id (:id component)
:is-hidden hidden?}] :is-hidden hidden?}]]
(when (not read-only?)
(when (not read-only?) [:div {:class (stl/css-case
[:div {:class (stl/css-case :element-actions true
:element-actions true :is-parent has-shapes?
:is-parent has-shapes? :selected hidden?
:selected hidden? :selected blocked?)}
:selected blocked?)} [:button {:class (stl/css-case
[:button {:class (stl/css-case :toggle-element true
:toggle-element true :selected hidden?)
:selected hidden?) :title (if hidden?
:title (if hidden? (tr "workspace.shape.menu.show")
(tr "workspace.shape.menu.show") (tr "workspace.shape.menu.hide"))
(tr "workspace.shape.menu.hide")) :on-click on-toggle-visibility}
:on-click on-toggle-visibility} (if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)]
(if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)] [:button {:class (stl/css-case
[:button {:class (stl/css-case :block-element true
:block-element true :selected blocked?)
:selected blocked?) :title (if (:blocked item)
:title (if (:blocked item) (tr "workspace.shape.menu.unlock")
(tr "workspace.shape.menu.unlock") (tr "workspace.shape.menu.lock"))
(tr "workspace.shape.menu.lock")) :on-click on-toggle-blocking}
:on-click on-toggle-blocking} (if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]
(if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]]
children])) children]))

198
frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
View File

@@ -4,78 +4,81 @@
// //
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated; @use "ds/_utils.scss" as *;
@use "ds/borders.scss" as *;
@use "ds/_sizes.scss" as *;
.layer-row { .layer-row {
--layer-indentation-size: calc(#{deprecated.$s-4} * 6); --layer-indentation-size: var(--sp-xxl);
--layer-background-color: var(--color-background-primary);
--layer-foreground-color: inherit;
--shadow-color: transparent;
box-shadow: px2rem(16) px2rem(0) px2rem(0) px2rem(0) var(--shadow-color);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 100%; width: 100%;
background-color: var(--layer-row-background-color); background-color: var(--layer-background-color);
border: deprecated.$s-2 solid transparent; border: $b-2 solid transparent;
color: var(--layer-foreground-color);
&.highlight, &.highlight,
&:hover { &:hover {
--layer-background-color: var(--color-background-secondary);
--shadow-color: var(--color-background-secondary);
--context-hover-color: var(--layer-row-foreground-color-hover); --context-hover-color: var(--layer-row-foreground-color-hover);
--context-hover-opacity: deprecated.$op-10; --context-hover-opacity: 1;
background-color: var(--layer-row-background-color-hover); --layer-foreground-color: var(--layer-row-foreground-color-hover);
color: var(--layer-row-foreground-color-hover);
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
var(--layer-row-background-color-hover);
&.hidden { &.hidden {
opacity: deprecated.$op-10; opacity: 1;
} }
} }
&.selected { &.selected {
background-color: var(--layer-row-background-color-selected); --layer-background-color: var(--color-background-quaternary);
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 --shadow-color: var(--color-background-quaternary);
var(--layer-row-background-color-selected);
} }
&.selected.highlight, &.selected.highlight,
&.selected:hover { &.selected:hover {
background-color: var(--layer-row-background-color-selected); --layer-background-color: var(--color-background-quaternary);
} }
.parent-selected & { .parent-selected & {
background-color: var(--layer-child-row-background-color); --layer-background-color: var(--color-background-tertiary);
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 --shadow-color: var(--color-background-tertiary);
var(--layer-child-row-background-color);
} }
.parent-selected &.highlight, .parent-selected &.highlight,
.parent-selected &:hover { .parent-selected &:hover {
background-color: var(--layer-row-background-color-hover); --layer-background-color: var(--color-background-secondary);
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 --shadow-color: var(--color-background-secondary);
var(--layer-row-background-color-hover);
} }
&.dnd-over-bot { &.dnd-over-bot {
border-bottom: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); border-bottom: $b-2 solid var(--color-accent-primary);
} }
&.dnd-over-top { &.dnd-over-top {
border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); border-top: $b-2 solid var(--color-accent-primary);
} }
&.dnd-over { &.dnd-over {
border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover); border: $b-2 solid var(--color-accent-primary);
} }
} }
.element-children { .element-children {
.layer-row.highlight &, .layer-row.highlight &,
.layer-row:hover & { .layer-row:hover & {
background-color: var(--layer-row-background-color-selected); --layer-background-color: var(--color-background-quaternary);
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0 --shadow-color: var(--color-background-quaternary);
var(--layer-row-background-color-selected);
} }
.layer-row.type-comp & { .layer-row.type-comp & {
color: var(--layer-row-component-foreground-color); --layer-foreground-color: var(--color-accent-secondary);
} }
.layer-row.selected & { .layer-row.selected & {
background-color: transparent; --layer-background-color: transparent;
color: var(--layer-row-foreground-color-selected); --layer-foreground-color: var(--color-accent-primary);
} }
} }
@@ -83,13 +86,14 @@
align-items: center; align-items: center;
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
column-gap: deprecated.$s-4; column-gap: var(--sp-xs);
height: deprecated.$s-32; height: $sz-32;
width: calc(100% - (var(--depth) * var(--layer-indentation-size))); width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
cursor: pointer; cursor: pointer;
min-width: 140px;
&.filtered { &.filtered {
width: calc(100% - deprecated.$s-12); width: calc(100% - $sz-12);
} }
} }
@@ -98,6 +102,9 @@
height: 100%; height: 100%;
display: flex; display: flex;
align-items: end; align-items: end;
position: sticky;
right: 0;
height: $sz-32;
&.selected { &.selected {
display: flex; display: flex;
@@ -114,91 +121,103 @@
} }
.icon-shape { .icon-shape {
@include deprecated.flexCenter; display: flex;
@include deprecated.buttonStyle; justify-content: center;
align-items: center;
border: none;
background: none;
cursor: pointer;
position: relative; position: relative;
justify-self: flex-end; justify-self: flex-end;
width: deprecated.$s-16;
height: 100%; height: 100%;
width: deprecated.$s-24; width: $sz-24;
padding-inline-start: deprecated.$s-4; padding-inline-start: var(--sp-xs);
color: var(--icon-foreground); color: var(--color-foreground-secondary);
.layer-row.selected & { .layer-row.selected & {
color: var(--layer-row-foreground-color-selected); color: var(--color-accent-primary);
} }
.layer-row.type-comp & { .layer-row.type-comp & {
color: var(--layer-row-component-foreground-color); color: var(--color-accent-secondary);
} }
.inverse & { .inverse & {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.layer-row.hidden & { .layer-row.hidden & {
opacity: deprecated.$op-7; opacity: 0.7;
} }
.layer-row.highlight &, .layer-row.highlight &,
.layer-row:hover & { .layer-row:hover & {
opacity: deprecated.$op-10; opacity: 1;
svg { svg {
stroke: var(--layer-row-foreground-color-hover); stroke: var(--color-accent-primary);
} }
} }
} }
.absolute { .absolute {
position: absolute; position: absolute;
background-color: var(--layer-row-foreground-color); background-color: var(--color-foreground-secondary);
opacity: deprecated.$op-4; opacity: 0.4;
width: deprecated.$s-12; width: $sz-12;
height: deprecated.$s-12; height: $sz-12;
border-radius: deprecated.$br-2; border-radius: px2rem(2);
.layer-row.hidden & { .layer-row.hidden & {
opacity: deprecated.$op-1; opacity: 0.1;
} }
.layer-row.type-comp & { .layer-row.type-comp & {
background-color: var(--layer-row-component-foreground-color); background-color: var(--color-accent-secondary);
} }
.layer-row.highlight &, .layer-row.highlight &,
.layer-row:hover & { .layer-row:hover & {
opacity: deprecated.$op-4; opacity: 0.4;
background-color: var(--layer-row-foreground-color-hover); background-color: var(--color-accent-primary);
} }
.layer-row.selected & { .layer-row.selected & {
background-color: var(--layer-row-foreground-color-selected); background-color: var(--color-accent-primary);
} }
} }
.toggle-content { .toggle-content {
@include deprecated.buttonStyle; border: none;
background: none;
cursor: pointer;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
align-items: center; align-items: center;
height: 100%; height: 100%;
width: deprecated.$s-24; width: $sz-24;
padding-inline-start: deprecated.$s-8; padding-inline-start: var(--sp-s);
svg { svg {
@extend .button-icon-small; display: flex;
stroke: var(--icon-foreground); justify-content: center;
align-items: center;
color: transparent;
fill: none;
height: $sz-12;
width: $sz-12;
stroke-width: 1.33px;
stroke: var(--color-foreground-secondary);
.layer-row.hidden & { .layer-row.hidden & {
opacity: deprecated.$op-7; opacity: 0.7;
} }
.layer-row.selected & { .layer-row.selected & {
stroke: var(--layer-row-foreground-color-selected); stroke: var(--color-accent-primary);
} }
.layer-row.type-comp & { .layer-row.type-comp & {
stroke: var(--layer-row-component-foreground-color); stroke: var(--color-accent-secondary);
} }
.layer-row.highlight &, .layer-row.highlight &,
.layer-row:hover & { .layer-row:hover & {
opacity: deprecated.$op-10; opacity: 1;
stroke: var(--layer-row-foreground-color-hover); stroke: var(--color-accent-primary);
} }
} }
.layer-row.selected & { .layer-row.selected & {
background-color: var(--layer-row-background-color-selected); background-color: var(--color-background-quaternary);
} }
&.inverse svg { &.inverse svg {
transform: rotate(90deg); transform: rotate(90deg);
@@ -207,65 +226,78 @@
.toggle-element, .toggle-element,
.block-element { .block-element {
@include deprecated.buttonStyle; --layer-row-action-btn-background: none;
@include deprecated.flexCenter; border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 100%; height: 100%;
width: deprecated.$s-24; width: $sz-24;
margin: 0; margin: 0;
display: none; display: none;
background: var(--layer-row-action-btn-background);
padding-right: 6px;
svg { svg {
@extend .button-icon-small; display: flex;
stroke: var(--icon-foreground); justify-content: center;
align-items: center;
color: transparent;
fill: none;
height: $sz-12;
width: $sz-12;
stroke-width: 1.33px;
stroke: var(--color-foreground-secondary);
.layer-row.hidden & { .layer-row.hidden & {
opacity: deprecated.$op-7; opacity: 0.7;
} }
.type-comp & { .type-comp & {
stroke: var(--layer-row-component-foreground-color); stroke: var(--color-accent-secondary);
} }
} }
.element-actions.selected & { .element-actions.selected & {
display: flex; display: flex;
opacity: deprecated.$op-0; opacity: 0;
&.selected { &.selected {
opacity: deprecated.$op-10; opacity: 1;
} }
} }
.layer-row:hover .element-actions.selected & { .layer-row:hover .element-actions.selected & {
opacity: deprecated.$op-10; opacity: 1;
} }
.layer-row.highlight &, .layer-row.highlight &,
.layer-row:hover & { .layer-row:hover & {
display: flex; display: flex;
--layer-row-action-btn-background: var(--color-background-secondary);
svg { svg {
opacity: deprecated.$op-10; opacity: 1;
stroke: var(--layer-row-foreground-color-hover); stroke: var(--color-accent-primary);
} }
} }
.layer-row.selected & { .layer-row.selected & {
display: flex; display: flex;
--layer-row-action-btn-background: var(--color-background-quaternary);
svg { svg {
stroke: var(--layer-row-foreground-color-selected); stroke: var(--color-accent-primary);
} }
} }
} }
:global(.sticky) { :global(.sticky) {
position: sticky; position: sticky;
top: deprecated.$s-0; top: 0;
z-index: deprecated.$z-index-4; z-index: 4;
} }
.tab-indentation { .tab-indentation {
display: block; display: block;
height: deprecated.$s-16; height: $sz-16;
min-width: calc(var(--depth) * var(--layer-indentation-size)); min-width: calc(var(--depth) * var(--layer-indentation-size));
} }
.filtered { .filtered {
min-width: deprecated.$s-12; min-width: $sz-12;
} }

10
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View File

@@ -211,9 +211,9 @@
overflow-x: auto; overflow-x: auto;
overflow-y: overlay; overflow-y: overlay;
scrollbar-gutter: stable; scrollbar-gutter: stable;
}
.element-list {
width: var(--left-sidebar-width); .element-list {
display: grid; display: grid;
} position: relative;
} }