mirror of
https://github.com/penpot/penpot.git
synced 2025-05-20 00:06:10 +02:00
💄 Add mostly cosmetic changes to layout-item ns code
This commit is contained in:
Andrey Antukh
parent
a1a9519cf5
commit
1e7a2b575f
1 changed files with 111 additions and 110 deletions
|
|
@ -221,76 +221,94 @@
|
||||||
|
|
||||||
(mf/defc element-behaviour-horizontal
|
(mf/defc element-behaviour-horizontal
|
||||||
{::mf/props :obj}
|
{::mf/props :obj}
|
||||||
[{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
|
[{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
|
||||||
[:div {:class (stl/css-case :horizontal-behaviour true
|
[:div {:class (stl/css-case :horizontal-behaviour true
|
||||||
:one-element (and (not fill) (not auto))
|
:one-element (and (not has-fill) (not is-auto))
|
||||||
:two-element (or fill auto)
|
:two-element (or has-fill is-auto)
|
||||||
:three-element (and fill auto))}
|
:three-element (and has-fill is-auto))}
|
||||||
[:& radio-buttons {:selected (d/name layout-item-sizing)
|
[:& radio-buttons
|
||||||
:on-change on-change
|
{:selected (d/name item-sizing)
|
||||||
:wide true
|
:on-change on-change
|
||||||
:name "flex-behaviour-h"}
|
:wide true
|
||||||
[:& radio-button {:value "fix"
|
:name "flex-behaviour-h"}
|
||||||
:icon i/fixed-width-refactor
|
|
||||||
:title "Fix width"
|
[:& radio-button
|
||||||
:id "behaviour-h-fix"}]
|
{:value "fix"
|
||||||
(when fill
|
:icon i/fixed-width-refactor
|
||||||
[:& radio-button {:value "fill"
|
:title "Fix width"
|
||||||
:icon i/fill-content-refactor
|
:id "behaviour-h-fix"}]
|
||||||
:title "Width 100%"
|
|
||||||
:id "behaviour-h-fill"}])
|
(when has-fill
|
||||||
(when auto
|
[:& radio-button
|
||||||
[:& radio-button {:value "auto"
|
{:value "fill"
|
||||||
:icon i/hug-content-refactor
|
:icon i/fill-content-refactor
|
||||||
:title "Fit content"
|
:title "Width 100%"
|
||||||
:id "behaviour-h-auto"}])]])
|
:id "behaviour-h-fill"}])
|
||||||
|
(when is-auto
|
||||||
|
[:& radio-button
|
||||||
|
{:value "auto"
|
||||||
|
:icon i/hug-content-refactor
|
||||||
|
:title "Fit content"
|
||||||
|
:id "behaviour-h-auto"}])]])
|
||||||
|
|
||||||
(mf/defc element-behaviour-vertical
|
(mf/defc element-behaviour-vertical
|
||||||
{::mf/props :obj}
|
{::mf/props :obj}
|
||||||
[{:keys [^boolean auto ^boolean fill layout-item-sizing on-change]}]
|
[{:keys [^boolean is-auto ^boolean has-fill item-sizing on-change]}]
|
||||||
[:div {:class (stl/css-case :vertical-behaviour true
|
[:div {:class (stl/css-case :vertical-behaviour true
|
||||||
:one-element (and (not fill) (not auto))
|
:one-element (and (not has-fill) (not is-auto))
|
||||||
:two-element (or fill auto)
|
:two-element (or has-fill is-auto)
|
||||||
:three-element (and fill auto))}
|
:three-element (and has-fill is-auto))}
|
||||||
[:& radio-buttons {:selected (d/name layout-item-sizing)
|
[:& radio-buttons
|
||||||
:on-change on-change
|
{:selected (d/name item-sizing)
|
||||||
:wide true
|
:on-change on-change
|
||||||
:name "flex-behaviour-v"}
|
:wide true
|
||||||
[:& radio-button {:value "fix"
|
:name "flex-behaviour-v"}
|
||||||
:icon i/fixed-width-refactor
|
|
||||||
:icon-class (stl/css :rotated)
|
[:& radio-button
|
||||||
:title "Fix height"
|
{:value "fix"
|
||||||
:id "behaviour-v-fix"}]
|
:icon i/fixed-width-refactor
|
||||||
(when fill
|
:icon-class (stl/css :rotated)
|
||||||
[:& radio-button {:value "fill"
|
:title "Fix height"
|
||||||
:icon i/fill-content-refactor
|
:id "behaviour-v-fix"}]
|
||||||
:icon-class (stl/css :rotated)
|
|
||||||
:title "Height 100%"
|
(when has-fill
|
||||||
:id "behaviour-v-fill"}])
|
[:& radio-button
|
||||||
(when auto
|
{:value "fill"
|
||||||
[:& radio-button {:value "auto"
|
:icon i/fill-content-refactor
|
||||||
:icon i/hug-content-refactor
|
:icon-class (stl/css :rotated)
|
||||||
:icon-class (stl/css :rotated)
|
:title "Height 100%"
|
||||||
:title "Fit content"
|
:id "behaviour-v-fill"}])
|
||||||
:id "behaviour-v-auto"}])]])
|
(when is-auto
|
||||||
|
[:& radio-button
|
||||||
|
{:value "auto"
|
||||||
|
:icon i/hug-content-refactor
|
||||||
|
:icon-class (stl/css :rotated)
|
||||||
|
:title "Fit content"
|
||||||
|
:id "behaviour-v-auto"}])]])
|
||||||
|
|
||||||
(mf/defc element-behaviour
|
(mf/defc element-behaviour
|
||||||
{::mf/props :obj}
|
{::mf/props :obj
|
||||||
[{:keys [^boolean auto ^boolean fill
|
::mf/private true}
|
||||||
layout-item-h-sizing
|
[{:keys [^boolean is-auto
|
||||||
layout-item-v-sizing
|
^boolean has-fill
|
||||||
on-change-behaviour-h-refactor
|
item-h-sizing
|
||||||
on-change-behaviour-v-refactor]}]
|
item-v-sizing
|
||||||
[:div {:class (stl/css-case :behaviour-menu true
|
on-h-change
|
||||||
:wrap (and fill auto))}
|
on-v-change]}]
|
||||||
[:& element-behaviour-horizontal {:auto auto
|
[:div {:class (stl/css-case
|
||||||
:fill fill
|
:behaviour-menu true
|
||||||
:layout-item-sizing layout-item-h-sizing
|
:wrap (and has-fill is-auto))}
|
||||||
:on-change on-change-behaviour-h-refactor}]
|
|
||||||
[:& element-behaviour-vertical {:auto auto
|
[:& element-behaviour-horizontal
|
||||||
:fill fill
|
{:is-auto is-auto
|
||||||
:layout-item-sizing layout-item-v-sizing
|
:has-fill has-fill
|
||||||
:on-change on-change-behaviour-v-refactor}]])
|
:item-sizing item-h-sizing
|
||||||
|
:on-change on-h-change}]
|
||||||
|
[:& element-behaviour-vertical
|
||||||
|
{:is-auto is-auto
|
||||||
|
:has-fill has-fill
|
||||||
|
:item-sizing item-v-sizing
|
||||||
|
:on-change on-v-change}]])
|
||||||
|
|
||||||
(mf/defc align-self-row
|
(mf/defc align-self-row
|
||||||
{::mf/props :obj}
|
{::mf/props :obj}
|
||||||
|
|
@ -323,27 +341,29 @@
|
||||||
^boolean is-flex-layout?
|
^boolean is-flex-layout?
|
||||||
^boolean is-grid-layout?]}]
|
^boolean is-grid-layout?]}]
|
||||||
|
|
||||||
(let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
|
(let [selection-parents* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
|
||||||
selection-parents (mf/deref selection-parents-ref)
|
selection-parents (mf/deref selection-parents*)
|
||||||
|
|
||||||
is-absolute? (:layout-item-absolute values)
|
^boolean
|
||||||
|
is-absolute? (:layout-item-absolute values)
|
||||||
|
|
||||||
is-col? (every? ctl/col? selection-parents)
|
^boolean
|
||||||
|
is-col? (every? ctl/col? selection-parents)
|
||||||
|
|
||||||
is-layout-child? (and is-layout-child? (not is-absolute?))
|
^boolean
|
||||||
|
is-layout-child? (and is-layout-child? (not is-absolute?))
|
||||||
|
|
||||||
state* (mf/use-state true)
|
state* (mf/use-state true)
|
||||||
open? (deref state*)
|
open? (deref state*)
|
||||||
|
|
||||||
toggle-content (mf/use-fn #(swap! state* not))
|
toggle-content (mf/use-fn #(swap! state* not))
|
||||||
has-content? (or ^boolean is-layout-child?
|
has-content? (or is-layout-child?
|
||||||
^boolean is-flex-parent?
|
is-flex-parent?
|
||||||
^boolean is-grid-parent?
|
is-grid-parent?
|
||||||
^boolean is-layout-container?)
|
is-layout-container?)
|
||||||
|
|
||||||
;; Align self
|
;; Align self
|
||||||
|
align-self (:layout-item-align-self values)
|
||||||
align-self (:layout-item-align-self values)
|
|
||||||
|
|
||||||
title
|
title
|
||||||
(cond
|
(cond
|
||||||
|
|
@ -401,21 +421,6 @@
|
||||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
|
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
|
||||||
|
|
||||||
;; Behaviour
|
;; Behaviour
|
||||||
|
|
||||||
on-change-behaviour
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps ids)
|
|
||||||
(fn [event]
|
|
||||||
(let [value (-> (dom/get-current-target event)
|
|
||||||
(dom/get-data "value")
|
|
||||||
(keyword))
|
|
||||||
dir (-> (dom/get-current-target event)
|
|
||||||
(dom/get-data "direction")
|
|
||||||
(keyword))]
|
|
||||||
(if (= dir :h)
|
|
||||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))
|
|
||||||
(st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))))
|
|
||||||
|
|
||||||
on-change-behaviour-h
|
on-change-behaviour-h
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps ids)
|
(mf/deps ids)
|
||||||
|
|
@ -481,7 +486,7 @@
|
||||||
[:span {:class (stl/css :icon-text)}
|
[:span {:class (stl/css :icon-text)}
|
||||||
"Z"]
|
"Z"]
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:placeholder "--"
|
:placeholder "--"
|
||||||
:on-focus #(dom/select-target %)
|
:on-focus #(dom/select-target %)
|
||||||
:on-change #(on-change-z-index %)
|
:on-change #(on-change-z-index %)
|
||||||
|
|
@ -489,13 +494,12 @@
|
||||||
:value (:layout-item-z-index values)}]]])
|
:value (:layout-item-z-index values)}]]])
|
||||||
|
|
||||||
[:div {:class (stl/css :row)}
|
[:div {:class (stl/css :row)}
|
||||||
[:& element-behaviour {:fill is-layout-child?
|
[:& element-behaviour {:has-fill is-layout-child?
|
||||||
:auto is-layout-container?
|
:is-auto is-layout-container?
|
||||||
:layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
|
:item-v-sizing (:layout-item-v-sizing values)
|
||||||
:layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
|
:item-h-sizing (:layout-item-h-sizing values)
|
||||||
:on-change-behaviour-h-refactor on-change-behaviour-h
|
:on-h-change on-change-behaviour-h
|
||||||
:on-change-behaviour-v-refactor on-change-behaviour-v
|
:on-v-change on-change-behaviour-v}]]
|
||||||
:on-change on-change-behaviour}]]
|
|
||||||
|
|
||||||
(when (and is-layout-child? is-flex-parent?)
|
(when (and is-layout-child? is-flex-parent?)
|
||||||
[:div {:class (stl/css :row)}
|
[:div {:class (stl/css :row)}
|
||||||
|
|
@ -519,10 +523,9 @@
|
||||||
[:div {:class (stl/css :layout-item-min-w)
|
[:div {:class (stl/css :layout-item-min-w)
|
||||||
:title (tr "workspace.options.layout-item.layout-item-min-w")}
|
:title (tr "workspace.options.layout-item.layout-item-min-w")}
|
||||||
|
|
||||||
[:span {:class (stl/css :icon-text)}
|
[:span {:class (stl/css :icon-text)} "MIN W"]
|
||||||
"MIN W"]
|
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:no-validate true
|
:no-validate true
|
||||||
:min 0
|
:min 0
|
||||||
:data-wrap true
|
:data-wrap true
|
||||||
|
|
@ -536,7 +539,7 @@
|
||||||
:title (tr "workspace.options.layout-item.layout-item-max-w")}
|
:title (tr "workspace.options.layout-item.layout-item-max-w")}
|
||||||
[:span {:class (stl/css :icon-text)} "MAX W"]
|
[:span {:class (stl/css :icon-text)} "MAX W"]
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:no-validate true
|
:no-validate true
|
||||||
:min 0
|
:min 0
|
||||||
:data-wrap true
|
:data-wrap true
|
||||||
|
|
@ -550,10 +553,9 @@
|
||||||
[:div {:class (stl/css :layout-item-min-h)
|
[:div {:class (stl/css :layout-item-min-h)
|
||||||
:title (tr "workspace.options.layout-item.layout-item-min-h")}
|
:title (tr "workspace.options.layout-item.layout-item-min-h")}
|
||||||
|
|
||||||
[:span {:class (stl/css :icon-text)}
|
[:span {:class (stl/css :icon-text)} "MIN H"]
|
||||||
"MIN H"]
|
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:no-validate true
|
:no-validate true
|
||||||
:min 0
|
:min 0
|
||||||
:data-wrap true
|
:data-wrap true
|
||||||
|
|
@ -566,10 +568,9 @@
|
||||||
[:div {:class (stl/css :layout-item-max-h)
|
[:div {:class (stl/css :layout-item-max-h)
|
||||||
:title (tr "workspace.options.layout-item.layout-item-max-h")}
|
:title (tr "workspace.options.layout-item.layout-item-max-h")}
|
||||||
|
|
||||||
[:span {:class (stl/css :icon-text)}
|
[:span {:class (stl/css :icon-text)} "MAX H"]
|
||||||
"MAX H"]
|
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:no-validate true
|
:no-validate true
|
||||||
:min 0
|
:min 0
|
||||||
:data-wrap true
|
:data-wrap true
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue