Merge pull request #20789 from calixteman/fix_paste_button_layout

Fix the paste button position and add a button before the first thumbnail

Author: calixteman

test/integration/reorganize_pages_spec.mjs

@@ -802,6 +802,48 @@ describe("Reorganize Pages View", () => {
       await closePages(pages);
     });
 
+    it("should check that a page can be copied and pasted before the first thumbnail", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await waitForThumbnailVisible(page, 1);
+          await page.waitForSelector("#viewsManagerStatusActionButton", {
+            visible: true,
+          });
+          await waitAndClick(
+            page,
+            `.thumbnail:has(${getThumbnailSelector(2)}) input`
+          );
+
+          let handlePagesEdited = await waitForPagesEdited(page);
+          await waitAndClick(page, "#viewsManagerStatusActionButton");
+          await waitAndClick(page, "#viewsManagerStatusActionCopy");
+
+          let pageIndices = await awaitPromise(handlePagesEdited);
+          let expected = [
+            1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+          ];
+          expect(pageIndices)
+            .withContext(`In ${browserName}`)
+            .toEqual(expected);
+          await waitForHavingContents(page, expected);
+
+          handlePagesEdited = await waitForPagesEdited(page);
+          await waitAndClick(
+            page,
+            `button.thumbnailPasteButton:has(+ ${getThumbnailSelector(1)})`
+          );
+          pageIndices = await awaitPromise(handlePagesEdited);
+          expected = [
+            2, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+          ];
+          expect(pageIndices)
+            .withContext(`In ${browserName}`)
+            .toEqual(expected);
+          await waitForHavingContents(page, expected);
+        })
+      );
+    });
+
     it("should check that the pages has been copied and pasted correctly", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {

web/pdf_thumbnail_view.js

@@ -188,10 +188,25 @@ class PDFThumbnailView extends RenderableView {
     pasteButton.addEventListener("click", () => {
       pasteCallback(this.id);
     });
+    if (this.id === 1) {
+      const prevPasteButton = (this.prevPasteButton =
+        pasteButton.cloneNode(true));
+      prevPasteButton.addEventListener("click", () => {
+        pasteCallback(0);
+      });
+      this.imageContainer.before(prevPasteButton);
+    }
 
     this.imageContainer.after(pasteButton);
   }
 
+  removePasteButton() {
+    this.pasteButton?.remove();
+    this.pasteButton = null;
+    this.prevPasteButton?.remove();
+    this.prevPasteButton = null;
+  }
+
   toggleSelected(isSelected) {
     if (this.checkbox) {
       this.checkbox.checked = isSelected;

web/pdf_thumbnail_viewer.js

@@ -651,6 +651,9 @@ class PDFThumbnailViewer {
 
   #pastePages(index) {
     this.container.classList.remove("pasteMode");
+    for (const thumbnail of this._thumbnails) {
+      thumbnail.removePasteButton();
+    }
     this.#toggleMenuEntries(true);
 
     const pagesMapper = this.#pagesMapper;

web/views_manager.css

@@ -543,6 +543,7 @@
 
     #thumbnailsView {
       --thumbnail-width: 126px;
+      --gap-between-input-and-thumbnail: 16px;
 
       display: flex;
       flex-flow: row wrap;
@@ -581,6 +582,8 @@
       }
 
       &.pasteMode {
+        gap: var(--gap-between-input-and-thumbnail);
+
         > .thumbnail {
           flex-direction: column;
 
@@ -611,7 +614,6 @@
 
       > .thumbnail {
         --input-dim: 16px;
-        --gap-between-input-and-thumbnail: 16px;
 
         &:not(&:has(input)) {
           --input-dim: 0px;