diff --git a/frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs b/frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs index 43972d237..85c3a6875 100644 --- a/frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs @@ -16,13 +16,13 @@ [app.util.color :as uc] [app.common.math :as mth] [app.main.ui.icons :as i] - [app.util.code-gen :as code] + [app.util.code-gen :as cg] [app.util.webapi :as wapi] [app.main.ui.components.color-bullet :refer [color-bullet color-name]])) (defn copy-cb [values properties & {:keys [to-prop format] :as params}] (fn [event] - (let [result (code/generate-css-props values properties params)] + (let [result (cg/generate-css-props values properties params)] (wapi/write-to-clipboard result)))) (mf/defc color-row [{:keys [color format on-copy on-change-format]}] diff --git a/frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs index 3a2dcf01f..4c28d0145 100644 --- a/frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs @@ -55,7 +55,7 @@ {:on-click (copy-cb shape :y :to-prop "top")} i/copy]]) - (when (not= (:rx shape) 0) + (when (and (:rx shape) (not= (:rx shape) 0)) [:div.attributes-unit-row [:div.attributes-label (t locale "handoff.attributes.layout.radius")] [:div.attributes-value (mth/precision (:rx shape) 2) "px"] diff --git a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs index 9fecb1734..1fbb6e1cb 100644 --- a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs @@ -33,7 +33,7 @@ (mf/defc right-sidebar [{:keys [frame]}] (let [locale (mf/deref i18n/locale) - section (mf/use-state #_:info :code) + section (mf/use-state :info #_:code) selected-ref (mf/use-memo (make-selected-shapes-iref)) shapes (mf/deref selected-ref)] [:aside.settings-bar.settings-bar-right diff --git a/frontend/src/app/util/code_gen.cljs b/frontend/src/app/util/code_gen.cljs index 785b592c7..f3c4f5766 100644 --- a/frontend/src/app/util/code_gen.cljs +++ b/frontend/src/app/util/code_gen.cljs @@ -14,9 +14,31 @@ [app.util.text :as ut] [app.util.color :as uc])) -(declare format-fill-color) -(declare format-stroke) -(declare shadow->css) +(defn shadow->css [shadow] + (let [{:keys [style offset-x offset-y blur spread]} shadow + css-color (uc/color->background (:color shadow))] + (str + (if (= style :inner-shadow) "inset " "") + (str/fmt "%spx %spx %spx %spx %s" offset-x offset-y blur spread css-color)))) + + +(defn format-fill-color [_ shape] + (let [color {:color (:fill-color shape) + :opacity (:fill-opacity shape) + :gradient (:fill-color-gradient shape) + :id (:fill-ref-id shape) + :file-id (:fill-ref-file-id shape)}] + (uc/color->background color))) + +(defn format-stroke [_ shape] + (let [width (:stroke-width shape) + style (name (:stroke-style shape)) + color {:color (:stroke-color shape) + :opacity (:stroke-opacity shape) + :gradient (:stroke-color-gradient shape) + :id (:stroke-ref-id shape) + :file-id (:stroke-ref-file-id shape)}] + (str/format "%spx %s %s" width style (uc/color->background color)))) (def styles-data {:layout {:props [:width :height :x :y :radius :rx] @@ -54,32 +76,6 @@ :text-transform name :fill-color format-fill-color}}) -(defn shadow->css [shadow] - (let [{:keys [style offset-x offset-y blur spread]} shadow - css-color (uc/color->background (:color shadow))] - (str - (if (= style :inner-shadow) "inset " "") - (str/fmt "%spx %spx %spx %spx %s" offset-x offset-y blur spread css-color)))) - - -(defn format-fill-color [_ shape] - (let [color {:color (:fill-color shape) - :opacity (:fill-opacity shape) - :gradient (:fill-color-gradient shape) - :id (:fill-ref-id shape) - :file-id (:fill-ref-file-id shape)}] - (uc/color->background color))) - -(defn format-stroke [_ shape] - (let [width (:stroke-width shape) - style (name (:stroke-style shape)) - color {:color (:stroke-color shape) - :opacity (:stroke-opacity shape) - :gradient (:stroke-color-gradient shape) - :id (:stroke-ref-id shape) - :file-id (:stroke-ref-file-id shape)}] - (str/format "%spx %s %s" width style (uc/color->background color)))) - (defn generate-css-props [values properties params] (let [{:keys [to-prop format tab-size] :or {to-prop {} tab-size 0}} params