mirror of https://github.com/penpot/penpot.git
Merge e2cf06e230 into 5fa4368d70
This commit is contained in:
Eva Marco
GitHub
commit
d9f2851bd3
|
|
@ -12,6 +12,9 @@
|
|||
|
||||
- Remap references when renaming tokens [Taiga #10202](https://tree.taiga.io/project/penpot/us/10202)
|
||||
- Tokens panel nested path view [Taiga #9966](https://tree.taiga.io/project/penpot/us/9966)
|
||||
- Improve usability of lock and hide buttons in the layer panel. [Taiga #12916](https://tree.taiga.io/project/penpot/issue/12916)
|
||||
|
||||
### :bug: Bugs fixed
|
||||
|
||||
### :bug: Bugs fixed
|
||||
|
||||
|
|
|
|||
|
|
@ -139,30 +139,29 @@
|
|||
:variant-properties variant-properties
|
||||
:variant-error variant-error
|
||||
:component-id (:id component)
|
||||
:is-hidden hidden?}]
|
||||
|
||||
(when (not read-only?)
|
||||
[:div {:class (stl/css-case
|
||||
:element-actions true
|
||||
:is-parent has-shapes?
|
||||
:selected hidden?
|
||||
:selected blocked?)}
|
||||
[:button {:class (stl/css-case
|
||||
:toggle-element true
|
||||
:selected hidden?)
|
||||
:title (if hidden?
|
||||
(tr "workspace.shape.menu.show")
|
||||
(tr "workspace.shape.menu.hide"))
|
||||
:on-click on-toggle-visibility}
|
||||
(if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)]
|
||||
[:button {:class (stl/css-case
|
||||
:block-element true
|
||||
:selected blocked?)
|
||||
:title (if (:blocked item)
|
||||
(tr "workspace.shape.menu.unlock")
|
||||
(tr "workspace.shape.menu.lock"))
|
||||
:on-click on-toggle-blocking}
|
||||
(if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]]
|
||||
:is-hidden hidden?}]]
|
||||
(when (not read-only?)
|
||||
[:div {:class (stl/css-case
|
||||
:element-actions true
|
||||
:is-parent has-shapes?
|
||||
:selected hidden?
|
||||
:selected blocked?)}
|
||||
[:button {:class (stl/css-case
|
||||
:toggle-element true
|
||||
:selected hidden?)
|
||||
:title (if hidden?
|
||||
(tr "workspace.shape.menu.show")
|
||||
(tr "workspace.shape.menu.hide"))
|
||||
:on-click on-toggle-visibility}
|
||||
(if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)]
|
||||
[:button {:class (stl/css-case
|
||||
:block-element true
|
||||
:selected blocked?)
|
||||
:title (if (:blocked item)
|
||||
(tr "workspace.shape.menu.unlock")
|
||||
(tr "workspace.shape.menu.lock"))
|
||||
:on-click on-toggle-blocking}
|
||||
(if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]
|
||||
|
||||
children]))
|
||||
|
||||
|
|
|
|||
|
|
@ -4,79 +4,81 @@
|
|||
//
|
||||
// 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-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;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: var(--layer-row-background-color);
|
||||
border: deprecated.$s-2 solid transparent;
|
||||
background-color: var(--layer-background-color);
|
||||
border: $b-2 solid transparent;
|
||||
color: var(--layer-foreground-color);
|
||||
|
||||
&.highlight,
|
||||
&: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-opacity: deprecated.$op-10;
|
||||
background-color: var(--layer-row-background-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);
|
||||
--context-hover-opacity: 1;
|
||||
--layer-foreground-color: var(--layer-row-foreground-color-hover);
|
||||
&.hidden {
|
||||
opacity: deprecated.$op-10;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--layer-row-background-color-selected);
|
||||
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
|
||||
var(--layer-row-background-color-selected);
|
||||
--layer-background-color: var(--color-background-quaternary);
|
||||
--shadow-color: var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
&.selected.highlight,
|
||||
&.selected:hover {
|
||||
background-color: var(--layer-row-background-color-selected);
|
||||
--layer-background-color: var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
.parent-selected & {
|
||||
background-color: var(--layer-child-row-background-color);
|
||||
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
|
||||
var(--layer-child-row-background-color);
|
||||
--layer-background-color: var(--color-background-tertiary);
|
||||
--shadow-color: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
.parent-selected &.highlight,
|
||||
.parent-selected &:hover {
|
||||
background-color: var(--layer-row-background-color-hover);
|
||||
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
|
||||
var(--layer-row-background-color-hover);
|
||||
--layer-background-color: var(--color-background-secondary);
|
||||
--shadow-color: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
&.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 {
|
||||
border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
|
||||
border-top: $b-2 solid var(--color-accent-primary);
|
||||
}
|
||||
&.dnd-over {
|
||||
border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
|
||||
border: $b-2 solid var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.element-children {
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
background-color: var(--layer-row-background-color-selected);
|
||||
box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
|
||||
var(--layer-row-background-color-selected);
|
||||
--layer-background-color: var(--color-background-quaternary);
|
||||
--shadow-color: var(--color-background-quaternary);
|
||||
}
|
||||
.layer-row.type-comp & {
|
||||
color: var(--layer-row-component-foreground-color);
|
||||
--layer-foreground-color: var(--color-accent-secondary);
|
||||
}
|
||||
.layer-row.selected & {
|
||||
background-color: transparent;
|
||||
color: var(--layer-row-foreground-color-selected);
|
||||
--layer-background-color: transparent;
|
||||
--layer-foreground-color: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -84,13 +86,13 @@
|
|||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
column-gap: deprecated.$s-4;
|
||||
height: deprecated.$s-32;
|
||||
column-gap: var(--sp-xs);
|
||||
height: $sz-32;
|
||||
width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
|
||||
cursor: pointer;
|
||||
min-width: px2rem(140);
|
||||
&.filtered {
|
||||
width: calc(100% - deprecated.$s-12);
|
||||
width: calc(100% - $sz-12);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,6 +101,9 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
height: $sz-32;
|
||||
|
||||
&.selected {
|
||||
display: flex;
|
||||
|
|
@ -115,91 +120,103 @@
|
|||
}
|
||||
|
||||
.icon-shape {
|
||||
@include deprecated.flexCenter;
|
||||
@include deprecated.buttonStyle;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
justify-self: flex-end;
|
||||
width: deprecated.$s-16;
|
||||
height: 100%;
|
||||
width: deprecated.$s-24;
|
||||
padding-inline-start: deprecated.$s-4;
|
||||
color: var(--icon-foreground);
|
||||
width: $sz-24;
|
||||
padding-inline-start: var(--sp-xs);
|
||||
color: var(--color-foreground-secondary);
|
||||
.layer-row.selected & {
|
||||
color: var(--layer-row-foreground-color-selected);
|
||||
color: var(--color-accent-primary);
|
||||
}
|
||||
.layer-row.type-comp & {
|
||||
color: var(--layer-row-component-foreground-color);
|
||||
color: var(--color-accent-secondary);
|
||||
}
|
||||
.inverse & {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.layer-row.hidden & {
|
||||
opacity: deprecated.$op-7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
opacity: deprecated.$op-10;
|
||||
opacity: 1;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
stroke: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
background-color: var(--layer-row-foreground-color);
|
||||
opacity: deprecated.$op-4;
|
||||
width: deprecated.$s-12;
|
||||
height: deprecated.$s-12;
|
||||
border-radius: deprecated.$br-2;
|
||||
background-color: var(--color-foreground-secondary);
|
||||
opacity: 0.4;
|
||||
width: $sz-12;
|
||||
height: $sz-12;
|
||||
border-radius: px2rem(2);
|
||||
|
||||
.layer-row.hidden & {
|
||||
opacity: deprecated.$op-1;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.layer-row.type-comp & {
|
||||
background-color: var(--layer-row-component-foreground-color);
|
||||
background-color: var(--color-accent-secondary);
|
||||
}
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
opacity: deprecated.$op-4;
|
||||
background-color: var(--layer-row-foreground-color-hover);
|
||||
opacity: 0.4;
|
||||
background-color: var(--color-accent-primary);
|
||||
}
|
||||
.layer-row.selected & {
|
||||
background-color: var(--layer-row-foreground-color-selected);
|
||||
background-color: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-content {
|
||||
@include deprecated.buttonStyle;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: deprecated.$s-24;
|
||||
padding-inline-start: deprecated.$s-8;
|
||||
width: $sz-24;
|
||||
padding-inline-start: var(--sp-s);
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
display: flex;
|
||||
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 & {
|
||||
opacity: deprecated.$op-7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.layer-row.selected & {
|
||||
stroke: var(--layer-row-foreground-color-selected);
|
||||
stroke: var(--color-accent-primary);
|
||||
}
|
||||
.layer-row.type-comp & {
|
||||
stroke: var(--layer-row-component-foreground-color);
|
||||
stroke: var(--color-accent-secondary);
|
||||
}
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
opacity: deprecated.$op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
opacity: 1;
|
||||
stroke: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-row.selected & {
|
||||
background-color: var(--layer-row-background-color-selected);
|
||||
background-color: var(--color-background-quaternary);
|
||||
}
|
||||
&.inverse svg {
|
||||
transform: rotate(90deg);
|
||||
|
|
@ -208,65 +225,78 @@
|
|||
|
||||
.toggle-element,
|
||||
.block-element {
|
||||
@include deprecated.buttonStyle;
|
||||
@include deprecated.flexCenter;
|
||||
--layer-row-action-btn-background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: deprecated.$s-24;
|
||||
width: $sz-24;
|
||||
margin: 0;
|
||||
display: none;
|
||||
|
||||
background: var(--layer-row-action-btn-background);
|
||||
padding-right: 6px;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
display: flex;
|
||||
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 & {
|
||||
opacity: deprecated.$op-7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.type-comp & {
|
||||
stroke: var(--layer-row-component-foreground-color);
|
||||
stroke: var(--color-accent-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.element-actions.selected & {
|
||||
display: flex;
|
||||
opacity: deprecated.$op-0;
|
||||
|
||||
opacity: 0;
|
||||
&.selected {
|
||||
opacity: deprecated.$op-10;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.layer-row:hover .element-actions.selected & {
|
||||
opacity: deprecated.$op-10;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.layer-row.highlight &,
|
||||
.layer-row:hover & {
|
||||
display: flex;
|
||||
--layer-row-action-btn-background: var(--color-background-secondary);
|
||||
svg {
|
||||
opacity: deprecated.$op-10;
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
opacity: 1;
|
||||
stroke: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
.layer-row.selected & {
|
||||
display: flex;
|
||||
--layer-row-action-btn-background: var(--color-background-quaternary);
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-selected);
|
||||
stroke: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.sticky) {
|
||||
position: sticky;
|
||||
top: deprecated.$s-0;
|
||||
z-index: deprecated.$z-index-4;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.tab-indentation {
|
||||
display: block;
|
||||
height: deprecated.$s-16;
|
||||
height: $sz-16;
|
||||
min-width: calc(var(--depth) * var(--layer-indentation-size));
|
||||
}
|
||||
.filtered {
|
||||
min-width: deprecated.$s-12;
|
||||
min-width: $sz-12;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -180,6 +180,8 @@
|
|||
overflow-y: overlay;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.element-list {
|
||||
display: grid;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue