[Editor] Add a floating button in order to highlight the text selection and add a comment (bug 1979381)
The callback called when clicking on the button is the same as the one trigged by clicking in the context menu (in m-c).
This commit is contained in:
Calixte Denizet
parent
366727d734
commit
3fb7cd40e7
@ -324,6 +324,10 @@ pdfjs-highlight-floating-button1 =
|
||||
.title = Highlight
|
||||
.aria-label = Highlight
|
||||
pdfjs-highlight-floating-button-label = Highlight
|
||||
pdfjs-comment-floating-button =
|
||||
.title = Comment
|
||||
.aria-label = Comment
|
||||
pdfjs-comment-floating-button-label = Comment
|
||||
pdfjs-editor-signature-button =
|
||||
.title = Add signature
|
||||
pdfjs-editor-signature-button-label = Add signature
|
||||
|
||||
@ -123,7 +123,7 @@ class EditorToolbar {
|
||||
const { editorType, _uiManager } = this.#editor;
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.className = "delete";
|
||||
button.classList.add("basic", "deleteButton");
|
||||
button.tabIndex = 0;
|
||||
button.setAttribute("data-l10n-id", EditorToolbar.#l10nRemove[editorType]);
|
||||
this.#addListenersToElement(button);
|
||||
@ -214,7 +214,7 @@ class EditorToolbar {
|
||||
}
|
||||
}
|
||||
|
||||
class HighlightToolbar {
|
||||
class FloatingToolbar {
|
||||
#buttons = null;
|
||||
|
||||
#toolbar = null;
|
||||
@ -237,7 +237,25 @@ class HighlightToolbar {
|
||||
buttons.className = "buttons";
|
||||
editToolbar.append(buttons);
|
||||
|
||||
this.#addHighlightButton();
|
||||
if (this.#uiManager.hasCommentManager()) {
|
||||
this.#makeButton(
|
||||
"commentButton",
|
||||
`pdfjs-comment-floating-button`,
|
||||
"pdfjs-comment-floating-button-label",
|
||||
() => {
|
||||
this.#uiManager.commentSelection("floating_button");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
this.#makeButton(
|
||||
"highlightButton",
|
||||
`pdfjs-highlight-floating-button1`,
|
||||
"pdfjs-highlight-floating-button-label",
|
||||
() => {
|
||||
this.#uiManager.highlightSelection("floating_button");
|
||||
}
|
||||
);
|
||||
|
||||
return editToolbar;
|
||||
}
|
||||
@ -279,26 +297,20 @@ class HighlightToolbar {
|
||||
this.#toolbar.remove();
|
||||
}
|
||||
|
||||
#addHighlightButton() {
|
||||
#makeButton(buttonClass, l10nId, labelL10nId, clickHandler) {
|
||||
const button = document.createElement("button");
|
||||
button.className = "highlightButton";
|
||||
button.classList.add("basic", buttonClass);
|
||||
button.tabIndex = 0;
|
||||
button.setAttribute("data-l10n-id", `pdfjs-highlight-floating-button1`);
|
||||
button.setAttribute("data-l10n-id", l10nId);
|
||||
const span = document.createElement("span");
|
||||
button.append(span);
|
||||
span.className = "visuallyHidden";
|
||||
span.setAttribute("data-l10n-id", "pdfjs-highlight-floating-button-label");
|
||||
span.setAttribute("data-l10n-id", labelL10nId);
|
||||
const signal = this.#uiManager._signal;
|
||||
button.addEventListener("contextmenu", noContextMenu, { signal });
|
||||
button.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
this.#uiManager.highlightSelection("floating_button");
|
||||
},
|
||||
{ signal }
|
||||
);
|
||||
button.addEventListener("click", clickHandler, { signal });
|
||||
this.#buttons.append(button);
|
||||
}
|
||||
}
|
||||
|
||||
export { EditorToolbar, HighlightToolbar };
|
||||
export { EditorToolbar, FloatingToolbar };
|
||||
|
||||
@ -34,7 +34,7 @@ import {
|
||||
PixelsPerInch,
|
||||
stopEvent,
|
||||
} from "../display_utils.js";
|
||||
import { HighlightToolbar } from "./toolbar.js";
|
||||
import { FloatingToolbar } from "./toolbar.js";
|
||||
|
||||
function bindEvents(obj, element, names) {
|
||||
for (const name of names) {
|
||||
@ -631,7 +631,7 @@ class AnnotationEditorUIManager {
|
||||
|
||||
#highlightWhenShiftUp = false;
|
||||
|
||||
#highlightToolbar = null;
|
||||
#floatingToolbar = null;
|
||||
|
||||
#idManager = new IdManager();
|
||||
|
||||
@ -908,8 +908,8 @@ class AnnotationEditorUIManager {
|
||||
this.#altTextManager?.destroy();
|
||||
this.#commentManager?.destroy();
|
||||
this.#signatureManager?.destroy();
|
||||
this.#highlightToolbar?.hide();
|
||||
this.#highlightToolbar = null;
|
||||
this.#floatingToolbar?.hide();
|
||||
this.#floatingToolbar = null;
|
||||
this.#mainHighlightColorPicker?.destroy();
|
||||
this.#mainHighlightColorPicker = null;
|
||||
if (this.#focusMainContainerTimeoutId) {
|
||||
@ -1157,7 +1157,7 @@ class AnnotationEditorUIManager {
|
||||
return null;
|
||||
}
|
||||
|
||||
highlightSelection(methodOfCreation = "") {
|
||||
highlightSelection(methodOfCreation = "", comment = false) {
|
||||
const selection = document.getSelection();
|
||||
if (!selection || selection.isCollapsed) {
|
||||
return;
|
||||
@ -1175,7 +1175,7 @@ class AnnotationEditorUIManager {
|
||||
const layer = this.#getLayerForTextLayer(textLayer);
|
||||
const isNoneMode = this.#mode === AnnotationEditorType.NONE;
|
||||
const callback = () => {
|
||||
layer?.createAndAddNewEditor({ x: 0, y: 0 }, false, {
|
||||
const editor = layer?.createAndAddNewEditor({ x: 0, y: 0 }, false, {
|
||||
methodOfCreation,
|
||||
boxes,
|
||||
anchorNode,
|
||||
@ -1187,6 +1187,9 @@ class AnnotationEditorUIManager {
|
||||
if (isNoneMode) {
|
||||
this.showAllEditors("highlight", true, /* updateButton = */ true);
|
||||
}
|
||||
if (comment) {
|
||||
editor?.editComment();
|
||||
}
|
||||
};
|
||||
if (isNoneMode) {
|
||||
this.switchToMode(AnnotationEditorType.HIGHLIGHT, callback);
|
||||
@ -1195,7 +1198,11 @@ class AnnotationEditorUIManager {
|
||||
callback();
|
||||
}
|
||||
|
||||
#displayHighlightToolbar() {
|
||||
commentSelection(methodOfCreation = "") {
|
||||
this.highlightSelection(methodOfCreation, /* comment */ true);
|
||||
}
|
||||
|
||||
#displayFloatingToolbar() {
|
||||
const selection = document.getSelection();
|
||||
if (!selection || selection.isCollapsed) {
|
||||
return;
|
||||
@ -1206,8 +1213,8 @@ class AnnotationEditorUIManager {
|
||||
if (!boxes) {
|
||||
return;
|
||||
}
|
||||
this.#highlightToolbar ||= new HighlightToolbar(this);
|
||||
this.#highlightToolbar.show(textLayer, boxes, this.direction === "ltr");
|
||||
this.#floatingToolbar ||= new FloatingToolbar(this);
|
||||
this.#floatingToolbar.show(textLayer, boxes, this.direction === "ltr");
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1241,7 +1248,7 @@ class AnnotationEditorUIManager {
|
||||
const selection = document.getSelection();
|
||||
if (!selection || selection.isCollapsed) {
|
||||
if (this.#selectedTextNode) {
|
||||
this.#highlightToolbar?.hide();
|
||||
this.#floatingToolbar?.hide();
|
||||
this.#selectedTextNode = null;
|
||||
this.#dispatchUpdateStates({
|
||||
hasSelectedText: false,
|
||||
@ -1258,7 +1265,7 @@ class AnnotationEditorUIManager {
|
||||
const textLayer = anchorElement.closest(".textLayer");
|
||||
if (!textLayer) {
|
||||
if (this.#selectedTextNode) {
|
||||
this.#highlightToolbar?.hide();
|
||||
this.#floatingToolbar?.hide();
|
||||
this.#selectedTextNode = null;
|
||||
this.#dispatchUpdateStates({
|
||||
hasSelectedText: false,
|
||||
@ -1267,7 +1274,7 @@ class AnnotationEditorUIManager {
|
||||
return;
|
||||
}
|
||||
|
||||
this.#highlightToolbar?.hide();
|
||||
this.#floatingToolbar?.hide();
|
||||
this.#selectedTextNode = anchorNode;
|
||||
this.#dispatchUpdateStates({
|
||||
hasSelectedText: true,
|
||||
@ -1315,7 +1322,7 @@ class AnnotationEditorUIManager {
|
||||
if (this.#mode === AnnotationEditorType.HIGHLIGHT) {
|
||||
this.highlightSelection(methodOfCreation);
|
||||
} else if (this.#enableHighlightFloatingButton) {
|
||||
this.#displayHighlightToolbar();
|
||||
this.#displayFloatingToolbar();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1606,6 +1613,9 @@ class AnnotationEditorUIManager {
|
||||
case "highlightSelection":
|
||||
this.highlightSelection("context_menu");
|
||||
break;
|
||||
case "commentSelection":
|
||||
this.commentSelection("context_menu");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2591,7 +2591,7 @@ describe("FreeText Editor", () => {
|
||||
await commit(page);
|
||||
|
||||
// Delete it in using the button.
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await page.waitForFunction(
|
||||
sel => !document.querySelector(sel),
|
||||
{},
|
||||
@ -2644,7 +2644,7 @@ describe("FreeText Editor", () => {
|
||||
await selectAll(page);
|
||||
|
||||
// Delete it in using the button.
|
||||
await page.focus(`${editorSelector} button.delete`);
|
||||
await page.focus(`${editorSelector} button.deleteButton`);
|
||||
await page.keyboard.press("Enter");
|
||||
await page.waitForFunction(
|
||||
sel => !document.querySelector(sel),
|
||||
@ -2885,8 +2885,8 @@ describe("FreeText Editor", () => {
|
||||
await commit(page);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
|
||||
@ -2935,8 +2935,8 @@ describe("FreeText Editor", () => {
|
||||
await commit(page);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
|
||||
@ -3271,8 +3271,8 @@ describe("FreeText Editor", () => {
|
||||
await commit(page);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -3299,8 +3299,8 @@ describe("FreeText Editor", () => {
|
||||
await commit(page);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
@ -3332,8 +3332,8 @@ describe("FreeText Editor", () => {
|
||||
await commit(page);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -1168,9 +1168,9 @@ describe("Highlight Editor", () => {
|
||||
const editorSelector = getEditorSelector(0);
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
|
||||
await page.focus(`${editorSelector} button.delete`);
|
||||
await page.focus(`${editorSelector} button.deleteButton`);
|
||||
await page.keyboard.press(" ");
|
||||
|
||||
await waitForSerialized(page, 0);
|
||||
@ -1565,8 +1565,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await kbUndo(page);
|
||||
@ -1611,8 +1611,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
|
||||
@ -1673,8 +1673,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
|
||||
@ -2022,8 +2022,8 @@ describe("Highlight Editor", () => {
|
||||
|
||||
const editorSelector = getEditorSelector(0);
|
||||
await page.waitForSelector(editorSelector);
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
const serialized = await getSerialized(page);
|
||||
@ -2204,8 +2204,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2234,8 +2234,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2260,8 +2260,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2286,8 +2286,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2314,8 +2314,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2337,8 +2337,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2360,8 +2360,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2383,8 +2383,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2407,8 +2407,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2430,8 +2430,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
const pdfPath = path.join(__dirname, "../pdfs/basicapi.pdf");
|
||||
@ -2490,8 +2490,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
@ -2529,8 +2529,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(getEditorSelector(1));
|
||||
|
||||
await selectAll(page);
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
@ -2567,8 +2567,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2583,8 +2583,8 @@ describe("Highlight Editor", () => {
|
||||
`.page[data-page-number = "1"] svg.highlight[fill = "#FFFF00"]`
|
||||
);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -2614,8 +2614,8 @@ describe("Highlight Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
|
||||
@ -345,8 +345,8 @@ describe("Ink Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await kbUndo(page);
|
||||
@ -389,8 +389,8 @@ describe("Ink Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
|
||||
@ -446,8 +446,8 @@ describe("Ink Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
|
||||
@ -897,8 +897,8 @@ describe("Ink Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -931,8 +931,8 @@ describe("Ink Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
@ -970,8 +970,8 @@ describe("Ink Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -1101,8 +1101,8 @@ describe("Ink Editor", () => {
|
||||
await dragAndDrop(page, editorSelector, [[0, -30]], /* steps = */ 10);
|
||||
await waitForSerialized(page, 2);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 1);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
|
||||
@ -183,8 +183,8 @@ describe("Stamp Editor", () => {
|
||||
await waitForImage(page, editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await kbUndo(page);
|
||||
@ -677,8 +677,8 @@ describe("Stamp Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await kbUndo(page);
|
||||
@ -709,8 +709,8 @@ describe("Stamp Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
const twoToFourteen = Array.from(new Array(13).keys(), n => n + 2);
|
||||
@ -754,8 +754,8 @@ describe("Stamp Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
const twoToOne = Array.from(new Array(13).keys(), n => n + 2).concat(
|
||||
@ -1532,8 +1532,8 @@ describe("Stamp Editor", () => {
|
||||
let serialized = await getSerialized(page);
|
||||
expect(serialized).withContext(`In ${browserName}`).toEqual([]);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
|
||||
await waitForSerialized(page, 1);
|
||||
serialized = await getSerialized(page);
|
||||
@ -1606,8 +1606,8 @@ describe("Stamp Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -1631,8 +1631,8 @@ describe("Stamp Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
@ -1657,8 +1657,8 @@ describe("Stamp Editor", () => {
|
||||
await page.waitForSelector(editorSelector);
|
||||
await waitForSerialized(page, 1);
|
||||
|
||||
await page.waitForSelector(`${editorSelector} button.delete`);
|
||||
await page.click(`${editorSelector} button.delete`);
|
||||
await page.waitForSelector(`${editorSelector} button.deleteButton`);
|
||||
await page.click(`${editorSelector} button.deleteButton`);
|
||||
await waitForSerialized(page, 0);
|
||||
|
||||
await page.waitForSelector("#editorUndoBar", { visible: true });
|
||||
|
||||
@ -321,41 +321,33 @@
|
||||
margin-inline: 2px;
|
||||
}
|
||||
|
||||
.highlightButton {
|
||||
.basic {
|
||||
width: var(--editor-toolbar-height);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
display: inline-block;
|
||||
background-color: var(--editor-toolbar-fg-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-color: var(--editor-toolbar-hover-fg-color);
|
||||
}
|
||||
|
||||
&.highlightButton::before {
|
||||
mask-image: var(--editor-toolbar-highlight-image);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
display: inline-block;
|
||||
background-color: var(--editor-toolbar-fg-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-color: var(--editor-toolbar-hover-fg-color);
|
||||
&.commentButton::before {
|
||||
mask-image: var(--editor-toolbar-comment-edit-image);
|
||||
}
|
||||
}
|
||||
|
||||
.delete {
|
||||
width: var(--editor-toolbar-height);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
&.deleteButton::before {
|
||||
mask-image: var(--editor-toolbar-delete-image);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
display: inline-block;
|
||||
background-color: var(--editor-toolbar-fg-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
background-color: var(--editor-toolbar-hover-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user