Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-26 16:56:11 -05:00
Code Issues Activity

🐛 Fix backward compatibility of css related macros

Browse source
This commit is contained in:
Andrey Antukh 2023-07-12 15:24:48 +02:00
parent 9713f2859f
commit b6e9ea1d60
4 changed files with 61 additions and 69 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

1
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))

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))