3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-14 13:31:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6553 from penpot/alotor-bug-fix-grid-editor-problem

Browse source 
🐛 Fix problem with grid editing
This commit is contained in:
Alejandro Alonso 2025-05-26 11:40:24 +02:00 • committed by GitHub
commit 3ee3ee2059
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -1288,7 +1288,7 @@
(st/emit! (dwge/locate-board (first ids)))))] (st/emit! (dwge/locate-board (first ids)))))]
[:div {:class (stl/css :grid-layout-menu)} [:div {:class (stl/css :grid-layout-menu)}
[:div {:class (stl/css :row)} [:div {:class (stl/css :grid-first-row)}
[:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"] [:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"]
[:> icon-button* {:variant "ghost" [:> icon-button* {:variant "ghost"
:class (stl/css :help-button) :class (stl/css :help-button)
@ -1327,17 +1327,17 @@
:on-click handle-locate-grid :on-click handle-locate-grid
:icon "locate"}]] :icon "locate"}]]
[:div {:class (stl/css :row)} [:div {:class (stl/css :gap-row)}
[:& gap-section {:on-change on-gap-change [:& gap-section {:on-change on-gap-change
:value (:layout-gap values)}]] :value (:layout-gap values)}]]
[:div {:class (stl/css :row :padding-section)} [:div {:class (stl/css :padding-row :padding-section)}
[:& padding-section {:value (:layout-padding values) [:& padding-section {:value (:layout-padding values)
:type (:layout-padding-type values) :type (:layout-padding-type values)
:on-type-change on-padding-type-change :on-type-change on-padding-type-change
:on-change on-padding-change}]] :on-change on-padding-change}]]
[:div {:class (stl/css :row :grid-tracks-row)} [:div {:class (stl/css :grid-tracks-row)}
[:& grid-columns-row {:is-column true [:& grid-columns-row {:is-column true
:expanded? @columns-open? :expanded? @columns-open?
:toggle toggle-columns-open :toggle toggle-columns-open

35
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -188,9 +188,8 @@
gap: var(--sp-xs); gap: var(--sp-xs);
.locate-button { .locate-button {
position: absolute; grid-row: 1;
top: 0; grid-column: 8;
right: 0;
} }
} }
@ -198,6 +197,7 @@
flex: 1; flex: 1;
font-size: $fs-11; font-size: $fs-11;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
grid-column: span 5;
} }
.edit-mode-btn { .edit-mode-btn {
@ -212,10 +212,14 @@
@extend .button-secondary; @extend .button-secondary;
@include uppercaseTitleTipography; @include uppercaseTitleTipography;
padding: $s-8 $s-20; padding: $s-8 $s-20;
grid-column: span 2;
} }
.grid-tracks-info-container { .grid-tracks-info-container {
@include flexColumn; display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
gap: var(--sp-xs);
margin-top: $s-4; margin-top: $s-4;
} }
@ -224,9 +228,9 @@
} }
.grid-tracks-row { .grid-tracks-row {
@include flexColumn; display: grid;
margin: $s-8 0; grid-template-columns: subgrid;
gap: $s-12; grid-column: 1 / -1;
} }
.edit-grid-wrapper { .edit-grid-wrapper {
@ -236,7 +240,9 @@
} }
.track-info { .track-info {
display: flex; grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
&.dnd-over-top { &.dnd-over-top {
border-top: $s-2 solid var(--button-foreground-hover); border-top: $s-2 solid var(--button-foreground-hover);
@ -248,6 +254,7 @@
.track-info-container { .track-info-container {
display: flex; display: flex;
grid-column: 1 / span 7;
} }
.track-info-dir-icon { .track-info-dir-icon {
@ -279,7 +286,9 @@
} }
.grid-tracks { .grid-tracks {
width: 100%; display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
margin-top: $s-8; margin-top: $s-8;
.grid-track-header { .grid-track-header {
@ -289,6 +298,7 @@
overflow: hidden; overflow: hidden;
background: var(--button-secondary-background-color-rest); background: var(--button-secondary-background-color-rest);
height: $s-52; height: $s-52;
grid-column: 1 / -1;
} }
.track-title { .track-title {
@ -382,3 +392,10 @@
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl); grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
gap: var(--sp-xs); gap: var(--sp-xs);
} }
.grid-first-row {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
align-items: center;
}