diff --git a/frontend/resources/images/icons/eye-off.svg b/frontend/resources/images/icons/eye-off.svg new file mode 100644 index 000000000..00c1582b4 --- /dev/null +++ b/frontend/resources/images/icons/eye-off.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs index 531d7763f..6e96db767 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs +++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs @@ -134,6 +134,7 @@ (def ^:icon-id exit "exit") (def ^:icon-id expand "expand") (def ^:icon-id external-link "external-link") +(def ^:icon-id eye-off "eye-off") (def ^:icon-id feedback "feedback") (def ^:icon-id fill-content "fill-content") (def ^:icon-id filter "filter") diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 3c23a7c0e..477470224 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -111,6 +111,7 @@ (def ^:icon elipse (icon-xref :elipse)) (def ^:icon exit (icon-xref :exit)) (def ^:icon expand (icon-xref :expand)) +(def ^:icon external-link (icon-xref :external-link)) (def ^:icon feedback (icon-xref :feedback)) (def ^:icon fill-content (icon-xref :fill-content)) (def ^:icon filter-icon (icon-xref :filter)) @@ -144,7 +145,6 @@ (def ^:icon img (icon-xref :img)) (def ^:icon interaction (icon-xref :interaction)) (def ^:icon join-nodes (icon-xref :join-nodes)) -(def ^:icon external-link (icon-xref :external-link)) (def ^:icon justify-content-column-around (icon-xref :justify-content-column-around)) (def ^:icon justify-content-column-between (icon-xref :justify-content-column-between)) (def ^:icon justify-content-column-center (icon-xref :justify-content-column-center)) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 7379d944a..b17934aa5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -303,6 +303,16 @@ tokens)] (ctob/group-by-type tokens))) + active-token-sets-names + (mf/with-memo [tokens-lib] + (some-> tokens-lib (ctob/get-active-themes-set-names))) + + token-set-active? + (mf/use-fn + (mf/deps active-token-sets-names) + (fn [name] + (contains? active-token-sets-names name))) + [empty-group filled-group] (mf/with-memo [tokens-by-type] (get-sorted-token-groups tokens-by-type))] @@ -319,7 +329,14 @@ [:* [:& token-context-menu] - [:span {:class (stl/css :sets-header)} (tr "workspace.token.tokens-section-title" selected-token-set-name)] + [:div {:class (stl/css :sets-header-container)} + [:span {:class (stl/css :sets-header)} (tr "workspace.token.tokens-section-title" selected-token-set-name)] + [:div {:class (stl/css :sets-header-status) :title (tr "workspace.token.inactive-set-description")} + (when (not (token-set-active? selected-token-set-name)) + [:* + [:> i/icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}] + [:span {:class (stl/css :sets-header-status-text)} + (tr "workspace.token.inactive-set")]])]] (for [type filled-group] (let [tokens (get tokens-by-type type)] diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 6828a4665..61e51e48a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -39,7 +39,7 @@ } .themes-header, -.sets-header { +.sets-header-container { @include use-typography("headline-small"); display: block; padding: $s-8; @@ -47,10 +47,31 @@ word-break: break-word; } -.sets-header { +.sets-header-container { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: $s-4; margin-block-start: $s-8; } +.sets-header { + flex: 1; +} + +.sets-header-status { + @include use-typography("body-small"); + text-transform: none; + color: var(--color-foreground-secondary); + display: flex; + align-items: center; + gap: $s-4; +} + +.sets-header-status-text { + font-style: italic; +} + .themes-wrapper { padding: $s-12 0 0 $s-12; } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 72945e641..017df68ed 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -6946,6 +6946,14 @@ msgstr "Enter a value or alias with {alias}" msgid "workspace.token.tokens-section-title" msgstr "TOKENS - %s" +#: src/app/main/ui/workspace/tokens/sidebar.cljs:345 +msgid "workspace.token.inactive-set" +msgstr "Inactive" + +#: src/app/main/ui/workspace/tokens/sidebar.cljs:340 +msgid "workspace.token.inactive-set-description" +msgstr "This set is not active. Change theme or activate the set / theme to see changes in the canvas" + #: src/app/main/ui/workspace/tokens/sidebar.cljs:405 msgid "workspace.token.tools" msgstr "Tools" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 0bfc1e64a..87aa2a091 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -6924,6 +6924,14 @@ msgstr "Valor" msgid "workspace.token.token-value-enter" msgstr "Introduce un valor o un alias usando {alias}" +#: src/app/main/ui/workspace/tokens/sidebar.cljs:345 +msgid "workspace.token.inactive-set" +msgstr "Inactivo" + +#: src/app/main/ui/workspace/tokens/sidebar.cljs:340 +msgid "workspace.token.inactive-set-description" +msgstr "Set inactivo. Cambia el tema o activa el set para ver los cambios en el canvas." + #: src/app/main/ui/workspace/tokens/sidebar.cljs:405 msgid "workspace.token.tools" msgstr "Herramientas"