Merge pull request #2852 from penpot/eva-bugfixing-4

Eva bugfixing 4

frontend/resources/styles/main/partials/inspect.scss

@@ -314,11 +314,15 @@
     }
   }
 
-  .attributes-shadow-block {
+  .attributes-shadow-block,
+  .attributes-stroke-block,
+  .attributes-fill-block {
     border-top: 1px solid $color-gray-60;
   }
 
-  .attributes-shadow-blocks :first-child {
+  .attributes-shadow-blocks :first-child,
+  .attributes-stroke-blocks :first-child,
+  .attributes-fill-blocks :first-child {
     border-top: none;
   }
 }

frontend/src/app/main/ui/formats.cljs

@@ -67,11 +67,11 @@
   (let [sizing (if (= type :width)
                  (:layout-item-h-sizing shape)
                  (:layout-item-v-sizing shape))]
-    (if (string? value)
-      value
-      (if (= sizing :fill)
-        "100%"
-        (str (format-pixels value))))))
+    (cond
+      (= sizing :fill) "100%"
+      (= sizing :auto) "auto"
+      (number? value)  (format-pixels value)
+      :else value)))
 
 (defn format-padding
   [padding-values type]

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

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.viewer.inspect.attributes.fill
   (:require
-   [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
    [app.util.code-gen :as cg]
    [app.util.color :as uc]
@@ -40,10 +39,11 @@
   (let [color-format (mf/use-state :hex)
         color (shape->color shape)]
 
-    [:& color-row {:color color
-                   :format @color-format
-                   :on-change-format #(reset! color-format %)
-                   :copy-data (copy-data shape)}]))
+    [:div.attributes-fill-block
+     [:& color-row {:color color
+                    :format @color-format
+                    :on-change-format #(reset! color-format %)
+                    :copy-data (copy-data shape)}]]))
 
 (mf/defc fill-panel
   [{:keys [shapes]}]
@@ -51,14 +51,13 @@
     (when (seq shapes)
       [:div.attributes-block
        [:div.attributes-block-title
-        [:div.attributes-block-title-text (tr "inspect.attributes.fill")]
-        (when (= (count shapes) 1)
-          [:& copy-button {:data (copy-data (first shapes))}])]
+        [:div.attributes-block-title-text (tr "inspect.attributes.fill")]]
 
-       (for [shape shapes]
+       [:div.attributes-fill-blocks
+        (for [shape shapes]
          (if (seq (:fills shape))
            (for [value (:fills shape [])]
              [:& fill-block {:key (str "fill-block-" (:id shape) value)
                              :shape value}])
            [:& fill-block {:key (str "fill-block-only" (:id shape))
-                           :shape shape}]))])))
+                           :shape shape}]))]])))

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

@@ -38,18 +38,18 @@
              :layout-wrap-type "flex-wrap"
              :layout-gap "gap"
              :layout-padding "padding"}
-   :format  {:layout name
-             :layout-flex-dir name
-             :layout-align-items name
-             :layout-justify-content name
-             :layout-wrap-type name
+   :format  {:layout d/name
+             :layout-flex-dir d/name
+             :layout-align-items d/name
+             :layout-justify-content d/name
+             :layout-wrap-type d/name
              :layout-gap fm/format-gap
              :layout-padding fm/format-padding}})
 
 (def layout-align-content-params
   {:props   [:layout-align-content]
    :to-prop {:layout-align-content "align-content"}
-   :format  {:layout-align-content name}})
+   :format  {:layout-align-content d/name}})
 
 (defn copy-data
   ([shape]

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

@@ -43,7 +43,7 @@
              :layout-item-max-w "max-width"
              :layout-item-min-w "min-width"}
    :format  {:layout-item-margin format-margin
-             :layout-item-align-self name}})
+             :layout-item-align-self d/name}})
 
 (defn copy-data
   ([shape]

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

@@ -55,12 +55,7 @@
   [{:keys [shape]}]
   (let [color-format (mf/use-state :hex)
         color (shape->color shape)]
-    [:*
-     [:& color-row {:color color
-                    :format @color-format
-                    :copy-data (copy-color-data shape)
-                    :on-change-format #(reset! color-format %)}]
-
+    [:div.attributes-stroke-block
      (let [{:keys [stroke-style stroke-alignment]} shape
            stroke-style (if (= stroke-style :svg) :solid stroke-style)
            stroke-alignment (or stroke-alignment :center)]
@@ -78,7 +73,11 @@
         ;;   inspect.attributes.stroke.alignment.inner
         ;;   inspect.attributes.stroke.alignment.outer
         [:div.attributes-label (->> stroke-alignment d/name (str "inspect.attributes.stroke.alignment.") (tr))]
-        [:& copy-button {:data (copy-stroke-data shape)}]])]))
+        [:& copy-button {:data (copy-stroke-data shape)}]])
+     [:& color-row {:color color
+                    :format @color-format
+                    :copy-data (copy-color-data shape)
+                    :on-change-format #(reset! color-format %)}]]))
 
 (mf/defc stroke-panel
   [{:keys [shapes]}]
@@ -86,14 +85,13 @@
     (when (seq shapes)
       [:div.attributes-block
        [:div.attributes-block-title
-        [:div.attributes-block-title-text (tr "inspect.attributes.stroke")]
-        (when (= (count shapes) 1)
-          [:& copy-button {:data (copy-stroke-data (first shapes))}])]
+        [:div.attributes-block-title-text (tr "inspect.attributes.stroke")]]
 
-       (for [shape shapes]
+       [:div.attributes-stroke-blocks
+        (for [shape shapes]
          (if (seq (:strokes shape))
            (for [value (:strokes shape [])]
              [:& stroke-block {:key (str "stroke-color-" (:id shape) value)
                                :shape value}])
            [:& stroke-block {:key (str "stroke-color-only" (:id shape))
-                             :shape shape}]))])))
+                             :shape shape}]))]])))

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

@@ -7,6 +7,7 @@
 (ns app.main.ui.viewer.inspect.attributes.text
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.text :as txt]
    [app.main.fonts :as fonts]
    [app.main.store :as st]
@@ -58,14 +59,14 @@
 (def params
   {:to-prop {:fill-color "color"
              :fill-color-gradient "color"}
-   :format  {:font-family #(str "'" % "'")
-             :font-style #(str % )
-             :font-size #(str (format-number %) "px")
-             :font-weight name
+   :format  {:font-family #(dm/str "'" % "'")
+             :font-style #(dm/str % )
+             :font-size #(dm/str (format-number %) "px")
+             :font-weight d/name
              :line-height #(format-number %)
-             :letter-spacing #(str (format-number %) "px")
-             :text-decoration name
-             :text-transform name
+             :letter-spacing #(dm/str (format-number %) "px")
+             :text-decoration d/name
+             :text-transform d/name
              :fill-color #(-> %2 shape->color uc/color->background)
              :fill-color-gradient #(-> %2 shape->color uc/color->background)}})
 

frontend/src/app/util/code_gen.cljs

@@ -7,6 +7,7 @@
 (ns app.util.code-gen
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.pages.helpers :as cph]
    [app.common.text :as txt]
    [app.main.ui.formats :as fmt]
@@ -16,7 +17,7 @@
 (defn shadow->css [shadow]
   (let [{:keys [style offset-x offset-y blur spread]} shadow
         css-color (uc/color->background (:color shadow))]
-    (str
+    (dm/str
      (if (= style :inner-shadow) "inset " "")
      (str/fmt "%spx %spx %spx %spx %s" offset-x offset-y blur spread css-color))))
 
@@ -49,7 +50,7 @@
   (let [first-stroke (first (:strokes shape))
         width (:stroke-width first-stroke)
         style (let [style (:stroke-style first-stroke)]
-                (when (keyword? style) (name style)))
+                (when (keyword? style) (d/name style)))
         color {:color (:stroke-color first-stroke)
                :opacity (:stroke-opacity first-stroke)
                :gradient (:stroke-color-gradient first-stroke)}]
@@ -118,11 +119,11 @@
                            :layout-wrap-type "flex-wrap"
                            :layout-gap "gap"
                            :layout-padding "padding"}
-                 :format  {:layout name
-                           :layout-flex-dir name
-                           :layout-align-items name
-                           :layout-justify-content name
-                           :layout-wrap-type name
+                 :format  {:layout d/name
+                           :layout-flex-dir d/name
+                           :layout-align-items d/name
+                           :layout-justify-content d/name
+                           :layout-wrap-type d/name
                            :layout-gap format-gap
                            :layout-padding fmt/format-padding}}})
 
@@ -137,14 +138,14 @@
              :text-decoration
              :text-transform]
    :to-prop {:fills "color"}
-   :format  {:font-family #(str "'" % "'")
-             :font-style #(str %)
-             :font-size #(str % "px")
-             :font-weight #(str %)
-             :line-height #(str %)
-             :letter-spacing #(str % "px")
-             :text-decoration name
-             :text-transform name
+   :format  {:font-family #(dm/str "'" % "'")
+             :font-style #(dm/str %)
+             :font-size #(dm/str % "px")
+             :font-weight #(dm/str %)
+             :line-height #(dm/str %)
+             :letter-spacing #(dm/str % "px")
+             :text-decoration d/name
+             :text-transform d/name
              :fills format-fill-color}})
 
 (def layout-flex-item-params
@@ -161,16 +162,16 @@
              :layout-item-min-w "min-width"
              :layout-item-align-self "align-self"}
    :format  {:layout-item-margin fmt/format-margin
-             :layout-item-max-h #(str % "px")
-             :layout-item-min-h #(str % "px")
-             :layout-item-max-w #(str % "px")
-             :layout-item-min-w #(str % "px")
-             :layout-item-align-self name}})
+             :layout-item-max-h #(dm/str % "px")
+             :layout-item-min-h #(dm/str % "px")
+             :layout-item-max-w #(dm/str % "px")
+             :layout-item-min-w #(dm/str % "px")
+             :layout-item-align-self d/name}})
 
 (def layout-align-content
   {:props   [:layout-align-content]
    :to-prop {:layout-align-content "align-content"}
-   :format  {:layout-align-content name}})
+   :format  {:layout-align-content d/name}})
 
 (defn get-specific-value
   [values prop]
@@ -217,13 +218,13 @@
                    (every? #(or (nil? %) (= % 0)) value)
                    (or (nil? value) (= value 0))))
 
-         default-format (fn [value] (str (fmt/format-pixels value)))
+         default-format (fn [value] (dm/str (fmt/format-pixels value)))
          format-property (fn [prop]
-                           (let [css-prop (or (prop to-prop) (name prop))
+                           (let [css-prop (or (prop to-prop) (d/name prop))
                                  format-fn (or (prop format) default-format)
                                  css-val (format-fn (get-value prop) values)]
                              (when css-val
-                               (str
+                               (dm/str
                                 (str/repeat " " tab-size)
                                 (str/fmt "%s: %s;" css-prop css-val)))))]
 
@@ -281,13 +282,13 @@
               (cons [node-style (:text node "")] acc)
 
               :else
-              (cons [node-style (str head-text "" (:text node))] (rest acc)))
+              (cons [node-style (dm/str head-text "" (:text node))] (rest acc)))
 
                ;; We add an end-of-line when finish a paragraph
             new-acc
             (if (= (:type node) "paragraph")
               (let [[hs ht] (first new-acc)]
-                (cons [hs (str ht "\n")] (rest new-acc)))
+                (cons [hs (dm/str ht "\n")] (rest new-acc)))
               new-acc)]
         new-acc))]
 

frontend/translations/en.po

@@ -2598,7 +2598,7 @@ msgid "shortcuts.toggle-layers"
 msgstr "Toggle layers"
 
 msgid "shortcuts.toggle-layout-flex"
-msgstr "Add/remove layout flex"
+msgstr "Add/remove flex layout"
 
 msgid "shortcuts.toggle-lock"
 msgstr "Lock selected"
@@ -4316,7 +4316,7 @@ msgstr "Path"
 
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.remove-flex"
-msgstr "Remove layout flex"
+msgstr "Remove flex layout"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs, src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.reset-overrides"

frontend/translations/es.po

@@ -2690,7 +2690,7 @@ msgid "shortcuts.toggle-layers"
 msgstr "Mostrar/ocultar capas"
 
 msgid "shortcuts.toggle-layout-flex"
-msgstr "Añadir/eliminar layout flex"
+msgstr "Añadir/eliminar flex layout"
 
 msgid "shortcuts.toggle-lock"
 msgstr "Bloquear/Desbloquear"
@@ -4463,7 +4463,7 @@ msgstr "Ruta"
 
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.remove-flex"
-msgstr "Eliminar layout flex"
+msgstr "Eliminar flex layout"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs,
 #: src/app/main/ui/workspace/context_menu.cljs,