diff --git a/frontend/src/app/main/style.clj b/frontend/src/app/main/style.clj index 4557e17118..7ce0585cec 100644 --- a/frontend/src/app/main/style.clj +++ b/frontend/src/app/main/style.clj @@ -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 diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 85c32b1bfc..34c054aacf 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -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?}]) diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index 0a08ee4787..a2c5549210 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -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])]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs index 77e7590510..e1535cc4bf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 311ea0c9c5..1fd8cef7d2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -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))