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

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