diff --git a/CHANGES.md b/CHANGES.md index 433534c025..efcba90dec 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -11,6 +11,7 @@ ### :sparkles: New features & Enhancements ### :bug: Bugs fixed +- Display strokes information in inspect tab [Taiga #11154](https://tree.taiga.io/project/penpot/issue/11154) - Fix problem with booleans selection [Taiga #11627](https://tree.taiga.io/project/penpot/issue/11627) - Fix missing font when copy&paste a chunk of text [Taiga #11522](https://tree.taiga.io/project/penpot/issue/11522) diff --git a/frontend/src/app/main/ui/inspect/attributes.cljs b/frontend/src/app/main/ui/inspect/attributes.cljs index 661b808f0a..1e86b08eaa 100644 --- a/frontend/src/app/main/ui/inspect/attributes.cljs +++ b/frontend/src/app/main/ui/inspect/attributes.cljs @@ -27,13 +27,12 @@ [rumext.v2 :as mf])) (def type->options - {:multiple [:fill :stroke :image :text :shadow :blur :layout-element] + {:multiple [:fill :stroke :text :shadow :blur :layout-element] :frame [:visibility :geometry :fill :stroke :shadow :blur :layout :layout-element] :group [:visibility :geometry :svg :layout-element] :rect [:visibility :geometry :fill :stroke :shadow :blur :svg :layout-element] :circle [:visibility :geometry :fill :stroke :shadow :blur :svg :layout-element] :path [:visibility :geometry :fill :stroke :shadow :blur :svg :layout-element] - :image [:visibility :image :geometry :fill :stroke :shadow :blur :svg :layout-element] :text [:visibility :geometry :text :shadow :blur :stroke :layout-element] :variant [:variant :geometry :fill :stroke :shadow :blur :layout :layout-element]}) diff --git a/frontend/src/app/main/ui/inspect/attributes/stroke.cljs b/frontend/src/app/main/ui/inspect/attributes/stroke.cljs index e276172a81..9f9f10a65f 100644 --- a/frontend/src/app/main/ui/inspect/attributes/stroke.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/stroke.cljs @@ -7,13 +7,14 @@ (ns app.main.ui.inspect.attributes.stroke (:require-macros [app.main.style :as stl]) (:require + [app.main.ui.components.copy-button :refer [copy-button*]] [app.main.ui.components.title-bar :refer [inspect-title-bar*]] - [app.main.ui.inspect.attributes.common :refer [color-row]] + [app.main.ui.inspect.attributes.common :as cmm] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) -(def ^:private properties [:border]) +(def ^:private properties [:border-style :border-width]) (defn- stroke->color [shape] {:color (:stroke-color shape) @@ -28,16 +29,27 @@ (mf/defc stroke-block {::mf/wrap-props false} - [{:keys [objects shape]}] + [{:keys [objects shape stroke]}] (let [format* (mf/use-state :hex) format (deref format*) - color (stroke->color shape) + color (stroke->color stroke) on-change (mf/use-fn (fn [format] (reset! format* format)))] [:div {:class (stl/css :attributes-fill-block)} - [:& color-row + (for [property properties] + (let [property-name (cmm/get-css-rule-humanized property) + property-value (css/get-css-value objects stroke property)] + [:div {:class (stl/css :stroke-row)} + [:div {:class (stl/css :global/attr-label) + :key (str "stroke-" (:id shape) "-" property)} + property-name] + [:div {:class (stl/css :global/attr-value)} + + [:> copy-button* {:data (css/get-css-property objects stroke property)} + [:div {:class (stl/css :button-children)} property-value]]]])) + [:& cmm/color-row {:color color :format format :on-change-format on-change @@ -54,6 +66,7 @@ [:div {:class (stl/css :attributes-content)} (for [shape shapes] - (for [value (:strokes shape)] - [:& stroke-block {:key (str "stroke-color-" (:id shape) value) - :shape value}]))]]))) + (for [stroke (:strokes shape)] + [:& stroke-block {:key (str "stroke-color-" (:id shape) stroke) + :shape shape + :stroke stroke}]))]]))) diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 4a235339e6..2e47e882ed 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/frontend/src/app/util/code_gen/style_css.cljs @@ -297,6 +297,7 @@ body { (format-css-property options)))) (defn get-css-value + "Get the CSS value for a given property of a shape." ([objects shape property] (get-css-value objects shape property nil)) diff --git a/frontend/src/app/util/code_gen/style_css_formats.cljs b/frontend/src/app/util/code_gen/style_css_formats.cljs index c73593474e..66e5d3b726 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/frontend/src/app/util/code_gen/style_css_formats.cljs @@ -25,6 +25,8 @@ :background :color :border :border :border-radius :string-or-size-array + :border-width :border-width + :border-style :border-style :box-shadow :shadows :filter :blur :gap :size-array @@ -92,6 +94,14 @@ (d/name style) (format-color color options))) +(defmethod format-value :border-style + [_ value _options] + (d/name (:style value))) + +(defmethod format-value :border-width + [_ value _options] + (fmt/format-pixels (:width value))) + (defmethod format-value :size-array [_ value _options] (cond diff --git a/frontend/src/app/util/code_gen/style_css_values.cljs b/frontend/src/app/util/code_gen/style_css_values.cljs index fe2179c8d4..c084286799 100644 --- a/frontend/src/app/util/code_gen/style_css_values.cljs +++ b/frontend/src/app/util/code_gen/style_css_values.cljs @@ -191,6 +191,16 @@ (every? some? [r1 r2 r3 r4]) [r1 r2 r3 r4])) +(defmethod get-value :border-style + [_ stroke _ _] + (when-not (cgc/svg-markup? stroke) + (get-stroke-data stroke))) + +(defmethod get-value :border-width + [_ stroke _ _] + (when-not (cgc/svg-markup? stroke) + (get-stroke-data stroke))) + (defmethod get-value :box-shadow [_ shape _ _] (when-not (cgc/svg-markup? shape)