3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-01 15:50:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix absolute layout

Browse source
This commit is contained in:
alonso.torres 2023-12-04 15:49:31 +01:00 • committed by Andrey Antukh
parent b05f48ca5f
commit fa90403d84
2 changed files with 119 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -393,6 +393,20 @@
align-self (:layout-item-align-self values) align-self (:layout-item-align-self values)
title
(cond
(and is-layout-container? (not is-layout-child?))
"Flex board"
is-flex-parent?
"Flex element"
is-grid-parent?
"Grid element"
:else
"Layout element")
set-align-self set-align-self
(mf/use-fn (mf/use-fn
(mf/deps ids align-self) (mf/deps ids align-self)
@ -490,43 +504,23 @@
[:& title-bar {:collapsable? has-content? [:& title-bar {:collapsable? has-content?
:collapsed? (not open?) :collapsed? (not open?)
:on-collapsed toggle-content :on-collapsed toggle-content
:title (cond :title title
(and is-layout-container? (not is-layout-child?))
"Flex board"
is-flex-parent?
"Flex element"
is-grid-parent?
"Grid element"
:else
"Layout element")
:class (stl/css-case :title-spacing-layout-element true :class (stl/css-case :title-spacing-layout-element true
:title-spacing-empty (not has-content?))} :title-spacing-empty (not has-content?))}]]
(when open?
[:div {:class (stl/css :flex-element-menu)}
[:div {:class (stl/css :row)}
(when is-flex-parent? (when is-flex-parent?
[:div {:class (stl/css :position-options)} [:div {:class (stl/css :position-options)}
[:& radio-buttons {:selected (if is-absolute? [:& radio-buttons {:selected (if is-absolute? "absolute" "static")
"absolute"
"static")
:on-change on-change-position :on-change on-change-position
:name "layout-style" :name "layout-style"
:wide true} :wide true}
[:& radio-button {:value "static" [:& radio-button {:value "static"
:id :static-position}] :id :static-position}]
[:& radio-button {:value "absolute" [:& radio-button {:value "absolute"
:id :absolute-position}]]])]] :id :absolute-position}]]])
(when open?
[:div {:class (stl/css :flex-element-menu)}
[:div {:class (stl/css :first-row)}
[:& element-behaviour {:fill? is-layout-child?
:auto? 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-behaviour-h-refactor on-change-behaviour-h
:on-change-behaviour-v-refactor on-change-behaviour-v
:on-change on-change-behaviour}]
(when is-absolute? (when is-absolute?
[:div {:class (stl/css :z-index-wrapper) [:div {:class (stl/css :z-index-wrapper)
:title "z-index"} :title "z-index"}
@ -541,19 +535,28 @@
:nillable true :nillable true
:value (:layout-item-z-index values)}]])] :value (:layout-item-z-index values)}]])]
[:div {:class (stl/css :row)}
[:& element-behaviour {:fill? is-layout-child?
:auto? 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-behaviour-h-refactor on-change-behaviour-h
:on-change-behaviour-v-refactor 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 :second-row)} [:div {:class (stl/css :row)}
[:& align-self-row {:is-col? is-col? [:& align-self-row {:is-col? is-col?
:align-self align-self :align-self align-self
:on-changer set-align-self-refactor}]]) :on-changer set-align-self-refactor}]])
(when is-layout-child? (when is-layout-child?
[:div {:class (stl/css :third-row)} [:div {:class (stl/css :row)}
[:& margin-section {:values values [:& margin-section {:values values
:change-margin-style change-margin-style :change-margin-style change-margin-style
:on-margin-change on-margin-change}]]) :on-margin-change on-margin-change}]])
[:div {:class (stl/css :forth-row)} [:div {:class (stl/css :row)}
[:div {:class (stl/css :advanced-options)} [:div {:class (stl/css :advanced-options)}
(when (= (:layout-item-h-sizing values) :fill) (when (= (:layout-item-h-sizing values) :fill)
[:div {:class (stl/css :horizontal-fill)} [:div {:class (stl/css :horizontal-fill)}

22
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
View file

@ -10,9 +10,6 @@
.element-title { .element-title {
.title-spacing-layout-element { .title-spacing-layout-element {
margin: 0 0 $s-4 0; margin: 0 0 $s-4 0;
.position-options {
width: $s-140;
}
} }
.title-spacing-empty { .title-spacing-empty {
padding-left: $s-12; padding-left: $s-12;
@ -20,9 +17,8 @@
} }
.flex-element-menu { .flex-element-menu {
@include flexColumn; @include flexColumn;
.first-row { gap: $s-12;
display: flex;
gap: $s-4;
.behaviour-menu { .behaviour-menu {
display: flex; display: flex;
gap: $s-4; gap: $s-4;
@ -52,17 +48,20 @@
} }
} }
} }
.z-index-wrapper { .z-index-wrapper {
@extend .input-element; @extend .input-element;
width: $s-124; width: $s-60;
} }
}
.second-row { .row {
display: flex; display: flex;
gap: $s-4; gap: $s-4;
} }
.third-row { .position-options {
width: $s-188;
}
.margin-row { .margin-row {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -106,9 +105,8 @@
} }
} }
} }
}
.forth-row .advanced-options { .advanced-options {
@include flexColumn; @include flexColumn;
.horizontal-fill, .horizontal-fill,
.vertical-fill { .vertical-fill {