From 665587d492e91d99235fbb4d1dfb429ef52b3c22 Mon Sep 17 00:00:00 2001 From: Xaviju Date: Thu, 13 Nov 2025 22:19:43 +0100 Subject: [PATCH] :recycle: Review inspect tab UI (#7727) * :recycle: Review inspect tab UI * :recycle: Capitalize English strings and remove from styles * :recycle: Set a minimum size por color space selector and adjust visually the UI * :bug: Fix error on hooks order when selecting texts * :bug: Set minim size to inspect tab element * :bug: Fix broken typography panel * :recycle: Design review --- .../src/app/main/ui/ds/utilities/swatch.scss | 2 +- .../src/app/main/ui/inspect/attributes.scss | 1 + frontend/src/app/main/ui/inspect/code.scss | 1 + .../app/main/ui/inspect/right_sidebar.cljs | 3 +- .../app/main/ui/inspect/right_sidebar.scss | 86 +++--- .../main/ui/inspect/styles/panels/text.cljs | 268 +++++++++--------- .../styles/property_detail_copiable.scss | 9 +- .../app/main/ui/inspect/styles/style_box.cljs | 4 +- .../app/main/ui/inspect/styles/style_box.scss | 9 +- frontend/translations/en.po | 2 +- frontend/translations/es.po | 2 +- 11 files changed, 205 insertions(+), 182 deletions(-) diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.scss b/frontend/src/app/main/ui/ds/utilities/swatch.scss index 1d76272587..4743517165 100644 --- a/frontend/src/app/main/ui/ds/utilities/swatch.scss +++ b/frontend/src/app/main/ui/ds/utilities/swatch.scss @@ -26,7 +26,7 @@ border: $b-1 solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; - &:focus { + &:focus-visible { --border-color: var(--color-accent-primary); } } diff --git a/frontend/src/app/main/ui/inspect/attributes.scss b/frontend/src/app/main/ui/inspect/attributes.scss index b20d543d20..7735b10010 100644 --- a/frontend/src/app/main/ui/inspect/attributes.scss +++ b/frontend/src/app/main/ui/inspect/attributes.scss @@ -21,4 +21,5 @@ .workspace-element-options { height: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value + padding-inline: var(--sp-m); } diff --git a/frontend/src/app/main/ui/inspect/code.scss b/frontend/src/app/main/ui/inspect/code.scss index c0fa8bab75..11257db66d 100644 --- a/frontend/src/app/main/ui/inspect/code.scss +++ b/frontend/src/app/main/ui/inspect/code.scss @@ -15,6 +15,7 @@ overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; + padding-inline: var(--sp-m); } .viewer-code-block { diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/inspect/right_sidebar.cljs index 902adebb99..08ac1c5bd4 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.cljs +++ b/frontend/src/app/main/ui/inspect/right_sidebar.cljs @@ -165,7 +165,8 @@ [:span {:class (stl/css :inspect-tab-switcher-label)} (tr "inspect.tabs.switcher.label")] [:div {:class (stl/css :inspect-tab-switcher-controls)} [:div {:class (stl/css :inspect-tab-switcher-controls-color-space)} - [:> select* {:options color-spaces + [:> select* {:class (stl/css :inspect-tab-switcher-controls-color-space-select) + :options color-spaces :default-selected "hex" :variant "ghost" :on-change handle-change-color-space}]] diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.scss b/frontend/src/app/main/ui/inspect/right_sidebar.scss index a4c3e6cf45..74cc399982 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.scss +++ b/frontend/src/app/main/ui/inspect/right_sidebar.scss @@ -7,65 +7,69 @@ @use "ds/typography.scss" as *; @use "ds/_sizes.scss" as *; @use "refactor/common-refactor.scss" as deprecated; +@use "ds/_utils.scss" as *; .settings-bar-right { - min-width: deprecated.$s-252; - width: 100%; - height: 100vh; + min-inline-size: px2rem(252); + inline-size: 100%; + block-size: 100vh; position: relative; - left: unset; - right: unset; + inset-inline-start: unset; + inset-inline-end: unset; grid-area: right-sidebar; overflow: hidden; &.viewer-code { - height: calc(100vh - deprecated.$s-48); + block-size: calc(100vh - $sz-48); } } .viewer-code { - padding-inline-start: deprecated.$s-8; + padding-inline-start: var(--sp-s); } .tool-windows { - height: 100%; + block-size: 100%; display: flex; flex-direction: column; - gap: deprecated.$s-8; - padding-left: var(--sp-m); + gap: var(--sp-s); } .shape-info { display: grid; grid-template-columns: auto minmax(0, 1fr); - gap: deprecated.$s-8; + gap: var(--sp-s); align-items: center; - height: deprecated.$s-32; + block-size: $sz-32; + padding-inline-start: var(--sp-m); } .shape-info-subtitle { - height: fit-content; + block-size: fit-content; align-items: flex-start; } .layers-icon, .shape-icon { - @include deprecated.flexCenter; - height: deprecated.$s-32; --icon-stroke-color: var(--color-foreground-primary); + + display: flex; + justify-content: center; + align-items: center; + block-size: $sz-32; } .layer-title { @include deprecated.bodySmallTypography; @include deprecated.textEllipsis; - height: deprecated.$s-32; - padding: deprecated.$s-8 0; + block-size: $sz-32; + padding: var(--sp-s) 0; color: var(--color-foreground-primary); } .layer-title-with-subtitle { - height: fit-content; - padding-bottom: 0; + block-size: fit-content; + padding-block-end: 0; } .layer-subtitle { @@ -78,8 +82,8 @@ display: flex; flex-direction: column; align-items: center; - gap: deprecated.$s-40; - padding-top: deprecated.$s-24; + gap: $sz-40; + padding-top: $sz-24; } .code-info, @@ -87,8 +91,8 @@ @include deprecated.flexColumn; align-items: center; justify-content: flex-start; - gap: deprecated.$s-12; - margin-right: deprecated.$s-8; + gap: var(--sp-m); + margin-inline-end: var(--sp-s); } .placeholder-icon { @@ -98,44 +102,52 @@ .placeholder-label { @include deprecated.bodySmallTypography; text-align: center; - width: deprecated.$s-200; + inline-size: px2rem(200); color: var(--empty-message-foreground-color); } .more-info-btn { @extend .button-secondary; @include deprecated.uppercaseTitleTipography; - height: deprecated.$s-32; - padding: deprecated.$s-8 deprecated.$s-24; + block-size: $sz-32; + padding: var(--sp-s) var(--sp-xxl); } .inspect-tab-switcher { display: flex; justify-content: space-between; align-items: center; - padding-block: var(--sp-s); - padding-inline-end: var(--sp-m); + padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-m); + gap: var(--sp-m); } .inspect-tab-switcher-label { @include use-typography("body-medium"); color: var(--color-foreground-primary); - flex: 1; + flex: 0; + min-inline-size: fit-content; } .inspect-tab-switcher-controls { display: flex; align-items: center; - flex: 2; + flex: 1; gap: var(--sp-s); + justify-content: flex-end; } .inspect-tab-switcher-controls-color-space { - flex: 1 0 $sz-24; + // 65px is the minimum size of the switcher to avoid text ellipsis on the options + flex: 0 0 65px; +} + +.inspect-tab-switcher-controls-color-space-select { + justify-self: end; } .inspect-tab-switcher-controls-tab { - flex: 2; + // 110px is the minimum size of the switcher to avoid text ellipsis on the options + flex: 0 0 110px; } .inspect-content { @@ -147,14 +159,6 @@ --tabs-nav-padding-inline-start: 0; --tabs-nav-padding-inline-end: var(--sp-m); - /* same height as .element-options in workspace/sidebar/options.scss */ - /* which is one of the parents of this component */ - --max-inspect-tab-height: var(--sidebar-element-options-height); - max-block-size: var(--max-inspect-tab-height); - + block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value overflow: auto; } - -.viewer-tab-switcher-layout { - display: grid; -} diff --git a/frontend/src/app/main/ui/inspect/styles/panels/text.cljs b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs index 25508e5f16..bd81ef9b39 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/text.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs @@ -41,20 +41,19 @@ (defn- generate-typography-shorthand [shapes] - (when (= (count shapes) 1) - (let [shape (first shapes) - style-text-blocks (get-style-text shape)] - (reduce - (fn [acc [style _]] - (let [font-style (:font-style style) - font-family (dm/str (:font-family style)) - font-size (:font-size style) - font-weight (:font-weight style) - line-height (:line-height style) - text-transform (:text-transform style)] - (dm/str acc "font:" font-style " " text-transform " " font-weight " " font-size "/" line-height " " \" font-family \" ";"))) - "" - style-text-blocks)))) + (let [shape (first shapes) + style-text-blocks (get-style-text shape)] + (reduce + (fn [acc [style _]] + (let [font-style (:font-style style) + font-family (dm/str (:font-family style)) + font-size (:font-size style) + font-weight (:font-weight style) + line-height (:line-height style) + text-transform (:text-transform style)] + (dm/str acc "font:" font-style " " text-transform " " font-weight " " font-size "/" line-height " " \" font-family \" ";"))) + "" + style-text-blocks))) (mf/defc typography-name-block* [{:keys [style]}] @@ -76,6 +75,123 @@ :format color-space :copiable true}])) +(mf/defc style-text-block* + [{:keys [shape style text resolved-tokens color-space]}] + (let [copied* (mf/use-state false) + copied (deref copied*) + text (str/trim text) + copy-text + (mf/use-fn + (mf/deps copied) + (fn [] + (let [formatted-text (if (= (:text-transform style) "uppercase") + (.toUpperCase text) + text)] + (reset! copied* true) + (wapi/write-to-clipboard formatted-text) + (tm/schedule 1000 #(reset! copied* false))))) + composite-typography-token (get-resolved-token :typography shape resolved-tokens)] + [:div {:class (stl/css :text-properties)} + + (when (:fills style) + (for [[idx fill] (map-indexed vector (:fills style))] + [:> typography-color-row* {:key idx + :fill fill + :shape shape + :resolved-tokens resolved-tokens + :color-space color-space}])) + + ;; Typography style + (when (and (not composite-typography-token) + (:typography-ref-id style)) + [:> typography-name-block* {:style style}]) + + ;; Composite Typography token + (when (and (not (:typography-ref-id style)) + composite-typography-token) + [:> properties-row* {:term "Typography" + :detail (:name composite-typography-token) + :token composite-typography-token + :property (:name composite-typography-token) + :copiable true}]) + + (when (:font-id style) + (let [name (get (fonts/get-font-data (:font-id style)) :name) + resolved-token (get-resolved-token :font-family shape resolved-tokens)] + [:> properties-row* {:term "Font Family" + :detail name + :token resolved-token + :property (str "font-family: \"" name "\";") + :copiable true}])) + + (when (:font-style style) + [:> properties-row* {:term "Font Style" + :detail (:font-style style) + :property (str "font-style: " (:font-style style) ";") + :copiable true}]) + + (when (:font-size style) + (let [font-size (fmt/format-pixels (:font-size style)) + resolved-token (get-resolved-token :font-size shape resolved-tokens)] + [:> properties-row* {:term "Font Size" + :detail font-size + :token resolved-token + :property (str "font-size: " font-size ";") + :copiable true}])) + (when (:font-weight style) + (let [resolved-token (get-resolved-token :font-weight shape resolved-tokens)] + [:> properties-row* {:term "Font Weight" + :detail (:font-weight style) + :token resolved-token + :property (str "font-weight: " (:font-weight style) ";") + :copiable true}])) + + (when (:line-height style) + (let [line-height (:line-height style) + resolved-token (get-resolved-token :line-height shape resolved-tokens)] + [:> properties-row* {:term "Line Height" + :detail (str line-height) + :token resolved-token + :property (str "line-height: " line-height ";") + :copiable true}])) + + (when (:letter-spacing style) + (let [letter-spacing (fmt/format-pixels (:letter-spacing style)) + resolved-token (get-resolved-token :letter-spacing shape resolved-tokens)] + [:> properties-row* {:term "Letter Spacing" + :detail letter-spacing + :token resolved-token + :property (str "letter-spacing: " letter-spacing ";") + :copiable true}])) + + (when (:text-decoration style) + (let [resolved-token (get-resolved-token :text-decoration shape resolved-tokens)] + [:> properties-row* {:term "Text Decoration" + :detail (:text-decoration style) + :token resolved-token + :property (str "text-decoration: " (:text-decoration style) ";") + :copiable true}])) + + (when (:text-transform style) + (let [resolved-token (get-resolved-token :text-case shape resolved-tokens)] + [:> properties-row* {:term "Text Transform" + :detail (:text-transform style) + :token resolved-token + :property (str "text-transform: " (:text-transform style) ";") + :copiable true}])) + + [:pre {:class (stl/css :text-content-wrapper) + :role "presentation"} + [:> property-detail-copiable* {:copied copied + :on-click copy-text} + [:span {:class (stl/css :text-content) + :style {:font-family (:font-family style) + :font-weight (:font-weight style) + :text-transform (:text-transform style) + :letter-spacing (fmt/format-pixels (:letter-spacing style)) + :font-style (:font-style style)}} + text]]]])) + (mf/defc text-panel* [{:keys [shapes resolved-tokens color-space on-font-shorthand]}] (let [shorthand* (mf/use-state #(generate-typography-shorthand shapes)) @@ -88,123 +204,13 @@ :property shorthand}))) [:div {:class (stl/css :text-panel)} (for [shape shapes] - (let [style-text-blocks (get-style-text shape) - composite-typography-token (get-resolved-token :typography shape resolved-tokens)] + (let [style-text-blocks (get-style-text shape)] [:div {:key (:id shape) :class (stl/css :text-shape)} (for [[style text] style-text-blocks] + [:> style-text-block* {:key (:id shape) + :shape shape + :style style + :text text + :resolved-tokens resolved-tokens + :color-space color-space}])]))])) - [:div {:key (:id shape) :class (stl/css :text-properties)} - - (when (:fills style) - (for [[idx fill] (map-indexed vector (:fills style))] - [:> typography-color-row* {:key idx - :fill fill - :shape shape - :resolved-tokens resolved-tokens - :color-space color-space}])) - - ;; Typography style - (when (and (not composite-typography-token) - (:typography-ref-id style)) - [:> typography-name-block* {:style style}]) - - ;; Composite Typography token - (when (and (not (:typography-ref-id style)) - composite-typography-token) - [:> properties-row* {:term "Typography" - :detail (:name composite-typography-token) - :token composite-typography-token - :property (:name composite-typography-token) - :copiable true}]) - - (when (:font-id style) - (let [name (get (fonts/get-font-data (:font-id style)) :name) - resolved-token (get-resolved-token :font-family shape resolved-tokens)] - [:> properties-row* {:term "Font Family" - :detail name - :token resolved-token - :property (str "font-family: \"" name "\";") - :copiable true}])) - - (when (:font-style style) - [:> properties-row* {:term "Font Style" - :detail (:font-style style) - :property (str "font-style: " (:font-style style) ";") - :copiable true}]) - - (when (:font-size style) - (let [font-size (fmt/format-pixels (:font-size style)) - resolved-token (get-resolved-token :font-size shape resolved-tokens)] - [:> properties-row* {:term "Font Size" - :detail font-size - :token resolved-token - :property (str "font-size: " font-size ";") - :copiable true}])) - (when (:font-weight style) - (let [resolved-token (get-resolved-token :font-weight shape resolved-tokens)] - [:> properties-row* {:term "Font Weight" - :detail (:font-weight style) - :token resolved-token - :property (str "font-weight: " (:font-weight style) ";") - :copiable true}])) - - (when (:line-height style) - (let [line-height (:line-height style) - resolved-token (get-resolved-token :line-height shape resolved-tokens)] - [:> properties-row* {:term "Line Height" - :detail (str line-height) - :token resolved-token - :property (str "line-height: " line-height ";") - :copiable true}])) - - (when (:letter-spacing style) - (let [letter-spacing (fmt/format-pixels (:letter-spacing style)) - resolved-token (get-resolved-token :letter-spacing shape resolved-tokens)] - [:> properties-row* {:term "Letter Spacing" - :detail letter-spacing - :token resolved-token - :property (str "letter-spacing: " letter-spacing ";") - :copiable true}])) - - (when (:text-decoration style) - (let [resolved-token (get-resolved-token :text-decoration shape resolved-tokens)] - [:> properties-row* {:term "Text Decoration" - :detail (:text-decoration style) - :token resolved-token - :property (str "text-decoration: " (:text-decoration style) ";") - :copiable true}])) - - (when (:text-transform style) - (let [resolved-token (get-resolved-token :text-case shape resolved-tokens)] - [:> properties-row* {:term "Text Transform" - :detail (:text-transform style) - :token resolved-token - :property (str "text-transform: " (:text-transform style) ";") - :copiable true}])) - (when text - (let [copied* (mf/use-state false) - copied (deref copied*) - - text (str/trim text) - - copy-text - (mf/use-fn - (mf/deps copied) - (fn [] - (let [formatted-text (if (= (:text-transform style) "uppercase") - (.toUpperCase text) - text)] - (reset! copied* true) - (wapi/write-to-clipboard formatted-text) - (tm/schedule 1000 #(reset! copied* false)))))] - [:pre {:class (stl/css :text-content-wrapper) - :role "presentation"} - [:> property-detail-copiable* {:copied copied - :on-click copy-text} - [:span {:class (stl/css :text-content) - :style {:font-family (:font-family style) - :font-weight (:font-weight style) - :text-transform (:text-transform style) - :letter-spacing (fmt/format-pixels (:letter-spacing style)) - :font-style (:font-style style)}} - text]]]))])]))])) diff --git a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss index 3b578ce640..413f1437f4 100644 --- a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss +++ b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss @@ -53,6 +53,12 @@ display: none; } +:where(.property-detail-text, .property-detail-text-token) { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + .property-detail-text { color: var(--detail-color); } @@ -62,7 +68,4 @@ --detail-color: var(--color-token-foreground); line-height: 1.4; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; } diff --git a/frontend/src/app/main/ui/inspect/styles/style_box.cljs b/frontend/src/app/main/ui/inspect/styles/style_box.cljs index af63cacf39..6251d647ea 100644 --- a/frontend/src/app/main/ui/inspect/styles/style_box.cljs +++ b/frontend/src/app/main/ui/inspect/styles/style_box.cljs @@ -26,8 +26,8 @@ :blur (tr "labels.blur") :shadow (tr "labels.shadow") :layout (tr "labels.layout") - :flex-element "Flex element" - :grid-element "Grid element" + :flex-element "Flex Element" + :grid-element "Grid Element" :layout-element "Layout Element" :visibility (tr "labels.visibility") :svg (tr "labels.svg") diff --git a/frontend/src/app/main/ui/inspect/styles/style_box.scss b/frontend/src/app/main/ui/inspect/styles/style_box.scss index 5ca14f8977..846d3ca5ad 100644 --- a/frontend/src/app/main/ui/inspect/styles/style_box.scss +++ b/frontend/src/app/main/ui/inspect/styles/style_box.scss @@ -11,8 +11,16 @@ --title-padding: var(--sp-s); --title-color: var(--color-foreground-primary); --arrow-color: var(--color-foreground-secondary); + --box-border-color: var(--color-background-primary); + + // TODO: this must be a custom property in the design system + --lowEmphasis-background: #121214; padding-block: var(--sp-s); + padding-inline: var(--sp-m); + background-color: var(--lowEmphasis-background); + + border-block-end: 2px solid var(--box-border-color); } .disclosure-header { @@ -36,7 +44,6 @@ .panel-title { @include use-typography("headline-small"); - text-transform: capitalize; flex: 1; color: var(--title-color); } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index bab8567b15..6b41a73f31 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1989,7 +1989,7 @@ msgstr "Active themes" #: src/app/main/ui/inspect/styles/style_box.cljs:20 msgid "inspect.tabs.styles.panel.variant" -msgstr "Variant properties" +msgstr "Variant Properties" #: src/app/main/ui/inspect/styles/rows/color_properties_row.cljs:102, src/app/main/ui/inspect/styles/rows/properties_row.cljs:53 msgid "inspect.tabs.styles.token.resolved-value" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 1a9bd63688..cfa6372b40 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1992,7 +1992,7 @@ msgstr "Valor resuelto:" #: src/app/main/ui/inspect/right_sidebar.cljs:165 msgid "inspect.tabs.switcher.label" -msgstr "Información sobre la capa" +msgstr "Info. de capa" #: src/app/main/ui/dashboard/comments.cljs:96 msgid "label.mark-all-as-read"