mirror of
https://github.com/penpot/penpot.git
synced 2025-04-04 19:11:20 -05:00
Merge pull request #3411 from penpot/niwinz-fix-css-macros
🐛 Fix CSS related macros backward compatibility
This commit is contained in:
Eva Marco
GitHub
commit
233b9a7951
5 changed files with 273 additions and 280 deletions
|
|
@ -17,10 +17,7 @@
|
|||
(def ^:private xform-css
|
||||
(map (fn [k]
|
||||
(let [cn (name k)]
|
||||
(if (and (qualified-keyword? k)
|
||||
(= "app.main.style" (namespace k)))
|
||||
(or (get *css-data* (keyword cn)) cn)
|
||||
cn)))))
|
||||
(or (get *css-data* (keyword cn)) cn)))))
|
||||
|
||||
(defmacro css*
|
||||
"Just coerces all params to strings and concats them with
|
||||
|
|
@ -39,6 +36,7 @@
|
|||
path (str (subs fname 0 (- (count fname) 4)) "css.json")
|
||||
data (-> (slurp (io/resource path))
|
||||
(json/read-str :key-fn keyword))]
|
||||
|
||||
(if (symbol? (first selectors))
|
||||
`(if ~(with-meta (first selectors) {:tag 'boolean})
|
||||
(css* ~@(binding [*css-data* data]
|
||||
|
|
@ -60,14 +58,9 @@
|
|||
(partition-all 2)
|
||||
(keep (fn [[k v]]
|
||||
(let [cls (cond
|
||||
(and (qualified-keyword? k)
|
||||
(= "app.main.style" (namespace k)))
|
||||
(keyword? k)
|
||||
(let [cn (name k)]
|
||||
(or (get *css-data* (keyword cn)) cn))
|
||||
|
||||
(simple-keyword? k)
|
||||
(name k)
|
||||
|
||||
(string? k)
|
||||
k)]
|
||||
(when cls
|
||||
|
|
|
|||
|
|
@ -80,17 +80,18 @@
|
|||
node-ref (use-resize-observer on-resize)]
|
||||
[:*
|
||||
(if new-css-system
|
||||
[:& palette {:layout layout}]
|
||||
[:*
|
||||
(when (and colorpalette? (not hide-ui?))
|
||||
[:& colorpalette])
|
||||
[:& palette {:layout layout}]
|
||||
[:*
|
||||
(when (and colorpalette? (not hide-ui?))
|
||||
[:& colorpalette])
|
||||
|
||||
(when (and textpalette? (not hide-ui?))
|
||||
[:& textpalette])])
|
||||
(when (and textpalette? (not hide-ui?))
|
||||
[:& textpalette])])
|
||||
|
||||
[:section.workspace-content
|
||||
{:key (dm/str "workspace-" page-id)
|
||||
:ref node-ref}
|
||||
|
||||
[:section.workspace-viewport
|
||||
(when (debug? :coordinates)
|
||||
[:& coordinates/coordinates {:colorpalette? colorpalette?}])
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@
|
|||
hide-toolbar* (mf/use-state false)
|
||||
hide-toolbar? (deref hide-toolbar*)
|
||||
|
||||
|
||||
interrupt
|
||||
(mf/use-fn #(st/emit! :interrupt))
|
||||
|
||||
|
|
@ -139,216 +138,216 @@
|
|||
(fn []
|
||||
(swap! hide-toolbar* not)))]
|
||||
|
||||
(if new-css-system
|
||||
[:aside {:class (dom/classnames (css :main-toolbar) true
|
||||
(css :hidden-toolbar) hide-toolbar?)}
|
||||
[:ul {:class (css :main-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/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*
|
||||
(if new-css-system
|
||||
[:aside {:class (dom/classnames (css :main-toolbar) true
|
||||
(css :hidden-toolbar) hide-toolbar?)}
|
||||
[:ul {:class (css :main-toolbar-options)}
|
||||
[:li
|
||||
[:button
|
||||
{:title "Debugging tool"
|
||||
:class (when (contains? layout :debug-panel) "selected")
|
||||
:on-click toggle-debug-panel}
|
||||
i/bug])]]]
|
||||
{: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]
|
||||
|
||||
[: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]]
|
||||
[: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]]])
|
||||
|
||||
[:& 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
|
||||
[: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*
|
||||
[:ul {:class (dom/classnames (css :main-toolbar-panels) true)}
|
||||
[:li
|
||||
[:button
|
||||
{:title "Debugging tool"
|
||||
:class (when (contains? layout :debug-panel) "selected")
|
||||
:on-click toggle-debug-panel}
|
||||
i/bug])]]])))
|
||||
{: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])]]]
|
||||
|
||||
|
||||
[: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])]]])))
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
|
||||
(if ^boolean edition?
|
||||
[: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}
|
||||
:type "text"
|
||||
:ref ref
|
||||
|
|
@ -98,11 +98,11 @@
|
|||
[:span
|
||||
{:class (if ^boolean new-css-system
|
||||
(stl/css-case
|
||||
::stl/element-name true
|
||||
::stl/selected selected?
|
||||
::stl/hidden hidden?
|
||||
::stl/type-comp type-comp
|
||||
::stl/type-frame type-frame)
|
||||
:element-name true
|
||||
:selected selected?
|
||||
:hidden hidden?
|
||||
:type-comp type-comp
|
||||
:type-frame type-frame)
|
||||
(stl/css* :element-name))
|
||||
:style {"--depth" depth "--parent-size" parent-size}
|
||||
:ref ref
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
root (get objects uuid/zero)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
[:ul
|
||||
{:class (stl/css new-css-system ::stl/element-list)}
|
||||
{:class (stl/css new-css-system :element-list)}
|
||||
[:& hooks/sortable-container {}
|
||||
(for [[index id] (reverse (d/enumerate (:shapes root)))]
|
||||
(when-let [obj (get objects id)]
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
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 ::stl/element-list)}
|
||||
[:ul {:class (stl/css new-css-system :element-list)}
|
||||
(for [[index id] (d/enumerate (:shapes root))]
|
||||
(when-let [obj (get objects id)]
|
||||
[:& layer-item
|
||||
|
|
@ -248,7 +248,7 @@
|
|||
#(mf/html
|
||||
(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
|
||||
[:& search-bar
|
||||
{:on-change update-search-text-v2
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
[:button
|
||||
{:on-click toggle-filters
|
||||
:class (stl/css-case
|
||||
::stl/filters-button true
|
||||
:filters-button true
|
||||
:active active?)}
|
||||
i/filter-refactor]]
|
||||
|
||||
|
|
@ -276,13 +276,13 @@
|
|||
(when (not (= "" current-search))
|
||||
[: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}
|
||||
(if ^boolean new-css-system
|
||||
i/close-refactor
|
||||
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]
|
||||
(let [fname (d/name fkey)
|
||||
name (case fkey
|
||||
|
|
@ -295,17 +295,17 @@
|
|||
:shape (tr "workspace.sidebar.layers.shapes")
|
||||
(tr fkey))]
|
||||
(if ^boolean new-css-system
|
||||
[:button {:class (stl/css ::stl/layer-filter)
|
||||
[:button {:class (stl/css :layer-filter)
|
||||
:key fname
|
||||
:data-filter fname
|
||||
: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
|
||||
{:type fkey
|
||||
:main-instance? (= fkey :component)}]]
|
||||
[:span {:class (stl/css ::stl/layer-filter-name)}
|
||||
[:span {:class (stl/css :layer-filter-name)}
|
||||
name]
|
||||
[:span {:class (stl/css ::stl/layer-filter-close)}
|
||||
[:span {:class (stl/css :layer-filter-close)}
|
||||
i/close-small-refactor]]
|
||||
|
||||
[:span {:on-click remove-filter
|
||||
|
|
@ -315,89 +315,89 @@
|
|||
|
||||
(when ^boolean show-menu?
|
||||
(if ^boolean new-css-system
|
||||
[:ul {:class (stl/css ::stl/filters-container)}
|
||||
[:ul {:class (stl/css :filters-container)}
|
||||
[:li {:class (stl/css-case
|
||||
::stl/filter-menu-item true
|
||||
::stl/selected (contains? current-filters :frame))
|
||||
:filter-menu-item true
|
||||
:selected (contains? current-filters :frame))
|
||||
:data-filter "frame"
|
||||
:on-click add-filter}
|
||||
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)}
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/board-refactor]
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-name)}
|
||||
[: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 ::stl/filter-menu-item-tick)} i/tick-refactor])]
|
||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]
|
||||
|
||||
[:li {:class (stl/css-case
|
||||
::stl/filter-menu-item true
|
||||
::stl/selected (contains? current-filters :group))
|
||||
:filter-menu-item true
|
||||
:selected (contains? current-filters :group))
|
||||
:data-filter "group"
|
||||
:on-click add-filter}
|
||||
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)}
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/group-refactor]
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-name)}
|
||||
[: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 :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
|
||||
:filter-menu-item true
|
||||
:selected (contains? current-filters :mask))
|
||||
:data-filter "mask"
|
||||
:on-click add-filter}
|
||||
[:div {:class (stl/css ::stl/filter-menu-item-name-wrapper)}
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/mask-refactor]
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-name)}
|
||||
[: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 ::stl/filter-menu-item-tick)} i/tick-refactor])]
|
||||
[: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 ::stl/filter-menu-item-name-wrapper)}
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/component-refactor]
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-name)}
|
||||
[: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 ::stl/filter-menu-item-tick)} i/tick-refactor])]
|
||||
[: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 ::stl/filter-menu-item-name-wrapper)}
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/text-refactor]
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-name)}
|
||||
[: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 ::stl/filter-menu-item-tick)} i/tick-refactor])]
|
||||
[: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 ::stl/filter-menu-item-name-wrapper)}
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/img-refactor]
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-name)}
|
||||
[: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 ::stl/filter-menu-item-tick)} i/tick-refactor])]
|
||||
[: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 ::stl/filter-menu-item-name-wrapper)}
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-icon)} i/path-refactor]
|
||||
[:span {:class (stl/css ::stl/filter-menu-item-name)}
|
||||
[: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 ::stl/filter-menu-item-tick)} i/tick-refactor])]]
|
||||
[:span {:class (stl/css :filter-menu-item-tick)} i/tick-refactor])]]
|
||||
|
||||
[:div.filters-container
|
||||
[:span {:data-filter "frame"
|
||||
|
|
@ -513,31 +513,31 @@
|
|||
|
||||
[:div#layers
|
||||
{:class (if ^boolean new-css-system
|
||||
(stl/css ::stl/layers)
|
||||
(stl/css :layers)
|
||||
(stl/css* :tool-window))}
|
||||
(if (d/not-empty? focus)
|
||||
[: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)
|
||||
: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
|
||||
i/arrow-refactor
|
||||
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"))]
|
||||
|
||||
(if ^boolean new-css-system
|
||||
[:div {:class (stl/css ::stl/focus-mode-tag-wrapper)}
|
||||
[:div {:class (stl/css ::stl/focus-mode-tag)} (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")]]
|
||||
[:div.focus-mode (tr "workspace.focus.focus-mode")])]]
|
||||
|
||||
(filter-component))
|
||||
|
||||
(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}
|
||||
[:& filters-tree {:objects filtered-objects
|
||||
:key (dm/str (:id page))
|
||||
|
|
@ -545,7 +545,7 @@
|
|||
[:div.lazy {:ref lazy-load-ref
|
||||
:style {:min-height 16}}]]
|
||||
[: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")}}
|
||||
[:& layers-tree {:objects filtered-objects
|
||||
:key (dm/str (:id page))
|
||||
|
|
@ -553,7 +553,7 @@
|
|||
:parent-size size-parent}]]]
|
||||
|
||||
[: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")}}
|
||||
[:& layers-tree {:objects objects
|
||||
:key (dm/str (:id page))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue