Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 21:09:00 -05:00
Code Issues Activity

🐛 Fix inspect copy stroke

Browse source
This commit is contained in:
alonso.torres 2024-03-07 15:36:18 +01:00
parent 28d6cf6f51
commit 8a6882e155
1 changed files with 19 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
View file

@ -7,18 +7,14 @@
(ns app.main.ui.viewer.inspect.attributes.stroke (ns app.main.ui.viewer.inspect.attributes.stroke
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [inspect-title-bar]] [app.main.ui.components.title-bar :refer [inspect-title-bar]]
[app.main.ui.formats :as fmt]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css-formats :as cssf] [app.util.code-gen.style-css :as css]
[app.util.code-gen.style-css-values :as cssv]
[app.util.color :as uc]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def properties [:border])
(defn stroke->color [shape] (defn stroke->color [shape]
{:color (:stroke-color shape) {:color (:stroke-color shape)
:opacity (:stroke-opacity shape) :opacity (:stroke-opacity shape)
@ -31,30 +27,21 @@
(seq (:strokes shape))) (seq (:strokes shape)))
(mf/defc stroke-block (mf/defc stroke-block
[{:keys [stroke]}] {::mf/wrap-props false}
(let [color-format (mf/use-state :hex) [{:keys [objects shape]}]
color (stroke->color stroke)] (let [format* (mf/use-state :hex)
[:div {:class (stl/css :attributes-stroke-block)} format (deref format*)
(let [{:keys [stroke-style stroke-alignment]} stroke color (stroke->color shape)
stroke-style (if (= stroke-style :svg) :solid stroke-style) on-change
stroke-alignment (or stroke-alignment :center) (mf/use-fn
stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " " (fn [format]
(tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " " (reset! format* format)))]
(tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))] [:div {:class (stl/css :attributes-fill-block)}
[:& color-row
[:* {:color color
[:& color-row {:color color :format format
:format @color-format :on-change-format on-change
:copy-data (uc/color->background color) :copy-data (css/get-shape-properties-css objects {:strokes [shape]} properties)}]]))
:on-change-format #(reset! color-format %)}]
[:div {:class (stl/css :stroke-row)}
[:div {:class (stl/css :global/attr-label)}
"Border"]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}
[:div {:class (stl/css :button-children)} stroke-def]]]]])]))
(mf/defc stroke-panel (mf/defc stroke-panel
[{:keys [shapes]}] [{:keys [shapes]}]
@ -69,4 +56,4 @@
(for [shape shapes] (for [shape shapes]
(for [value (:strokes shape)] (for [value (:strokes shape)]
[:& stroke-block {:key (str "stroke-color-" (:id shape) value) [:& stroke-block {:key (str "stroke-color-" (:id shape) value)
:stroke value}]))]]))) :shape value}]))]])))