Merge pull request #6106 from penpot/palba--variants-inspect-header

✨ Add subtitle to inspect tab for components

frontend/src/app/main/ui/inspect/attributes/variant.cljs

@@ -30,14 +30,6 @@
 (mf/defc variant-panel*
   [{:keys [objects shapes libraries file-id] :as kk}]
   (let [shape           (->> shapes first)
-        title           (cond
-                          (ctc/is-variant-container? shape)
-                          "inspect.attributes.variant.component"
-                          (ctc/main-instance? shape)
-                          "inspect.attributes.variant.variant"
-                          :else
-                          "inspect.attributes.variant.copy")
-
         properties      (mf/with-memo [objects shape]
                           (let [data          (dm/get-in libraries [file-id :data])
                                 is-container? (ctc/is-variant-container? shape)
@@ -49,7 +41,7 @@
                                    (map #(update % :value (fn [v] (if (str/blank? v) "--" v))))))))]
     [:div {:class (stl/css :attributes-block)}
      [:> inspect-title-bar*
-      {:title (tr title)
+      {:title (tr "inspect.attributes.variant")
        :class (stl/css :title-spacing-variant)}]
 
      (for [[pos property] (map-indexed vector properties)]

frontend/src/app/main/ui/inspect/right_sidebar.cljs

@@ -50,6 +50,16 @@
         libraries      (get-libraries from)
         main-instance? (ctk/main-instance? first-shape)
 
+        subtitle       (cond
+                         (or
+                          (ctk/is-variant-container? first-shape)
+                          (and (not (ctk/is-variant? first-shape)) main-instance?))
+                         (tr "inspect.subtitle.main")
+                         (and (ctk/is-variant? first-shape) main-instance?)
+                         (tr "inspect.subtitle.variant")
+                         (ctk/instance-head? first-shape)
+                         (tr "inspect.subtitle.copy"))
+
         handle-change-tab
         (mf/use-fn
          (mf/deps from on-change-section)
@@ -107,7 +117,7 @@
                                   :viewer-code (= from :viewer))}
      (if (seq shapes)
        [:div {:class (stl/css :tool-windows)}
-        [:div {:class (stl/css :shape-row)}
+        [:div {:class (stl/css-case :shape-row true :shape-row-subtitle (some? subtitle))}
          (if (> (count shapes) 1)
            [:*
             [:span {:class (stl/css :layers-icon)} i/layers]
@@ -127,7 +137,13 @@
             ;;   (tr "inspect.tabs.code.selected.rect")
             ;;   (tr "inspect.tabs.code.selected.svg-raw")
             ;;   (tr "inspect.tabs.code.selected.text")
-            [:span {:class (stl/css :layer-title)} (:name first-shape)]])]
+            [:div
+             (if (some? subtitle)
+               [:*
+                [:div {:class (stl/css :layer-title :layer-title-with-subtitle)} (:name first-shape)]
+                [:div {:class (stl/css :layer-subtitle)} subtitle]]
+               [:div {:class (stl/css :layer-title)} (:name first-shape)])]])]
+
         [:div {:class (stl/css :inspect-content)}
 
          [:> tab-switcher* {:tabs tabs

frontend/src/app/main/ui/inspect/right_sidebar.scss

@@ -15,6 +15,7 @@
   right: unset;
   grid-area: right-sidebar;
   overflow: hidden;
+
   &.viewer-code {
     height: calc(100vh - $s-48);
   }
@@ -40,10 +41,16 @@
   height: $s-32;
 }
 
+.shape-row-subtitle {
+  height: fit-content;
+  align-items: flex-start;
+}
+
 .layers-icon,
 .shape-icon {
   @include flexCenter;
   height: $s-32;
+
   svg {
     @extend .button-icon-small;
     stroke: var(--icon-foreground);
@@ -55,6 +62,17 @@
   @include textEllipsis;
   height: $s-32;
   padding: $s-8 0;
+  color: var(--color-foreground-primary);
+}
+
+.layer-title-with-subtitle {
+  height: fit-content;
+  padding-bottom: 0;
+}
+
+.layer-subtitle {
+  @include bodySmallTypography;
+  @include textEllipsis;
   color: var(--assets-item-name-foreground-color-rest);
 }
 

frontend/translations/en.po

@@ -1451,6 +1451,15 @@ msgstr "X support account"
 msgid "generic.error"
 msgstr "An error has occurred"
 
+msgid "inspect.subtitle.main"
+msgstr "Main component"
+
+msgid "inspect.subtitle.copy"
+msgstr "Copy"
+
+msgid "inspect.subtitle.variant"
+msgstr "Variant"
+
 #: src/app/main/ui/viewer/inspect/attributes/blur.cljs:26
 msgid "inspect.attributes.blur"
 msgstr "Blur"
@@ -1531,15 +1540,9 @@ msgid "inspect.attributes.size"
 msgstr "Size and position"
 
 #: src/app/main/ui/viewer/inspect/attributes/variant.cljs:40
-msgid "inspect.attributes.variant.variant"
+msgid "inspect.attributes.variant"
 msgstr "Variant properties"
 
-msgid "inspect.attributes.variant.component"
-msgstr "Component properties"
-
-msgid "inspect.attributes.variant.copy"
-msgstr "Copy properties"
-
 #: src/app/main/ui/viewer/inspect/attributes/stroke.cljs:52
 msgid "inspect.attributes.stroke"
 msgstr "Stroke"

frontend/translations/es.po

@@ -1453,6 +1453,15 @@ msgstr "Cuenta de X para soporte"
 msgid "generic.error"
 msgstr "Ha ocurrido un error"
 
+msgid "inspect.subtitle.main"
+msgstr "Componente principal"
+
+msgid "inspect.subtitle.copy"
+msgstr "Copia"
+
+msgid "inspect.subtitle.variant"
+msgstr "Variante"
+
 #: src/app/main/ui/viewer/inspect/attributes/blur.cljs:26
 msgid "inspect.attributes.blur"
 msgstr "Desenfocado"
@@ -1533,15 +1542,9 @@ msgid "inspect.attributes.size"
 msgstr "Tamaño y posición"
 
 #: src/app/main/ui/viewer/inspect/attributes/variant.cljs:40
-msgid "inspect.attributes.variant.variant"
+msgid "inspect.attributes.variant"
 msgstr "Propiedades de la variante"
 
-msgid "inspect.attributes.variant.component"
-msgstr "Propiedades del componente"
-
-msgid "inspect.attributes.variant.copy"
-msgstr "Propiedades de la copia"
-
 #: src/app/main/ui/viewer/inspect/attributes/stroke.cljs:52
 msgid "inspect.attributes.stroke"
 msgstr "Borde"