mirror of
https://github.com/penpot/penpot.git
synced 2025-05-25 19:46:12 +02:00
🐛 Fix view modem forward button not working
This commit is contained in:
Alejandro Alonso
parent
cf25614afb
commit
cf53e0d233
6 changed files with 434 additions and 3 deletions
|
|
@ -0,0 +1,303 @@
|
||||||
|
{
|
||||||
|
"~:id": "~u0b5bcbca-32ab-81eb-8005-a13d7c92eb59",
|
||||||
|
"~:file-id": "~uudd5cc0bb-91ff-81b9-8004-77df9cd3edb0",
|
||||||
|
"~:created-at": "~m1737715191353",
|
||||||
|
"~:data": {
|
||||||
|
"~:options": {
|
||||||
|
|
||||||
|
},
|
||||||
|
"~:objects": {
|
||||||
|
"~u00000000-0000-0000-0000-000000000000": {
|
||||||
|
"~#shape": {
|
||||||
|
"~:y": 0,
|
||||||
|
"~:hide-fill-on-export": false,
|
||||||
|
"~:transform": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1,
|
||||||
|
"~:b": 0,
|
||||||
|
"~:c": 0,
|
||||||
|
"~:d": 1,
|
||||||
|
"~:e": 0,
|
||||||
|
"~:f": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:rotation": 0,
|
||||||
|
"~:name": "Root Frame",
|
||||||
|
"~:width": 0.01,
|
||||||
|
"~:type": "~:frame",
|
||||||
|
"~:points": [
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0,
|
||||||
|
"~:y": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.01,
|
||||||
|
"~:y": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.01,
|
||||||
|
"~:y": 0.01
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0,
|
||||||
|
"~:y": 0.01
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:r2": 0,
|
||||||
|
"~:proportion-lock": false,
|
||||||
|
"~:transform-inverse": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1,
|
||||||
|
"~:b": 0,
|
||||||
|
"~:c": 0,
|
||||||
|
"~:d": 1,
|
||||||
|
"~:e": 0,
|
||||||
|
"~:f": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:r3": 0,
|
||||||
|
"~:r1": 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,
|
||||||
|
"~:r4": 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": [
|
||||||
|
"~u4154c6c4-a727-80f2-8005-a122af7b1cfd",
|
||||||
|
"~u4154c6c4-a727-80f2-8005-a122b2303e43"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~u4154c6c4-a727-80f2-8005-a122af7b1cfd": {
|
||||||
|
"~#shape": {
|
||||||
|
"~:y": 510,
|
||||||
|
"~:hide-fill-on-export": false,
|
||||||
|
"~:transform": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1,
|
||||||
|
"~:b": 0,
|
||||||
|
"~:c": 0,
|
||||||
|
"~:d": 1,
|
||||||
|
"~:e": 0,
|
||||||
|
"~:f": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:rotation": 0,
|
||||||
|
"~:grow-type": "~:fixed",
|
||||||
|
"~:hide-in-viewer": false,
|
||||||
|
"~:name": "Board",
|
||||||
|
"~:width": 278,
|
||||||
|
"~:type": "~:frame",
|
||||||
|
"~:points": [
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": -263,
|
||||||
|
"~:y": 510
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 15,
|
||||||
|
"~:y": 510
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 15,
|
||||||
|
"~:y": 766
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": -263,
|
||||||
|
"~:y": 766
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:r2": 0,
|
||||||
|
"~:proportion-lock": false,
|
||||||
|
"~:transform-inverse": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1,
|
||||||
|
"~:b": 0,
|
||||||
|
"~:c": 0,
|
||||||
|
"~:d": 1,
|
||||||
|
"~:e": 0,
|
||||||
|
"~:f": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:r3": 0,
|
||||||
|
"~:interactions": [
|
||||||
|
{
|
||||||
|
"~:event-type": "~:click",
|
||||||
|
"~:action-type": "~:navigate",
|
||||||
|
"~:destination": "~u4154c6c4-a727-80f2-8005-a122b2303e43",
|
||||||
|
"~:position-relative-to": "~u4154c6c4-a727-80f2-8005-a122af7b1cfd",
|
||||||
|
"~:preserve-scroll": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:r1": 0,
|
||||||
|
"~:id": "~u4154c6c4-a727-80f2-8005-a122af7b1cfd",
|
||||||
|
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:strokes": [],
|
||||||
|
"~:x": -263,
|
||||||
|
"~:proportion": 1,
|
||||||
|
"~:r4": 0,
|
||||||
|
"~:selrect": {
|
||||||
|
"~#rect": {
|
||||||
|
"~:x": -263,
|
||||||
|
"~:y": 510,
|
||||||
|
"~:width": 278,
|
||||||
|
"~:height": 256,
|
||||||
|
"~:x1": -263,
|
||||||
|
"~:y1": 510,
|
||||||
|
"~:x2": 15,
|
||||||
|
"~:y2": 766
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:fills": [
|
||||||
|
{
|
||||||
|
"~:fill-color": "#FFFFFF",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:flip-x": null,
|
||||||
|
"~:height": 256,
|
||||||
|
"~:flip-y": null,
|
||||||
|
"~:shapes": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~u4154c6c4-a727-80f2-8005-a122b2303e43": {
|
||||||
|
"~#shape": {
|
||||||
|
"~:y": 356,
|
||||||
|
"~:hide-fill-on-export": false,
|
||||||
|
"~:transform": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1,
|
||||||
|
"~:b": 0,
|
||||||
|
"~:c": 0,
|
||||||
|
"~:d": 1,
|
||||||
|
"~:e": 0,
|
||||||
|
"~:f": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:rotation": 0,
|
||||||
|
"~:grow-type": "~:fixed",
|
||||||
|
"~:name": "Board",
|
||||||
|
"~:width": 238,
|
||||||
|
"~:type": "~:frame",
|
||||||
|
"~:points": [
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 558,
|
||||||
|
"~:y": 356
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 796,
|
||||||
|
"~:y": 356
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 796,
|
||||||
|
"~:y": 583
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 558,
|
||||||
|
"~:y": 583
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:r2": 0,
|
||||||
|
"~:proportion-lock": false,
|
||||||
|
"~:transform-inverse": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1,
|
||||||
|
"~:b": 0,
|
||||||
|
"~:c": 0,
|
||||||
|
"~:d": 1,
|
||||||
|
"~:e": 0,
|
||||||
|
"~:f": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:r3": 0,
|
||||||
|
"~:r1": 0,
|
||||||
|
"~:id": "~u4154c6c4-a727-80f2-8005-a122b2303e43",
|
||||||
|
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:strokes": [],
|
||||||
|
"~:x": 558,
|
||||||
|
"~:proportion": 1,
|
||||||
|
"~:r4": 0,
|
||||||
|
"~:selrect": {
|
||||||
|
"~#rect": {
|
||||||
|
"~:x": 558,
|
||||||
|
"~:y": 356,
|
||||||
|
"~:width": 238,
|
||||||
|
"~:height": 227,
|
||||||
|
"~:x1": 558,
|
||||||
|
"~:y1": 356,
|
||||||
|
"~:x2": 796,
|
||||||
|
"~:y2": 583
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:fills": [
|
||||||
|
{
|
||||||
|
"~:fill-color": "#d30d0d",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:flip-x": null,
|
||||||
|
"~:height": 227,
|
||||||
|
"~:flip-y": null,
|
||||||
|
"~:shapes": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~u0b5bcbca-32ab-81eb-8005-a122abf8bc82",
|
||||||
|
"~:name": "Page 1",
|
||||||
|
"~:flows": {
|
||||||
|
"~u4154c6c4-a727-80f2-8005-a122b9d4c70c": {
|
||||||
|
"~:id": "~u4154c6c4-a727-80f2-8005-a122b9d4c70c",
|
||||||
|
"~:name": "Flow 1",
|
||||||
|
"~:starting-frame": "~u4154c6c4-a727-80f2-8005-a122af7b1cfd"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
{
|
||||||
|
"~:permissions": {
|
||||||
|
"~:type": "~:membership",
|
||||||
|
"~:is-owner": true,
|
||||||
|
"~:is-admin": true,
|
||||||
|
"~:can-edit": true,
|
||||||
|
"~:can-read": true,
|
||||||
|
"~:is-logged": true,
|
||||||
|
"~:in-team": true
|
||||||
|
},
|
||||||
|
"~:libraries": [],
|
||||||
|
"~:file": {
|
||||||
|
"~:features": {
|
||||||
|
"~#set": [
|
||||||
|
"layout/grid",
|
||||||
|
"fdata/pointer-map",
|
||||||
|
"fdata/objects-map",
|
||||||
|
"components/v2",
|
||||||
|
"fdata/shape-data-type"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"~:has-media-trimmed": false,
|
||||||
|
"~:comment-thread-seqn": 0,
|
||||||
|
"~:name": "Nuevo Archivo 1",
|
||||||
|
"~:revn": 3,
|
||||||
|
"~:modified-at": "~m1737715191361",
|
||||||
|
"~:vern": 0,
|
||||||
|
"~:id": "~udd5cc0bb-91ff-81b9-8004-77df9cd3edb0",
|
||||||
|
"~:is-shared": false,
|
||||||
|
"~:version": 61,
|
||||||
|
"~:project-id": "~u0b5bcbca-32ab-81eb-8005-a12049f428c2",
|
||||||
|
"~:created-at": "~m1737708162019",
|
||||||
|
"~:data": {
|
||||||
|
"~:id": "~udd5cc0bb-91ff-81b9-8004-77df9cd3edb0",
|
||||||
|
"~:options": {
|
||||||
|
"~:components-v2": true
|
||||||
|
},
|
||||||
|
"~:pages": [
|
||||||
|
"~udd5cc0bb-91ff-81b9-8004-77df9cd3edb3"
|
||||||
|
],
|
||||||
|
"~:pages-index": {
|
||||||
|
"~udd5cc0bb-91ff-81b9-8004-77df9cd3edb3": {
|
||||||
|
"~#penpot/pointer": [
|
||||||
|
"~u0b5bcbca-32ab-81eb-8005-a13d7c92eb59",
|
||||||
|
{
|
||||||
|
"~:created-at": "~m1737715191371"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:team": {
|
||||||
|
"~:id": "~u0b5bcbca-32ab-81eb-8005-a12049f3a82a",
|
||||||
|
"~:created-at": "~m1737707537358",
|
||||||
|
"~:modified-at": "~m1737707537358",
|
||||||
|
"~:name": "1",
|
||||||
|
"~:is-default": false,
|
||||||
|
"~:features": {
|
||||||
|
"~#set": [
|
||||||
|
"layout/grid",
|
||||||
|
"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,
|
||||||
|
"~:in-team": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:project": {
|
||||||
|
"~:id": "~u0b5bcbca-32ab-81eb-8005-a12049f428c2",
|
||||||
|
"~:name": "Drafts",
|
||||||
|
"~:team-id": "~u0b5bcbca-32ab-81eb-8005-a12049f3a82a"
|
||||||
|
},
|
||||||
|
"~:share-links": [],
|
||||||
|
"~:fonts": []
|
||||||
|
}
|
||||||
|
|
@ -51,6 +51,21 @@ export class ViewerPage extends BaseWebSocketPage {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async setupFileWithMultipleBoards() {
|
||||||
|
await this.mockRPC(
|
||||||
|
/get\-view\-only\-bundle\?/,
|
||||||
|
"viewer/get-view-only-bundle-multiple-boards.json",
|
||||||
|
);
|
||||||
|
await this.mockRPC(
|
||||||
|
"get-comment-threads?file-id=*",
|
||||||
|
"workspace/get-comment-threads-empty.json",
|
||||||
|
);
|
||||||
|
await this.mockRPC(
|
||||||
|
"get-file-fragment?file-id=*&fragment-id=*",
|
||||||
|
"viewer/get-file-fragment-multiple-boards.json",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
async setupFileWithComments() {
|
async setupFileWithComments() {
|
||||||
await this.mockRPC(
|
await this.mockRPC(
|
||||||
/get\-view\-only\-bundle\?/,
|
/get\-view\-only\-bundle\?/,
|
||||||
|
|
|
||||||
26
frontend/playwright/ui/specs/viewer-content.spec.js
Normal file
26
frontend/playwright/ui/specs/viewer-content.spec.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { test, expect } from "@playwright/test";
|
||||||
|
import { ViewerPage } from "../pages/ViewerPage";
|
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await ViewerPage.init(page);
|
||||||
|
});
|
||||||
|
|
||||||
|
const multipleBoardsFileId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb0";
|
||||||
|
const multipleBoardsPageId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb3";
|
||||||
|
|
||||||
|
test("Navigate with arrows", async ({ page }) => {
|
||||||
|
const viewer = new ViewerPage(page);
|
||||||
|
await viewer.setupLoggedInUser();
|
||||||
|
await viewer.setupFileWithMultipleBoards(viewer);
|
||||||
|
|
||||||
|
await viewer.goToViewer({
|
||||||
|
fileId: multipleBoardsFileId,
|
||||||
|
pageId: multipleBoardsPageId,
|
||||||
|
});
|
||||||
|
|
||||||
|
const nextButton = viewer.page.getByRole("button", {
|
||||||
|
name: "Next",
|
||||||
|
});
|
||||||
|
await nextButton.click();
|
||||||
|
await expect(viewer.page).toHaveURL(/&index=1/);
|
||||||
|
});
|
||||||
|
|
@ -414,7 +414,7 @@
|
||||||
(when (< index (dec total))
|
(when (< index (dec total))
|
||||||
(rx/of
|
(rx/of
|
||||||
(dcmt/close-thread)
|
(dcmt/close-thread)
|
||||||
(rt/nav :viewer params (assoc params :index (inc index)))))))))
|
(rt/nav :viewer (assoc params :index (inc index)))))))))
|
||||||
|
|
||||||
(def select-first-frame
|
(def select-first-frame
|
||||||
(ptk/reify ::select-first-frame
|
(ptk/reify ::select-first-frame
|
||||||
|
|
|
||||||
|
|
@ -101,13 +101,15 @@
|
||||||
(when (pos? index)
|
(when (pos? index)
|
||||||
[:button {:class (stl/css-case :viewer-go-prev true
|
[:button {:class (stl/css-case :viewer-go-prev true
|
||||||
:left-bar left-bar)
|
:left-bar left-bar)
|
||||||
:on-click go-prev-frame}
|
:on-click go-prev-frame
|
||||||
|
:aria-label (tr "labels.previous")}
|
||||||
i/arrow])
|
i/arrow])
|
||||||
(when (< (+ index 1) num-frames)
|
(when (< (+ index 1) num-frames)
|
||||||
[:button {:class (stl/css-case :viewer-go-next true
|
[:button {:class (stl/css-case :viewer-go-next true
|
||||||
:comment-sidebar comment-sidebar
|
:comment-sidebar comment-sidebar
|
||||||
:right-bar right-bar)
|
:right-bar right-bar)
|
||||||
:on-click go-next-frame}
|
:on-click go-next-frame
|
||||||
|
:aria-label (tr "labels.next")}
|
||||||
i/arrow])
|
i/arrow])
|
||||||
[:div {:class (stl/css-case :viewer-bottom true
|
[:div {:class (stl/css-case :viewer-bottom true
|
||||||
:left-bar left-bar)}
|
:left-bar left-bar)}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue