mirror of
https://github.com/penpot/penpot.git
synced 2025-01-23 23:18:48 -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.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
|
||||
this.boardButton = page.getByRole("button", { name: "Board (B)" });
|
||||
this.toggleToolbarButton = page.getByRole("button", {
|
||||
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))
|
||||
|
||||
type (if is-column :column :row)
|
||||
testid (when (not is-column) "inspect-layout-rows")
|
||||
|
||||
add-track
|
||||
#(do
|
||||
(when-not expanded? (toggle))
|
||||
(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)}
|
||||
[:button {:class (stl/css :expand-icon) :on-click toggle} i/menu]
|
||||
[:div {:class (stl/css :track-title) :on-click toggle}
|
||||
|
|
@ -982,7 +983,7 @@
|
|||
on-hide-dropdown
|
||||
(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)}
|
||||
[:& title-bar
|
||||
{:collapsable has-layout?
|
||||
|
|
@ -996,6 +997,7 @@
|
|||
(when ^boolean grid-enabled?
|
||||
[:*
|
||||
[:button {:class (stl/css :add-layout)
|
||||
:aria-label "Add"
|
||||
:on-click on-toggle-dropdown-visibility}
|
||||
i/menu]
|
||||
|
||||
|
|
|
|||
|
|
@ -150,7 +150,6 @@
|
|||
.grid-layout-menu {
|
||||
@include flexColumn;
|
||||
gap: $s-8;
|
||||
overflow: hidden;
|
||||
|
||||
.row {
|
||||
@include flexRow;
|
||||
|
|
@ -282,7 +281,7 @@
|
|||
}
|
||||
|
||||
.track-title {
|
||||
@include flexColumn;
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
padding: $s-8;
|
||||
gap: 0;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue