mirror of
https://github.com/penpot/penpot.git
synced 2025-05-30 05:56:13 +02:00
🐛 Fix problem with sidebar layout
This commit is contained in:
alonso.torres
Alonso Torres
parent
0df2a12814
commit
eaaca5629e
26 changed files with 430 additions and 289 deletions
|
|
@ -85,6 +85,7 @@ A non exhaustive list of changes:
|
|||
|
||||
- Fix spacing / sizes of different elements in the measurements section of the design tab [Taiga #11076](https://tree.taiga.io/project/penpot/issue/11076)
|
||||
- Fix selection of short paths [Github #4472](https://github.com/penpot/penpot/issues/4472)
|
||||
- Fix element positioning on the right side to adjust to grid [#11073](https://tree.taiga.io/project/penpot/issue/11073)
|
||||
|
||||
## 2.7.0 (Unreleased)
|
||||
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ test("[Bugfixing] User cut paste a variant container into a board, and undo twic
|
|||
|
||||
//Create a board
|
||||
await workspacePage.boardButton.click();
|
||||
await workspacePage.clickWithDragViewportAt(500, 500, 200, 200);
|
||||
await workspacePage.clickWithDragViewportAt(500, 500, 100, 100);
|
||||
await workspacePage.clickAt(495, 495);
|
||||
const board = await workspacePage.rootShape.locator("Board");
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
(let [encode-fn (d/nilv encode-fn identity)
|
||||
decode-fn (d/nilv decode-fn identity)
|
||||
nitems (if (array? children)
|
||||
(alength children)
|
||||
(count (keep identity children))
|
||||
1)
|
||||
;; FIXME: we should handle this with CSS
|
||||
width (mf/with-memo [nitems]
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
"unset"
|
||||
(fmt/format-pixels
|
||||
(+ (* 4 (- nitems 1))
|
||||
(* 28 nitems)))))
|
||||
(* 32 nitems)))))
|
||||
|
||||
on-change'
|
||||
(mf/use-fn
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
|
||||
.dropdown-button {
|
||||
@include flexCenter;
|
||||
margin-inline-end: var(--sp-xxs);
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
|
|
|
|||
|
|
@ -13,12 +13,16 @@ $sz-32: px2rem(32);
|
|||
$sz-36: px2rem(36);
|
||||
$sz-40: px2rem(40);
|
||||
$sz-48: px2rem(48);
|
||||
$sz-80: px2rem(80);
|
||||
$sz-88: px2rem(88);
|
||||
$sz-160: px2rem(160);
|
||||
$sz-200: px2rem(200);
|
||||
$sz-224: px2rem(224);
|
||||
$sz-252: px2rem(252);
|
||||
$sz-284: px2rem(284);
|
||||
$sz-318: px2rem(318);
|
||||
$sz-352: px2rem(352);
|
||||
$sz-400: px2rem(400);
|
||||
$sz-480: px2rem(480);
|
||||
$sz-500: px2rem(500);
|
||||
$sz-964: px2rem(964);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
@import "../ds/_sizes.scss";
|
||||
|
||||
.element-options {
|
||||
display: flex;
|
||||
|
|
@ -19,5 +20,5 @@
|
|||
}
|
||||
|
||||
.workspace-element-options {
|
||||
height: calc(100vh - #{$s-164}); // TODO: Fix this hardcoded value
|
||||
height: calc(100vh - #{$sz-200}); // TODO: Fix this hardcoded value
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@
|
|||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
@import "../ds/_sizes.scss";
|
||||
|
||||
$width-settings-bar: $s-276;
|
||||
$width-settings-bar-max: $s-500;
|
||||
$width-settings-bar: $sz-318;
|
||||
$width-settings-bar-max: $sz-500;
|
||||
|
||||
.left-settings-bar {
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "../../ds/_sizes.scss";
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.tool-window {
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
flex-direction: column;
|
||||
gap: $s-8;
|
||||
width: 100%;
|
||||
height: calc(100vh - $s-80);
|
||||
height: calc(100vh - $sz-88);
|
||||
padding-top: $s-8;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
(when (not (and disabled-align disabled-distribute))
|
||||
[:div {:class (stl/css :align-options)}
|
||||
[:div {:class (stl/css :align-group)}
|
||||
[:div {:class (stl/css :align-group-horizontal)}
|
||||
[:button {:class (stl/css-case :align-button true
|
||||
:disabled disabled-align)
|
||||
:disabled disabled-align
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
:on-click distribute-objects}
|
||||
i/distribute-horizontally]]
|
||||
|
||||
[:div {:class (stl/css :align-group)}
|
||||
[:div {:class (stl/css :align-group-vertical)}
|
||||
[:button {:class (stl/css-case :align-button true
|
||||
:disabled disabled-align)
|
||||
:disabled disabled-align
|
||||
|
|
|
|||
|
|
@ -7,19 +7,31 @@
|
|||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.align-options {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
column-gap: var(--sp-xs);
|
||||
height: $s-32;
|
||||
margin: 0 calc(-1 * $s-2);
|
||||
}
|
||||
.align-group {
|
||||
@include flexRow;
|
||||
.align-group-horizontal,
|
||||
.align-group-vertical {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.align-group-horizontal {
|
||||
grid-column: 1 / span 4;
|
||||
}
|
||||
|
||||
.align-group-vertical {
|
||||
grid-column: 5 / span 4;
|
||||
}
|
||||
|
||||
.align-button {
|
||||
@extend .button-tertiary;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
padding: 0;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,12 @@
|
|||
}
|
||||
|
||||
.first-row {
|
||||
@include flexRow;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: var(--sp-xs);
|
||||
|
||||
.blur-info {
|
||||
grid-column: span 6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-1;
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
.boolean-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, $s-28);
|
||||
column-gap: $s-4;
|
||||
height: $s-32;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
column-gap: var(--sp-xs);
|
||||
height: var(--sp-xxxl);
|
||||
}
|
||||
|
||||
.bool-group {
|
||||
|
|
@ -45,4 +45,5 @@
|
|||
|
||||
.boolean-radio-btn {
|
||||
background-color: transparent;
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,8 +16,9 @@
|
|||
}
|
||||
|
||||
.element-set-content {
|
||||
@include flexColumn;
|
||||
margin: $s-4 0 $s-8 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.multiple-exports {
|
||||
|
|
@ -32,18 +33,18 @@
|
|||
|
||||
.element-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
column-gap: $s-4;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
grid-column: span 8;
|
||||
grid-column: span 7;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
.format-select {
|
||||
grid-column: span 3;
|
||||
grid-column: span 2;
|
||||
padding: 0;
|
||||
|
||||
.dropdown-upwards {
|
||||
|
|
@ -72,6 +73,6 @@
|
|||
.export-btn {
|
||||
@extend .button-secondary;
|
||||
@include uppercaseTitleTipography;
|
||||
grid-column: 1 / span 8;
|
||||
height: $s-32;
|
||||
width: $s-252;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,10 +21,13 @@
|
|||
}
|
||||
|
||||
.grid-title {
|
||||
@include flexRow;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: $s-4;
|
||||
}
|
||||
|
||||
.option-row {
|
||||
grid-column: span 6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-1;
|
||||
|
|
@ -45,6 +48,7 @@
|
|||
}
|
||||
}
|
||||
.type-select-wrapper {
|
||||
flex-grow: 1;
|
||||
width: $s-96;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
|
|
@ -143,6 +147,7 @@
|
|||
|
||||
.actions {
|
||||
@include flexRow;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.grid-advanced-options {
|
||||
|
|
|
|||
|
|
@ -160,7 +160,6 @@
|
|||
preview-complete?))
|
||||
(swap! state* assoc :selected-blend-mode current-blend-mode)))
|
||||
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css-case :element-set-content true
|
||||
:hidden hidden?)}
|
||||
[:div {:class (stl/css :select)}
|
||||
|
|
@ -209,4 +208,4 @@
|
|||
[:> icon-button* {:variant "ghost"
|
||||
:aria-label (tr "workspace.shape.menu.unlock")
|
||||
:on-click handle-set-unblocked
|
||||
:icon "lock"}])]]]))
|
||||
:icon "lock"}])]]))
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@
|
|||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.element-set {
|
||||
margin-bottom: $s-8;
|
||||
}
|
||||
.element-set-content {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: var(--sp-xs);
|
||||
height: $s-32;
|
||||
gap: $s-4;
|
||||
margin-bottom: $s-8;
|
||||
.select {
|
||||
width: $s-124;
|
||||
grid-column: span 4;
|
||||
padding: 0;
|
||||
}
|
||||
.input {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-60;
|
||||
grid-column: span 2;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
grid-column: span 2;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
|
|
|
|||
|
|
@ -162,7 +162,8 @@
|
|||
{::mf/props :obj
|
||||
::mf/private true}
|
||||
[{:keys [value on-change]}]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
[:& radio-buttons {:class (stl/css :direction-row-flex)
|
||||
:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name "flex-direction"}
|
||||
|
|
@ -197,7 +198,8 @@
|
|||
(mf/defc align-row
|
||||
{::mf/props :obj}
|
||||
[{:keys [is-column value on-change]}]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
[:& radio-buttons {:class (stl/css :align-row)
|
||||
:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name "flex-align-items"}
|
||||
|
|
@ -217,7 +219,8 @@
|
|||
(mf/defc align-content-row
|
||||
{::mf/props :obj}
|
||||
[{:keys [is-column value on-change]}]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
[:& radio-buttons {:class (stl/css :align-content-row)
|
||||
:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name "flex-align-content"}
|
||||
|
|
@ -249,7 +252,8 @@
|
|||
(mf/defc justify-content-row
|
||||
{::mf/props :obj}
|
||||
[{:keys [is-column justify-content on-change]}]
|
||||
[:& radio-buttons {:selected (d/name justify-content)
|
||||
[:& radio-buttons {:class (stl/css :justify-content-row)
|
||||
:selected (d/name justify-content)
|
||||
:on-change on-change
|
||||
:name "flex-justify"}
|
||||
[:& radio-button {:value "start"
|
||||
|
|
@ -582,7 +586,8 @@
|
|||
(mf/defc direction-row-grid
|
||||
{::mf/props :obj}
|
||||
[{:keys [value on-change] :as props}]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
[:& radio-buttons {:class (stl/css :direction-row-grid)
|
||||
:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name "grid-direction"}
|
||||
|
|
@ -619,7 +624,8 @@
|
|||
::mf/private true}
|
||||
[{:keys [is-column value on-change]}]
|
||||
(let [type (if ^boolean is-column "column" "row")]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
[:& radio-buttons {:class (stl/css :align-grid-row)
|
||||
:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:name (dm/str "flex-align-items-" type)}
|
||||
|
|
@ -641,7 +647,8 @@
|
|||
::mf/private :obj}
|
||||
[{:keys [is-column value on-change]}]
|
||||
(let [type (if ^boolean is-column "column" "row")]
|
||||
[:& radio-buttons {:selected (d/name value)
|
||||
[:& radio-buttons {:class (stl/css :justify-grid-row)
|
||||
:selected (d/name value)
|
||||
:on-change on-change
|
||||
:decode-fn keyword
|
||||
:name (dm/str "grid-justify-items-" type)}
|
||||
|
|
@ -1103,7 +1110,7 @@
|
|||
:on-click open-grid-help
|
||||
:icon "help"}]])
|
||||
|
||||
[:div {:class (stl/css :row :first-row)}
|
||||
[:div {:class (stl/css :first-row)}
|
||||
[:div {:class (stl/css :direction-edit)}
|
||||
[:div {:class (stl/css :direction)}
|
||||
[:& direction-row-grid {:value saved-grid-dir
|
||||
|
|
@ -1124,10 +1131,10 @@
|
|||
:value grid-justify-content-row
|
||||
:on-change on-row-justify-change}]]
|
||||
|
||||
[:div {:class (stl/css :row)}
|
||||
[:div {:class (stl/css :gap-row)}
|
||||
[:& gap-section {:on-change on-gap-change
|
||||
:value (:layout-gap values)}]]
|
||||
[:div {:class (stl/css :row :padding-section)}
|
||||
[:div {:class (stl/css :padding-row)}
|
||||
[:& padding-section {:value (:layout-padding values)
|
||||
:type (:layout-padding-type values)
|
||||
:on-type-change on-padding-type-change
|
||||
|
|
|
|||
|
|
@ -30,17 +30,31 @@
|
|||
}
|
||||
}
|
||||
.flex-layout-menu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: var(--sp-xs);
|
||||
margin-bottom: $s-8;
|
||||
|
||||
.first-row {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
margin-bottom: $s-12;
|
||||
margin-top: $s-4;
|
||||
|
||||
.align-row {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.direction-row-flex {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.wrap-button {
|
||||
@extend .button-tertiary;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
width: $s-32;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
|
|
@ -52,12 +66,25 @@
|
|||
}
|
||||
.second-row,
|
||||
.third-row {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
margin-bottom: $s-12;
|
||||
|
||||
.align-content-row,
|
||||
.justify-content-row {
|
||||
grid-column: span 6;
|
||||
}
|
||||
}
|
||||
.forth-row {
|
||||
@include flexColumn;
|
||||
display: grid;
|
||||
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
|
||||
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
|
||||
gap: var(--sp-xs);
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.help-button-wrapper {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
|
@ -66,12 +93,12 @@
|
|||
}
|
||||
|
||||
.gap-group {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
grid-column: span 3;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
.column-gap {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-108;
|
||||
&.disabled {
|
||||
@extend .disabled-input;
|
||||
}
|
||||
|
|
@ -79,7 +106,6 @@
|
|||
.row-gap {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-108;
|
||||
&.disabled {
|
||||
@extend .disabled-input;
|
||||
}
|
||||
|
|
@ -87,41 +113,43 @@
|
|||
}
|
||||
|
||||
.padding-group {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
display: grid;
|
||||
grid-column: span 3;
|
||||
grid-template-columns: subgrid;
|
||||
|
||||
.padding-inputs {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
grid-column: span 2;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
.paddings-simple {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
display: grid;
|
||||
grid-column: span 2;
|
||||
grid-template-columns: subgrid;
|
||||
|
||||
.padding-simple {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
max-width: $s-108;
|
||||
}
|
||||
}
|
||||
|
||||
.paddings-multiple {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $s-4;
|
||||
grid-column: span 2;
|
||||
grid-template-columns: subgrid;
|
||||
gap: var(--sp-xs);
|
||||
|
||||
.padding-multiple {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
max-width: $s-108;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-toggle {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
width: $s-32;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
|
|
@ -134,22 +162,30 @@
|
|||
}
|
||||
|
||||
.grid-layout-menu {
|
||||
@include flexColumn;
|
||||
gap: $s-8;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: var(--sp-xs);
|
||||
|
||||
.row {
|
||||
@include flexRow;
|
||||
.edit-grid-wrapper,
|
||||
.first-row,
|
||||
.grid-layout-align,
|
||||
.gap-row,
|
||||
.padding-row {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.first-row {
|
||||
margin-bottom: $s-8;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
.grid-layout-align {
|
||||
@include flexColumn;
|
||||
gap: $s-4;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
gap: var(--sp-xs);
|
||||
|
||||
.locate-button {
|
||||
position: absolute;
|
||||
|
|
@ -169,6 +205,7 @@
|
|||
@include uppercaseTitleTipography;
|
||||
width: 100%;
|
||||
padding: $s-8;
|
||||
grid-column: span 7;
|
||||
}
|
||||
|
||||
.exit-btn {
|
||||
|
|
@ -193,7 +230,8 @@
|
|||
}
|
||||
|
||||
.edit-grid-wrapper {
|
||||
@include flexRow;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -324,3 +362,23 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direction-edit {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.align-grid-row {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.justify-grid-row {
|
||||
grid-column: 1 / span 6;
|
||||
}
|
||||
|
||||
.gap-row,
|
||||
.padding-row {
|
||||
display: grid;
|
||||
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
|
||||
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -230,7 +230,6 @@
|
|||
{:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:wide true
|
||||
:name "flex-behaviour-h"}
|
||||
|
||||
[:& radio-button
|
||||
|
|
@ -265,7 +264,6 @@
|
|||
{:selected (d/name value)
|
||||
:decode-fn keyword
|
||||
:on-change on-change
|
||||
:wide true
|
||||
:name "flex-behaviour-v"}
|
||||
|
||||
[:& radio-button
|
||||
|
|
@ -451,7 +449,7 @@
|
|||
(when open?
|
||||
[:div {:class (stl/css :flex-element-menu)}
|
||||
(when (or is-layout-child? is-absolute?)
|
||||
[:div {:class (stl/css :row)}
|
||||
[:div {:class (stl/css :position-row)}
|
||||
[:div {:class (stl/css :position-options)}
|
||||
[:& radio-buttons {:selected (if is-absolute? "absolute" "static")
|
||||
:decode-fn keyword
|
||||
|
|
@ -475,7 +473,7 @@
|
|||
:nillable true
|
||||
:value (:layout-item-z-index values)}]]])
|
||||
|
||||
[:div {:class (stl/css :row)}
|
||||
[:div {:class (stl/css :behavior-row)}
|
||||
[:div {:class (stl/css-case
|
||||
:behaviour-menu true
|
||||
:wrap (and ^boolean is-layout-child?
|
||||
|
|
@ -492,21 +490,19 @@
|
|||
:on-change on-behaviour-v-change}]]]
|
||||
|
||||
(when (and is-layout-child? is-flex-parent?)
|
||||
[:div {:class (stl/css :row)}
|
||||
[:div {:class (stl/css :align-row)}
|
||||
[:& align-self-row {:is-col is-col?
|
||||
:value align-self
|
||||
:on-change on-align-self-change}]])
|
||||
|
||||
(when is-layout-child?
|
||||
[:div {:class (stl/css :row)}
|
||||
[:> margin-section* {:value (:layout-item-margin values)
|
||||
:type (:layout-item-margin-type values)
|
||||
:on-type-change on-margin-type-change
|
||||
:on-change on-margin-change}]])
|
||||
:on-change on-margin-change}])
|
||||
|
||||
(when (or (= h-sizing :fill)
|
||||
(= v-sizing :fill))
|
||||
[:div {:class (stl/css :row)}
|
||||
[:div {:class (stl/css :advanced-options)}
|
||||
(when (= (:layout-item-h-sizing values) :fill)
|
||||
[:div {:class (stl/css :horizontal-fill)}
|
||||
|
|
@ -573,4 +569,4 @@
|
|||
:on-focus dom/select-target
|
||||
:on-change on-size-change
|
||||
:value (get values :layout-item-max-h)
|
||||
:nillable true}]]])]])])]))
|
||||
:nillable true}]]])])])]))
|
||||
|
|
|
|||
|
|
@ -19,68 +19,60 @@
|
|||
}
|
||||
|
||||
.flex-element-menu {
|
||||
@include flexColumn;
|
||||
gap: $s-12;
|
||||
margin-block-end: $s-8;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.behaviour-menu {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
}
|
||||
|
||||
.horizontal-behaviour {
|
||||
&.one-element {
|
||||
width: $s-28;
|
||||
}
|
||||
&.two-element {
|
||||
width: $s-60;
|
||||
}
|
||||
&.three-element {
|
||||
width: $s-92;
|
||||
}
|
||||
display: grid;
|
||||
column-gap: var(--sp-xs);
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
@include bodySmallTypography;
|
||||
width: $s-60;
|
||||
grid-column: 6 / span 3;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.position-row,
|
||||
.behavior-row,
|
||||
.align-row,
|
||||
.margin-row {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.position-options {
|
||||
width: $s-188;
|
||||
width: 100%;
|
||||
grid-column: 1 / span 5;
|
||||
}
|
||||
|
||||
.margin-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $s-4;
|
||||
display: grid;
|
||||
// NOTE: this does not follow the 8-column grid and the size is not normalized,
|
||||
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
|
||||
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.margin-mode {
|
||||
@extend .button-tertiary;
|
||||
grid-column: 3;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
|
|
@ -90,20 +82,26 @@
|
|||
}
|
||||
|
||||
.margin-simple {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
display: grid;
|
||||
gap: var(--sp-xs);
|
||||
grid-template-columns: subgrid;
|
||||
.vertical-margin,
|
||||
.horizontal-margin {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-108;
|
||||
}
|
||||
.vertical-margin {
|
||||
grid-column: 1;
|
||||
}
|
||||
.horizontal-margin {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-multiple {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $s-4;
|
||||
grid-template-columns: subgrid;
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.top-margin,
|
||||
|
|
@ -112,17 +110,40 @@
|
|||
.right-margin {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-108;
|
||||
}
|
||||
|
||||
.top-margin {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.bottom-margin {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.left-margin {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.right-margin {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.advanced-options {
|
||||
@include flexColumn;
|
||||
display: grid;
|
||||
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
|
||||
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.horizontal-fill,
|
||||
.vertical-fill {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.layout-item-min-w,
|
||||
|
|
@ -131,10 +152,13 @@
|
|||
.layout-item-max-h {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-108;
|
||||
.icon-text {
|
||||
justify-content: flex-start;
|
||||
width: $s-80;
|
||||
padding-top: $s-2;
|
||||
}
|
||||
}
|
||||
|
||||
.inputs-wrapper {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,26 +8,24 @@
|
|||
|
||||
.element-set {
|
||||
display: grid;
|
||||
row-gap: var(--sp-xs);
|
||||
margin-bottom: var(--sp-s);
|
||||
// NOTE: this does not follow the 8-column grid and the size is not normalized,
|
||||
// so we need to hardcode this width :(
|
||||
--input-width: calc(var(--sp-xxxl) * 3.5 - 2 * var(--sp-xs));
|
||||
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
|
||||
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
|
||||
column-gap: var(--sp-xs);
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.presets {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: $s-4;
|
||||
gap: var(--sp-xs);
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.presets-wrapper {
|
||||
@extend .asset-element;
|
||||
position: relative;
|
||||
grid-column: span 4;
|
||||
grid-column: span 5;
|
||||
display: flex;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
|
|
|
|||
|
|
@ -196,7 +196,8 @@
|
|||
:on-change on-update-offset-y
|
||||
:value (:offset-y shadow)}]]
|
||||
|
||||
[:> color-row* {:color (:color shadow)
|
||||
[:> color-row* {:class (stl/css :shadow-color)
|
||||
:color (:color shadow)
|
||||
:title (tr "workspace.options.shadow-options.color")
|
||||
:disable-gradient true
|
||||
:disable-image true
|
||||
|
|
|
|||
|
|
@ -30,7 +30,9 @@
|
|||
}
|
||||
|
||||
.actions {
|
||||
@include flexRow;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.shadow-element {
|
||||
|
|
@ -53,14 +55,17 @@
|
|||
}
|
||||
|
||||
.basic-options {
|
||||
@include flexRow;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.shadow-info {
|
||||
grid-column: span 6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-1;
|
||||
width: $s-188;
|
||||
|
||||
.more-options {
|
||||
@extend .button-secondary;
|
||||
height: $s-32;
|
||||
|
|
@ -102,34 +107,46 @@
|
|||
}
|
||||
|
||||
.shadow-advanced-options {
|
||||
@include flexColumn;
|
||||
width: $sz-252;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.first-row,
|
||||
.second-row {
|
||||
@include flexRow;
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
.offset-x-input,
|
||||
.blur-input,
|
||||
.spread-input,
|
||||
.offset-y-input {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
width: $s-60;
|
||||
min-width: $s-60;
|
||||
align-items: baseline;
|
||||
input {
|
||||
width: $s-32;
|
||||
}
|
||||
}
|
||||
.blur-input,
|
||||
.spread-input {
|
||||
width: $s-92;
|
||||
|
||||
.input-label {
|
||||
width: $s-44;
|
||||
width: $sz-48;
|
||||
}
|
||||
|
||||
.offset-x-input {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.offset-y-input {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.blur-input {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.spread-input {
|
||||
gap: $s-8;
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.shadow-color {
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
(if (= v :multiple) nil v))
|
||||
|
||||
(mf/defc color-row*
|
||||
[{:keys [index color disable-gradient disable-opacity disable-image disable-picker hidden
|
||||
[{:keys [index color class disable-gradient disable-opacity disable-image disable-picker hidden
|
||||
on-change on-reorder on-detach on-open on-close on-remove
|
||||
disable-drag on-focus on-blur select-only select-on-focus]}]
|
||||
(let [libraries (mf/deref refs/files)
|
||||
|
|
@ -68,6 +68,8 @@
|
|||
editing-text* (mf/use-state false)
|
||||
editing-text? (deref editing-text*)
|
||||
|
||||
class (if (some? class) (dm/str class " ") "")
|
||||
|
||||
opacity?
|
||||
(and (not multiple-colors?)
|
||||
(not library-color?)
|
||||
|
|
@ -187,11 +189,13 @@
|
|||
(when (and (not disable-picker) (not= prev-color color))
|
||||
(modal/update-props! :colorpicker {:data (parse-color color)})))
|
||||
|
||||
[:div {:class (stl/css-case
|
||||
[:div {:class (dm/str
|
||||
class
|
||||
(stl/css-case
|
||||
:color-data true
|
||||
:hidden hidden
|
||||
:dnd-over-top (= (:over dprops) :top)
|
||||
:dnd-over-bot (= (:over dprops) :bot))}
|
||||
:dnd-over-bot (= (:over dprops) :bot)))}
|
||||
|
||||
;; Drag handler
|
||||
(when (some? on-reorder)
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
:select-on-focus select-on-focus
|
||||
:on-blur on-blur}]]
|
||||
|
||||
[:div {:class (stl/css :select-wrapper)
|
||||
[:div {:class (stl/css :select-wrapper :stroke-alignment-select)
|
||||
:data-testid "stroke.alignment"}
|
||||
[:& select
|
||||
{:default-value stroke-alignment
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
:on-change on-alignment-change}]]
|
||||
|
||||
(when-not disable-stroke-style
|
||||
[:div {:class (stl/css :select-wrapper)
|
||||
[:div {:class (stl/css :select-wrapper :stroke-style-select)
|
||||
:data-testid "stroke.style"}
|
||||
[:& select
|
||||
{:default-value stroke-style
|
||||
|
|
|
|||
|
|
@ -29,24 +29,30 @@
|
|||
.stroke-options {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: $s-4;
|
||||
grid-template-columns: 1fr 2fr 2fr;
|
||||
grid-template-columns: repeat(8, var(--sp-xxxl));
|
||||
gap: var(--sp-xs);
|
||||
|
||||
.stroke-width-input-element {
|
||||
@extend .input-element;
|
||||
@include bodySmallTypography;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.stroke-alignment-select {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.stroke-style-select {
|
||||
grid-column: span 3;
|
||||
}
|
||||
}
|
||||
.stroke-caps-options {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: $s-4;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
--input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
|
||||
grid-template-columns: var(--input-width) var(--sp-xxxl) var(--input-width);
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.cap-select {
|
||||
width: 100%;
|
||||
}
|
||||
.stroke-cap-dropdown,
|
||||
.stroke-cap-dropdown-start {
|
||||
min-width: $s-124;
|
||||
|
|
@ -62,8 +68,8 @@
|
|||
}
|
||||
.swap-caps-btn {
|
||||
@extend .button-secondary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
height: var(--sp-xxxl);
|
||||
width: var(--sp-xxxl);
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue