github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-08 13:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3411 from penpot/niwinz-fix-css-macros

Browse Source 
🐛 Fix CSS related macros backward compatibility
This commit is contained in:
Eva Marco 2023-07-13 07:54:03 +02:00 committed by GitHub
commit 233b9a7951
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 273 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/app/main/style.clj
View File

@ -17,10 +17,7 @@
(def ^:private xform-css (def ^:private xform-css
(map (fn [k] (map (fn [k]
(let [cn (name k)] (let [cn (name k)]
(if (and (qualified-keyword? k) (or (get *css-data* (keyword cn)) cn)))))
(= "app.main.style" (namespace k)))
(or (get *css-data* (keyword cn)) cn)
cn)))))
(defmacro css* (defmacro css*
"Just coerces all params to strings and concats them with "Just coerces all params to strings and concats them with
@ -39,6 +36,7 @@
path (str (subs fname 0 (- (count fname) 4)) "css.json") path (str (subs fname 0 (- (count fname) 4)) "css.json")
data (-> (slurp (io/resource path)) data (-> (slurp (io/resource path))
(json/read-str :key-fn keyword))] (json/read-str :key-fn keyword))]
(if (symbol? (first selectors)) (if (symbol? (first selectors))
`(if ~(with-meta (first selectors) {:tag 'boolean}) `(if ~(with-meta (first selectors) {:tag 'boolean})
(css* ~@(binding [*css-data* data] (css* ~@(binding [*css-data* data]
@ -60,14 +58,9 @@
(partition-all 2) (partition-all 2)
(keep (fn [[k v]] (keep (fn [[k v]]
(let [cls (cond (let [cls (cond
(and (qualified-keyword? k) (keyword? k)
(= "app.main.style" (namespace k)))
(let [cn (name k)] (let [cn (name k)]
(or (get *css-data* (keyword cn)) cn)) (or (get *css-data* (keyword cn)) cn))
(simple-keyword? k)
(name k)
(string? k) (string? k)
k)] k)]
(when cls (when cls

13
frontend/src/app/main/ui/workspace.cljs
View File

@ -80,17 +80,18 @@
node-ref (use-resize-observer on-resize)] node-ref (use-resize-observer on-resize)]
[:* [:*
(if new-css-system (if new-css-system
[:& palette {:layout layout}] [:& palette {:layout layout}]
[:* [:*
(when (and colorpalette? (not hide-ui?)) (when (and colorpalette? (not hide-ui?))
[:& colorpalette]) [:& colorpalette])
(when (and textpalette? (not hide-ui?)) (when (and textpalette? (not hide-ui?))
[:& textpalette])]) [:& textpalette])])
[:section.workspace-content [:section.workspace-content
{:key (dm/str "workspace-" page-id) {:key (dm/str "workspace-" page-id)
:ref node-ref} :ref node-ref}
[:section.workspace-viewport [:section.workspace-viewport
(when (debug? :coordinates) (when (debug? :coordinates)
[:& coordinates/coordinates {:colorpalette? colorpalette?}]) [:& coordinates/coordinates {:colorpalette? colorpalette?}])

411
frontend/src/app/main/ui/workspace/left_toolbar.cljs
View File

@ -74,7 +74,6 @@
hide-toolbar* (mf/use-state false) hide-toolbar* (mf/use-state false)
hide-toolbar? (deref hide-toolbar*) hide-toolbar? (deref hide-toolbar*)
interrupt interrupt
(mf/use-fn #(st/emit! :interrupt)) (mf/use-fn #(st/emit! :interrupt))
@ -139,216 +138,216 @@
(fn [] (fn []
(swap! hide-toolbar* not)))] (swap! hide-toolbar* not)))]
(if new-css-system (if new-css-system
[:aside {:class (dom/classnames (css :main-toolbar) true [:aside {:class (dom/classnames (css :main-toolbar) true
(css :hidden-toolbar) hide-toolbar?)} (css :hidden-toolbar) hide-toolbar?)}
[:ul {:class (css :main-toolbar-options)} [:ul {:class (css :main-toolbar-options)}
[:li [:li
[:button
{:title (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:class (when (and (nil? selected-drawtool)
(not edition)) "selected")
:on-click interrupt}
i/move-refactor]]
(when-not ^boolean read-only?
[:*
[:li
[:button
{:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:class (when (= selected-drawtool :frame) "selected")
:on-click select-drawtool
:data-tool "frame"
:data-test "artboard-btn"}
i/board-refactor]]
[:li
[:button
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:class (when (= selected-drawtool :rect) "selected")
:on-click select-drawtool
:data-tool "rect"
:data-test "rect-btn"}
i/rectangle-refactor]]
[:li
[:button
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:class (when (= selected-drawtool :circle) "selected")
:on-click select-drawtool
:data-tool "circle"
:data-test "ellipse-btn"}
i/elipse-refactor]]
[:li
[:button
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:class (when (= selected-drawtool :text) "selected")
:on-click select-drawtool
:data-tool "text"}
i/text-refactor]]
[:& image-upload]
[:li
[:button
{:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:class (when (= selected-drawtool :curve) "selected")
:on-click select-drawtool
:data-tool "curve"
:data-test "curve-btn"}
i/curve-refactor]]
[:li
[:button
{:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:class (when (= selected-drawtool :path) "selected")
:on-click select-drawtool
:data-tool "path"
:data-test "path-btn"}
i/pentool-refactor]]])
;; [:li
;; [:button
;; {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
;; :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
;; :class (when (= selected-drawtool :comments) "selected")
;; :on-click select-drawtool
;; :data-tool "comments"}
;; i/comments-refactor]]
]
[:button {:class (dom/classnames (css :toolbar-handler) true)
:on-click toggle-toolbar}
[:div {:class (dom/classnames (css :toolbar-handler-btn) true)}]]
[:ul {:class (dom/classnames (css :main-toolbar-panels) true)}
[:li
[:button
{:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:class (when (contains? layout :shortcuts) "selected")
:on-click toggle-shortcuts}
i/shortcut]
(when *assert*
[:button [:button
{:title "Debugging tool" {:title (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:class (when (contains? layout :debug-panel) "selected") :aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:on-click toggle-debug-panel} :class (when (and (nil? selected-drawtool)
i/bug])]]] (not edition)) "selected")
:on-click interrupt}
i/move-refactor]]
(when-not ^boolean read-only?
[:*
[:li
[:button
{:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:class (when (= selected-drawtool :frame) "selected")
:on-click select-drawtool
:data-tool "frame"
:data-test "artboard-btn"}
i/board-refactor]]
[:li
[:button
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:class (when (= selected-drawtool :rect) "selected")
:on-click select-drawtool
:data-tool "rect"
:data-test "rect-btn"}
i/rectangle-refactor]]
[:li
[:button
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:class (when (= selected-drawtool :circle) "selected")
:on-click select-drawtool
:data-tool "circle"
:data-test "ellipse-btn"}
i/elipse-refactor]]
[:li
[:button
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:class (when (= selected-drawtool :text) "selected")
:on-click select-drawtool
:data-tool "text"}
i/text-refactor]]
[:& image-upload]
[:aside.left-toolbar [:li
[:ul.left-toolbar-options [:button
[:li {:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
[:button :aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
{:title (tr "workspace.toolbar.move" (sc/get-tooltip :move)) :class (when (= selected-drawtool :curve) "selected")
:aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move)) :on-click select-drawtool
:class (when (and (nil? selected-drawtool) :data-tool "curve"
(not edition)) "selected") :data-test "curve-btn"}
:on-click interrupt} i/curve-refactor]]
i/pointer-inner]] [:li
(when-not ^boolean read-only? [:button
[:* {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
[:li :aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
[:button :class (when (= selected-drawtool :path) "selected")
{:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) :on-click select-drawtool
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame)) :data-tool "path"
:class (when (= selected-drawtool :frame) "selected") :data-test "path-btn"}
:on-click select-drawtool i/pentool-refactor]]])
:data-tool "frame"
:data-test "artboard-btn"}
i/artboard]]
[:li
[:button
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:class (when (= selected-drawtool :rect) "selected")
:on-click select-drawtool
:data-tool "rect"
:data-test "rect-btn"}
i/box]]
[:li
[:button
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:class (when (= selected-drawtool :circle) "selected")
:on-click select-drawtool
:data-tool "circle"
:data-test "ellipse-btn"}
i/circle]]
[:li
[:button
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:class (when (= selected-drawtool :text) "selected")
:on-click select-drawtool
:data-tool "text"}
i/text]]
[:& image-upload] ;; [:li
;; [:button
;; {:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
;; :aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
;; :class (when (= selected-drawtool :comments) "selected")
;; :on-click select-drawtool
;; :data-tool "comments"}
;; i/comments-refactor]]
]
[:button {:class (dom/classnames (css :toolbar-handler) true)
:on-click toggle-toolbar}
[:div {:class (dom/classnames (css :toolbar-handler-btn) true)}]]
[:li [:ul {:class (dom/classnames (css :main-toolbar-panels) true)}
[:button [:li
{:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:class (when (= selected-drawtool :curve) "selected")
:on-click select-drawtool
:data-tool "curve"
:data-test "curve-btn"}
i/pencil]]
[:li
[:button
{:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:class (when (= selected-drawtool :path) "selected")
:on-click select-drawtool
:data-tool "path"
:data-test "path-btn"}
i/pen]]])
[:li
[:button
{:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:class (when (= selected-drawtool :comments) "selected")
:on-click select-drawtool
:data-tool "comments"}
i/chat]]]
[:ul.left-toolbar-options.panels
(when ^boolean show-palette-btn?
[:*
[:li
[:button
{:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:class (when (contains? layout :textpalette) "selected")
:on-click toggle-text-palette}
"Ag"]]
[:li
[:button
{:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:class (when (contains? layout :colorpalette) "selected")
:on-click toggle-color-palette}
i/palette]]])
[:li
[:button
{:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:class (when (contains? layout :shortcuts) "selected")
:on-click toggle-shortcuts}
i/shortcut]
(when *assert*
[:button [:button
{:title "Debugging tool" {:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:class (when (contains? layout :debug-panel) "selected") :aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:on-click toggle-debug-panel} :class (when (contains? layout :shortcuts) "selected")
i/bug])]]]))) :on-click toggle-shortcuts}
i/shortcut]
(when *assert*
[:button
{:title "Debugging tool"
:class (when (contains? layout :debug-panel) "selected")
:on-click toggle-debug-panel}
i/bug])]]]
[:aside.left-toolbar
[:ul.left-toolbar-options
[:li
[:button
{:title (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:aria-label (tr "workspace.toolbar.move" (sc/get-tooltip :move))
:class (when (and (nil? selected-drawtool)
(not edition)) "selected")
:on-click interrupt}
i/pointer-inner]]
(when-not ^boolean read-only?
[:*
[:li
[:button
{:title (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:aria-label (tr "workspace.toolbar.frame" (sc/get-tooltip :draw-frame))
:class (when (= selected-drawtool :frame) "selected")
:on-click select-drawtool
:data-tool "frame"
:data-test "artboard-btn"}
i/artboard]]
[:li
[:button
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:aria-label (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
:class (when (= selected-drawtool :rect) "selected")
:on-click select-drawtool
:data-tool "rect"
:data-test "rect-btn"}
i/box]]
[:li
[:button
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:aria-label (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
:class (when (= selected-drawtool :circle) "selected")
:on-click select-drawtool
:data-tool "circle"
:data-test "ellipse-btn"}
i/circle]]
[:li
[:button
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:aria-label (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
:class (when (= selected-drawtool :text) "selected")
:on-click select-drawtool
:data-tool "text"}
i/text]]
[:& image-upload]
[:li
[:button
{:title (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:aria-label (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve))
:class (when (= selected-drawtool :curve) "selected")
:on-click select-drawtool
:data-tool "curve"
:data-test "curve-btn"}
i/pencil]]
[:li
[:button
{:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:aria-label (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
:class (when (= selected-drawtool :path) "selected")
:on-click select-drawtool
:data-tool "path"
:data-test "path-btn"}
i/pen]]])
[:li
[:button
{:title (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:aria-label (tr "workspace.toolbar.comments" (sc/get-tooltip :add-comment))
:class (when (= selected-drawtool :comments) "selected")
:on-click select-drawtool
:data-tool "comments"}
i/chat]]]
[:ul.left-toolbar-options.panels
(when ^boolean show-palette-btn?
[:*
[:li
[:button
{:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:aria-label (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
:class (when (contains? layout :textpalette) "selected")
:on-click toggle-text-palette}
"Ag"]]
[:li
[:button
{:title (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:aria-label (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
:class (when (contains? layout :colorpalette) "selected")
:on-click toggle-color-palette}
i/palette]]])
[:li
[:button
{:title (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:aria-label (tr "workspace.toolbar.shortcuts" (sc/get-tooltip :show-shortcuts))
:class (when (contains? layout :shortcuts) "selected")
:on-click toggle-shortcuts}
i/shortcut]
(when *assert*
[:button
{:title "Debugging tool"
:class (when (contains? layout :debug-panel) "selected")
:on-click toggle-debug-panel}
i/bug])]]])))

12
frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
View File

@ -87,7 +87,7 @@
(if ^boolean edition? (if ^boolean edition?
[:input [:input
{:class (stl/css new-css-system ::stl/element-name ::stl/element-name-input) {:class (stl/css new-css-system :element-name :element-name-input)
:style {"--depth" depth "--parent-size" parent-size} :style {"--depth" depth "--parent-size" parent-size}
:type "text" :type "text"
:ref ref :ref ref
@ -98,11 +98,11 @@
[:span [:span
{:class (if ^boolean new-css-system {:class (if ^boolean new-css-system
(stl/css-case (stl/css-case
::stl/element-name true :element-name true
::stl/selected selected? :selected selected?
::stl/hidden hidden? :hidden hidden?
::stl/type-comp type-comp :type-comp type-comp
::stl/type-frame type-frame) :type-frame type-frame)
(stl/css* :element-name)) (stl/css* :element-name))
:style {"--depth" depth "--parent-size" parent-size} :style {"--depth" depth "--parent-size" parent-size}
:ref ref :ref ref

104
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View File

@ -46,7 +46,7 @@
root (get objects uuid/zero) root (get objects uuid/zero)
new-css-system (mf/use-ctx ctx/new-css-system)] new-css-system (mf/use-ctx ctx/new-css-system)]
[:ul [:ul
{:class (stl/css new-css-system ::stl/element-list)} {:class (stl/css new-css-system :element-list)}
[:& hooks/sortable-container {} [:& hooks/sortable-container {}
(for [[index id] (reverse (d/enumerate (:shapes root)))] (for [[index id] (reverse (d/enumerate (:shapes root)))]
(when-let [obj (get objects id)] (when-let [obj (get objects id)]
@ -80,7 +80,7 @@
selected (hooks/use-equal-memo selected) selected (hooks/use-equal-memo selected)
root (get objects uuid/zero) root (get objects uuid/zero)
new-css-system (mf/use-ctx ctx/new-css-system)] new-css-system (mf/use-ctx ctx/new-css-system)]
[:ul {:class (stl/css new-css-system ::stl/element-list)} [:ul {:class (stl/css new-css-system :element-list)}
(for [[index id] (d/enumerate (:shapes root))] (for [[index id] (d/enumerate (:shapes root))]
(when-let [obj (get objects id)] (when-let [obj (get objects id)]
[:& layer-item [:& layer-item
@ -248,7 +248,7 @@
#(mf/html #(mf/html
(if show-search? (if show-search?
[:* [:*
[:div {:class (stl/css new-css-system ::stl/tool-window-bar ::stl/search)} [:div {:class (stl/css new-css-system :tool-window-bar :search)}
(if ^boolean new-css-system (if ^boolean new-css-system
[:& search-bar [:& search-bar
{:on-change update-search-text-v2 {:on-change update-search-text-v2
@ -258,7 +258,7 @@
[:button [:button
{:on-click toggle-filters {:on-click toggle-filters
:class (stl/css-case :class (stl/css-case
::stl/filters-button true :filters-button true
:active active?)} :active active?)}
i/filter-refactor]] i/filter-refactor]]
@ -276,13 +276,13 @@
(when (not (= "" current-search)) (when (not (= "" current-search))
[:button.clear {:on-click clear-search-text} i/exclude])]]) [:button.clear {:on-click clear-search-text} i/exclude])]])
[:button {:class (stl/css-case ::stl/close-search new-css-system) [:button {:class (stl/css-case :close-search new-css-system)
:on-click toggle-search} :on-click toggle-search}
(if ^boolean new-css-system (if ^boolean new-css-system
i/close-refactor i/close-refactor
i/cross)]] i/cross)]]
[:div {:class (stl/css new-css-system ::stl/active-filters)} [:div {:class (stl/css new-css-system :active-filters)}
(for [fkey current-filters] (for [fkey current-filters]
(let [fname (d/name fkey) (let [fname (d/name fkey)
name (case fkey name (case fkey
@ -295,17 +295,17 @@
:shape (tr "workspace.sidebar.layers.shapes") :shape (tr "workspace.sidebar.layers.shapes")
(tr fkey))] (tr fkey))]
(if ^boolean new-css-system (if ^boolean new-css-system
[:button {:class (stl/css ::stl/layer-filter) [:button {:class (stl/css :layer-filter)
:key fname :key fname
:data-filter fname :data-filter fname
:on-click remove-filter} :on-click remove-filter}
[:span {:class (stl/css ::stl/layer-filter-icon)} [:span {:class (stl/css :layer-filter-icon)}
[:& sic/element-icon-refactor-by-type [:& sic/element-icon-refactor-by-type
{:type fkey {:type fkey
:main-instance? (= fkey :component)}]] :main-instance? (= fkey :component)}]]
[:span {:class (stl/css ::stl/layer-filter-name)} [:span {:class (stl/css :layer-filter-name)}
name] name]
[:span {:class (stl/css ::stl/layer-filter-close)} [:span {:class (stl/css :layer-filter-close)}
i/close-small-refactor]] i/close-small-refactor]]
[:span {:on-click remove-filter [:span {:on-click remove-filter
@ -315,89 +315,89 @@
(when ^boolean show-menu? (when ^boolean show-menu?
(if ^boolean new-css-system (if ^boolean new-css-system
[:ul {:class (stl/css ::stl/filters-container)} [:ul {:class (stl/css :filters-container)}
[:li {:class (stl/css-case [:li {:class (stl/css-case
::stl/filter-menu-item true :filter-menu-item true
::stl/selected (contains? current-filters :frame)) :selected (contains? current-filters :frame))
:data-filter "frame" :data-filter "frame"
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/board-refactor] [:span {:class (stl/css :filter-menu-item-icon)} i/board-refactor]
[:span {:class (stl/css ::stl/filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.frames")]] (tr "workspace.sidebar.layers.frames")]]
(when (contains? current-filters :frame) (when (contains? current-filters :frame)
[:span {:class (stl/css ::stl/filter-menu-item-tick)} i/tick-refactor])] [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case [:li {:class (stl/css-case
::stl/filter-menu-item true :filter-menu-item true
::stl/selected (contains? current-filters :group)) :selected (contains? current-filters :group))
:data-filter "group" :data-filter "group"
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/group-refactor] [:span {:class (stl/css :filter-menu-item-icon)} i/group-refactor]
[:span {:class (stl/css ::stl/filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.groups")]] (tr "workspace.sidebar.layers.groups")]]
(when (contains? current-filters :group) (when (contains? current-filters :group)
[:span {:class (stl/css ::stl/filter-menu-item-tick)} i/tick-refactor])] [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case [:li {:class (stl/css-case
:filter-menu-item true :filter-menu-item true
:selected (contains? current-filters :mask)) :selected (contains? current-filters :mask))
:data-filter "mask" :data-filter "mask"
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/mask-refactor] [:span {:class (stl/css :filter-menu-item-icon)} i/mask-refactor]
[:span {:class (stl/css ::stl/filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.masks")]] (tr "workspace.sidebar.layers.masks")]]
(when (contains? current-filters :mask) (when (contains? current-filters :mask)
[:span {:class (stl/css ::stl/filter-menu-item-tick)} i/tick-refactor])] [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case [:li {:class (stl/css-case
:filter-menu-item true :filter-menu-item true
:selected (contains? current-filters :component)) :selected (contains? current-filters :component))
:data-filter "component" :data-filter "component"
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/component-refactor] [:span {:class (stl/css :filter-menu-item-icon)} i/component-refactor]
[:span {:class (stl/css ::stl/filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.components")]] (tr "workspace.sidebar.layers.components")]]
(when (contains? current-filters :component) (when (contains? current-filters :component)
[:span {:class (stl/css ::stl/filter-menu-item-tick)} i/tick-refactor])] [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case [:li {:class (stl/css-case
:filter-menu-item true :filter-menu-item true
:selected (contains? current-filters :text)) :selected (contains? current-filters :text))
:data-filter "text" :data-filter "text"
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/text-refactor] [:span {:class (stl/css :filter-menu-item-icon)} i/text-refactor]
[:span {:class (stl/css ::stl/filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.texts")]] (tr "workspace.sidebar.layers.texts")]]
(when (contains? current-filters :text) (when (contains? current-filters :text)
[:span {:class (stl/css ::stl/filter-menu-item-tick)} i/tick-refactor])] [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case [:li {:class (stl/css-case
:filter-menu-item true :filter-menu-item true
:selected (contains? current-filters :image)) :selected (contains? current-filters :image))
:data-filter "image" :data-filter "image"
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/img-refactor] [:span {:class (stl/css :filter-menu-item-icon)} i/img-refactor]
[:span {:class (stl/css ::stl/filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.images")]] (tr "workspace.sidebar.layers.images")]]
(when (contains? current-filters :image) (when (contains? current-filters :image)
[:span {:class (stl/css ::stl/filter-menu-item-tick)} i/tick-refactor])] [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
[:li {:class (stl/css-case [:li {:class (stl/css-case
:filter-menu-item true :filter-menu-item true
:selected (contains? current-filters :shape)) :selected (contains? current-filters :shape))
:data-filter "shape" :data-filter "shape"
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/path-refactor] [:span {:class (stl/css :filter-menu-item-icon)} i/path-refactor]
[:span {:class (stl/css ::stl/filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.shapes")]] (tr "workspace.sidebar.layers.shapes")]]
(when (contains? current-filters :shape) (when (contains? current-filters :shape)
[:span {:class (stl/css ::stl/filter-menu-item-tick)} i/tick-refactor])]] [:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]]
[:div.filters-container [:div.filters-container
[:span {:data-filter "frame" [:span {:data-filter "frame"
@ -513,31 +513,31 @@
[:div#layers [:div#layers
{:class (if ^boolean new-css-system {:class (if ^boolean new-css-system
(stl/css ::stl/layers) (stl/css :layers)
(stl/css* :tool-window))} (stl/css* :tool-window))}
(if (d/not-empty? focus) (if (d/not-empty? focus)
[:div [:div
{:class (stl/css new-css-system ::stl/tool-window-bar)} {:class (stl/css new-css-system :tool-window-bar)}
[:button {:class (stl/css new-css-system :focus-title) [:button {:class (stl/css new-css-system :focus-title)
:on-click #(st/emit! (dw/toggle-focus-mode))} :on-click #(st/emit! (dw/toggle-focus-mode))}
[:span {:class (stl/css new-css-system ::stl/back-button)} [:span {:class (stl/css new-css-system :back-button)}
(if ^boolean new-css-system (if ^boolean new-css-system
i/arrow-refactor i/arrow-refactor
i/arrow-slide)] i/arrow-slide)]
[:div {:class (stl/css new-css-system ::stl/focus-name)} [:div {:class (stl/css new-css-system :focus-name)}
(or title (tr "workspace.sidebar.layers"))] (or title (tr "workspace.sidebar.layers"))]
(if ^boolean new-css-system (if ^boolean new-css-system
[:div {:class (stl/css ::stl/focus-mode-tag-wrapper)} [:div {:class (stl/css :focus-mode-tag-wrapper)}
[:div {:class (stl/css ::stl/focus-mode-tag)} (tr "workspace.focus.focus-mode")]] [:div {:class (stl/css :focus-mode-tag)} (tr "workspace.focus.focus-mode")]]
[:div.focus-mode (tr "workspace.focus.focus-mode")])]] [:div.focus-mode (tr "workspace.focus.focus-mode")])]]
(filter-component)) (filter-component))
(if (some? filtered-objects) (if (some? filtered-objects)
[:* [:*
[:div {:class (stl/css new-css-system ::stl/tool-window-content) [:div {:class (stl/css new-css-system :tool-window-content)
:ref on-render-container} :ref on-render-container}
[:& filters-tree {:objects filtered-objects [:& filters-tree {:objects filtered-objects
:key (dm/str (:id page)) :key (dm/str (:id page))
@ -545,7 +545,7 @@
[:div.lazy {:ref lazy-load-ref [:div.lazy {:ref lazy-load-ref
:style {:min-height 16}}]] :style {:min-height 16}}]]
[:div {:on-scroll on-scroll [:div {:on-scroll on-scroll
:class (stl/css new-css-system ::stl/tool-window-content) :class (stl/css new-css-system :tool-window-content)
:style {:display (when (some? filtered-objects) "none")}} :style {:display (when (some? filtered-objects) "none")}}
[:& layers-tree {:objects filtered-objects [:& layers-tree {:objects filtered-objects
:key (dm/str (:id page)) :key (dm/str (:id page))
@ -553,7 +553,7 @@
:parent-size size-parent}]]] :parent-size size-parent}]]]
[:div {:on-scroll on-scroll [:div {:on-scroll on-scroll
:class (stl/css new-css-system ::stl/tool-window-content) :class (stl/css new-css-system :tool-window-content)
:style {:display (when (some? filtered-objects) "none")}} :style {:display (when (some? filtered-objects) "none")}}
[:& layers-tree {:objects objects [:& layers-tree {:objects objects
:key (dm/str (:id page)) :key (dm/str (:id page))