🐛 Fix problems with inspect and texts

common/src/app/common/text.cljc

@@ -53,6 +53,9 @@
 (def text-transform-attrs
   [:text-transform])
 
+(def text-fills
+  [:fills])
+
 (def shape-attrs
   [:grow-type])
 
@@ -70,7 +73,8 @@
    text-font-attrs
    text-spacing-attrs
    text-decoration-attrs
-   text-transform-attrs))
+   text-transform-attrs
+   text-fills))
 
 (def text-all-attrs (d/concat-set shape-attrs root-attrs paragraph-attrs text-node-attrs))
 

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

@@ -79,11 +79,9 @@
             [:span {:class (stl/css-case :color-value-wrapper true
                                          :gradient-name (:gradient color))}
              (if (:gradient color)
-               [:& cbn/color-name {:color color
-                                   :size 80}]
+               [:& cbn/color-name {:color color :size 80}]
                (case format
-                 :hex [:& cbn/color-name {:color color
-                                          :size 80}]
+                 :hex [:& cbn/color-name {:color color}]
                  :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
                          [:* (str/fmt "%s, %s, %s, %s" r g b a)])
                  :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
@@ -105,8 +103,7 @@
            [:span {:class (stl/css-case :color-value-wrapper true
                                         :gradient-name (:gradient color))}
             (if (:gradient color)
-              [:& cbn/color-name {:color color
-                                  :size 80}]
+              [:& cbn/color-name {:color color}]
               (case format
                 :hex [:& cbn/color-name {:color color
                                          :size 80}]

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

@@ -58,6 +58,11 @@
   }
 }
 
+.name-opacity {
+  display: flex;
+  align-items: baseline;
+}
+
 .color-name-wrapper {
   @include titleTipography;
   @include flexColumn;
@@ -113,8 +118,11 @@
 .color-value-wrapper {
   @include inspectValue;
   text-transform: uppercase;
-  max-width: $s-124;
+  max-width: $s-80;
   padding-right: $s-8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   &.gradient-name {
     text-transform: none;
   }

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

@@ -8,6 +8,7 @@
   (: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 [title-bar]]
    [app.util.code-gen.style-css :as css]
@@ -19,9 +20,10 @@
 (mf/defc geometry-block
   [{:keys [objects shape]}]
   [:*
-   (for [property properties]
+   (for [[idx property] (d/enumerate properties)]
      (when-let [value (css/get-css-value objects shape property)]
-       [:div {:class (stl/css :geometry-row)}
+       [:div {:key (dm/str "block-" idx "-" (d/name property))
+              :class (stl/css :geometry-row)}
         [:div {:class (stl/css :global/attr-label)} (d/name property)]
         [:div {:class (stl/css :global/attr-value)}
          [:& copy-button {:data (css/get-css-property objects shape property)}

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

@@ -30,7 +30,6 @@
 }
 
 .attributes-content-row {
-  width: $s-252;
   max-width: $s-252;
   min-height: calc($s-2 + $s-32);
   border-radius: $br-8;
@@ -39,7 +38,7 @@
   .content {
     @include titleTipography;
     width: 100%;
-    padding: 0;
+    padding: $s-4 0;
     color: var(--color-foreground-secondary);
   }