3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-29 22:16:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Display inactive set warning

Browse source
This commit is contained in:
Xavier Julian 2025-04-03 15:17:41 +02:00 • committed by Xaviju
parent caf558f8dd
commit b6f2a434cf
7 changed files with 62 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
View file

@ -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")

2
frontend/src/app/main/ui/icons.cljs
View file

@ -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))

19
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -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)]

25
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -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;
}