Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -05:00
Code Issues Activity

🐛 Fixes problem with css generation.

Browse source
This commit is contained in:
alonso.torres 2020-10-30 09:42:04 +01:00 • committed by Hirunatan
parent 96098be5ae
commit 6feccd5e36
4 changed files with 29 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/main/ui/viewer/handoff/attributes/common.cljs
View file

@ -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]}]

2
frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs
View file

@ -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"]

2
frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs
View file

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

54
frontend/src/app/util/code_gen.cljs
View file

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