mirror of
https://github.com/penpot/penpot.git
synced 2025-02-09 08:38:15 -05:00
Merge remote-tracking branch 'origin/staging' into develop
This commit is contained in:
Andrey Antukh
commit
6a1399dd50
6 changed files with 359 additions and 4 deletions
49
frontend/playwright/data/workspace/get-file-9042.json
Normal file
49
frontend/playwright/data/workspace/get-file-9042.json
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
{
|
||||||
|
"~:features": {
|
||||||
|
"~#set": [
|
||||||
|
"layout/grid",
|
||||||
|
"styles/v2",
|
||||||
|
"fdata/pointer-map",
|
||||||
|
"fdata/objects-map",
|
||||||
|
"components/v2",
|
||||||
|
"fdata/shape-data-type"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"~:permissions": {
|
||||||
|
"~:type": "~:membership",
|
||||||
|
"~:is-owner": true,
|
||||||
|
"~:is-admin": true,
|
||||||
|
"~:can-edit": true,
|
||||||
|
"~:can-read": true,
|
||||||
|
"~:is-logged": true
|
||||||
|
},
|
||||||
|
"~:has-media-trimmed": false,
|
||||||
|
"~:comment-thread-seqn": 0,
|
||||||
|
"~:name": "New File 5",
|
||||||
|
"~:revn": 3,
|
||||||
|
"~:modified-at": "~m1729245873067",
|
||||||
|
"~:id": "~uaf2494d0-39ba-8184-8005-230696f6df5c",
|
||||||
|
"~:is-shared": false,
|
||||||
|
"~:version": 55,
|
||||||
|
"~:project-id": "~u17866431-4e74-816e-8004-eba55c3a5694",
|
||||||
|
"~:created-at": "~m1729245083615",
|
||||||
|
"~:data": {
|
||||||
|
"~:pages": [
|
||||||
|
"~uaf2494d0-39ba-8184-8005-230696f6df5d"
|
||||||
|
],
|
||||||
|
"~:pages-index": {
|
||||||
|
"~uaf2494d0-39ba-8184-8005-230696f6df5d": {
|
||||||
|
"~#penpot/pointer": [
|
||||||
|
"~uaf2494d0-39ba-8184-8005-230999ec862d",
|
||||||
|
{
|
||||||
|
"~:created-at": "~m1729245873074"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~uaf2494d0-39ba-8184-8005-230696f6df5c",
|
||||||
|
"~:options": {
|
||||||
|
"~:components-v2": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
270
frontend/playwright/data/workspace/get-file-fragment-9042.json
Normal file
270
frontend/playwright/data/workspace/get-file-fragment-9042.json
Normal file
|
|
@ -0,0 +1,270 @@
|
||||||
|
{
|
||||||
|
"~:id": "~uaf2494d0-39ba-8184-8005-230999ec862d",
|
||||||
|
"~:file-id": "~uaf2494d0-39ba-8184-8005-230696f6df5c",
|
||||||
|
"~:created-at": "~m1729245873057",
|
||||||
|
"~:data": {
|
||||||
|
"~:options": {},
|
||||||
|
"~:objects": {
|
||||||
|
"~u00000000-0000-0000-0000-000000000000": {
|
||||||
|
"~#shape": {
|
||||||
|
"~:y": 0,
|
||||||
|
"~:hide-fill-on-export": false,
|
||||||
|
"~:transform": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:rotation": 0,
|
||||||
|
"~:name": "Root Frame",
|
||||||
|
"~:width": 0.01,
|
||||||
|
"~:type": "~:frame",
|
||||||
|
"~:points": [
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.0,
|
||||||
|
"~:y": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.01,
|
||||||
|
"~:y": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.01,
|
||||||
|
"~:y": 0.01
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.0,
|
||||||
|
"~:y": 0.01
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:proportion-lock": false,
|
||||||
|
"~:transform-inverse": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:strokes": [],
|
||||||
|
"~:x": 0,
|
||||||
|
"~:proportion": 1.0,
|
||||||
|
"~:selrect": {
|
||||||
|
"~#rect": {
|
||||||
|
"~:x": 0,
|
||||||
|
"~:y": 0,
|
||||||
|
"~:width": 0.01,
|
||||||
|
"~:height": 0.01,
|
||||||
|
"~:x1": 0,
|
||||||
|
"~:y1": 0,
|
||||||
|
"~:x2": 0.01,
|
||||||
|
"~:y2": 0.01
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:fills": [
|
||||||
|
{
|
||||||
|
"~:fill-color": "#FFFFFF",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:flip-x": null,
|
||||||
|
"~:height": 0.01,
|
||||||
|
"~:flip-y": null,
|
||||||
|
"~:shapes": [
|
||||||
|
"~u8611ed3e-43d1-80dc-8005-23069fddf984"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~u8611ed3e-43d1-80dc-8005-23069fddf984": {
|
||||||
|
"~#shape": {
|
||||||
|
"~:y": 128,
|
||||||
|
"~:layout-grid-columns": [
|
||||||
|
{
|
||||||
|
"~:type": "~:flex",
|
||||||
|
"~:value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~:type": "~:flex",
|
||||||
|
"~:value": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:hide-fill-on-export": false,
|
||||||
|
"~:layout-gap-type": "~:multiple",
|
||||||
|
"~:layout-padding": {
|
||||||
|
"~:p1": 0,
|
||||||
|
"~:p2": 0,
|
||||||
|
"~:p3": 0,
|
||||||
|
"~:p4": 0
|
||||||
|
},
|
||||||
|
"~:transform": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:rotation": 0,
|
||||||
|
"~:grow-type": "~:fixed",
|
||||||
|
"~:layout": "~:grid",
|
||||||
|
"~:hide-in-viewer": false,
|
||||||
|
"~:name": "Board",
|
||||||
|
"~:layout-align-items": "~:start",
|
||||||
|
"~:width": 200,
|
||||||
|
"~:layout-grid-cells": {
|
||||||
|
"~u96353b58-4e42-8052-8005-230996dafe13": {
|
||||||
|
"~:justify-self": "~:auto",
|
||||||
|
"~:column": 1,
|
||||||
|
"~:id": "~u96353b58-4e42-8052-8005-230996dafe13",
|
||||||
|
"~:position": "~:auto",
|
||||||
|
"~:column-span": 1,
|
||||||
|
"~:align-self": "~:auto",
|
||||||
|
"~:row": 1,
|
||||||
|
"~:row-span": 1,
|
||||||
|
"~:shapes": []
|
||||||
|
},
|
||||||
|
"~u96353b58-4e42-8052-8005-230996dafe14": {
|
||||||
|
"~:justify-self": "~:auto",
|
||||||
|
"~:column": 2,
|
||||||
|
"~:id": "~u96353b58-4e42-8052-8005-230996dafe14",
|
||||||
|
"~:position": "~:auto",
|
||||||
|
"~:column-span": 1,
|
||||||
|
"~:align-self": "~:auto",
|
||||||
|
"~:row": 1,
|
||||||
|
"~:row-span": 1,
|
||||||
|
"~:shapes": []
|
||||||
|
},
|
||||||
|
"~u96353b58-4e42-8052-8005-230996dafe15": {
|
||||||
|
"~:justify-self": "~:auto",
|
||||||
|
"~:column": 1,
|
||||||
|
"~:id": "~u96353b58-4e42-8052-8005-230996dafe15",
|
||||||
|
"~:position": "~:auto",
|
||||||
|
"~:column-span": 1,
|
||||||
|
"~:align-self": "~:auto",
|
||||||
|
"~:row": 2,
|
||||||
|
"~:row-span": 1,
|
||||||
|
"~:shapes": []
|
||||||
|
},
|
||||||
|
"~u96353b58-4e42-8052-8005-230996dafe16": {
|
||||||
|
"~:justify-self": "~:auto",
|
||||||
|
"~:column": 2,
|
||||||
|
"~:id": "~u96353b58-4e42-8052-8005-230996dafe16",
|
||||||
|
"~:position": "~:auto",
|
||||||
|
"~:column-span": 1,
|
||||||
|
"~:align-self": "~:auto",
|
||||||
|
"~:row": 2,
|
||||||
|
"~:row-span": 1,
|
||||||
|
"~:shapes": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:layout-padding-type": "~:simple",
|
||||||
|
"~:type": "~:frame",
|
||||||
|
"~:points": [
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 128,
|
||||||
|
"~:y": 128
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 328,
|
||||||
|
"~:y": 128
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 328,
|
||||||
|
"~:y": 328
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 128,
|
||||||
|
"~:y": 328
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:proportion-lock": false,
|
||||||
|
"~:layout-gap": {
|
||||||
|
"~:row-gap": 0,
|
||||||
|
"~:column-gap": 0
|
||||||
|
},
|
||||||
|
"~:transform-inverse": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:layout-justify-content": "~:stretch",
|
||||||
|
"~:id": "~u8611ed3e-43d1-80dc-8005-23069fddf984",
|
||||||
|
"~:layout-justify-items": "~:start",
|
||||||
|
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:layout-align-content": "~:stretch",
|
||||||
|
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:strokes": [],
|
||||||
|
"~:x": 128,
|
||||||
|
"~:proportion": 1,
|
||||||
|
"~:layout-grid-rows": [
|
||||||
|
{
|
||||||
|
"~:type": "~:flex",
|
||||||
|
"~:value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~:type": "~:flex",
|
||||||
|
"~:value": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:selrect": {
|
||||||
|
"~#rect": {
|
||||||
|
"~:x": 128,
|
||||||
|
"~:y": 128,
|
||||||
|
"~:width": 200,
|
||||||
|
"~:height": 200,
|
||||||
|
"~:x1": 128,
|
||||||
|
"~:y1": 128,
|
||||||
|
"~:x2": 328,
|
||||||
|
"~:y2": 328
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:fills": [
|
||||||
|
{
|
||||||
|
"~:fill-color": "#FFFFFF",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:layout-grid-dir": "~:row",
|
||||||
|
"~:flip-x": null,
|
||||||
|
"~:height": 200,
|
||||||
|
"~:flip-y": null,
|
||||||
|
"~:shapes": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~uaf2494d0-39ba-8184-8005-230696f6df5d",
|
||||||
|
"~:name": "Page 1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -61,6 +61,7 @@ export class WorkspacePage extends BaseWebSocketPage {
|
||||||
);
|
);
|
||||||
this.toolbarOptions = page.getByTestId("toolbar-options");
|
this.toolbarOptions = page.getByTestId("toolbar-options");
|
||||||
this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
|
this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
|
||||||
|
this.boardButton = page.getByRole("button", { name: "Board (B)" });
|
||||||
this.toggleToolbarButton = page.getByRole("button", {
|
this.toggleToolbarButton = page.getByRole("button", {
|
||||||
name: "Toggle toolbar",
|
name: "Toggle toolbar",
|
||||||
});
|
});
|
||||||
|
|
|
||||||
34
frontend/playwright/ui/specs/inspect-layout.spec.js
Normal file
34
frontend/playwright/ui/specs/inspect-layout.spec.js
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { test, expect } from "@playwright/test";
|
||||||
|
import { WorkspacePage } from "../pages/WorkspacePage";
|
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await WorkspacePage.init(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fix for https://tree.taiga.io/project/penpot/issue/9042
|
||||||
|
test("Bug 9042 - Measurement unit dropdowns for columns are cut off in grid layout edit mode", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const workspacePage = new WorkspacePage(page);
|
||||||
|
await workspacePage.setupEmptyFile(page);
|
||||||
|
await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-9042.json");
|
||||||
|
await workspacePage.mockRPC(
|
||||||
|
"get-file-fragment?file-id=*&fragment-id=*",
|
||||||
|
"workspace/get-file-fragment-9042.json",
|
||||||
|
);
|
||||||
|
|
||||||
|
await workspacePage.goToWorkspace({
|
||||||
|
fileId: "af2494d0-39ba-8184-8005-230696f6df5c",
|
||||||
|
pageId: "af2494d0-39ba-8184-8005-230696f6df5d",
|
||||||
|
});
|
||||||
|
await workspacePage.clickLeafLayer("Board");
|
||||||
|
await workspacePage.expectSelectedLayer("Board");
|
||||||
|
|
||||||
|
const layoutContainer = workspacePage.page.getByTestId("inspect-layout");
|
||||||
|
await layoutContainer.getByRole("button", { name: "Edit grid" }).click();
|
||||||
|
const rowsContainer = workspacePage.page.getByTestId("inspect-layout-rows");
|
||||||
|
await rowsContainer.click();
|
||||||
|
|
||||||
|
await rowsContainer.getByText("FR").nth(2).click();
|
||||||
|
await expect(rowsContainer.getByText("%")).toBeInViewport();
|
||||||
|
});
|
||||||
|
|
@ -776,13 +776,14 @@
|
||||||
track-detail (str/join ", " (map manage-values column-values))
|
track-detail (str/join ", " (map manage-values column-values))
|
||||||
|
|
||||||
type (if is-column :column :row)
|
type (if is-column :column :row)
|
||||||
|
testid (when (not is-column) "inspect-layout-rows")
|
||||||
|
|
||||||
add-track
|
add-track
|
||||||
#(do
|
#(do
|
||||||
(when-not expanded? (toggle))
|
(when-not expanded? (toggle))
|
||||||
(add-new-element type ctl/default-track-value))]
|
(add-new-element type ctl/default-track-value))]
|
||||||
|
|
||||||
[:div {:class (stl/css :grid-tracks)}
|
[:div {:class (stl/css :grid-tracks) :data-testid testid}
|
||||||
[:div {:class (stl/css :grid-track-header)}
|
[:div {:class (stl/css :grid-track-header)}
|
||||||
[:button {:class (stl/css :expand-icon) :on-click toggle} i/menu]
|
[:button {:class (stl/css :expand-icon) :on-click toggle} i/menu]
|
||||||
[:div {:class (stl/css :track-title) :on-click toggle}
|
[:div {:class (stl/css :track-title) :on-click toggle}
|
||||||
|
|
@ -982,7 +983,7 @@
|
||||||
on-hide-dropdown
|
on-hide-dropdown
|
||||||
(mf/use-fn #(reset! show-dropdown* false))]
|
(mf/use-fn #(reset! show-dropdown* false))]
|
||||||
|
|
||||||
[:div {:class (stl/css :element-set)}
|
[:div {:class (stl/css :element-set) :data-testid "inspect-layout"}
|
||||||
[:div {:class (stl/css :element-title)}
|
[:div {:class (stl/css :element-title)}
|
||||||
[:& title-bar
|
[:& title-bar
|
||||||
{:collapsable has-layout?
|
{:collapsable has-layout?
|
||||||
|
|
@ -996,6 +997,7 @@
|
||||||
(when ^boolean grid-enabled?
|
(when ^boolean grid-enabled?
|
||||||
[:*
|
[:*
|
||||||
[:button {:class (stl/css :add-layout)
|
[:button {:class (stl/css :add-layout)
|
||||||
|
:aria-label "Add"
|
||||||
:on-click on-toggle-dropdown-visibility}
|
:on-click on-toggle-dropdown-visibility}
|
||||||
i/menu]
|
i/menu]
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -150,7 +150,6 @@
|
||||||
.grid-layout-menu {
|
.grid-layout-menu {
|
||||||
@include flexColumn;
|
@include flexColumn;
|
||||||
gap: $s-8;
|
gap: $s-8;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
@include flexRow;
|
@include flexRow;
|
||||||
|
|
@ -282,7 +281,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.track-title {
|
.track-title {
|
||||||
@include flexColumn;
|
display: grid;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: $s-8;
|
padding: $s-8;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue