mirror of
https://github.com/penpot/penpot.git
synced 2025-03-23 05:01:23 -05:00
Merge pull request #5672 from penpot/superalex-fix-viewer-forward-button-not-working
🐛 Fix view modem forward button not working
This commit is contained in:
Eva Marco
GitHub
commit
48132711b6
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() {
|
||||
await this.mockRPC(
|
||||
/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))
|
||||
(rx/of
|
||||
(dcmt/close-thread)
|
||||
(rt/nav :viewer params (assoc params :index (inc index)))))))))
|
||||
(rt/nav :viewer (assoc params :index (inc index)))))))))
|
||||
|
||||
(def select-first-frame
|
||||
(ptk/reify ::select-first-frame
|
||||
|
|
|
|||
|
|
@ -101,13 +101,15 @@
|
|||
(when (pos? index)
|
||||
[:button {:class (stl/css-case :viewer-go-prev true
|
||||
:left-bar left-bar)
|
||||
:on-click go-prev-frame}
|
||||
:on-click go-prev-frame
|
||||
:aria-label (tr "labels.previous")}
|
||||
i/arrow])
|
||||
(when (< (+ index 1) num-frames)
|
||||
[:button {:class (stl/css-case :viewer-go-next true
|
||||
:comment-sidebar comment-sidebar
|
||||
:right-bar right-bar)
|
||||
:on-click go-next-frame}
|
||||
:on-click go-next-frame
|
||||
:aria-label (tr "labels.next")}
|
||||
i/arrow])
|
||||
[:div {:class (stl/css-case :viewer-bottom true
|
||||
:left-bar left-bar)}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue