3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-31 15:38:29 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Remove new-css-system from layers

Browse source
This commit is contained in:
Eva 2023-12-28 13:35:30 +01:00 • committed by Alonso Torres
parent 831f79d651
commit c707539f6f
16 changed files with 460 additions and 1315 deletions
Download patch file Download diff file Expand all files Collapse all files

176
frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
View file

@ -18,7 +18,6 @@
[app.main.data.workspace.collapse :as dwc]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.shape-icon :as si]
[app.main.ui.components.shape-icon-refactor :as sic]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks]
@ -130,6 +129,7 @@
:type-comp component-tree?
:type-frame (cfh/frame-shape? item)
:hidden? hidden?}]
(when (not read-only?)
[:div {:class (stl/css-case
:element-actions true
@ -159,11 +159,9 @@
{::mf/wrap-props false}
[{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
(let [id (:id item)
name (:name item)
blocked? (:blocked item)
hidden? (:hidden item)
touched? (-> item :touched seq boolean)
has-shapes? (-> item :shapes seq boolean)
drag-disabled* (mf/use-state false)
drag-disabled? (deref drag-disabled*)
@ -179,14 +177,8 @@
container? (or (cfh/frame-shape? item)
(cfh/group-shape? item))
absolute? (ctl/item-absolute? item)
components-v2 (mf/use-ctx ctx/components-v2)
read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
main-instance? (if components-v2
(:main-instance item)
true)
parent-board? (and (cfh/frame-shape? item)
(= uuid/zero (:parent-id item)))
toggle-collapse
@ -346,124 +338,48 @@
#(when (some? subid)
(rx/dispose! subid))))
(if new-css-system
[:& layer-item-inner
{:ref dref
:item item
:depth depth
:parent-size parent-size
:name-ref ref
:read-only? read-only?
:highlighted? highlighted?
:selected? selected?
:component-tree? component-tree?
:filtered? filtered?
:expanded? expanded?
:dnd-over? (= (:over dprops) :center)
:dnd-over-top? (= (:over dprops) :top)
:dnd-over-bot? (= (:over dprops) :bot)
:on-select-shape select-shape
:on-context-menu on-context-menu
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-zoom-to-selected zoom-to-selected
:on-toggle-collapse toggle-collapse
:on-enable-drag enable-drag
:on-disable-drag disable-drag
:on-toggle-visibility toggle-visibility
:on-toggle-blocking toggle-blocking}
[:& layer-item-inner
{:ref dref
:item item
:depth depth
:parent-size parent-size
:name-ref ref
:read-only? read-only?
:highlighted? highlighted?
:selected? selected?
:component-tree? component-tree?
:filtered? filtered?
:expanded? expanded?
:dnd-over? (= (:over dprops) :center)
:dnd-over-top? (= (:over dprops) :top)
:dnd-over-bot? (= (:over dprops) :bot)
:on-select-shape select-shape
:on-context-menu on-context-menu
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-zoom-to-selected zoom-to-selected
:on-toggle-collapse toggle-collapse
:on-enable-drag enable-drag
:on-disable-drag disable-drag
:on-toggle-visibility toggle-visibility
:on-toggle-blocking toggle-blocking}
(when (and (:shapes item) expanded?)
[:div {:class (stl/css-case
:element-children true
:parent-selected selected?
:sticky-children parent-board?)
:data-id (when ^boolean parent-board? id)}
(for [[index id] (reverse (d/enumerate (:shapes item)))]
(when-let [item (get objects id)]
[:& layer-item
{:item item
:highlighted highlighted
:selected selected
:index index
:objects objects
:key (dm/str id)
:sortable? sortable?
:depth depth
:parent-size parent-size
:component-child? component-tree?}]))])]
;; ---- OLD CSS
[:li {:on-context-menu on-context-menu
:ref dref
:class (stl/css-case*
:component (some? (:component-id item))
:masked (:masked-group item)
:dnd-over (= (:over dprops) :center)
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot)
:selected selected?
:type-frame (cfh/frame-shape? item))}
[:div.element-list-body {:class (stl/css-case*
:selected selected?
:hover highlighted?
:icon-layer (= (:type item) :icon))
:on-click select-shape
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-double-click dom/stop-propagation}
[:div.icon {:on-double-click zoom-to-selected}
(when ^boolean absolute?
[:div.absolute i/position-absolute])
[:& si/element-icon
{:shape item
:main-instance? main-instance?}]]
[:& layer-name {:ref ref
:parent-size parent-size
:shape-id id
:shape-name name
:shape-touched? touched?
:on-start-edit disable-drag
:on-stop-edit enable-drag
:disabled-double-click read-only?
:selected? selected?
:type-comp component-tree?
:type-frame (cfh/frame-shape? item)
:hidden? hidden?}]
[:div.element-actions {:class (when ^boolean has-shapes? "is-parent")}
[:div.toggle-element {:class (when ^boolean hidden? "selected")
:title (if (:hidden item)
(tr "workspace.shape.menu.show")
(tr "workspace.shape.menu.hide"))
:on-click toggle-visibility}
(if ^boolean hidden? i/eye-closed i/eye)]
[:div.block-element {:class (when ^boolean blocked? "selected")
:on-click toggle-blocking
:title (if (:blocked item)
(tr "workspace.shape.menu.unlock")
(tr "workspace.shape.menu.lock"))}
(if ^boolean blocked? i/lock i/unlock)]]
(when ^boolean has-shapes?
(when (not ^boolean filtered?)
[:span.toggle-content
{:on-click toggle-collapse
:class (when ^boolean expanded? "inverse")}
i/arrow-slide]))]
(when (and ^boolean has-shapes?
^boolean expanded?)
[:ul.element-children
(for [[index id] (reverse (d/enumerate (:shapes item)))]
(when-let [item (get objects id)]
[:& layer-item
{:item item
:selected selected
:highlighted highlighted
:index index
:objects objects
:key (dm/str id)
:sortable? sortable?}]))])])))
(when (and (:shapes item) expanded?)
[:div {:class (stl/css-case
:element-children true
:parent-selected selected?
:sticky-children parent-board?)
:data-id (when ^boolean parent-board? id)}
(for [[index id] (reverse (d/enumerate (:shapes item)))]
(when-let [item (get objects id)]
[:& layer-item
{:item item
:highlighted highlighted
:selected selected
:index index
:objects objects
:key (dm/str id)
:sortable? sortable?
:depth depth
:parent-size parent-size
:component-child? component-tree?}]))])]))

53
frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
View file

@ -12,7 +12,7 @@
align-items: center;
width: 100%;
background-color: var(--layer-row-background-color);
border: 2px solid transparent;
border: $s-2 solid transparent;
&.highlight,
&:hover {
@ -20,7 +20,7 @@
--context-hover-opacity: $op-10;
background-color: var(--layer-row-background-color-hover);
color: var(--layer-row-foreground-color-hover);
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-hover);
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover);
&.hidden {
opacity: $op-10;
}
@ -28,7 +28,7 @@
&.selected {
background-color: var(--layer-row-background-color-selected);
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-selected);
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected);
}
&.selected.highlight,
@ -105,7 +105,6 @@
@include buttonStyle;
position: relative;
justify-self: flex-end;
width: $s-16;
height: 100%;
width: $s-24;
padding: 0 $s-8 0 $s-4;
@ -138,23 +137,23 @@
.absolute {
position: absolute;
background-color: var(--layer-row-foreground-color);
opacity: $op-4;
width: $s-12;
height: $s-12;
width: $s-12;
border-radius: $br-2;
opacity: $op-4;
.layer-row.hidden & {
.layer-row.hidden {
opacity: $op-1;
}
.layer-row.type-comp & {
.layer-row.type-comp {
background-color: var(--layer-row-component-foreground-color);
}
.layer-row.highlight &,
.layer-row:hover & {
.layer-row.highlight,
.layer-row:hover {
opacity: $op-4;
background-color: var(--layer-row-foreground-color-hover);
}
.layer-row.selected & {
.layer-row.selected {
background-color: var(--layer-row-foreground-color-selected);
}
}
@ -166,29 +165,29 @@
align-items: center;
height: 100%;
width: $s-24;
padding: 0 4px 0 8px;
padding: 0 $s-4 0 $s-8;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
.layer-row.hidden & {
.layer-row.hidden {
opacity: $op-7;
}
.layer-row.selected & {
.layer-row.selected {
stroke: var(--layer-row-foreground-color-selected);
}
.layer-row.type-comp & {
.layer-row.type-comp {
stroke: var(--layer-row-component-foreground-color);
}
.layer-row.highlight &,
.layer-row:hover & {
.layer-row.highlight,
.layer-row:hover {
opacity: $op-10;
stroke: var(--layer-row-foreground-color-hover);
}
}
.layer-row.selected & {
.layer-row.selected {
background-color: var(--layer-row-background-color-selected);
}
&.inverse svg {
@ -209,15 +208,15 @@
@extend .button-icon-small;
stroke: var(--icon-foreground);
.layer-row.hidden & {
.layer-row.hidden {
opacity: $op-7;
}
.type-comp & {
.type-comp {
stroke: var(--layer-row-component-foreground-color);
}
}
.element-actions.selected & {
.element-actions.selected {
display: flex;
opacity: $op-0;
@ -226,15 +225,16 @@
}
}
.layer-row.highlight &,
.layer-row:hover & {
.layer-row.highlight,
.layer-row:hover {
display: flex;
svg {
opacity: $op-10;
stroke: var(--layer-row-foreground-color-hover);
}
}
.layer-row.selected & {
.layer-row.selected {
display: flex;
svg {
stroke: var(--layer-row-foreground-color-selected);
@ -244,8 +244,8 @@
:global(.sticky) {
position: sticky;
top: 0px;
z-index: 3;
top: $s-0;
z-index: $z-index-3;
}
.tab-indentation {
@ -253,6 +253,7 @@
height: $s-16;
min-width: calc(var(--depth) * var(--layer-indentation-size));
}
.filtered {
min-width: $s-12;
}

25
frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
View file

@ -11,7 +11,6 @@
[app.common.data.macros :as dm]
[app.main.data.workspace :as dw]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.util.debug :as dbg]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
@ -38,7 +37,6 @@
ref (d/nilv external-ref local-ref)
shape-for-rename (mf/deref lens:shape-for-rename)
new-css-system (mf/use-ctx ctx/new-css-system)
has-path? (str/includes? shape-name "/")
@ -90,7 +88,8 @@
(if ^boolean edition?
[:input
{:class (stl/css new-css-system :element-name :element-name-input)
{:class (stl/css :element-name
:element-name-input)
:style {"--depth" depth "--parent-size" parent-size}
:type "text"
:ref ref
@ -100,20 +99,16 @@
:default-value (d/nilv shape-name "")}]
[:*
[:span
{:class (if ^boolean new-css-system
(stl/css-case
:element-name true
:left-ellipsis has-path?
:selected selected?
:hidden hidden?
:type-comp type-comp
:type-frame type-frame)
(stl/css-case
"element-name" true
:left-ellipsis has-path?))
{:class (stl/css-case
:element-name true
:left-ellipsis has-path?
:selected selected?
:hidden hidden?
:type-comp type-comp
:type-frame type-frame)
:style {"--depth" depth "--parent-size" parent-size}
:ref ref
:on-double-click start-edit}
(d/nilv shape-name "")]
(when (and (dbg/enabled? :show-touched) ^boolean shape-touched?)
[:span {:class (stl/css new-css-system :element-name-touched)} "*"])])))
[:span {:class (stl/css :element-name-touched)} "*"])])))

2
frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
View file

@ -35,7 +35,7 @@
margin: 0;
padding-left: $s-6;
border-radius: $br-8;
border: 1px solid var(--input-border-color-focus);
border: $s-1 solid var(--input-border-color-focus);
color: var(--layer-row-foreground-color);
}
.element-name-touched {

361
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -17,13 +17,11 @@
[app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.shape-icon-refactor :as sic]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.timers :as ts]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -45,10 +43,8 @@
selected (hooks/use-equal-memo selected)
highlighted (mf/deref refs/highlighted-shapes)
highlighted (hooks/use-equal-memo highlighted)
root (get objects uuid/zero)
new-css-system (mf/use-ctx ctx/new-css-system)]
[:div
{:class (stl/css new-css-system :element-list)}
root (get objects uuid/zero)]
[:div {:class (stl/css :element-list)}
[:& hooks/sortable-container {}
(for [[index id] (reverse (d/enumerate (:shapes root)))]
(when-let [obj (get objects id)]
@ -82,9 +78,8 @@
[{:keys [objects parent-size]}]
(let [selected (mf/deref refs/selected-shapes)
selected (hooks/use-equal-memo selected)
root (get objects uuid/zero)
new-css-system (mf/use-ctx ctx/new-css-system)]
[:ul {:class (stl/css new-css-system :element-list)}
root (get objects uuid/zero)]
[:ul {:class (stl/css :element-list)}
(for [[index id] (d/enumerate (:shapes root))]
(when-let [obj (get objects id)]
[:& layer-item
@ -140,8 +135,7 @@
(defn use-search
[page objects]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
state* (mf/use-state
(let [state* (mf/use-state
{:show-search false
:show-menu false
:search-text ""
@ -164,13 +158,7 @@
(mf/use-fn
#(swap! state* update :show-menu not))
update-search-text-v1
(mf/use-fn
(fn [event]
(let [value (-> event dom/get-target dom/get-value)]
(swap! state* assoc :search-text value :num-items 100))))
update-search-text-v2
update-search-text
(mf/use-fn
(fn [value _event]
(swap! state* assoc :search-text value :num-items 100)))
@ -236,57 +224,29 @@
(mf/deps filtered-objects-total current-items)
(fn [_]
(when (<= current-items filtered-objects-total)
(swap! state* update :num-items + 100))))
handle-key-down
(mf/use-fn
(fn [event]
(when-let [node (dom/get-target event)]
(when (kbd/enter? event)
(dom/blur! node))
(when (kbd/esc? event)
(dom/blur! node)))))]
(swap! state* update :num-items + 100))))]
[filtered-objects
handle-show-more
#(mf/html
(if show-search?
[:*
[:div {:class (stl/css new-css-system :tool-window-bar :search)}
(if ^boolean new-css-system
[:& search-bar
{:on-change update-search-text-v2
:value current-search
:on-clear clear-search-text
:placeholder (tr "workspace.sidebar.layers.search")}
[:button
{:on-click toggle-filters
:class (stl/css-case
:filter-button true
:active active?)}
i/filter-refactor]]
[:div {:class (stl/css :tool-window-bar :search)}
[:& search-bar {:on-change update-search-text
:value current-search
:on-clear clear-search-text
:placeholder (tr "workspace.sidebar.layers.search")}
[:button {:on-click toggle-filters
:class (stl/css-case
:filter-button true
:active active?)}
i/filter-refactor]]
[:span.search-box
[:button.filter
{:on-click toggle-filters
:class (stl/css-case :active active?)}
i/icon-filter]
[:div
[:input {:on-change update-search-text-v1
:value current-search
:auto-focus show-search?
:placeholder (tr "workspace.sidebar.layers.search")
:on-key-down handle-key-down}]
(when (not (= "" current-search))
[:button.clear {:on-click clear-search-text} i/exclude])]])
[:button {:class (stl/css-case :close-search new-css-system)
[:button {:class (stl/css :close-search)
:on-click toggle-search}
(if ^boolean new-css-system
i/close-refactor
i/cross)]]
i/close-refactor]]
[:div {:class (stl/css new-css-system :active-filters)}
[:div {:class (stl/css :active-filters)}
(for [fkey current-filters]
(let [fname (d/name fkey)
name (case fkey
@ -298,146 +258,126 @@
:image (tr "workspace.sidebar.layers.images")
:shape (tr "workspace.sidebar.layers.shapes")
(tr fkey))]
(if ^boolean new-css-system
[:button {:class (stl/css :layer-filter)
:key fname
:data-filter fname
:on-click remove-filter}
[:span {:class (stl/css :layer-filter-icon)}
[:& sic/element-icon-refactor-by-type
{:type fkey
:main-instance? (= fkey :component)}]]
[:span {:class (stl/css :layer-filter-name)}
name]
[:span {:class (stl/css :layer-filter-close)}
i/close-small-refactor]]
[:span {:on-click remove-filter
[:button {:class (stl/css :layer-filter)
:key fname
:data-filter fname
:key fname}
name i/cross])))]
:on-click remove-filter}
[:span {:class (stl/css :layer-filter-icon)}
[:& sic/element-icon-refactor-by-type
{:type fkey
:main-instance? (= fkey :component)}]]
[:span {:class (stl/css :layer-filter-name)}
name]
[:span {:class (stl/css :layer-filter-close)}
i/close-small-refactor]]))]
(when ^boolean show-menu?
(if ^boolean new-css-system
[:ul {:class (stl/css :filters-container)}
[:li {:class (stl/css-case
:filter-menu-item true
:selected (contains? current-filters :frame))
:data-filter "frame"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} i/board-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.frames")]]
(when (contains? current-filters :frame)
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:ul {:class (stl/css :filters-container)}
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :frame))
:data-filter "frame"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/board-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.frames")]]
[:li {:class (stl/css-case
:filter-menu-item true
:selected (contains? current-filters :group))
:data-filter "group"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} i/group-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.groups")]]
(when (contains? current-filters :frame)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
(when (contains? current-filters :group)
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :group))
:data-filter "group"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/group-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.groups")]]
[:li {:class (stl/css-case
:filter-menu-item true
:selected (contains? current-filters :mask))
:data-filter "mask"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} i/mask-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.masks")]]
(when (contains? current-filters :mask)
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
(when (contains? current-filters :group)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
[:li {:class (stl/css-case
:filter-menu-item true
:selected (contains? current-filters :component))
:data-filter "component"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} i/component-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.components")]]
(when (contains? current-filters :component)
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case
:filter-menu-item true
:selected (contains? current-filters :text))
:data-filter "text"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} i/text-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.texts")]]
(when (contains? current-filters :text)
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :mask))
:data-filter "mask"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/mask-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.masks")]]
[:li {:class (stl/css-case
:filter-menu-item true
:selected (contains? current-filters :image))
:data-filter "image"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} i/img-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.images")]]
(when (contains? current-filters :image)
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case
:filter-menu-item true
:selected (contains? current-filters :shape))
:data-filter "shape"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} i/path-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.shapes")]]
(when (contains? current-filters :shape)
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]]
(when (contains? current-filters :mask)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
[:div.filters-container
[:span {:data-filter "frame"
:on-click add-filter}
i/artboard (tr "workspace.sidebar.layers.frames")]
[:span {:data-filter "group"
:on-click add-filter}
i/folder (tr "workspace.sidebar.layers.groups")]
[:span {:data-filter "mask"
:on-click add-filter}
i/mask (tr "workspace.sidebar.layers.masks")]
[:span {:data-filter "component"
:on-click add-filter}
i/component (tr "workspace.sidebar.layers.components")]
[:span {:data-filter "text"
:on-click add-filter}
i/text (tr "workspace.sidebar.layers.texts")]
[:span {:data-filter "image"
:on-click add-filter}
i/image (tr "workspace.sidebar.layers.images")]
[:span {:data-filter "shape"
:on-click add-filter}
i/curve (tr "workspace.sidebar.layers.shapes")]]))]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :component))
:data-filter "component"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/component-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.components")]]
(if ^boolean new-css-system
[:div {:class (stl/css :tool-window-bar)}
[:& title-bar {:collapsable? false
:title (:name page)
:on-btn-click toggle-search
:btn-children i/search-refactor}]]
(when (contains? current-filters :component)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
[:div.tool-window-bar
[:span.page-name
(:name page)]
[:button.icon-search {:on-click toggle-search}
i/search]])))]))
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :text))
:data-filter "text"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/text-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.texts")]]
(when (contains? current-filters :text)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :image))
:data-filter "image"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/img-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.images")]]
(when (contains? current-filters :image)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :shape))
:data-filter "shape"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/path-refactor]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.shapes")]]
(when (contains? current-filters :shape)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]])]
[:div {:class (stl/css :tool-window-bar)}
[:& title-bar {:collapsable? false
:title (:name page)
:on-btn-click toggle-search
:btn-children i/search-refactor}]]))]))
(defn- on-scroll
@ -490,7 +430,6 @@
title (when (= 1 (count focus))
(dm/get-in objects [(first focus) :name]))
new-css-system (mf/use-ctx ctx/new-css-system)
observer-var (mf/use-var nil)
lazy-load-ref (mf/use-ref nil)
@ -513,53 +452,51 @@
(and (nil? element) (some? @observer-var))
(do (.disconnect ^js @observer-var)
(reset! observer-var nil)))))]
(reset! observer-var nil)))))
[:div#layers
{:class (if ^boolean new-css-system
(stl/css :layers)
(stl/css* :tool-window))}
toogle-focus-mode
(mf/use-fn
#(st/emit! (dw/toggle-focus-mode)))]
[:div#layers {:class (stl/css :layers)}
(if (d/not-empty? focus)
[:div
{:class (stl/css new-css-system :tool-window-bar)}
[:button {:class (stl/css new-css-system :focus-title)
:on-click #(st/emit! (dw/toggle-focus-mode))}
[:span {:class (stl/css new-css-system :back-button)}
(if ^boolean new-css-system
i/arrow-refactor
i/arrow-slide)]
[:div {:class (stl/css :tool-window-bar)}
[:button {:class (stl/css :focus-title)
:on-click toogle-focus-mode}
[:span {:class (stl/css :back-button)}
i/arrow-refactor]
[:div {:class (stl/css new-css-system :focus-name)}
[:div {:class (stl/css :focus-name)}
(or title (tr "workspace.sidebar.layers"))]
(if ^boolean new-css-system
[:div {:class (stl/css :focus-mode-tag-wrapper)}
[:div {:class (stl/css :focus-mode-tag)} (tr "workspace.focus.focus-mode")]]
[:div.focus-mode (tr "workspace.focus.focus-mode")])]]
[:div {:class (stl/css :focus-mode-tag-wrapper)}
[:div {:class (stl/css :focus-mode-tag)}
(tr "workspace.focus.focus-mode")]]]]
(filter-component))
(if (some? filtered-objects)
[:*
[:div {:class (stl/css new-css-system :tool-window-content)
[:div {:class (stl/css :tool-window-content)
:data-scroll-container true
:ref on-render-container}
[:& filters-tree {:objects filtered-objects
:key (dm/str (:id page))
:parent-size size-parent}]
[:div.lazy {:ref lazy-load-ref
:style {:min-height 16}}]]
[:div {:ref lazy-load-ref
:style {:min-height 16}}]]
[:div {:on-scroll on-scroll
:class (stl/css new-css-system :tool-window-content)
:class (stl/css :tool-window-content)
:data-scroll-container true
:style {:display (when (some? filtered-objects) "none")}}
[:& layers-tree {:objects filtered-objects
:key (dm/str (:id page))
:filtered? true
:parent-size size-parent}]]]
[:div {:on-scroll on-scroll
:class (stl/css new-css-system :tool-window-content)
:class (stl/css :tool-window-content)
:data-scroll-container true
:style {:display (when (some? filtered-objects) "none")}}
[:& layers-tree {:objects objects

413
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -12,238 +12,249 @@
flex-direction: column;
overflow: auto;
box-sizing: border-box;
.tool-window-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: $s-32;
min-height: $s-32;
margin: $s-4 0 $s-4 $s-8;
padding-right: $s-8;
.page-name {
@include tabTitleTipography;
padding: 0 $s-12;
color: var(--title-foreground-color);
}
.tool-window-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: $s-32;
min-height: $s-32;
margin: $s-4 0 $s-4 $s-8;
padding-right: $s-8;
&.search {
padding: 0 $s-8 0 $s-12;
gap: $s-4;
.filter-button {
@include flexCenter;
@include buttonStyle;
height: $s-32;
width: $s-32;
margin: 0;
border: $s-1 solid var(--color-background-tertiary);
border-radius: $br-8 $br-2 $br-2 $br-8;
background-color: var(--color-background-tertiary);
svg {
height: $s-16;
width: $s-16;
stroke: var(--icon-foreground);
}
&:focus {
border: $s-1 solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-active);
color: var(--input-foreground-color-active);
svg {
background-color: var(--input-background-color-active);
}
}
&:hover {
border: $s-1 solid var(--input-background-color-hover);
background-color: var(--input-background-color-hover);
svg {
background-color: var(--input-background-color-hover);
stroke: var(--button-foreground-hover);
}
}
}
.icon-search {
.close-search {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
border-radius: $br-8;
margin-right: $s-8;
min-width: $s-28;
padding: 0;
border-radius: $br-8;
svg {
@extend .button-icon;
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
&.search {
padding: 0 $s-8 0 $s-12;
gap: $s-4;
.filter-button {
@include flexCenter;
@include buttonStyle;
height: $s-32;
width: $s-32;
margin: 0;
border: $s-1 solid var(--color-background-tertiary);
border-radius: $br-8 $br-2 $br-2 $br-8;
background-color: var(--color-background-tertiary);
svg {
height: $s-16;
width: $s-16;
stroke: var(--icon-foreground);
}
&:focus {
border: $s-1 solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-active);
color: var(--input-foreground-color-active);
svg {
background-color: var(--input-background-color-active);
}
}
&:hover {
border: $s-1 solid var(--input-background-color-hover);
background-color: var(--input-background-color-hover);
svg {
background-color: var(--input-background-color-hover);
stroke: var(--button-foreground-hover);
}
}
}
.close-search {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
min-width: $s-28;
padding: 0;
border-radius: $br-8;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
}
.focus-title {
@include buttonStyle;
display: grid;
grid-template-columns: auto 1fr auto;
width: 100%;
padding: 0;
.back-button-icon {
@include flexCenter;
height: $s-32;
width: $s-24;
padding: 0 $s-4 0 $s-8;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
transform: rotate(180deg);
}
}
.focus-name {
@include titleTipography;
display: flex;
align-items: center;
height: 100%;
padding-left: $s-4;
color: var(--title-foreground-color);
}
.focus-mode-tag-wrapper {
@include flexCenter;
height: 100%;
margin-right: $s-12;
.focus-mode-tag {
@include flexCenter;
@include titleTipography;
height: $s-20;
padding: $s-4 $s-6;
border: $s-1 solid var(--tag-background-color);
border-radius: $br-6;
color: var(--tag-background-color);
}
}
}
}
.active-filters {
@include flexRow;
flex-wrap: wrap;
margin: 0 $s-12;
.layer-filter {
@extend .button-tag;
@include buttonStyle;
gap: $s-6;
height: $s-24;
margin: $s-2 0;
border-radius: $br-6;
background-color: var(--pill-background-color);
cursor: pointer;
.layer-filter-icon,
.layer-filter-close {
@extend .button-icon-small;
stroke: var(--pill-foreground-color);
svg {
height: $s-12;
width: $s-12;
}
}
.layer-filter-name {
@include flexCenter;
@include titleTipography;
color: var(--pill-foreground-color);
}
}
}
}
.filters-container {
@extend .menu-dropdown;
top: $s-44;
left: $s-12;
width: $s-192;
.filter-menu-item {
@include titleTipography;
.page-name {
@include tabTitleTipography;
padding: 0 $s-12;
color: var(--title-foreground-color);
}
.icon-search {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
border-radius: $br-8;
margin-right: $s-8;
padding: 0;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.focus-title {
@include buttonStyle;
display: grid;
grid-template-columns: auto 1fr auto;
width: 100%;
padding: 0;
}
.back-button-icon {
@include flexCenter;
height: $s-32;
width: $s-24;
padding: 0 $s-4 0 $s-8;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
transform: rotate(180deg);
}
}
.focus-name {
@include titleTipography;
display: flex;
align-items: center;
height: 100%;
padding-left: $s-4;
color: var(--title-foreground-color);
}
.focus-mode-tag-wrapper {
@include flexCenter;
height: 100%;
margin-right: $s-12;
}
.focus-mode-tag {
@include flexCenter;
@include titleTipography;
height: $s-20;
padding: $s-4 $s-6;
border: $s-1 solid var(--tag-background-color);
border-radius: $br-6;
color: var(--tag-background-color);
}
.active-filters {
@include flexRow;
flex-wrap: wrap;
margin: 0 $s-12;
}
.layer-filter {
@extend .button-tag;
gap: $s-6;
height: $s-24;
margin: $s-2 0;
border-radius: $br-6;
background-color: var(--pill-background-color);
cursor: pointer;
}
.layer-filter-icon,
.layer-filter-close {
@extend .button-icon-small;
stroke: var(--pill-foreground-color);
svg {
height: $s-12;
width: $s-12;
}
}
.layer-filter-name {
@include flexCenter;
@include titleTipography;
color: var(--pill-foreground-color);
}
.filters-container {
@extend .menu-dropdown;
top: $s-44;
left: $s-12;
width: $s-192;
.filter-menu-item {
@include titleTipography;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: $s-6;
border-radius: $br-8;
.filter-menu-item-name-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: $s-6;
border-radius: $br-8;
.filter-menu-item-name-wrapper {
display: flex;
align-items: center;
gap: $s-8;
.filter-menu-item-icon {
svg {
@extend .button-icon-small;
stroke: var(--menu-foreground-color);
}
}
.filter-menu-item-name {
padding-top: $s-2;
color: var(--menu-foreground-color);
}
}
.filter-menu-item-tick {
gap: $s-8;
.filter-menu-item-icon {
svg {
@extend .button-icon-small;
stroke: var(--menu-foreground-color);
}
}
.filter-menu-item-name {
padding-top: $s-2;
color: var(--menu-foreground-color);
}
}
.filter-menu-item-tick {
svg {
@extend .button-icon-small;
stroke: var(--menu-foreground-color);
}
}
&.selected {
background-color: var(--menu-background-color-selected);
.filter-menu-item-name-wrapper {
.filter-menu-item-icon {
svg {
stroke: var(--menu-foreground-color);
}
}
.filter-menu-item-name {
color: var(--menu-foreground-color);
}
}
.filter-menu-item-tick {
&.selected {
background-color: var(--menu-background-color-selected);
.filter-menu-item-name-wrapper {
.filter-menu-item-icon {
svg {
stroke: var(--menu-foreground-color);
}
}
}
&:hover {
background-color: var(--menu-background-color-hover);
.filter-menu-item-name-wrapper {
.filter-menu-item-icon {
svg {
stroke: var(--menu-foreground-color-hover);
}
}
.filter-menu-item-name {
color: var(--menu-foreground-color-hover);
}
.filter-menu-item-name {
color: var(--menu-foreground-color);
}
.filter-menu-item-tick {
}
.filter-menu-item-tick {
svg {
stroke: var(--menu-foreground-color);
}
}
}
&:hover {
background-color: var(--menu-background-color-hover);
.filter-menu-item-name-wrapper {
.filter-menu-item-icon {
svg {
stroke: var(--menu-foreground-color-hover);
}
}
.filter-menu-item-name {
color: var(--menu-foreground-color-hover);
}
}
.filter-menu-item-tick {
svg {
stroke: var(--menu-foreground-color-hover);
}
}
}
}
.tool-window-content {
--calculated-height: calc($s-128 + var(--height, $s-200));
display: flex;
flex-direction: column;
height: calc(100vh - var(--calculated-height));
}
.tool-window-content {
--calculated-height: calc($s-128 + var(--height, $s-200));
display: flex;
flex-direction: column;
height: calc(100vh - var(--calculated-height));
width: 100%;
overflow-x: hidden;
overflow-y: overlay;
scrollbar-gutter: stable;
.element-list {
width: 100%;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
overflow-y: overlay;
.element-list {
width: 100%;
}
}
}

11
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
View file

@ -129,19 +129,26 @@
align-items: center;
gap: $s-2;
cursor: pointer;
color: var(--input-checkbox-text-foreground-color);
.check-mark {
@include flexCenter;
width: $s-16;
height: $s-16;
border-radius: $br-6;
background-color: var(--input-background-color);
background-color: var(--input-checkbox-inactive-background-color);
&.checked {
background-color: var(--input-border-color-active);
background-color: var(--input-checkbox-active-background-color);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
}
}
&:hover {
border-color: var(--input-checkbox-border-color-hover);
}
&:focus {
border-color: var(--input-checkbox-border-color-focus);
}
}
}
}