diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/inspect/right_sidebar.cljs index b9cc8dd87c..ff2f1b671e 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.cljs +++ b/frontend/src/app/main/ui/inspect/right_sidebar.cljs @@ -104,7 +104,7 @@ tabs (mf/with-memo [] (if (contains? cf/flags :inspect-styles) - [{:label (tr "inspect.tabs.styles") + [{:label (tr "labels.styles") :id "styles"} {:label (tr "inspect.tabs.computed") :id "computed"} @@ -179,6 +179,7 @@ (case @section :styles [:> styles-tab* {:color-space color-space + :objects objects :shapes shapes :libraries libraries :file-id file-id}] diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs index dc11bc4e04..48225eab3c 100644 --- a/frontend/src/app/main/ui/inspect/styles.cljs +++ b/frontend/src/app/main/ui/inspect/styles.cljs @@ -8,12 +8,13 @@ [app.common.types.tokens-lib :as ctob] [app.main.refs :as refs] [app.main.ui.inspect.styles.panels.tokens-panel :refer [tokens-panel*]] + [app.main.ui.inspect.styles.panels.variants-panel :refer [variants-panel*]] [app.main.ui.inspect.styles.style-box :refer [style-box*]] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) -(def type->options +(def type->panel-group {:multiple [:fill :stroke :text :shadow :blur :layout-element] :frame [:visibility :geometry :fill :stroke :shadow :blur :layout :layout-element] :group [:visibility :geometry :svg :layout-element] @@ -34,27 +35,31 @@ :multiple)) (mf/defc styles-tab* - [{:keys [color-space shapes libraries file-id]}] + [{:keys [color-space shapes libraries objects file-id]}] (let [data (dm/get-in libraries [file-id :data]) first-shape (first shapes) - first-component (mf/with-memo (ctkl/get-component data (:component-id first-shape))) - type (mf/with-memo (get-shape-type shapes first-shape first-component)) - - ;; Must be reviewed for performance and code clarity + first-component (ctkl/get-component data (:component-id first-shape)) + type (get-shape-type shapes first-shape first-component) tokens-lib (mf/deref refs/tokens-lib) active-themes (mf/deref refs/workspace-active-theme-paths-no-hidden) active-sets (mf/with-memo [tokens-lib] (some-> tokens-lib (ctob/get-active-themes-set-names))) - options (type->options type)] + panels (type->panel-group type)] [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")} (when (or active-themes active-sets) [:li - [:> style-box* {:attribute :token} - [:> tokens-panel* {:themes active-themes :sets active-sets}]]]) - (for [option options] - [:li {:key (d/name option)} - [:> style-box* {:attribute option} color-space]])])) + [:> style-box* {:panel :token} + [:> tokens-panel* {:theme-paths active-themes :set-names active-sets}]]]) + (for [panel panels] + [:li {:key (d/name panel)} + [:> style-box* {:panel panel} + (case panel + :variant [:> variants-panel* {:component first-component + :objects objects + :shape first-shape + :data data}] + color-space)]])])) ;; WIP diff --git a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs index cfd48ebe9b..7ab0c72804 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs @@ -1,39 +1,22 @@ (ns app.main.ui.inspect.styles.panels.tokens-panel (:require-macros [app.main.style :as stl]) (:require + [app.main.ui.inspect.styles.properties-row :refer [properties-row*]] [app.util.i18n :refer [tr]] - [app.util.webapi :as wapi] [cuerdas.core :as str] [rumext.v2 :as mf])) -(mf/defc tokens-row* - [{:keys [term detail copiable]}] - (let [copiable? (or copiable false) - detail? (not (or (nil? detail) (str/blank? detail))) - detail (if detail? detail "-") - copy-attr - (mf/use-fn - (fn [] - (wapi/write-to-clipboard (str term ": " detail))))] - [:dl {:class (stl/css :attribute-row)} - [:dt {:class (stl/css :attribute-term)} term] - [:dd {:class (stl/css :attribute-detail)} - (if (and copiable? detail?) - [:button {:class (stl/css :attribute-detail-copiable) - :on-click copy-attr} detail] - detail)]])) - (mf/defc tokens-panel* [{:keys [theme-paths set-names]}] [:div {:class (stl/css :tokens-panel)} (when (seq theme-paths) (for [theme theme-paths] - [:> tokens-row* {:key theme - :class (stl/css :token-theme) - :term (tr "inspect.tabs.styles.panel.tokens.active-themes") - :detail theme}])) + [:> properties-row* {:key theme + :class (stl/css :token-theme) + :term (tr "inspect.tabs.styles.panel.tokens.active-themes") + :detail theme}])) (when (seq set-names) (let [sets-list (str/join ", " set-names)] - [:> tokens-row* {:class (stl/css :token-theme) - :term (tr "inspect.tabs.styles.panel.tokens.active-sets") - :detail sets-list}]))]) + [:> properties-row* {:class (stl/css :token-theme) + :term (tr "inspect.tabs.styles.panel.tokens.active-sets") + :detail sets-list}]))]) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/variants_panel.cljs b/frontend/src/app/main/ui/inspect/styles/panels/variants_panel.cljs new file mode 100644 index 0000000000..fd604a4c04 --- /dev/null +++ b/frontend/src/app/main/ui/inspect/styles/panels/variants_panel.cljs @@ -0,0 +1,24 @@ +(ns app.main.ui.inspect.styles.panels.variants-panel + (:require-macros [app.main.style :as stl]) + (:require + [app.common.data.macros :as dm] + [app.common.files.variant :as cfv] + [app.common.types.component :as ctc] + [app.main.ui.inspect.styles.properties-row :refer [properties-row*]] + [cuerdas.core :as str] + [rumext.v2 :as mf])) + +(mf/defc variants-panel* + [{:keys [component objects shape data]}] + (let [is-container? (ctc/is-variant-container? shape) + properties (mf/with-memo [objects shape] + (if is-container? + (->> (cfv/extract-properties-values data objects (:id shape)) + (map #(update % :value (partial str/join ", ")))) + (->> (:variant-properties component) + (map #(update % :value (fn [v] (if (str/blank? v) "--" v)))))))] + [:div {:class (stl/css :variants-panel)} + (for [property properties] + [:> properties-row* {:key (dm/str "variant-property-" property) + :term (:name property) + :detail (:value property)}])])) diff --git a/frontend/src/app/main/ui/inspect/styles/properties_row.cljs b/frontend/src/app/main/ui/inspect/styles/properties_row.cljs new file mode 100644 index 0000000000..df2cc457f7 --- /dev/null +++ b/frontend/src/app/main/ui/inspect/styles/properties_row.cljs @@ -0,0 +1,30 @@ +(ns app.main.ui.inspect.styles.properties-row + (:require-macros [app.main.style :as stl]) + (:require + [app.util.webapi :as wapi] + [cuerdas.core :as str] + [rumext.v2 :as mf])) + +(def ^:private schema:properties-row + [:map + [:term :string] + [:detail :string] + [:copiable {:optional true} :boolean]]) + +(mf/defc properties-row* + {::mf/schema schema:properties-row} + [{:keys [term detail copiable]}] + (let [copiable? (or copiable false) + detail? (not (or (nil? detail) (str/blank? detail))) + detail (if detail? detail "-") + copy-attr + (mf/use-fn + (fn [] + (wapi/write-to-clipboard (str term ": " detail))))] + [:dl {:class (stl/css :property-row)} + [:dt {:class (stl/css :property-term)} term] + [:dd {:class (stl/css :property-detail)} + (if (and copiable? detail?) + [:button {:class (stl/css :property-detail-copiable) + :on-click copy-attr} detail] + detail)]])) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss b/frontend/src/app/main/ui/inspect/styles/properties_row.scss similarity index 80% rename from frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss rename to frontend/src/app/main/ui/inspect/styles/properties_row.scss index 2cb84aff07..51b193a33c 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss +++ b/frontend/src/app/main/ui/inspect/styles/properties_row.scss @@ -4,11 +4,11 @@ // // Copyright (c) KALEIDOS INC -@use "../../../ds/typography.scss" as *; +@use "../../ds/typography.scss" as *; // TOKENS ROW -.attribute-row { +.property-row { --term-color: var(--color-foreground-secondary); --detail-color: var(--color-foreground-primary); @@ -16,17 +16,17 @@ padding-block: var(--sp-s); } -.attribute-term, -.attribute-detail { +.property-term, +.property-detail { @include use-typography("body-small"); } -.attribute-term { +.property-term { color: var(--term-color); flex: 1; } -.attribute-detail { +.property-detail { flex: 2; color: var(--detail-color); } 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 a3eeb798f7..d72796da53 100644 --- a/frontend/src/app/main/ui/inspect/styles/style_box.cljs +++ b/frontend/src/app/main/ui/inspect/styles/style_box.cljs @@ -5,9 +5,10 @@ [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.util.i18n :refer [tr]] + [app.util.webapi :as wapi] [rumext.v2 :as mf])) -(defn- attribute->title +(defn- panel->title [type] (case type :variant (tr "inspect.tabs.styles.panel.variant") @@ -25,11 +26,11 @@ nil)) (mf/defc style-box* - [{:keys [attribute shorthand children]}] + [{:keys [panel shorthand children]}] (let [expanded* (mf/use-state true) expanded (deref expanded*) - title (attribute->title attribute) + title (panel->title panel) toggle-panel (mf/use-fn @@ -40,12 +41,12 @@ copy-shorthand (mf/use-fn (fn [] - (js/navigator.clipboard.writeText (str "Style: " title))))] + (wapi/write-to-clipboard (str "Style: " title))))] [:article {:class (stl/css :style-box)} [:header {:class (stl/css :disclosure-header)} [:button {:class (stl/css :disclosure-button) :aria-expanded expanded - :aria-controls (str "style-box-" (d/name attribute)) + :aria-controls (str "style-box-" (d/name panel)) :on-click toggle-panel :aria-label (tr "inspect.tabs.styles.panel.toggle-style" title)} [:> icon* {:icon-id (if expanded "arrow-down" "arrow") @@ -58,5 +59,5 @@ :on-click copy-shorthand :icon "clipboard"}])] (when expanded - [:div {:class (stl/css :style-box-content) :id (str "style-box-" (d/name attribute))} + [:div {:class (stl/css :style-box-content) :id (str "style-box-" (d/name panel))} [:div {:class (stl/css :style-box-panel-wrapper)} children]])])) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 0752063cb6..f189cb51f1 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1853,6 +1853,10 @@ msgstr "Info" msgid "labels.styles" msgstr "Styles" +#: src/app/main/ui/inspect/right_sidebar.cljs:165 +msgid "inspect.tabs.switcher.label" +msgstr "Layer info" + #: src/app/main/ui/inspect/styles/style_box.cljs:10 msgid "inspect.tabs.styles.panel.variant" msgstr "Variant properties"