Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 20:09:04 -05:00
Code Issues Activity

Add footer buttons

Browse source
This commit is contained in:
Florian Schroedl 2024-08-23 17:07:47 +02:00
parent 6f7b69c7ee
commit db1250a315
3 changed files with 46 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui.cljs
View file

@ -192,7 +192,6 @@
[:& (mf/provider ctx/current-route) {:value route} [:& (mf/provider ctx/current-route) {:value route}
[:& (mf/provider ctx/current-profile) {:value profile} [:& (mf/provider ctx/current-profile) {:value profile}
[:& wtmt/modal]
(if edata (if edata
[:& static/exception-page {:data edata :route route}] [:& static/exception-page {:data edata :route route}]
[:* [:*

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

@ -10,6 +10,7 @@
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[cuerdas.core :as str] [cuerdas.core :as str]
[app.main.ui.workspace.tokens.common :refer [labeled-input]]
[app.main.ui.workspace.tokens.sets :as wts] [app.main.ui.workspace.tokens.sets :as wts]
[app.main.data.tokens :as wdt] [app.main.data.tokens :as wdt]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -108,13 +109,24 @@
(fn [token-set-id] (fn [token-set-id]
(st/emit! (wdt/toggle-token-set {:token-set-id token-set-id (st/emit! (wdt/toggle-token-set {:token-set-id token-set-id
:token-theme-id (:id theme)}))))] :token-theme-id (:id theme)}))))]
[:div {:class (stl/css :edit-theme-wrapper)}
[:div {:class (stl/css :edit-theme-inputs-wrapper)}
[:& labeled-input {:label "Group"
:input-props {:value (:group theme)}}]
[:& labeled-input {:label "Theme"
:input-props {:value (:name theme)}}]]
[:div {:class (stl/css :sets-list-wrapper)} [:div {:class (stl/css :sets-list-wrapper)}
[:& wts/controlled-sets-list [:& wts/controlled-sets-list
{:token-sets token-sets {:token-sets token-sets
:token-set-selected? (constantly false) :token-set-selected? (constantly false)
:token-set-active? token-set-active? :token-set-active? token-set-active?
:on-select on-toggle-token-set :on-select on-toggle-token-set
:on-toggle on-toggle-token-set}]])) :on-toggle on-toggle-token-set}]]
[:div {:class (stl/css :edit-theme-footer)}
[:button {:class (stl/css :button-secondary)} "Delete"]
[:div {:class (stl/css :button-footer)}
[:button {:class (stl/css :button-secondary)} "Cancel"]
[:button {:class (stl/css :button-primary)} "Save theme"]]]]))
(mf/defc themes (mf/defc themes
[{:keys [] :as _args}] [{:keys [] :as _args}]

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

@ -37,6 +37,22 @@ hr {
.button-footer { .button-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: $s-6;
}
.edit-theme-footer {
display: flex;
justify-content: space-between;
}
.button-primary {
@extend .button-primary;
padding: $s-6;
}
.button-secondary {
@extend .button-secondary;
padding: $s-6;
} }
.create-theme-button { .create-theme-button {
@ -103,6 +119,17 @@ hr {
} }
} }
.edit-theme-wrapper {
display: flex;
flex-direction: column;
gap: $s-12;
}
.edit-theme-inputs-wrapper {
display: flex;
gap: $s-12;
}
.sets-list-wrapper { .sets-list-wrapper {
border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent); border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
border-radius: $s-8; border-radius: $s-8;