Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-10 14:01:29 -05:00
Code Issues 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
Show stats 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)
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
(mf/use-fn
(mf/deps ids align-self)
@ -490,43 +504,23 @@
[:& title-bar {:collapsable? has-content?
:collapsed? (not open?)
:on-collapsed toggle-content
: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")
:title title
:class (stl/css-case :title-spacing-layout-element true
: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}]]])]]
:title-spacing-empty (not has-content?))}]]
(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}]
[:div {:class (stl/css :row)}
(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 is-absolute?
[:div {:class (stl/css :z-index-wrapper)
:title "z-index"}
@ -541,19 +535,28 @@
:nillable true
: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?)
[:div {:class (stl/css :second-row)}
[:div {:class (stl/css :row)}
[:& align-self-row {:is-col? is-col?
:align-self align-self
:on-changer set-align-self-refactor}]])
(when is-layout-child?
[:div {:class (stl/css :third-row)}
[:div {:class (stl/css :row)}
[:& margin-section {:values values
:change-margin-style change-margin-style
:on-margin-change on-margin-change}]])
[:div {:class (stl/css :forth-row)}
[:div {:class (stl/css :row)}
[:div {:class (stl/css :advanced-options)}
(when (= (:layout-item-h-sizing values) :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 {
.title-spacing-layout-element {
margin: 0 0 $s-4 0;
.position-options {
width: $s-140;
}
}
.title-spacing-empty {
padding-left: $s-12;
@ -20,95 +17,96 @@
}
.flex-element-menu {
@include flexColumn;
.first-row {
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;
}
gap: $s-12;
.third-row {
.margin-row {
display: flex;
align-items: flex-start;
gap: $s-4;
.margin-mode {
@extend .button-tertiary;
height: $s-32;
.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-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 {
@extend .button-icon;
}
&.selected {
background-color: var(--button-tertiary-background-color-active);
color: var(--button-tertiary-foreground-color-active);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
stroke: var(--button-tertiary-foreground-color-active);
}
}
.inputs-wrapper {
.margin-simple {
display: flex;
gap: $s-4;
.vertical-margin,
.horizontal-margin {
@extend .input-element;
width: $s-108;
}
}
.inputs-wrapper {
.margin-simple {
display: flex;
gap: $s-4;
.vertical-margin,
.horizontal-margin {
@extend .input-element;
width: $s-108;
}
.margin-multiple {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-4;
.top-margin,
.bottom-margin,
.left-margin,
.right-margin {
@extend .input-element;
width: $s-108;
}
}
.margin-multiple {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-4;
.top-margin,
.bottom-margin,
.left-margin,
.right-margin {
@extend .input-element;
width: $s-108;
}
}
}
}
.forth-row .advanced-options {
.advanced-options {
@include flexColumn;
.horizontal-fill,
.vertical-fill {