Merge pull request #3720 from penpot/alotor-fix-inspect

🐛 Fix problem with inspect

frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs

@@ -24,6 +24,9 @@
    :align-self
    :justify-self
 
+   :flex-shrink
+   :flex
+
    ;; Grid cell properties
    :grid-column
    :grid-row])
@@ -40,7 +43,7 @@
             [:div {:class (stl/css :global/attr-value)}
 
              [:& copy-button {:data (css/get-css-property objects shape property)}
-               [:div {:class (stl/css :button-children)} value]]]]))]
+              [:div {:class (stl/css :button-children)} value]]]]))]
 
       [:*
        (for [property properties]
@@ -55,18 +58,28 @@
   (let [new-css-system  (mf/use-ctx ctx/new-css-system)
         shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %)))
         only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes)
-        only-grid? (every? #(ctl/grid-layout-immediate-child? objects %) shapes)]
+        only-grid? (every? #(ctl/grid-layout-immediate-child? objects %) shapes)
+
+        some-layout-prop?
+        (->> shapes
+             (mapcat (fn [shape]
+                       (keep #(css/get-css-value objects shape %) properties)))
+             (seq))
+
+        menu-title
+        (cond
+          only-flex?
+          "Flex element"
+          only-grid?
+          "Flex element"
+          :else
+          "Layout element")]
+
     (if new-css-system
-      (when (seq shapes)
+      (when some-layout-prop?
         [:div {:class (stl/css :attributes-block)}
          [:& title-bar {:collapsable? false
-                        :title        (cond
-                                        only-flex?
-                                        "Flex element"
-                                        only-grid?
-                                        "Flex element"
-                                        :else
-                                        "Layout element")
+                        :title        menu-title
                         :class        (stl/css :title-spacing-layout-element)}
           (when (= (count shapes) 1)
             [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
@@ -76,16 +89,10 @@
                                      :objects objects
                                      :key (:id shape)}])])
 
-      (when (seq shapes)
+      (when some-layout-prop?
         [:div.attributes-block
          [:div.attributes-block-title
-          [:div.attributes-block-title-text (cond
-                                              only-flex?
-                                              "Flex element"
-                                              only-grid?
-                                              "Flex element"
-                                              :else
-                                              "Layout element")]
+          [:div.attributes-block-title-text menu-title]
           (when (= (count shapes) 1)
             [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
 

frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs

@@ -13,15 +13,19 @@
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.context :as ctx]
    [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.i18n :refer [tr]]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
 (defn has-shadow? [shape]
   (:shadow shape))
 
+(defn shape-copy-data [shape]
+  (str/join ", " (map css/shadow->css (:shadow shape))))
 
+(defn shadow-copy-data [shadow]
+  (css/shadow->css shadow))
 
 (mf/defc shadow-block [{:keys [shadow]}]
   (let [color-format (mf/use-state :hex)]
@@ -29,8 +33,7 @@
      [:div {:class (stl/css :shadow-row)}
       [:div {:class (stl/css :global/attr-label)} (->> shadow :style d/name (str "workspace.options.shadow-options.") (tr))]
       [:div {:class (stl/css :global/attr-value)}
-
-       [:& copy-button {:data  (cssf/format-shadow (cssf/format-value :shadows shadow) shadow)
+       [:& copy-button {:data  (shadow-copy-data shadow)
                         :class (stl/css :color-row-copy-btn)}
         [:div  {:class (stl/css :button-children)
                 :title  (dm/str (tr "workspace.options.shadow-options.offsetx") " "

frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.viewer.inspect.attributes.text
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.text :as txt]
    [app.main.fonts :as fonts]
@@ -41,6 +42,12 @@
    :id fill-color-ref-id
    :file-id fill-color-ref-file})
 
+(defn copy-style-data
+  [style & properties]
+  (->> properties
+       (map #(dm/str (d/name %) ": " (get style %) ";"))
+       (str/join "\n")))
+
 (mf/defc typography-block
   [{:keys [text style]}]
   (let [new-css-system (mf/use-ctx ctx/new-css-system)
@@ -67,7 +74,7 @@
            [:& color-row {:key idx
                           :format @color-format
                           :color (fill->color fill)
-                          ;;:copy-data (copy-style-data fill :fill-color :fill-color-gradient)
+                          :copy-data (copy-style-data fill :fill-color :fill-color-gradient)
                           :on-change-format #(reset! color-format %)}]))
 
        (when (:typography-ref-id style)
@@ -75,81 +82,89 @@
           [:div {:class (stl/css :global/attr-label)}
            (tr "inspect.attributes.typography")]
           [:div {:class (stl/css :global/attr-value)}
-           [:div (:name typography)]
-           #_[:& copy-button {:data (copy-style-data typography)}]]])
+           [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}
+            [:div {:class (stl/css :button-children)} (:name typography)]]]])
 
        (when (:font-id style)
          [:div {:class (stl/css :text-row)}
           [:div {:class (stl/css :global/attr-label)} (tr "inspect.attributes.typography.font-family")]
           [:div {:class (stl/css :global/attr-value)}
-           [:div (-> style :font-id fonts/get-font-data :name)]
-           #_[:& copy-button {:data (copy-style-data style :font-family)}]]])
+           [:& copy-button {:data (copy-style-data style :font-family)}
+            [:div {:class (stl/css :button-children)}
+             (-> style :font-id fonts/get-font-data :name)]]]])
 
        (when (:font-style style)
          [:div {:class (stl/css :text-row)}
           [:div {:class (stl/css :global/attr-label)}
            (tr "inspect.attributes.typography.font-style")]
           [:div {:class (stl/css :global/attr-value)}
-           [:div (str (:font-style style))]
-           #_[:& copy-button {:data (copy-style-data style :font-style)}]]])
+           [:& copy-button {:data (copy-style-data style :font-style)}
+            [:div {:class (stl/css :button-children)}
+             (str (:font-style style))]]]])
 
        (when (:font-size style)
          [:div {:class (stl/css :text-row)}
           [:div {:class (stl/css :global/attr-label)}
            (tr "inspect.attributes.typography.font-size")]
-          [:div {:class (stl/css :global/attr-value)}
-           [:div (fmt/format-pixels (:font-size style))]
-           #_[:& copy-button {:data (copy-style-data style :font-size)}]]])
+          [:div  {:class (stl/css :global/attr-value)}
+           [:& copy-button {:data (copy-style-data style :font-size)}
+            [:div {:class (stl/css :button-children)}
+             (fmt/format-pixels (:font-size style))]]]])
 
        (when (:font-weight style)
          [:div {:class (stl/css :text-row)}
           [:div {:class (stl/css :global/attr-label)}
            (tr "inspect.attributes.typography.font-weight")]
           [:div {:class (stl/css :global/attr-value)}
-           [:span (str (:font-weight style))]
-           #_[:& copy-button {:data (copy-style-data style :font-weight)}]]])
+           [:& copy-button {:data (copy-style-data style :font-weight)}
+            [:div {:class (stl/css :button-children)}
+             (str (:font-weight style))]]]])
 
        (when (:line-height style)
          [:div {:class (stl/css :text-row)}
           [:div {:class (stl/css :global/attr-label)}
            (tr "inspect.attributes.typography.line-height")]
           [:div {:class (stl/css :global/attr-value)}
-           [:div (fmt/format-number (:line-height style))]
-           #_[:& copy-button {:data (copy-style-data style :line-height)}]]])
+           [:& copy-button {:data (copy-style-data style :line-height)}
+            [:div {:class (stl/css :button-children)}
+             (fmt/format-number (:line-height style))]]]])
 
        (when (:letter-spacing style)
          [:div {:class (stl/css :text-row)}
           [:div {:class (stl/css :global/attr-label)}
            (tr "inspect.attributes.typography.letter-spacing")]
           [:div {:class (stl/css :global/attr-value)}
-           [:div (fmt/format-pixels (:letter-spacing style))]
-           #_[:& copy-button {:data (copy-style-data style :letter-spacing)}]]])
+           [:& copy-button {:data (copy-style-data style :letter-spacing)}
+            [:div {:class (stl/css :button-children)}
+             (fmt/format-pixels (:letter-spacing style))]]]])
 
        (when (:text-decoration style)
          [:div {:class (stl/css :text-row)}
           [:div {:class (stl/css :global/attr-label)}
            (tr "inspect.attributes.typography.text-decoration")]
-             ;; Execution time translation strings:
-             ;;   inspect.attributes.typography.text-decoration.none
-             ;;   inspect.attributes.typography.text-decoration.strikethrough
-             ;;   inspect.attributes.typography.text-decoration.underline
+          ;; Execution time translation strings:
+          ;;   inspect.attributes.typography.text-decoration.none
+          ;;   inspect.attributes.typography.text-decoration.strikethrough
+          ;;   inspect.attributes.typography.text-decoration.underline
           [:div {:class (stl/css :global/attr-value)}
-           [:div (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]
-           #_[:& copy-button {:data (copy-style-data style :text-decoration)}]]])
+           [:& copy-button {:data (copy-style-data style :text-decoration)}
+            [:div {:class (stl/css :button-children)}
+             (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]])
 
        (when (:text-transform style)
          [:div {:class (stl/css :text-row)}
           [:div {:class (stl/css :global/attr-label)}
            (tr "inspect.attributes.typography.text-transform")]
-             ;; Execution time translation strings:
-             ;;   inspect.attributes.typography.text-transform.lowercase
-             ;;   inspect.attributes.typography.text-transform.none
-             ;;   inspect.attributes.typography.text-transform.titlecase
-             ;;   inspect.attributes.typography.text-transform.uppercase
-             ;;   inspect.attributes.typography.text-transform.unset
+          ;; Execution time translation strings:
+          ;;   inspect.attributes.typography.text-transform.lowercase
+          ;;   inspect.attributes.typography.text-transform.none
+          ;;   inspect.attributes.typography.text-transform.titlecase
+          ;;   inspect.attributes.typography.text-transform.uppercase
+          ;;   inspect.attributes.typography.text-transform.unset
           [:div {:class (stl/css :global/attr-value)}
-           [:div (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]
-           #_[:& copy-button {:data (copy-style-data style :text-transform)}]]])
+           [:& copy-button {:data (copy-style-data style :text-transform)}
+            [:div {:class (stl/css :button-children)}
+             (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]])
 
        [:& copy-button {:data (str/trim text)
                         :class (stl/css :attributes-content-row)}
@@ -170,7 +185,7 @@
                      :font-style (:font-style typography)}}
             (tr "workspace.assets.typography.text-styles")]]
           [:div.typography-entry-name (:name typography)]
-          #_[:& copy-button {:data (copy-style-data typography)}]]
+          [:& copy-button {:data (copy-style-data style :font-family :font-weight :font-style)}]]
 
          [:div.attributes-typography-row
           [:div.typography-sample
@@ -178,72 +193,72 @@
                     :font-weight (:font-weight style)
                     :font-style (:font-style style)}}
            (tr "workspace.assets.typography.text-styles")]
-          #_[:& copy-button {:data (copy-style-data style)}]])
+          [:& copy-button {:data (copy-style-data style :font-family :font-weight :font-style)}]])
 
        (when (:fills style)
          (for [[idx fill] (map-indexed vector (:fills style))]
            [:& color-row {:key idx
                           :format @color-format
                           :color (fill->color fill)
-                              ;;:copy-data (copy-style-data fill :fill-color :fill-color-gradient)
+                          :copy-data (copy-style-data fill :fill-color :fill-color-gradient)
                           :on-change-format #(reset! color-format %)}]))
 
        (when (:font-id style)
          [:div.attributes-unit-row
           [:div.attributes-label (tr "inspect.attributes.typography.font-family")]
           [:div.attributes-value (-> style :font-id fonts/get-font-data :name)]
-          #_[:& copy-button {:data (copy-style-data style :font-family)}]])
+          [:& copy-button {:data (copy-style-data style :font-family)}]])
 
        (when (:font-style style)
          [:div.attributes-unit-row
           [:div.attributes-label (tr "inspect.attributes.typography.font-style")]
           [:div.attributes-value (str (:font-style style))]
-          #_[:& copy-button {:data (copy-style-data style :font-style)}]])
+          [:& copy-button {:data (copy-style-data style :font-style)}]])
 
        (when (:font-size style)
          [:div.attributes-unit-row
           [:div.attributes-label (tr "inspect.attributes.typography.font-size")]
           [:div.attributes-value (fmt/format-pixels (:font-size style))]
-          #_[:& copy-button {:data (copy-style-data style :font-size)}]])
+          [:& copy-button {:data (copy-style-data style :font-size)}]])
 
        (when (:font-weight style)
          [:div.attributes-unit-row
           [:div.attributes-label (tr "inspect.attributes.typography.font-weight")]
           [:div.attributes-value (str (:font-weight style))]
-          #_[:& copy-button {:data (copy-style-data style :font-weight)}]])
+          [:& copy-button {:data (copy-style-data style :font-weight)}]])
 
        (when (:line-height style)
          [:div.attributes-unit-row
           [:div.attributes-label (tr "inspect.attributes.typography.line-height")]
           [:div.attributes-value (fmt/format-number (:line-height style))]
-          #_[:& copy-button {:data (copy-style-data style :line-height)}]])
+          [:& copy-button {:data (copy-style-data style :line-height)}]])
 
        (when (:letter-spacing style)
          [:div.attributes-unit-row
           [:div.attributes-label (tr "inspect.attributes.typography.letter-spacing")]
           [:div.attributes-value (fmt/format-pixels (:letter-spacing style))]
-          #_[:& copy-button {:data (copy-style-data style :letter-spacing)}]])
+          [:& copy-button {:data (copy-style-data style :letter-spacing)}]])
 
        (when (:text-decoration style)
          [:div.attributes-unit-row
           [:div.attributes-label (tr "inspect.attributes.typography.text-decoration")]
-              ;; Execution time translation strings:
-              ;;   inspect.attributes.typography.text-decoration.none
-              ;;   inspect.attributes.typography.text-decoration.strikethrough
-              ;;   inspect.attributes.typography.text-decoration.underline
+          ;; Execution time translation strings:
+          ;;   inspect.attributes.typography.text-decoration.none
+          ;;   inspect.attributes.typography.text-decoration.strikethrough
+          ;;   inspect.attributes.typography.text-decoration.underline
           [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]
-          #_[:& copy-button {:data (copy-style-data style :text-decoration)}]])
+          [:& copy-button {:data (copy-style-data style :text-decoration)}]])
 
        (when (:text-transform style)
          [:div.attributes-unit-row
           [:div.attributes-label (tr "inspect.attributes.typography.text-transform")]
-              ;; Execution time translation strings:
-              ;;   inspect.attributes.typography.text-transform.lowercase
-              ;;   inspect.attributes.typography.text-transform.none
-              ;;   inspect.attributes.typography.text-transform.titlecase
-              ;;   inspect.attributes.typography.text-transform.uppercase
+          ;; Execution time translation strings:
+          ;;   inspect.attributes.typography.text-transform.lowercase
+          ;;   inspect.attributes.typography.text-transform.none
+          ;;   inspect.attributes.typography.text-transform.titlecase
+          ;;   inspect.attributes.typography.text-transform.uppercase
           [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]
-          #_[:& copy-button {:data (copy-style-data style :text-transform)}]])
+          [:& copy-button {:data (copy-style-data style :text-transform)}]])
 
        [:div.attributes-content-row
         [:pre.attributes-content (str/trim text)]

frontend/src/app/main/ui/viewer/inspect/attributes/text.scss

@@ -19,6 +19,9 @@
     :global(.attr-value) {
       align-items: center;
     }
+    .button-children {
+      @extend .copy-button-children;
+    }
   }
   .attributes-content-row {
     width: $s-252;

frontend/src/app/util/code_gen/style_css.cljs

@@ -16,7 +16,7 @@
    [app.common.types.shape.layout :as ctl]
    [app.main.ui.shapes.text.styles :as sts]
    [app.util.code-gen.common :as cgc]
-   [app.util.code-gen.style-css-formats :refer [format-value]]
+   [app.util.code-gen.style-css-formats :refer [format-value format-shadow]]
    [app.util.code-gen.style-css-values :refer [get-value]]
    [cuerdas.core :as str]))
 
@@ -117,17 +117,6 @@ body {
    :grid-row
    :grid-area])
 
-(def text-node-css-properties
-  [:font-family
-   :font-style
-   :font-size
-   :font-weight
-   :line-height
-   :letter-spacing
-   :text-decoration
-   :text-transform
-   :color])
-
 (defn shape->css-property
   [shape objects property]
   (when-let [value (get-value property shape objects)]
@@ -317,3 +306,7 @@ body {
     (->> shapes
          (keep #(get-shape-css-selector % objects options))
          (str/join "\n\n")))))
+
+(defn shadow->css
+  [shadow]
+  (dm/str "box-shadow: " (format-shadow shadow {})))