From 82d3e466be6f69fc6e4c3b265823ff74a12ac817 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Wed, 19 Mar 2025 10:25:57 +0100 Subject: [PATCH] :sparkles: Add subtitle to inspect tab for components --- .../main/ui/inspect/attributes/variant.cljs | 10 +--------- .../app/main/ui/inspect/right_sidebar.cljs | 20 +++++++++++++++++-- .../app/main/ui/inspect/right_sidebar.scss | 18 +++++++++++++++++ frontend/translations/en.po | 17 +++++++++------- frontend/translations/es.po | 17 +++++++++------- 5 files changed, 57 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/main/ui/inspect/attributes/variant.cljs b/frontend/src/app/main/ui/inspect/attributes/variant.cljs index f92e689902..25ccf8f651 100644 --- a/frontend/src/app/main/ui/inspect/attributes/variant.cljs +++ b/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)] diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/inspect/right_sidebar.cljs index 990b3a2281..5530464505 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.scss b/frontend/src/app/main/ui/inspect/right_sidebar.scss index e2ec5025f8..2ce156ce68 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.scss +++ b/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); } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index cbdd7d04ca..6f04376c68 100644 --- a/frontend/translations/en.po +++ b/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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index b700fadbc3..56ffa8444f 100644 --- a/frontend/translations/es.po +++ b/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"