0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-01 17:41:50 -05:00

Add dropdown for layout creation

This commit is contained in:
alonso.torres 2023-12-04 13:48:02 +01:00 committed by Andrey Antukh
parent 4f6b21c41c
commit a13ebbaa43
2 changed files with 66 additions and 33 deletions

View file

@ -16,6 +16,7 @@
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.select :refer [select]]
@ -1129,6 +1130,9 @@
layout-type (:layout values)
has-layout? (some? layout-type)
show-layout-dropdown* (mf/use-state false)
show-layout-dropdown? @show-layout-dropdown*
state* (mf/use-state (if layout-type
true
false))
@ -1137,9 +1141,10 @@
toggle-content (mf/use-fn #(swap! state* not))
on-add-layout
(fn [type]
(st/emit! (dwsl/create-layout type))
(reset! state* true))
(mf/use-callback
(fn [type]
(st/emit! (dwsl/create-layout type))
(reset! state* true)))
on-set-layout
(mf/use-fn
@ -1155,23 +1160,18 @@
(reset! state* false))
set-flex
(fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :flex))
(mf/use-callback
(mf/deps on-add-layout)
(fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :flex)))
set-grid
(fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :grid))
toggle-layout-style
(mf/use-fn
(fn [value]
(if (= "flex" value)
(set-flex)
(set-grid))))
;; Flex-direction
(mf/use-callback
(mf/deps on-add-layout)
(fn []
(st/emit! (dwsl/remove-layout ids))
(on-add-layout :grid)))
saved-dir (:layout-flex-dir values)
@ -1342,7 +1342,17 @@
(let [value (cond-> value new-css-system keyword)]
(if (= type :row)
(st/emit! (dwsl/update-layout ids {:layout-justify-content value}))
(st/emit! (dwsl/update-layout ids {:layout-align-content value}))))))]
(st/emit! (dwsl/update-layout ids {:layout-align-content value}))))))
handle-show-layout-dropdown
(mf/use-callback
(fn []
(swap! show-layout-dropdown* not)))
handle-close-layout-options
(mf/use-callback
(fn []
(reset! show-layout-dropdown* false)))]
(if new-css-system
[:div {:class (stl/css :element-set)}
@ -1354,24 +1364,26 @@
:class (stl/css-case :title-spacing-layout (not has-layout?))}
(if (and (not multiple) (:layout values))
[:div {:class (stl/css :title-actions)}
(when ^boolean grid-enabled?
[:div {:class (stl/css :layout-options)}
[:& radio-buttons {:selected (d/name layout-type)
:on-change toggle-layout-style
:name "layout-style"
:wide true}
[:& radio-button {:value "flex"
:id :flex}]
[:& radio-button {:value "grid"
:id :grid}]]])
[:button {:class (stl/css :remove-layout)
:on-click on-remove-layout}
i/remove-refactor]]
[:div {:class (stl/css :title-actions)}
[:button {:class (stl/css :add-layout)
:data-value :flex
:on-click on-set-layout}
i/add-refactor]])]]
(if ^boolean grid-enabled?
[:*
[:button {:class (stl/css :add-layout)
:on-click handle-show-layout-dropdown}
i/add-refactor]
[:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options}
[:div {:class (stl/css :layout-options)}
[:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"]
[:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]]
[:button {:class (stl/css :add-layout)
:data-value :flex
:on-click on-set-layout}
i/add-refactor])])]]
(when (and open? has-layout?)
(when (not= :multiple layout-type)

View file

@ -13,6 +13,7 @@
}
.title-actions {
position: relative;
display: flex;
gap: $s-4;
height: $s-32;
@ -310,3 +311,23 @@
}
}
}
.layout-options {
@extend .dropdown-wrapper;
@include flexColumn;
right: 0;
left: initial;
button {
cursor: pointer;
padding: $s-8;
color: $df-primary;
background: none;
border: none;
border-radius: $br-6;
&:hover {
background: $db-cuaternary;
}
}
}