mirror of
https://github.com/penpot/penpot.git
synced 2025-03-19 11:11:21 -05:00
🐛 Fix some bugs reported on flex feedback
This commit is contained in:
parent
644854a651
commit
598959cd3f
19 changed files with 192 additions and 143 deletions
frontend
resources/styles/main/partials
src/app/main
data/workspace
ui/workspace
translations
|
@ -56,6 +56,7 @@
|
|||
&:hover {
|
||||
color: $color-black;
|
||||
background-color: $color-primary-lighter;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.submenu {
|
||||
|
|
|
@ -1613,7 +1613,8 @@
|
|||
margin-right: 5px;
|
||||
font-family: "worksans", sans-serif;
|
||||
|
||||
&.justify-content {
|
||||
&.justify-content,
|
||||
&.sizing {
|
||||
align-items: start;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
@ -1622,6 +1623,10 @@
|
|||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 185px;
|
||||
&.wrap {
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
&.justify-content {
|
||||
display: flex;
|
||||
|
@ -1717,22 +1722,18 @@
|
|||
padding: 1px;
|
||||
}
|
||||
|
||||
.gap-group,
|
||||
.margin-item-group {
|
||||
display: flex;
|
||||
.gap-group {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 7px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 8px;
|
||||
height: 26px;
|
||||
|
||||
.gap-row,
|
||||
.gap-column,
|
||||
.margin-item-row,
|
||||
.margin-item-column,
|
||||
.padding-row {
|
||||
max-width: 166px;
|
||||
.gap-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
@ -1755,7 +1756,6 @@
|
|||
font-size: 0.75rem;
|
||||
min-width: 0;
|
||||
padding: 0.25rem;
|
||||
width: 70px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -1789,29 +1789,87 @@
|
|||
}
|
||||
}
|
||||
|
||||
.padding-row {
|
||||
grid-template-columns: auto 30px;
|
||||
}
|
||||
|
||||
.margin-item-row {
|
||||
grid-template-columns: auto 30px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.margin-row {
|
||||
grid-template-columns: 65px auto;
|
||||
}
|
||||
|
||||
.padding-row,
|
||||
.margin-item-row {
|
||||
.margin-row {
|
||||
display: grid;
|
||||
height: 26px;
|
||||
grid-template-columns: auto 30px;
|
||||
max-width: 226px;
|
||||
.padding-group,
|
||||
.margin-item-group {
|
||||
display: flex;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
height: 26px;
|
||||
.padding-item,
|
||||
.margin-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 7px;
|
||||
svg {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
&.rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&.activated {
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
font-size: 0.75rem;
|
||||
min-width: 0;
|
||||
padding: 0.25rem;
|
||||
width: 70px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: $br-small;
|
||||
|
||||
&.lock {
|
||||
border: 1px solid $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
&.active {
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding-icons,
|
||||
.margin-item-icons {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
border: 1px solid $color-gray-60;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 3px;
|
||||
margin-right: 1px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
||||
.padding-icon,
|
||||
.margin-item-icon {
|
||||
|
@ -1841,15 +1899,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.padding-icons,
|
||||
.margin-item-icons {
|
||||
margin-bottom: 8px;
|
||||
margin-top: 3px;
|
||||
margin-right: 1px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
height: 26px;
|
||||
|
|
|
@ -229,9 +229,9 @@
|
|||
(create-layout-from-selection :flex)
|
||||
(dwu/commit-undo-transaction undo-id)))))))
|
||||
|
||||
(defn toogle-layout-flex
|
||||
(defn toggle-layout-flex
|
||||
[]
|
||||
(ptk/reify ::toogle-layout-flex
|
||||
(ptk/reify ::toggle-layout-flex
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [page-id (:current-page-id state)
|
||||
|
@ -241,9 +241,10 @@
|
|||
single? (= (count selected-shapes) 1)
|
||||
has-flex-layout? (and single? (ctl/layout? objects (:id (first selected-shapes))))]
|
||||
|
||||
(if has-flex-layout?
|
||||
(rx/of (remove-layout selected))
|
||||
(rx/of (create-layout)))))))
|
||||
(when (not= 0 (count selected))
|
||||
(if has-flex-layout?
|
||||
(rx/of (remove-layout selected))
|
||||
(rx/of (create-layout))))))))
|
||||
|
||||
(defn update-layout
|
||||
[ids changes]
|
||||
|
|
|
@ -214,10 +214,10 @@
|
|||
:subsections [:modify-layers]
|
||||
:fn #(emit-when-no-readonly (dws/create-artboard-from-selection))}
|
||||
|
||||
:toogle-layout-flex {:tooltip (ds/shift "F")
|
||||
:command "shift+f"
|
||||
:toggle-layout-flex {:tooltip (ds/shift "A")
|
||||
:command "shift+a"
|
||||
:subsections [:modify-layers]
|
||||
:fn #(emit-when-no-readonly (dwsl/toogle-layout-flex))}
|
||||
:fn #(emit-when-no-readonly (dwsl/toggle-layout-flex))}
|
||||
|
||||
;; TOOLS
|
||||
|
||||
|
|
|
@ -380,18 +380,18 @@
|
|||
(dwsl/create-layout-from-selection :flex)))
|
||||
remove-flex #(st/emit! (dwsl/remove-layout ids))]
|
||||
(cond
|
||||
(or (not single?) (and is-frame? (not is-flex-container?)) is-group?)
|
||||
(or single? (and is-frame? (not is-flex-container?)) is-group?)
|
||||
[:*
|
||||
[:& menu-separator]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.add-flex")
|
||||
:shortcut (sc/get-tooltip :toogle-layout-flex)
|
||||
:shortcut (sc/get-tooltip :toggle-layout-flex)
|
||||
:on-click add-flex}]]
|
||||
|
||||
is-flex-container?
|
||||
[:*
|
||||
[:& menu-separator]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.remove-flex")
|
||||
:shortcut (sc/get-tooltip :toogle-layout-flex)
|
||||
:shortcut (sc/get-tooltip :toggle-layout-flex)
|
||||
:on-click remove-flex}]])))
|
||||
|
||||
(mf/defc context-menu-component
|
||||
|
|
|
@ -168,14 +168,13 @@
|
|||
(for [justify [:space-around :space-between]]
|
||||
[:button.justify.tooltip
|
||||
{:class (dom/classnames :active (= justify-content justify)
|
||||
:tooltip-bottom-left (not= justify :start)
|
||||
:tooltip-bottom (= justify :start))
|
||||
:tooltip-bottom-left (not= justify :space-around)
|
||||
:tooltip-bottom (= justify :space-around))
|
||||
:alt (dm/str "Justify content " (d/name justify))
|
||||
:on-click #(set-justify justify)
|
||||
:key (dm/str "justify-content" (d/name justify))}
|
||||
(get-layout-flex-icon :justify-content justify is-col?)])]])
|
||||
|
||||
|
||||
(mf/defc padding-section
|
||||
[{:keys [values on-change-style on-change] :as props}]
|
||||
|
||||
|
@ -196,8 +195,8 @@
|
|||
(cond
|
||||
(= padding-type :simple)
|
||||
|
||||
[:div.gap-group
|
||||
[:div.gap-row.tooltip.tooltip-bottom-left
|
||||
[:div.padding-group
|
||||
[:div.padding-item.tooltip.tooltip-bottom-left
|
||||
{:alt "Vertical padding"}
|
||||
[:span.icon.rotated i/auto-padding-both-sides]
|
||||
[:> numeric-input
|
||||
|
@ -206,7 +205,7 @@
|
|||
:on-change (partial on-change :simple :p1)
|
||||
:value p1}]]
|
||||
|
||||
[:div.gap-column.tooltip.tooltip-bottom-left
|
||||
[:div.padding-item.tooltip.tooltip-bottom-left
|
||||
{:alt "Horizontal padding"}
|
||||
[:span.icon i/auto-padding-both-sides]
|
||||
[:> numeric-input
|
||||
|
@ -233,57 +232,48 @@
|
|||
:value (num (:layout-padding values))}]]])])
|
||||
|
||||
[:div.padding-icons
|
||||
[:div.padding-icon.tooltip.tooltip-bottom
|
||||
[:div.padding-icon.tooltip.tooltip-bottom-left
|
||||
{:class (dom/classnames :selected (= padding-type :multiple))
|
||||
:alt "Padding - multiple"
|
||||
:on-click #(on-change-style (if (= padding-type :multiple) :simple :multiple))}
|
||||
i/auto-padding-side]]]))
|
||||
|
||||
(mf/defc gap-section
|
||||
[{:keys [gap-selected? set-gap gap-value toggle-gap-type gap-type]}]
|
||||
(let [gap-locked? (= gap-type :simple)
|
||||
some-gap-selected (not= @gap-selected? :none)
|
||||
is-row-activated? (or (and (not gap-locked?) (= @gap-selected? :row-gap)) (and gap-locked? some-gap-selected))
|
||||
is-column-activated? (or (and (not gap-locked?) (= @gap-selected? :column-gap)) (and gap-locked? some-gap-selected))]
|
||||
[{:keys [is-col? wrap-type gap-selected? set-gap gap-value]}]
|
||||
[:div.layout-row
|
||||
[:div.gap.row-title "Gap"]
|
||||
[:div.gap-group
|
||||
[:div.gap-row.tooltip.tooltip-bottom-left
|
||||
{:alt "Column gap"}
|
||||
[:span.icon
|
||||
i/auto-gap]
|
||||
[:> numeric-input {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-click (fn [event]
|
||||
(reset! gap-selected? :row-gap)
|
||||
(dom/select-target event))
|
||||
:on-change (partial set-gap (= :no-wrap wrap-type) :row-gap)
|
||||
:on-blur #(reset! gap-selected? :none)
|
||||
:value (:row-gap gap-value)
|
||||
:disabled (and (= :no-wrap wrap-type) (not is-col?))}]]
|
||||
|
||||
[:div.gap-group
|
||||
[:div.gap-row.tooltip.tooltip-bottom-left
|
||||
{:alt "Row gap"}
|
||||
[:span.icon
|
||||
{:class (dom/classnames :activated is-row-activated?)}
|
||||
i/auto-gap]
|
||||
[:> numeric-input {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-click (fn [event]
|
||||
(reset! gap-selected? :row-gap)
|
||||
(dom/select-target event))
|
||||
:on-change (partial set-gap gap-locked? :row-gap)
|
||||
:on-blur #(reset! gap-selected? :none)
|
||||
:value (:row-gap gap-value)}]]
|
||||
|
||||
[:div.gap-column.tooltip.tooltip-bottom-left
|
||||
{:alt "Column gap"}
|
||||
[:span.icon.rotated
|
||||
{:class (dom/classnames
|
||||
:activated is-column-activated?)}
|
||||
i/auto-gap]
|
||||
[:> numeric-input {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-click (fn [event]
|
||||
(reset! gap-selected? :column-gap)
|
||||
(dom/select-target event))
|
||||
:on-change (partial set-gap gap-locked? :column-gap)
|
||||
:on-blur #(reset! gap-selected? :none)
|
||||
:value (:column-gap gap-value)}]]
|
||||
[:button.lock {:on-click toggle-gap-type
|
||||
:class (dom/classnames :active gap-locked?)}
|
||||
(if gap-locked?
|
||||
i/lock
|
||||
i/unlock)]]))
|
||||
[:div.gap-row.tooltip.tooltip-bottom-left
|
||||
{:alt "Row gap"}
|
||||
[:span.icon.rotated
|
||||
i/auto-gap]
|
||||
[:> numeric-input {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-click (fn [event]
|
||||
(reset! gap-selected? :column-gap)
|
||||
(dom/select-target event))
|
||||
:on-change (partial set-gap (= :no-wrap wrap-type) :column-gap)
|
||||
:on-blur #(reset! gap-selected? :none)
|
||||
:value (:column-gap gap-value)
|
||||
:disabled (and (= :no-wrap wrap-type) is-col?)}]]]])
|
||||
|
||||
(mf/defc layout-container-menu
|
||||
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]}
|
||||
[{:keys [ids _type values] :as props}]
|
||||
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
|
||||
[{:keys [ids _type values multiple] :as props}]
|
||||
(let [open? (mf/use-state false)
|
||||
|
||||
;; Display
|
||||
|
@ -344,36 +334,14 @@
|
|||
|
||||
;; Gap
|
||||
|
||||
change-gap-type
|
||||
(fn [type]
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap-type type})))
|
||||
|
||||
gap-type (:layout-gap-type values)
|
||||
|
||||
gap-selected? (mf/use-state :none)
|
||||
gap-locked? (= gap-type :simple)
|
||||
toggle-gap-type (fn []
|
||||
(let [layout-gap (:layout-gap values)
|
||||
row-gap (:row-gap layout-gap)
|
||||
column-gap (:column-gap layout-gap)
|
||||
max (max row-gap column-gap)
|
||||
new-type (if (= gap-type :simple)
|
||||
:multiple
|
||||
:simple)]
|
||||
(when (and (not= row-gap column-gap) (= gap-type :multiple))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap max :column-gap max}})))
|
||||
(change-gap-type new-type)))
|
||||
|
||||
set-gap
|
||||
(fn [gap-locked? type val]
|
||||
(if gap-locked?
|
||||
(fn [gap-multiple? type val]
|
||||
(if gap-multiple?
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))
|
||||
|
||||
select-all-gap
|
||||
(fn [event]
|
||||
(when gap-locked?
|
||||
(dom/select-target event)))
|
||||
|
||||
;; Padding
|
||||
|
||||
change-padding-type
|
||||
|
@ -396,7 +364,7 @@
|
|||
[:div.element-set-title
|
||||
[:*
|
||||
[:span "Layout"]
|
||||
(if (:layout values)
|
||||
(if (and (not multiple)(:layout values))
|
||||
[:div.title-actions
|
||||
#_[:div.layout-btns
|
||||
[:button {:on-click set-flex
|
||||
|
@ -448,12 +416,11 @@
|
|||
[:& justify-content-row {:is-col? is-col?
|
||||
:justify-content justify-content
|
||||
:set-justify set-justify-content}]]]
|
||||
[:& gap-section {:gap-selected? gap-selected?
|
||||
:select-all-gap select-all-gap
|
||||
[:& gap-section {:is-col? is-col?
|
||||
:wrap-type wrap-type
|
||||
:gap-selected? gap-selected?
|
||||
:set-gap set-gap
|
||||
:gap-value (:layout-gap values)
|
||||
:toggle-gap-type toggle-gap-type
|
||||
:gap-type gap-type}]
|
||||
:gap-value (:layout-gap values)}]
|
||||
|
||||
|
||||
[:& padding-section {:values values
|
||||
|
|
|
@ -47,12 +47,12 @@
|
|||
(dm/get-in values [:layout-item-margin :m2])
|
||||
"--")]
|
||||
|
||||
[:div.layout-row.margin-item-row
|
||||
[:div.margin-row
|
||||
(cond
|
||||
(= margin-type :simple)
|
||||
|
||||
[:div.margin-item-group
|
||||
[:div.margin-item-row.tooltip.tooltip-bottom-left
|
||||
[:div.margin-item.tooltip.tooltip-bottom-left
|
||||
{:alt "Vertical margin"}
|
||||
[:span.icon i/auto-margin-both-sides]
|
||||
[:> numeric-input
|
||||
|
@ -61,7 +61,7 @@
|
|||
:on-change (partial on-margin-change :simple :m1)
|
||||
:value m1}]]
|
||||
|
||||
[:div.margin-item-column.tooltip.tooltip-bottom-left
|
||||
[:div.margin-item.tooltip.tooltip-bottom-left
|
||||
{:alt "Horizontal margin"}
|
||||
[:span.icon.rotated i/auto-margin-both-sides]
|
||||
[:> numeric-input
|
||||
|
@ -88,7 +88,7 @@
|
|||
:value (num (:layout-item-margin values))}]]])])
|
||||
|
||||
[:div.margin-item-icons
|
||||
[:div.margin-item-icon.tooltip.tooltip-bottom
|
||||
[:div.margin-item-icon.tooltip.tooltip-bottom-left
|
||||
{:class (dom/classnames :selected (= margin-type :multiple))
|
||||
:alt "Margin - multiple"
|
||||
:on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))}
|
||||
|
@ -100,6 +100,7 @@
|
|||
auto? is-layout-container?]
|
||||
|
||||
[:div.btn-wrapper
|
||||
{:class (when (and fill? auto?) "wrap")}
|
||||
[:div.layout-behavior.horizontal
|
||||
[:button.behavior-btn.tooltip.tooltip-bottom
|
||||
{:alt "Fix width"
|
||||
|
@ -200,19 +201,13 @@
|
|||
|
||||
[:div.element-set-content.layout-item-menu
|
||||
[:div.layout-row
|
||||
[:div.row-title "Sizing"]
|
||||
[:div.row-title.sizing "Sizing"]
|
||||
[:& element-behavior {:is-layout-child? is-layout-child?
|
||||
:is-layout-container? is-layout-container?
|
||||
:layout-item-v-sizing (or (:layout-item-v-sizing values) :fix)
|
||||
:layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
|
||||
:on-change-behavior on-change-behavior}]]
|
||||
|
||||
|
||||
(when is-layout-child?
|
||||
[:& margin-section {:values values
|
||||
:change-margin-style change-margin-style
|
||||
:on-margin-change on-margin-change}])
|
||||
|
||||
|
||||
(when is-layout-child?
|
||||
[:div.layout-row
|
||||
[:div.row-title "Align"]
|
||||
|
@ -221,6 +216,11 @@
|
|||
:align-self align-self
|
||||
:set-align-self set-align-self}]]])
|
||||
|
||||
(when is-layout-child?
|
||||
[:& margin-section {:values values
|
||||
:change-margin-style change-margin-style
|
||||
:on-margin-change on-margin-change}])
|
||||
|
||||
[:div.advanced-ops-body
|
||||
[:div.input-wrapper
|
||||
(for [item (cond-> []
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
|
@ -26,6 +27,7 @@
|
|||
layer-values (select-keys shape layer-attrs)
|
||||
constraint-values (select-keys shape constraint-attrs)
|
||||
layout-item-values (select-keys shape layout-item-attrs)
|
||||
layout-container-values (select-keys shape layout-container-flex-attrs)
|
||||
|
||||
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
|
||||
is-layout-child? (mf/deref is-layout-child-ref)]
|
||||
|
@ -34,6 +36,8 @@
|
|||
:type type
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
|
||||
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu
|
||||
{:ids ids
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
|
@ -28,6 +29,7 @@
|
|||
layer-values (select-keys shape layer-attrs)
|
||||
constraint-values (select-keys shape constraint-attrs)
|
||||
layout-item-values (select-keys shape layout-item-attrs)
|
||||
layout-container-values (select-keys shape layout-container-flex-attrs)
|
||||
|
||||
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
|
||||
is-layout-child? (mf/deref is-layout-child-ref)]
|
||||
|
@ -36,6 +38,8 @@
|
|||
:type type
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
|
||||
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu {:ids ids
|
||||
:type type
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
(when (not is-layout-child?)
|
||||
[:& constraints-menu {:ids ids
|
||||
:values constraint-values}])
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
|
||||
|
||||
(when (or is-layout-child? is-layout-container?)
|
||||
[:& layout-item-menu
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
[:div.options
|
||||
[:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
|
||||
[:& component-menu {:ids comp-ids :values comp-values :shape-name (:name shape)}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
|
||||
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
|
@ -28,6 +29,7 @@
|
|||
fill-values (select-keys shape fill-attrs)
|
||||
stroke-values (select-keys shape stroke-attrs)
|
||||
layout-item-values (select-keys shape layout-item-attrs)
|
||||
layout-container-values (select-keys shape layout-container-flex-attrs)
|
||||
|
||||
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
|
||||
is-layout-child? (mf/deref is-layout-child-ref)]
|
||||
|
@ -36,6 +38,8 @@
|
|||
:type type
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
|
||||
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu
|
||||
{:ids ids
|
||||
|
|
|
@ -327,7 +327,7 @@
|
|||
(when-not (empty? measure-ids)
|
||||
[:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}])
|
||||
|
||||
[:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values}]
|
||||
[:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values :multiple true}]
|
||||
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
|
@ -28,6 +29,7 @@
|
|||
layer-values (select-keys shape layer-attrs)
|
||||
constraint-values (select-keys shape constraint-attrs)
|
||||
layout-item-values (select-keys shape layout-item-attrs)
|
||||
layout-container-values (select-keys shape layout-container-flex-attrs)
|
||||
|
||||
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
|
||||
is-layout-child? (mf/deref is-layout-child-ref)]
|
||||
|
@ -36,6 +38,8 @@
|
|||
:type type
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
|
||||
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu {:ids ids
|
||||
:type type
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
|
@ -29,7 +30,7 @@
|
|||
fill-values (select-keys shape fill-attrs)
|
||||
stroke-values (select-keys shape stroke-attrs)
|
||||
layout-item-values (select-keys shape layout-item-attrs)
|
||||
|
||||
layout-container-values (select-keys shape layout-container-flex-attrs)
|
||||
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
|
||||
is-layout-child? (mf/deref is-layout-child-ref)]
|
||||
[:*
|
||||
|
@ -37,6 +38,7 @@
|
|||
:type type
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu
|
||||
{:ids ids
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
|
@ -102,6 +103,7 @@
|
|||
fill-values (get-fill-values shape)
|
||||
stroke-values (get-stroke-values shape)
|
||||
layout-item-values (select-keys shape layout-item-attrs)
|
||||
layout-container-values (select-keys shape layout-container-flex-attrs)
|
||||
|
||||
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
|
||||
is-layout-child? (mf/deref is-layout-child-ref)]
|
||||
|
@ -112,6 +114,8 @@
|
|||
:type type
|
||||
:values measure-values
|
||||
:shape shape}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
|
||||
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu
|
||||
{:ids ids
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu fill-attrs]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
|
@ -28,6 +29,7 @@
|
|||
|
||||
is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
|
||||
is-layout-child? (mf/deref is-layout-child-ref)
|
||||
layout-container-values (select-keys shape layout-container-flex-attrs)
|
||||
state-map (mf/deref refs/workspace-editor-state)
|
||||
shared-libs (mf/deref refs/workspace-libraries)
|
||||
|
||||
|
@ -70,6 +72,7 @@
|
|||
:type type
|
||||
:values (select-keys shape measure-attrs)
|
||||
:shape shape}]
|
||||
[:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
|
||||
|
||||
(when is-layout-child?
|
||||
[:& layout-item-menu
|
||||
|
|
|
@ -2508,6 +2508,9 @@ msgstr "Toggle history"
|
|||
msgid "shortcuts.toggle-layers"
|
||||
msgstr "Toggle layers"
|
||||
|
||||
msgid "shortcuts.toggle-layout-flex"
|
||||
msgstr "Add/remove layout flex"
|
||||
|
||||
msgid "shortcuts.toggle-lock"
|
||||
msgstr "Lock selected"
|
||||
|
||||
|
|
|
@ -2846,6 +2846,9 @@ msgstr "Mostrar/ocultar histórico"
|
|||
msgid "shortcuts.toggle-layers"
|
||||
msgstr "Mostrar/ocultar capas"
|
||||
|
||||
msgid "shortcuts.toggle-layout-flex"
|
||||
msgstr "Añadir/eliminar layout flex"
|
||||
|
||||
msgid "shortcuts.toggle-lock"
|
||||
msgstr "Bloquear/Desbloquear"
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue