3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-11 00:21:39 +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)))))]
[: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"]
[:> icon-button* {:variant "ghost"
:class (stl/css :help-button)
@ -1327,17 +1327,17 @@
:on-click handle-locate-grid
:icon "locate"}]]
[: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)}
[:& padding-section {:value (:layout-padding values)
:type (:layout-padding-type values)
:on-type-change on-padding-type-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
:expanded? @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);
.locate-button {
position: absolute;
top: 0;
right: 0;
grid-row: 1;
grid-column: 8;
}
}
@ -198,6 +197,7 @@
flex: 1;
font-size: $fs-11;
color: var(--title-foreground-color-hover);
grid-column: span 5;
}
.edit-mode-btn {
@ -212,10 +212,14 @@
@extend .button-secondary;
@include uppercaseTitleTipography;
padding: $s-8 $s-20;
grid-column: span 2;
}
.grid-tracks-info-container {
@include flexColumn;
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
gap: var(--sp-xs);
margin-top: $s-4;
}
@ -224,9 +228,9 @@
}
.grid-tracks-row {
@include flexColumn;
margin: $s-8 0;
gap: $s-12;
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
.edit-grid-wrapper {
@ -236,7 +240,9 @@
}
.track-info {
display: flex;
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
&.dnd-over-top {
border-top: $s-2 solid var(--button-foreground-hover);
@ -248,6 +254,7 @@
.track-info-container {
display: flex;
grid-column: 1 / span 7;
}
.track-info-dir-icon {
@ -279,7 +286,9 @@
}
.grid-tracks {
width: 100%;
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
margin-top: $s-8;
.grid-track-header {
@ -289,6 +298,7 @@
overflow: hidden;
background: var(--button-secondary-background-color-rest);
height: $s-52;
grid-column: 1 / -1;
}
.track-title {
@ -382,3 +392,10 @@
grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
gap: var(--sp-xs);
}
.grid-first-row {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
align-items: center;
}