Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -05:00
Code Issues Activity

Style empty state, jump to create theme dialog when no themes exist

Browse source
This commit is contained in:
Florian Schroedl 2024-08-26 15:02:38 +02:00
parent 7cd9c60fb6
commit 4060b6d40f
2 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -27,9 +27,15 @@
(i/icon-xref :close (stl/css :close-icon))) (i/icon-xref :close (stl/css :close-icon)))
(mf/defc empty-themes (mf/defc empty-themes
[{:keys []}] [{:keys [set-state]}]
"Empty") [:div {:class (stl/css :empty-themes-wrapper)}
[:div {:class (stl/css :empty-themes-message)}
[:h1 "You currently have no themes."]
[:p "Create your first theme now."]]
[:div {:class (stl/css :button-footer)}
[:button {:class (stl/css :button-primary)
:on-click #(set-state (fn [_] {:type :create-theme}))}
"New theme"]]])
(mf/defc switch (mf/defc switch
[{:keys [selected? name on-change]}] [{:keys [selected? name on-change]}]
@ -198,7 +204,7 @@
[{:keys [] :as _args}] [{:keys [] :as _args}]
(let [themes (mf/deref refs/workspace-ordered-token-themes) (let [themes (mf/deref refs/workspace-ordered-token-themes)
state (mf/use-state (if (empty? themes) state (mf/use-state (if (empty? themes)
{:type :empty-themes} {:type :create-theme}
{:type :themes-overview})) {:type :themes-overview}))
set-state (mf/use-callback #(swap! state %)) set-state (mf/use-callback #(swap! state %))
title (case (:type @state) title (case (:type @state)
@ -206,7 +212,7 @@
"Themes") "Themes")
component (case (:type @state) component (case (:type @state)
:empty-themes empty-themes :empty-themes empty-themes
:themes-overview themes-overview :themes-overview (if (empty? themes) empty-themes themes-overview)
:edit-theme controlled-edit-theme :edit-theme controlled-edit-theme
:create-theme create-theme)] :create-theme create-theme)]
[:div [:div

24
frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
View file

@ -56,6 +56,30 @@ hr {
padding: $s-6; padding: $s-6;
} }
.empty-themes-wrapper {
display: flex;
flex-direction: column;
.empty-themes-message {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: $s-12;
padding: $s-72 0;
h1 {
@include headlineLargeTypography;
}
p {
@include bodyMediumTypography;
font-weight: 500;
color: var(--color-foreground-secondary);
}
}
}
.create-theme-button { .create-theme-button {
@extend .button-secondary; @extend .button-secondary;
padding: $s-6; padding: $s-6;