mirror of
https://github.com/penpot/penpot.git
synced 2025-01-23 23:18:48 -05:00
💄 Fix naming inconsistencies on layout menu components
This commit is contained in:
Andrey Antukh
parent
87f0e46036
commit
65df775937
2 changed files with 279 additions and 330 deletions
|
|
@ -32,7 +32,7 @@
|
|||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(defn dir-icons-refactor
|
||||
(defn- dir-icons-refactor
|
||||
[val]
|
||||
(case val
|
||||
:row i/grid-row-refactor
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
:stretch i/align-self-column-strech
|
||||
:baseline i/align-self-column-baseline))))
|
||||
|
||||
(defn get-layout-grid-icon-refactor
|
||||
(defn get-layout-grid-icon
|
||||
[type val ^boolean column?]
|
||||
(case type
|
||||
:align-items
|
||||
|
|
@ -170,9 +170,11 @@
|
|||
:stretch i/align-content-row-stretch-refactor))))
|
||||
|
||||
(mf/defc direction-row-flex
|
||||
{::mf/props :obj}
|
||||
[{:keys [saved-dir on-change]}]
|
||||
[:& radio-buttons {:selected (d/name saved-dir)
|
||||
{::mf/props :obj
|
||||
::mf/private true}
|
||||
[{:keys [value on-change]}]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name "flex-direction"}
|
||||
[:& radio-button {:value "row"
|
||||
|
|
@ -205,8 +207,9 @@
|
|||
|
||||
(mf/defc align-row
|
||||
{::mf/props :obj}
|
||||
[{:keys [is-column align-items on-change]}]
|
||||
[:& radio-buttons {:selected (d/name align-items)
|
||||
[{:keys [is-column value on-change]}]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name "flex-align-items"}
|
||||
[:& radio-button {:value "start"
|
||||
|
|
@ -224,34 +227,35 @@
|
|||
|
||||
(mf/defc align-content-row
|
||||
{::mf/props :obj}
|
||||
[{:keys [is-column align-content on-change]}]
|
||||
[:& radio-buttons {:selected (d/name align-content)
|
||||
[{:keys [is-column value on-change]}]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name "flex-align-content"}
|
||||
[:& radio-button {:value "start"
|
||||
:icon (get-layout-flex-icon :align-content :start is-column)
|
||||
:title "Align content start"
|
||||
:id "align-content-start"}]
|
||||
[:& radio-button {:value "center"
|
||||
:icon (get-layout-flex-icon :align-content :center is-column)
|
||||
:title "Align content center"
|
||||
:id "align-content-center"}]
|
||||
[:& radio-button {:value "end"
|
||||
:icon (get-layout-flex-icon :align-content :end is-column)
|
||||
:title "Align content end"
|
||||
:id "align-content-end"}]
|
||||
[:& radio-button {:value "space-between"
|
||||
:icon (get-layout-flex-icon :align-content :space-between is-column)
|
||||
:title "Align content space-between"
|
||||
:id "align-content-space-between"}]
|
||||
[:& radio-button {:value "space-around"
|
||||
:icon (get-layout-flex-icon :align-content :space-around is-column)
|
||||
:title "Align content space-around"
|
||||
:id "align-content-space-around"}]
|
||||
[:& radio-button {:value "space-evenly"
|
||||
:icon (get-layout-flex-icon :align-content :space-evenly is-column)
|
||||
:title "Align content space-evenly"
|
||||
:id "align-content-space-evenly"}]])
|
||||
[:& radio-button {:value "start"
|
||||
:icon (get-layout-flex-icon :align-content :start is-column)
|
||||
:title "Align content start"
|
||||
:id "align-content-start"}]
|
||||
[:& radio-button {:value "center"
|
||||
:icon (get-layout-flex-icon :align-content :center is-column)
|
||||
:title "Align content center"
|
||||
:id "align-content-center"}]
|
||||
[:& radio-button {:value "end"
|
||||
:icon (get-layout-flex-icon :align-content :end is-column)
|
||||
:title "Align content end"
|
||||
:id "align-content-end"}]
|
||||
[:& radio-button {:value "space-between"
|
||||
:icon (get-layout-flex-icon :align-content :space-between is-column)
|
||||
:title "Align content space-between"
|
||||
:id "align-content-space-between"}]
|
||||
[:& radio-button {:value "space-around"
|
||||
:icon (get-layout-flex-icon :align-content :space-around is-column)
|
||||
:title "Align content space-around"
|
||||
:id "align-content-space-around"}]
|
||||
[:& radio-button {:value "space-evenly"
|
||||
:icon (get-layout-flex-icon :align-content :space-evenly is-column)
|
||||
:title "Align content space-evenly"
|
||||
:id "align-content-space-evenly"}]])
|
||||
|
||||
(mf/defc justify-content-row
|
||||
{::mf/props :obj}
|
||||
|
|
@ -300,18 +304,18 @@
|
|||
|
||||
(mf/defc simple-padding-selection
|
||||
{::mf/props :obj}
|
||||
[{:keys [padding on-change]}]
|
||||
(let [p1 (:p1 padding)
|
||||
p2 (:p2 padding)
|
||||
p3 (:p3 padding)
|
||||
p4 (:p4 padding)
|
||||
[{:keys [value on-change]}]
|
||||
(let [p1 (:p1 value)
|
||||
p2 (:p2 value)
|
||||
p3 (:p3 value)
|
||||
p4 (:p4 value)
|
||||
|
||||
p1 (if (and (not (= :multiple padding))
|
||||
p1 (if (and (not (= :multiple value))
|
||||
(= p1 p3))
|
||||
p1
|
||||
"--")
|
||||
|
||||
p2 (if (and (not (= :multiple padding))
|
||||
p2 (if (and (not (= :multiple value))
|
||||
(= p2 p4))
|
||||
p2
|
||||
"--")
|
||||
|
|
@ -370,11 +374,11 @@
|
|||
|
||||
(mf/defc multiple-padding-selection
|
||||
{::mf/props :obj}
|
||||
[{:keys [padding on-change]}]
|
||||
(let [p1 (:p1 padding)
|
||||
p2 (:p2 padding)
|
||||
p3 (:p3 padding)
|
||||
p4 (:p4 padding)
|
||||
[{:keys [value on-change]}]
|
||||
(let [p1 (:p1 value)
|
||||
p2 (:p2 value)
|
||||
p3 (:p3 value)
|
||||
p4 (:p4 value)
|
||||
|
||||
on-change'
|
||||
(mf/use-fn
|
||||
|
|
@ -582,33 +586,11 @@
|
|||
|
||||
;; GRID COMPONENTS
|
||||
|
||||
(defn get-layout-grid-icon
|
||||
[type val ^boolean column?]
|
||||
(case type
|
||||
:justify-items
|
||||
(if column?
|
||||
(case val
|
||||
:stretch i/align-items-row-strech
|
||||
:start i/grid-justify-content-column-start
|
||||
:end i/grid-justify-content-column-end
|
||||
:center i/grid-justify-content-column-center
|
||||
:space-around i/grid-justify-content-column-around
|
||||
:space-between i/grid-justify-content-column-between
|
||||
:space-evenly i/grid-justify-content-column-between)
|
||||
|
||||
(case val
|
||||
:stretch i/align-items-column-strech
|
||||
:start i/grid-justify-content-row-start
|
||||
:end i/grid-justify-content-row-end
|
||||
:center i/grid-justify-content-row-center
|
||||
:space-around i/grid-justify-content-row-around
|
||||
:space-between i/grid-justify-content-row-between
|
||||
:space-evenly i/grid-justify-content-row-between))))
|
||||
|
||||
(mf/defc direction-row-grid
|
||||
{::mf/props :obj}
|
||||
[{:keys [saved-dir on-change] :as props}]
|
||||
[:& radio-buttons {:selected (d/name saved-dir)
|
||||
[{:keys [value on-change] :as props}]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name "grid-direction"}
|
||||
[:& radio-button {:value "row"
|
||||
|
|
@ -649,15 +631,15 @@
|
|||
:on-change on-change
|
||||
:name (dm/str "flex-align-items-" type)}
|
||||
[:& radio-button {:value "start"
|
||||
:icon (get-layout-grid-icon-refactor :align-items :start is-column)
|
||||
:icon (get-layout-grid-icon :align-items :start is-column)
|
||||
:title "Align items start"
|
||||
:id (dm/str "align-items-start-" type)}]
|
||||
[:& radio-button {:value "center"
|
||||
:icon (get-layout-grid-icon-refactor :align-items :center is-column)
|
||||
:icon (get-layout-grid-icon :align-items :center is-column)
|
||||
:title "Align items center"
|
||||
:id (dm/str "align-items-center-" type)}]
|
||||
[:& radio-button {:value "end"
|
||||
:icon (get-layout-grid-icon-refactor :align-items :end is-column)
|
||||
:icon (get-layout-grid-icon :align-items :end is-column)
|
||||
:title "Align items end"
|
||||
:id (dm/str "align-items-end-" type)}]]))
|
||||
|
||||
|
|
@ -673,37 +655,37 @@
|
|||
|
||||
[:& radio-button {:key "justify-item-start"
|
||||
:value "start"
|
||||
:icon (get-layout-grid-icon-refactor :justify-items :start is-column)
|
||||
:icon (get-layout-grid-icon :justify-items :start is-column)
|
||||
:title "Justify items start"
|
||||
:id (dm/str "justify-items-start-" type)}]
|
||||
|
||||
[:& radio-button {:key "justify-item-center"
|
||||
:value "center"
|
||||
:icon (get-layout-grid-icon-refactor :justify-items :center is-column)
|
||||
:icon (get-layout-grid-icon :justify-items :center is-column)
|
||||
:title "Justify items center"
|
||||
:id (dm/str "justify-items-center-" type)}]
|
||||
|
||||
[:& radio-button {:key "justify-item-end"
|
||||
:value "end"
|
||||
:icon (get-layout-grid-icon-refactor :justify-items :end is-column)
|
||||
:icon (get-layout-grid-icon :justify-items :end is-column)
|
||||
:title "Justify items end"
|
||||
:id (dm/str "justify-items-end-" type)}]
|
||||
|
||||
[:& radio-button {:key "justify-item-space-around"
|
||||
:value "space-around"
|
||||
:icon (get-layout-grid-icon-refactor :justify-items :space-around is-column)
|
||||
:icon (get-layout-grid-icon :justify-items :space-around is-column)
|
||||
:title "Justify items space-around"
|
||||
:id (dm/str "justify-items-space-around-" type)}]
|
||||
|
||||
[:& radio-button {:key "justify-item-space-between"
|
||||
:value "space-between"
|
||||
:icon (get-layout-grid-icon-refactor :justify-items :space-between is-column)
|
||||
:icon (get-layout-grid-icon :justify-items :space-between is-column)
|
||||
:title "Justify items space-between"
|
||||
:id (dm/str "justify-items-space-between-" type)}]
|
||||
|
||||
[:& radio-button {:key "justify-item-stretch"
|
||||
:value "stretch"
|
||||
:icon (get-layout-grid-icon-refactor :justify-items :stretch is-column)
|
||||
:icon (get-layout-grid-icon :justify-items :stretch is-column)
|
||||
:title "Justify items stretch"
|
||||
:id (dm/str "justify-items-stretch-" type)}]]))
|
||||
|
||||
|
|
@ -842,70 +824,51 @@
|
|||
|
||||
;; LAYOUT COMPONENT
|
||||
|
||||
(defn- open-flex-help
|
||||
[_]
|
||||
(st/emit! (dom/open-new-window cf/flex-help-uri)))
|
||||
|
||||
(defn- open-grid-help
|
||||
[_]
|
||||
(st/emit! (dom/open-new-window cf/grid-help-uri)))
|
||||
|
||||
(mf/defc layout-container-menu
|
||||
{::mf/memo #{:ids :values :multiple}
|
||||
::mf/props :obj}
|
||||
[{:keys [ids values multiple]}]
|
||||
(let [;; Display
|
||||
layout-type (:layout values)
|
||||
has-layout? (some? layout-type)
|
||||
layout-type (:layout values)
|
||||
has-layout? (some? layout-type)
|
||||
|
||||
show-layout-dropdown* (mf/use-state false)
|
||||
show-layout-dropdown? @show-layout-dropdown*
|
||||
show-dropdown* (mf/use-state false)
|
||||
show-dropdown? @show-dropdown*
|
||||
|
||||
state* (mf/use-state (if layout-type
|
||||
true
|
||||
false))
|
||||
open* (mf/use-state #(if layout-type true false))
|
||||
open? (deref open*)
|
||||
|
||||
open? (deref state*)
|
||||
toggle-content (mf/use-fn #(swap! state* not))
|
||||
on-toggle-visibility
|
||||
(mf/use-fn #(swap! open* not))
|
||||
|
||||
on-add-layout
|
||||
(mf/use-fn
|
||||
(fn [type]
|
||||
(st/emit! (dwsl/create-layout type))
|
||||
(reset! state* true)))
|
||||
|
||||
on-set-layout
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-current-target event)
|
||||
(dom/get-data "value")
|
||||
(keyword))]
|
||||
(on-add-layout value))))
|
||||
(let [type (-> (dom/get-current-target event)
|
||||
(dom/get-data "type")
|
||||
(keyword))]
|
||||
(st/emit! (dwsl/create-layout type))
|
||||
(reset! open* true))))
|
||||
|
||||
on-remove-layout
|
||||
(fn [_]
|
||||
(st/emit! (dwsl/remove-layout ids))
|
||||
(reset! state* false))
|
||||
|
||||
set-flex
|
||||
(mf/use-fn
|
||||
(mf/deps on-add-layout)
|
||||
(fn []
|
||||
(on-add-layout :flex)))
|
||||
|
||||
set-grid
|
||||
(mf/use-fn
|
||||
(mf/deps on-add-layout)
|
||||
(fn []
|
||||
(on-add-layout :grid)))
|
||||
(mf/deps ids)
|
||||
(fn [_]
|
||||
(st/emit! (dwsl/remove-layout ids))
|
||||
(reset! open* false)))
|
||||
|
||||
saved-dir (:layout-flex-dir values)
|
||||
|
||||
is-column (or (= :column saved-dir) (= :column-reverse saved-dir))
|
||||
|
||||
set-direction-refactor
|
||||
(mf/use-fn
|
||||
(mf/deps layout-type ids)
|
||||
(fn [dir]
|
||||
(let [dir (keyword dir)]
|
||||
(if (= :flex layout-type)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-flex-dir dir}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))))
|
||||
is-column (or (= :column saved-dir) (= :column-reverse saved-dir))
|
||||
|
||||
;; Wrap type
|
||||
|
||||
wrap-type (:layout-wrap-type values)
|
||||
|
||||
toggle-wrap
|
||||
|
|
@ -919,7 +882,6 @@
|
|||
|
||||
|
||||
;; Align items
|
||||
|
||||
align-items (:layout-align-items values)
|
||||
|
||||
set-align-items
|
||||
|
|
@ -929,7 +891,6 @@
|
|||
(st/emit! (dwsl/update-layout ids {:layout-align-items (keyword value)}))))
|
||||
|
||||
;; Justify content
|
||||
|
||||
justify-content (:layout-justify-content values)
|
||||
|
||||
set-justify-content
|
||||
|
|
@ -939,18 +900,17 @@
|
|||
(st/emit! (dwsl/update-layout ids {:layout-justify-content (keyword value)}))))
|
||||
|
||||
;; Align content
|
||||
|
||||
align-content (:layout-align-content values)
|
||||
|
||||
set-align-content
|
||||
;; FIXME revisit???
|
||||
on-align-content-change
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [value align-content]
|
||||
(mf/deps ids align-content)
|
||||
(fn [value]
|
||||
(if (= align-content value)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-align-content :stretch}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-align-content (keyword value)})))))
|
||||
|
||||
|
||||
;; Gap
|
||||
on-gap-change
|
||||
(fn [multiple? type val]
|
||||
|
|
@ -960,9 +920,11 @@
|
|||
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
|
||||
|
||||
;; Padding
|
||||
change-padding-type
|
||||
(fn [type]
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding-type type})))
|
||||
on-padding-type-change
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [type]
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding-type type}))))
|
||||
|
||||
on-padding-change
|
||||
(mf/use-fn
|
||||
|
|
@ -983,14 +945,13 @@
|
|||
|
||||
saved-grid-dir (:layout-grid-dir values)
|
||||
|
||||
set-direction
|
||||
on-direction-change
|
||||
(mf/use-fn
|
||||
(mf/deps layout-type ids)
|
||||
(fn [dir]
|
||||
(let [dir (keyword dir)]
|
||||
(if (= :flex layout-type)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))))
|
||||
(if (= :flex layout-type)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-flex-dir dir}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))))
|
||||
|
||||
;; Align grid
|
||||
align-items-row (:layout-align-items values)
|
||||
|
|
@ -1026,45 +987,40 @@
|
|||
(fn [value]
|
||||
(st/emit! (dwsl/update-layout ids {:layout-justify-content value}))))
|
||||
|
||||
handle-show-layout-dropdown
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(swap! show-layout-dropdown* not)))
|
||||
on-toggle-dropdown-visibility
|
||||
(mf/use-fn #(swap! show-dropdown* not))
|
||||
|
||||
handle-close-layout-options
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(reset! show-layout-dropdown* false)))
|
||||
|
||||
handle-open-flex-help
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (dom/open-new-window cf/flex-help-uri))))
|
||||
|
||||
handle-open-grid-help
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (dom/open-new-window cf/grid-help-uri))))]
|
||||
on-hide-dropdown
|
||||
(mf/use-fn #(reset! show-dropdown* false))]
|
||||
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable has-layout?
|
||||
:collapsed (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title "Layout"
|
||||
:class (stl/css-case :title-spacing-layout (not has-layout?))}
|
||||
[:& title-bar
|
||||
{:collapsable has-layout?
|
||||
:collapsed (not open?)
|
||||
:on-collapsed on-toggle-visibility
|
||||
:title "Layout"
|
||||
: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?
|
||||
[:*
|
||||
[:button {:class (stl/css :add-layout)
|
||||
:on-click handle-show-layout-dropdown}
|
||||
:on-click on-toggle-dropdown-visibility}
|
||||
i/menu-refactor]
|
||||
|
||||
[:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options}
|
||||
[:& dropdown {:show show-dropdown?
|
||||
:on-close on-hide-dropdown}
|
||||
[: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 :layout-option)
|
||||
:data-type "flex"
|
||||
:on-click on-add-layout}
|
||||
"Flex layout"]
|
||||
[:button {:class (stl/css :layout-option)
|
||||
:data-type "grid"
|
||||
:on-click on-add-layout}
|
||||
"Grid layout"]]]])
|
||||
|
||||
(when has-layout?
|
||||
[:button {:class (stl/css :remove-layout)
|
||||
|
|
@ -1075,99 +1031,110 @@
|
|||
(if ^boolean grid-enabled?
|
||||
[:*
|
||||
[:button {:class (stl/css :add-layout)
|
||||
:on-click handle-show-layout-dropdown}
|
||||
:on-click on-toggle-dropdown-visibility}
|
||||
i/add-refactor]
|
||||
|
||||
[:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options}
|
||||
[:& dropdown {:show show-dropdown?
|
||||
:on-close on-hide-dropdown}
|
||||
[: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 :layout-option)
|
||||
:data-type "flex"
|
||||
:on-click on-add-layout}
|
||||
"Flex layout"]
|
||||
[:button {:class (stl/css :layout-option)
|
||||
:data-type "grid"
|
||||
:on-click on-add-layout}
|
||||
"Grid layout"]]]]
|
||||
|
||||
[:button {:class (stl/css :add-layout)
|
||||
:data-value "flex"
|
||||
:on-click on-set-layout}
|
||||
:data-type "flex"
|
||||
:on-click on-add-layout}
|
||||
i/add-refactor])
|
||||
(when has-layout?
|
||||
[:button {:class (stl/css :remove-layout)
|
||||
:on-click on-remove-layout}
|
||||
i/remove-refactor])])]]
|
||||
|
||||
(when (and open? has-layout?)
|
||||
(when (not= :multiple layout-type)
|
||||
(case layout-type
|
||||
:flex
|
||||
[:div {:class (stl/css :flex-layout-menu)}
|
||||
[:div {:class (stl/css :first-row)}
|
||||
[:& align-row {:is-column is-column
|
||||
:align-items align-items
|
||||
:on-change set-align-items}]
|
||||
(when (and ^boolean open?
|
||||
^boolean has-layout?
|
||||
(not= :multiple layout-type))
|
||||
(case layout-type
|
||||
:flex
|
||||
[:div {:class (stl/css :flex-layout-menu)}
|
||||
[:div {:class (stl/css :first-row)}
|
||||
[:& align-row {:is-column is-column
|
||||
:value align-items
|
||||
:on-change set-align-items}]
|
||||
|
||||
[:& direction-row-flex {:on-change set-direction-refactor
|
||||
:saved-dir saved-dir}]
|
||||
[:& direction-row-flex {:on-change on-direction-change
|
||||
:value saved-dir}]
|
||||
|
||||
[:& wrap-row {:wrap-type wrap-type
|
||||
:on-click toggle-wrap}]]
|
||||
[:& wrap-row {:wrap-type wrap-type
|
||||
:on-click toggle-wrap}]]
|
||||
|
||||
[:div {:class (stl/css :second-row :help-button-wrapper)}
|
||||
[:& justify-content-row {:is-column is-column
|
||||
:justify-content justify-content
|
||||
:on-change set-justify-content}]
|
||||
[:div {:class (stl/css :second-row :help-button-wrapper)}
|
||||
[:& justify-content-row {:is-column is-column
|
||||
:justify-content justify-content
|
||||
:on-change set-justify-content}]
|
||||
|
||||
[:button {:on-click handle-open-flex-help
|
||||
:class (stl/css :help-button)} i/help-refactor]]
|
||||
(when (= :wrap wrap-type)
|
||||
[:div {:class (stl/css :third-row)}
|
||||
[:& align-content-row {:is-column is-column
|
||||
:align-content align-content
|
||||
:on-change set-align-content}]])
|
||||
[:div {:class (stl/css :forth-row)}
|
||||
[:& gap-section {:is-column is-column
|
||||
:wrap-type wrap-type
|
||||
:on-change on-gap-change
|
||||
:value (:layout-gap values)}]
|
||||
[:button {:on-click open-flex-help
|
||||
:class (stl/css :help-button)}
|
||||
i/help-refactor]]
|
||||
(when (= :wrap wrap-type)
|
||||
[:div {:class (stl/css :third-row)}
|
||||
[:& align-content-row {:is-column is-column
|
||||
:value align-content
|
||||
:on-change on-align-content-change}]])
|
||||
[:div {:class (stl/css :forth-row)}
|
||||
[:& gap-section {:is-column is-column
|
||||
:wrap-type wrap-type
|
||||
:on-change on-gap-change
|
||||
:value (:layout-gap values)}]
|
||||
|
||||
[:& padding-section {:values (:layout-padding values)
|
||||
:type (:layout-padding-type values)
|
||||
:on-type-change change-padding-type
|
||||
:on-change on-padding-change}]]]
|
||||
[:& padding-section {:value (:layout-padding values)
|
||||
:type (:layout-padding-type values)
|
||||
:on-type-change on-padding-type-change
|
||||
:on-change on-padding-change}]]]
|
||||
|
||||
:grid
|
||||
[:div {:class (stl/css :grid-layout-menu)}
|
||||
(when (= 1 (count ids))
|
||||
[:div {:class (stl/css :edit-grid-wrapper)}
|
||||
[:& grid-edit-mode {:id (first ids)}]
|
||||
[:button {:on-click handle-open-grid-help
|
||||
:class (stl/css :help-button)} i/help-refactor]])
|
||||
[:div {:class (stl/css :row :first-row)}
|
||||
[:div {:class (stl/css :direction-edit)}
|
||||
[:div {:class (stl/css :direction)}
|
||||
[:& direction-row-grid {:saved-dir saved-grid-dir
|
||||
:on-change set-direction}]]]
|
||||
:grid
|
||||
[:div {:class (stl/css :grid-layout-menu)}
|
||||
(when (= 1 (count ids))
|
||||
[:div {:class (stl/css :edit-grid-wrapper)}
|
||||
[:& grid-edit-mode {:id (first ids)}]
|
||||
[:button {:on-click open-grid-help
|
||||
:class (stl/css :help-button)} i/help-refactor]])
|
||||
|
||||
[:& align-grid-row {:is-column false
|
||||
:value align-items-row
|
||||
:on-change on-row-align-change}]
|
||||
[:div {:class (stl/css :row :first-row)}
|
||||
[:div {:class (stl/css :direction-edit)}
|
||||
[:div {:class (stl/css :direction)}
|
||||
[:& direction-row-grid {:value saved-grid-dir
|
||||
:on-change on-direction-change}]]]
|
||||
|
||||
[:& align-grid-row {:is-column true
|
||||
:value align-items-column
|
||||
:on-change on-column-align-change}]]
|
||||
[:& align-grid-row {:is-column false
|
||||
:value align-items-row
|
||||
:on-change on-row-align-change}]
|
||||
[:& align-grid-row {:is-column true
|
||||
:value align-items-column
|
||||
:on-change on-column-align-change}]]
|
||||
|
||||
[:div {:class (stl/css :row :grid-layout-align)}
|
||||
[:& justify-grid-row {:is-column true
|
||||
:value grid-justify-content-column
|
||||
:on-change on-column-justify-change}]
|
||||
[:& justify-grid-row {:is-column false
|
||||
:value grid-justify-content-row
|
||||
:on-change on-row-justify-change}]]
|
||||
[:div {:class (stl/css :row)}
|
||||
[:& gap-section {:on-change on-gap-change
|
||||
:value (:layout-gap values)}]]
|
||||
[:div {:class (stl/css :row :grid-layout-align)}
|
||||
[:& justify-grid-row {:is-column true
|
||||
:value grid-justify-content-column
|
||||
:on-change on-column-justify-change}]
|
||||
[:& justify-grid-row {:is-column false
|
||||
:value grid-justify-content-row
|
||||
:on-change on-row-justify-change}]]]
|
||||
[:div {:class (stl/css :row)}
|
||||
[:& gap-section {:on-change on-gap-change
|
||||
:value (:layout-gap values)}]]
|
||||
|
||||
[:div {:class (stl/css :row :padding-section)}
|
||||
[:& padding-section {:values values
|
||||
:on-change-style change-padding-type
|
||||
:on-change on-padding-change}]]]
|
||||
nil)))]))
|
||||
[:div {:class (stl/css :row :padding-section)}
|
||||
[:& padding-section {:value (:layout-padding values)
|
||||
:type (:layout-padding-type values)
|
||||
:on-change-style on-padding-type-change
|
||||
:on-change on-padding-change}]]
|
||||
|
||||
nil))]))
|
||||
|
||||
(mf/defc grid-layout-edition
|
||||
{::mf/memo #{:ids :values}
|
||||
|
|
@ -1176,12 +1143,11 @@
|
|||
(let [;; Gap
|
||||
saved-grid-dir (:layout-grid-dir values)
|
||||
|
||||
set-direction
|
||||
on-direction-change
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [dir]
|
||||
(let [dir (keyword dir)]
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))
|
||||
|
||||
on-gap-change
|
||||
(mf/use-fn
|
||||
|
|
@ -1192,7 +1158,7 @@
|
|||
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
|
||||
|
||||
;; Padding
|
||||
change-padding-type
|
||||
on-padding-type-change
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [type]
|
||||
|
|
@ -1226,7 +1192,6 @@
|
|||
(fn [value]
|
||||
(st/emit! (dwsl/update-layout ids {:layout-align-items value}))))
|
||||
|
||||
|
||||
;; Justify grid
|
||||
grid-justify-content-row (:layout-justify-content values)
|
||||
grid-justify-content-column (:layout-align-content values)
|
||||
|
|
@ -1302,20 +1267,16 @@
|
|||
:fixed 100)]
|
||||
(st/emit! (dwsl/change-layout-track ids type index {:value value
|
||||
:type track-type})))))
|
||||
handle-open-grid-help
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (dom/open-new-window cf/grid-help-uri))))
|
||||
|
||||
handle-locate-grid
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn []
|
||||
(st/emit! (dwge/locate-board (first ids)))))]
|
||||
|
||||
[:div {:class (stl/css :grid-layout-menu)}
|
||||
[:div {:class (stl/css :row)}
|
||||
[:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"]
|
||||
[:button {:on-click handle-open-grid-help
|
||||
[:button {:on-click open-grid-help
|
||||
:class (stl/css :help-button)} i/help-refactor]
|
||||
[:button {:class (stl/css :exit-btn)
|
||||
:on-click #(st/emit! udw/clear-edition-mode)}
|
||||
|
|
@ -1324,8 +1285,8 @@
|
|||
[:div {:class (stl/css :row :first-row)}
|
||||
[:div {:class (stl/css :direction-edit)}
|
||||
[:div {:class (stl/css :direction)}
|
||||
[:& direction-row-grid {:saved-dir saved-grid-dir
|
||||
:on-change set-direction}]]]
|
||||
[:& direction-row-grid {:value saved-grid-dir
|
||||
:on-change on-direction-change}]]]
|
||||
|
||||
[:& align-grid-row {:is-column false
|
||||
:value align-items-row
|
||||
|
|
@ -1354,7 +1315,7 @@
|
|||
[:div {:class (stl/css :row :padding-section)}
|
||||
[:& padding-section {:value (:layout-padding values)
|
||||
:type (:layout-padding-type values)
|
||||
:on-change-style change-padding-type
|
||||
:on-change-style on-padding-type-change
|
||||
:on-change on-padding-change}]]
|
||||
|
||||
[:div {:class (stl/css :row :grid-tracks-row)}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,7 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]
|
||||
[rumext.v2.props :as-alias mf.props]))
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def layout-item-attrs
|
||||
[:layout-item-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0}
|
||||
|
|
@ -46,14 +45,14 @@
|
|||
|
||||
(mf/defc margin-simple
|
||||
{::mf/props :obj}
|
||||
[{:keys [margin on-change on-blur]}]
|
||||
(let [m1 (:m1 margin)
|
||||
m2 (:m2 margin)
|
||||
m3 (:m3 margin)
|
||||
m4 (:m4 margin)
|
||||
[{:keys [value on-change on-blur]}]
|
||||
(let [m1 (:m1 value)
|
||||
m2 (:m2 value)
|
||||
m3 (:m3 value)
|
||||
m4 (:m4 value)
|
||||
|
||||
m1 (when (and (not= margin :multiple) (= m1 m3)) m1)
|
||||
m2 (when (and (not= margin :multiple) (= m2 m4)) m2)
|
||||
m1 (when (and (not= value :multiple) (= m1 m3)) m1)
|
||||
m2 (when (and (not= value :multiple) (= m2 m4)) m2)
|
||||
|
||||
on-focus
|
||||
(mf/use-fn
|
||||
|
|
@ -106,11 +105,11 @@
|
|||
|
||||
(mf/defc margin-multiple
|
||||
{::mf/props :obj}
|
||||
[{:keys [margin on-change on-blur]}]
|
||||
(let [m1 (:m1 margin)
|
||||
m2 (:m2 margin)
|
||||
m3 (:m3 margin)
|
||||
m4 (:m4 margin)
|
||||
[{:keys [value on-change on-blur]}]
|
||||
(let [m1 (:m1 value)
|
||||
m2 (:m2 value)
|
||||
m3 (:m3 value)
|
||||
m4 (:m4 value)
|
||||
|
||||
on-focus
|
||||
(mf/use-fn
|
||||
|
|
@ -186,7 +185,7 @@
|
|||
(mf/defc margin-section
|
||||
{::mf/props :obj
|
||||
::mf/private true
|
||||
::mf.props/expect #{:margin :type :on-type-change :on-change}}
|
||||
::mf/expect-props #{:value :type :on-type-change :on-change}}
|
||||
[{:keys [type on-type-change] :as props}]
|
||||
(let [type (d/nilv type :simple)
|
||||
on-blur (mf/use-fn #(select-margins false false false false))
|
||||
|
|
@ -220,14 +219,17 @@
|
|||
i/margin-refactor]]))
|
||||
|
||||
(mf/defc element-behaviour-horizontal
|
||||
{::mf/props :obj}
|
||||
[{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
|
||||
[:div {:class (stl/css-case :horizontal-behaviour true
|
||||
:one-element (and (not has-fill) (not is-auto))
|
||||
:two-element (or has-fill is-auto)
|
||||
:three-element (and has-fill is-auto))}
|
||||
{::mf/props :obj
|
||||
::mf/private true}
|
||||
[{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
|
||||
[:div {:class (stl/css-case
|
||||
:horizontal-behaviour true
|
||||
:one-element (and (not has-fill) (not is-auto))
|
||||
:two-element (or has-fill is-auto)
|
||||
:three-element (and has-fill is-auto))}
|
||||
[:& radio-buttons
|
||||
{:selected (d/name sizing)
|
||||
{:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:wide true
|
||||
:name "flex-behaviour-h"}
|
||||
|
|
@ -252,14 +254,17 @@
|
|||
:id "behaviour-h-auto"}])]])
|
||||
|
||||
(mf/defc element-behaviour-vertical
|
||||
{::mf/props :obj}
|
||||
[{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
|
||||
[:div {:class (stl/css-case :vertical-behaviour true
|
||||
:one-element (and (not has-fill) (not is-auto))
|
||||
:two-element (or has-fill is-auto)
|
||||
:three-element (and has-fill is-auto))}
|
||||
{::mf/props :obj
|
||||
::mf/private true}
|
||||
[{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
|
||||
[:div {:class (stl/css-case
|
||||
:vertical-behaviour true
|
||||
:one-element (and (not has-fill) (not is-auto))
|
||||
:two-element (or has-fill is-auto)
|
||||
:three-element (and has-fill is-auto))}
|
||||
[:& radio-buttons
|
||||
{:selected (d/name sizing)
|
||||
{:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:wide true
|
||||
:name "flex-behaviour-v"}
|
||||
|
|
@ -286,34 +291,11 @@
|
|||
:title "Fit content"
|
||||
:id "behaviour-v-auto"}])]])
|
||||
|
||||
(mf/defc element-behaviour
|
||||
{::mf/props :obj
|
||||
::mf/private true}
|
||||
[{:keys [^boolean is-auto
|
||||
^boolean has-fill
|
||||
h-sizing
|
||||
v-sizing
|
||||
on-h-change
|
||||
on-v-change]}]
|
||||
[:div {:class (stl/css-case
|
||||
:behaviour-menu true
|
||||
:wrap (and has-fill is-auto))}
|
||||
|
||||
[:& element-behaviour-horizontal
|
||||
{:is-auto is-auto
|
||||
:has-fill has-fill
|
||||
:sizing h-sizing
|
||||
:on-change on-h-change}]
|
||||
[:& element-behaviour-vertical
|
||||
{:is-auto is-auto
|
||||
:has-fill has-fill
|
||||
:sizing v-sizing
|
||||
:on-change on-v-change}]])
|
||||
|
||||
(mf/defc align-self-row
|
||||
{::mf/props :obj}
|
||||
[{:keys [^boolean is-col align-self on-change]}]
|
||||
[:& radio-buttons {:selected (d/name align-self)
|
||||
[{:keys [^boolean is-col value on-change]}]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name "flex-align-self"
|
||||
:allow-empty true}
|
||||
|
|
@ -392,16 +374,16 @@
|
|||
:else
|
||||
"Layout element")
|
||||
|
||||
set-align-self
|
||||
on-align-self-change
|
||||
(mf/use-fn
|
||||
(mf/deps ids align-self)
|
||||
(fn [value]
|
||||
(if (= align-self value)
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self (keyword value)})))))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value})))))
|
||||
|
||||
;; Margin
|
||||
on-change-margin-type
|
||||
on-margin-type-change
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [type]
|
||||
|
|
@ -422,19 +404,17 @@
|
|||
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
|
||||
|
||||
;; Behaviour
|
||||
on-change-behaviour-h
|
||||
on-behaviour-h-change
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [value]
|
||||
(let [value (keyword value)]
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value})))))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))))
|
||||
|
||||
on-change-behaviour-v
|
||||
on-behaviour-v-change
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [value]
|
||||
(let [value (keyword value)]
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value})))))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))
|
||||
|
||||
;; Size and position
|
||||
on-size-change
|
||||
|
|
@ -450,10 +430,9 @@
|
|||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [value]
|
||||
(let [value (keyword value)]
|
||||
(when (= value :static)
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-z-index nil})))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)})))))
|
||||
(when (= value :static)
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-z-index nil})))
|
||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)}))))
|
||||
|
||||
;; Z Index
|
||||
on-change-z-index
|
||||
|
|
@ -476,6 +455,7 @@
|
|||
[:div {:class (stl/css :row)}
|
||||
[:div {:class (stl/css :position-options)}
|
||||
[:& radio-buttons {:selected (if is-absolute? "absolute" "static")
|
||||
:decode-fn keyword
|
||||
:on-change on-change-position
|
||||
:name "layout-style"
|
||||
:wide true}
|
||||
|
|
@ -497,24 +477,32 @@
|
|||
:value (:layout-item-z-index values)}]]])
|
||||
|
||||
[:div {:class (stl/css :row)}
|
||||
[:& element-behaviour {:has-fill is-layout-child?
|
||||
:is-auto is-layout-container?
|
||||
:v-sizing (:layout-item-v-sizing values)
|
||||
:h-sizing (:layout-item-h-sizing values)
|
||||
:on-h-change on-change-behaviour-h
|
||||
:on-v-change on-change-behaviour-v}]]
|
||||
[:div {:class (stl/css-case
|
||||
:behaviour-menu true
|
||||
:wrap (and ^boolean is-layout-child?
|
||||
^boolean is-layout-container?))}
|
||||
[:& element-behaviour-horizontal
|
||||
{:is-auto is-layout-container?
|
||||
:has-fill is-layout-child?
|
||||
:value (:layout-item-h-sizing values)
|
||||
:on-change on-behaviour-h-change}]
|
||||
[:& element-behaviour-vertical
|
||||
{:is-auto is-layout-container?
|
||||
:has-fill is-layout-child?
|
||||
:value (:layout-item-v-sizing values)
|
||||
:on-change on-behaviour-v-change}]]]
|
||||
|
||||
(when (and is-layout-child? is-flex-parent?)
|
||||
[:div {:class (stl/css :row)}
|
||||
[:& align-self-row {:is-col is-col?
|
||||
:align-self align-self
|
||||
:on-change set-align-self}]])
|
||||
:value align-self
|
||||
:on-change on-align-self-change}]])
|
||||
|
||||
(when is-layout-child?
|
||||
[:div {:class (stl/css :row)}
|
||||
[:& margin-section {:margin (:layout-item-margin values)
|
||||
[:& margin-section {:value (:layout-item-margin values)
|
||||
:type (:layout-item-margin-type values)
|
||||
:on-type-change on-change-margin-type
|
||||
:on-type-change on-margin-type-change
|
||||
:on-change on-margin-change}]])
|
||||
|
||||
(when (or (= h-sizing :fill)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue