Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 06:58:58 -05:00
Code Issues Activity

🐛 Fix absolute positioned layouts not showing flex properties

Browse source
This commit is contained in:
alonso.torres 2023-07-14 15:06:50 +02:00
parent 0f60f115f5
commit e1faba2ddc
2 changed files with 49 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -84,6 +84,7 @@
- Fix undo when updating several texts [Taiga #5197](https://tree.taiga.io/project/penpot/issue/5197) - Fix undo when updating several texts [Taiga #5197](https://tree.taiga.io/project/penpot/issue/5197)
- Fix assets right click button for multiple selection [Taiga #5545](https://tree.taiga.io/project/penpot/issue/5545) - Fix assets right click button for multiple selection [Taiga #5545](https://tree.taiga.io/project/penpot/issue/5545)
- Fix problem with precision in resizes [Taiga #5623](https://tree.taiga.io/project/penpot/issue/5623) - Fix problem with precision in resizes [Taiga #5623](https://tree.taiga.io/project/penpot/issue/5623)
- Fix absolute positioned layouts not showing flex properties [Taiga #5630](https://tree.taiga.io/project/penpot/issue/5630)
### :arrow_up: Deps updates ### :arrow_up: Deps updates

95
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -227,7 +227,9 @@
on-change-z-index on-change-z-index
(fn [value] (fn [value]
(st/emit! (dwsl/update-layout-child ids {:layout-item-z-index value})))] (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index value})))
is-layout-child? (and is-layout-child? (not is-absolute?))]
[:div.element-set [:div.element-set
[:div.element-set-title [:div.element-set-title
@ -236,7 +238,7 @@
"Flex element")]] "Flex element")]]
[:div.element-set-content.layout-item-menu [:div.element-set-content.layout-item-menu
(when is-layout-child? (when (or is-layout-child? is-absolute?)
[:div.layout-row [:div.layout-row
[:div.row-title.sizing "Position"] [:div.row-title.sizing "Position"]
[:div.btn-wrapper [:div.btn-wrapper
@ -262,53 +264,52 @@
:disabled (not is-absolute?) :disabled (not is-absolute?)
:value (:layout-item-z-index values)}]]]]) :value (:layout-item-z-index values)}]]]])
(when (not (:layout-item-absolute values)) [:*
[:* [:div.layout-row
[: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?
[:div.layout-row [:div.layout-row
[:div.row-title.sizing "Sizing"] [:div.row-title "Align"]
[:& element-behavior {:is-layout-child? is-layout-child? [:div.btn-wrapper
:is-layout-container? is-layout-container? [:& align-self-row {:is-col? is-col?
:layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) :align-self align-self
:layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) :set-align-self set-align-self}]]])
:on-change-behavior on-change-behavior}]]
(when is-layout-child? (when is-layout-child?
[:div.layout-row [:& margin-section {:values values
[:div.row-title "Align"] :change-margin-style change-margin-style
[:div.btn-wrapper :on-margin-change on-margin-change}])
[:& align-self-row {:is-col? is-col?
:align-self align-self
:set-align-self set-align-self}]]])
(when is-layout-child? [:div.advanced-ops-body
[:& margin-section {:values values [:div.input-wrapper
:change-margin-style change-margin-style (for [item (cond-> []
:on-margin-change on-margin-change}]) (= (:layout-item-h-sizing values) :fill)
(conj :layout-item-min-w :layout-item-max-w)
[:div.advanced-ops-body (= (:layout-item-v-sizing values) :fill)
[:div.input-wrapper (conj :layout-item-min-h :layout-item-max-h))]
(for [item (cond-> []
(= (:layout-item-h-sizing values) :fill)
(conj :layout-item-min-w :layout-item-max-w)
(= (:layout-item-v-sizing values) :fill) [:div.tooltip.tooltip-bottom
(conj :layout-item-min-h :layout-item-max-h))] {:key (d/name item)
:alt (tr (dm/str "workspace.options.layout-item.title." (d/name item)))
[:div.tooltip.tooltip-bottom :class (dom/classnames "maxH" (= item :layout-item-max-h)
{:key (d/name item) "minH" (= item :layout-item-min-h)
:alt (tr (dm/str "workspace.options.layout-item.title." (d/name item))) "maxW" (= item :layout-item-max-w)
:class (dom/classnames "maxH" (= item :layout-item-max-h) "minW" (= item :layout-item-min-w))}
"minH" (= item :layout-item-min-h) [:div.input-element
"maxW" (= item :layout-item-max-w) {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))}
"minW" (= item :layout-item-min-w))} [:> numeric-input
[:div.input-element {:no-validate true
{:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} :min 0
[:> numeric-input :data-wrap true
{:no-validate true :placeholder "--"
:min 0 :on-focus #(dom/select-target %)
:data-wrap true :on-change (partial on-size-change item)
:placeholder "--" :value (get values item)
:on-focus #(dom/select-target %) :nillable true}]]])]]]]]))
:on-change (partial on-size-change item)
:value (get values item)
:nillable true}]]])]]])]]))