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

77
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 is-flex-parent?
[:div {:class (stl/css :position-options)}
[:& radio-buttons {:selected (if is-absolute?
"absolute"
"static")
:on-change on-change-position
:name "layout-style"
:wide true}
[:& radio-button {:value "static"
:id :static-position}]
[:& radio-button {:value "absolute"
:id :absolute-position}]]])]]
(when open? (when open?
[:div {:class (stl/css :flex-element-menu)} [:div {:class (stl/css :flex-element-menu)}
[:div {:class (stl/css :first-row)} [:div {:class (stl/css :row)}
[:& element-behaviour {:fill? is-layout-child? (when is-flex-parent?
:auto? is-layout-container? [:div {:class (stl/css :position-options)}
:layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) [:& radio-buttons {:selected (if is-absolute? "absolute" "static")
:layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) :on-change on-change-position
:on-change-behaviour-h-refactor on-change-behaviour-h :name "layout-style"
:on-change-behaviour-v-refactor on-change-behaviour-v :wide true}
:on-change on-change-behaviour}] [:& radio-button {:value "static"
:id :static-position}]
[:& radio-button {:value "absolute"
:id :absolute-position}]]])
(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)}

160
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,95 +17,96 @@
} }
.flex-element-menu { .flex-element-menu {
@include flexColumn; @include flexColumn;
.first-row { gap: $s-12;
display: flex;
gap: $s-4;
.behaviour-menu {
display: flex;
gap: $s-4;
.horizontal-behaviour {
&.one-element {
width: $s-28;
}
&.two-element {
width: $s-60;
}
&.three-element {
width: $s-92;
}
}
.vertical-behaviour {
.rotated {
transform: rotate(90deg);
}
&.one-element {
width: $s-28;
}
&.two-element {
width: $s-60;
}
&.three-element {
width: $s-92;
}
}
}
.z-index-wrapper {
@extend .input-element;
width: $s-124;
}
}
.second-row {
display: flex;
gap: $s-4;
}
.third-row { .behaviour-menu {
.margin-row { display: flex;
display: flex; gap: $s-4;
align-items: flex-start; .horizontal-behaviour {
gap: $s-4; &.one-element {
.margin-mode {
@extend .button-tertiary;
height: $s-32;
width: $s-28; width: $s-28;
}
&.two-element {
width: $s-60;
}
&.three-element {
width: $s-92;
}
}
.vertical-behaviour {
.rotated {
transform: rotate(90deg);
}
&.one-element {
width: $s-28;
}
&.two-element {
width: $s-60;
}
&.three-element {
width: $s-92;
}
}
}
.z-index-wrapper {
@extend .input-element;
width: $s-60;
}
.row {
display: flex;
gap: $s-4;
}
.position-options {
width: $s-188;
}
.margin-row {
display: flex;
align-items: flex-start;
gap: $s-4;
.margin-mode {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
&.selected {
background-color: var(--button-tertiary-background-color-active);
color: var(--button-tertiary-foreground-color-active);
svg { svg {
@extend .button-icon; stroke: var(--button-tertiary-foreground-color-active);
}
&.selected {
background-color: var(--button-tertiary-background-color-active);
color: var(--button-tertiary-foreground-color-active);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
} }
} }
.inputs-wrapper { }
.margin-simple { .inputs-wrapper {
display: flex; .margin-simple {
gap: $s-4; display: flex;
.vertical-margin, gap: $s-4;
.horizontal-margin { .vertical-margin,
@extend .input-element; .horizontal-margin {
width: $s-108; @extend .input-element;
} width: $s-108;
} }
.margin-multiple { }
display: grid; .margin-multiple {
grid-template-columns: 1fr 1fr; display: grid;
gap: $s-4; grid-template-columns: 1fr 1fr;
.top-margin, gap: $s-4;
.bottom-margin, .top-margin,
.left-margin, .bottom-margin,
.right-margin { .left-margin,
@extend .input-element; .right-margin {
width: $s-108; @extend .input-element;
} width: $s-108;
} }
} }
} }
} }
.forth-row .advanced-options { .advanced-options {
@include flexColumn; @include flexColumn;
.horizontal-fill, .horizontal-fill,
.vertical-fill { .vertical-fill {