🐛 Display stroke properties in inspect tab (#6955)

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)

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

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

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

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

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)