mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-20 15:18:08 +02:00
[Editor] Add a button to trigger a dialog for adding an alt text (bug 1844952)
This commit is contained in:
Calixte Denizet
parent
3afb717eed
commit
a216836fd5
11 changed files with 304 additions and 26 deletions
|
|
@ -37,6 +37,22 @@
|
|||
/*#else*/
|
||||
--editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
|
||||
/*#endif*/
|
||||
|
||||
--alt-text-add-image: url(images/altText_add.svg);
|
||||
--alt-text-done-image: url(images/altText_done.svg);
|
||||
--alt-text-bg-color: #2b2a33;
|
||||
--alt-text-fg-color: #fbfbfe;
|
||||
--alt-text-border-color: var(--alt-text-bg-color);
|
||||
--alt-text-hover-bg-color: #52525e;
|
||||
--alt-text-hover-fg-color: var(--alt-text-fg-color);
|
||||
--alt-text-hover-border-color: var(--alt-text-hover-bg-color);
|
||||
--alt-text-active-bg-color: #5b5b66;
|
||||
--alt-text-active-fg-color: var(--alt-text-fg-color);
|
||||
--alt-text-active-border-color: var(--alt-text-hover-bg-color);
|
||||
--alt-text-focus-outline-color: #0060df;
|
||||
--alt-text-focus-border-color: #f0f0f4;
|
||||
--alt-text-shadow: 0 2px 6px 0 rgba(28, 27, 34, 0.5);
|
||||
--alt-text-opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (min-resolution: 1.1dppx) {
|
||||
|
|
@ -53,6 +69,20 @@
|
|||
--outline-color: CanvasText;
|
||||
--outline-around-color: ButtonFace;
|
||||
--resizer-bg-color: ButtonText;
|
||||
|
||||
--alt-text-bg-color: Canvas;
|
||||
--alt-text-fg-color: ButtonText;
|
||||
--alt-text-border-color: ButtonText;
|
||||
--alt-text-hover-bg-color: Canvas;
|
||||
--alt-text-hover-fg-color: SelectedItem;
|
||||
--alt-text-hover-border-color: SelectedItem;
|
||||
--alt-text-active-bg-color: ButtonFace;
|
||||
--alt-text-active-fg-color: SelectedItem;
|
||||
--alt-text-active-border-color: ButtonText;
|
||||
--alt-text-focus-outline-color: CanvasText;
|
||||
--alt-text-focus-border-color: ButtonText;
|
||||
--alt-text-shadow: none;
|
||||
--alt-text-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -331,4 +361,174 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&
|
||||
:is(
|
||||
[data-main-rotation="0"] [data-editor-rotation="90"],
|
||||
[data-main-rotation="90"] [data-editor-rotation="0"],
|
||||
[data-main-rotation="180"] [data-editor-rotation="270"],
|
||||
[data-main-rotation="270"] [data-editor-rotation="180"],
|
||||
|
||||
) {
|
||||
& .altText {
|
||||
rotate: 270deg;
|
||||
|
||||
&:dir(ltr) {
|
||||
inset-inline-start: calc(100% - 8px);
|
||||
|
||||
&.small {
|
||||
inset-inline-start: calc(100% + 8px);
|
||||
inset-block-start: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
inset-block-end: calc(100% - 8px);
|
||||
|
||||
&.small {
|
||||
inset-inline-start: -8px;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&
|
||||
:is(
|
||||
[data-main-rotation="0"] [data-editor-rotation="180"],
|
||||
[data-main-rotation="90"] [data-editor-rotation="90"],
|
||||
[data-main-rotation="180"] [data-editor-rotation="0"],
|
||||
[data-main-rotation="270"] [data-editor-rotation="270"],
|
||||
|
||||
) {
|
||||
& .altText {
|
||||
rotate: 180deg;
|
||||
|
||||
inset-block-end: calc(100% - 8px);
|
||||
inset-inline-start: calc(100% - 8px);
|
||||
|
||||
&.small {
|
||||
inset-inline-start: 100%;
|
||||
inset-block-start: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&
|
||||
:is(
|
||||
[data-main-rotation="0"] [data-editor-rotation="270"],
|
||||
[data-main-rotation="90"] [data-editor-rotation="180"],
|
||||
[data-main-rotation="180"] [data-editor-rotation="90"],
|
||||
[data-main-rotation="270"] [data-editor-rotation="0"],
|
||||
|
||||
) {
|
||||
& .altText {
|
||||
rotate: 90deg;
|
||||
|
||||
&:dir(ltr) {
|
||||
inset-block-end: calc(100% - 8px);
|
||||
|
||||
&.small {
|
||||
inset-inline-start: -8px;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
inset-inline-start: calc(100% - 8px);
|
||||
|
||||
&.small {
|
||||
inset-inline-start: calc(100% + 8px);
|
||||
inset-block-start: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.altText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
height: 24px;
|
||||
min-width: 88px;
|
||||
z-index: 1;
|
||||
pointer-events: all;
|
||||
|
||||
color: var(--alt-text-fg-color);
|
||||
font: menu;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--alt-text-border-color);
|
||||
opacity: var(--alt-text-opacity);
|
||||
background-color: var(--alt-text-bg-color);
|
||||
box-shadow: var(--alt-text-shadow);
|
||||
|
||||
position: absolute;
|
||||
inset-block-end: 8px;
|
||||
inset-inline-start: 8px;
|
||||
|
||||
&:dir(ltr) {
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
&:dir(rtl) {
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
||||
&.small {
|
||||
&:dir(ltr) {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
&:dir(rtl) {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
inset-block-end: unset;
|
||||
inset-inline-start: 0;
|
||||
inset-block-start: calc(100% + 8px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--alt-text-hover-bg-color);
|
||||
border-color: var(--alt-text-hover-border-color);
|
||||
color: var(--alt-text-hover-fg-color);
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
background-color: var(--alt-text-hover-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--alt-text-active-bg-color);
|
||||
border-color: var(--alt-text-active-border-color);
|
||||
color: var(--alt-text-active-fg-color);
|
||||
|
||||
&::before {
|
||||
background-color: var(--alt-text-active-fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--alt-text-focus-outline-color);
|
||||
border-color: var(--alt-text-focus-border-color);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
mask-image: var(--alt-text-add-image);
|
||||
mask-size: cover;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--alt-text-fg-color);
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
&.done::before {
|
||||
mask-image: var(--alt-text-done-image);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ class AnnotationEditorLayerBuilder {
|
|||
div.className = "annotationEditorLayer";
|
||||
div.tabIndex = 0;
|
||||
div.hidden = true;
|
||||
div.dir = this.#uiManager.direction;
|
||||
this.pageDiv.append(div);
|
||||
|
||||
this.annotationEditorLayer = new AnnotationEditorLayer({
|
||||
|
|
|
|||
3
web/images/altText_add.svg
Normal file
3
web/images/altText_add.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.375 7.625V11.875C5.375 12.0408 5.44085 12.1997 5.55806 12.3169C5.67527 12.4342 5.83424 12.5 6 12.5C6.16576 12.5 6.32473 12.4342 6.44194 12.3169C6.55915 12.1997 6.625 12.0408 6.625 11.875V7.625L7.125 7.125H11.375C11.5408 7.125 11.6997 7.05915 11.8169 6.94194C11.9342 6.82473 12 6.66576 12 6.5C12 6.33424 11.9342 6.17527 11.8169 6.05806C11.6997 5.94085 11.5408 5.875 11.375 5.875H7.125L6.625 5.375V1.125C6.625 0.95924 6.55915 0.800269 6.44194 0.683058C6.32473 0.565848 6.16576 0.5 6 0.5C5.83424 0.5 5.67527 0.565848 5.55806 0.683058C5.44085 0.800269 5.375 0.95924 5.375 1.125V5.375L4.875 5.875H0.625C0.45924 5.875 0.300269 5.94085 0.183058 6.05806C0.065848 6.17527 0 6.33424 0 6.5C0 6.66576 0.065848 6.82473 0.183058 6.94194C0.300269 7.05915 0.45924 7.125 0.625 7.125H4.762L5.375 7.625Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 920 B |
3
web/images/altText_done.svg
Normal file
3
web/images/altText_done.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 0.5C5.21207 0.5 4.43185 0.655195 3.7039 0.956723C2.97595 1.25825 2.31451 1.70021 1.75736 2.25736C1.20021 2.81451 0.758251 3.47595 0.456723 4.2039C0.155195 4.93185 0 5.71207 0 6.5C0 7.28793 0.155195 8.06815 0.456723 8.7961C0.758251 9.52405 1.20021 10.1855 1.75736 10.7426C2.31451 11.2998 2.97595 11.7417 3.7039 12.0433C4.43185 12.3448 5.21207 12.5 6 12.5C7.5913 12.5 9.11742 11.8679 10.2426 10.7426C11.3679 9.61742 12 8.0913 12 6.5C12 4.9087 11.3679 3.38258 10.2426 2.25736C9.11742 1.13214 7.5913 0.5 6 0.5ZM5.06 8.9L2.9464 6.7856C2.85273 6.69171 2.80018 6.56446 2.80033 6.43183C2.80048 6.29921 2.85331 6.17207 2.9472 6.0784C3.04109 5.98473 3.16834 5.93218 3.30097 5.93233C3.43359 5.93248 3.56073 5.98531 3.6544 6.0792L5.3112 7.7368L8.3464 4.7008C8.44109 4.6109 8.56715 4.56153 8.69771 4.56322C8.82827 4.56492 8.95301 4.61754 9.04534 4.70986C9.13766 4.80219 9.19028 4.92693 9.19198 5.05749C9.19367 5.18805 9.1443 5.31411 9.0544 5.4088L5.5624 8.9H5.06Z" fill="#FBFBFE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -82,6 +82,7 @@ const DEFAULT_L10N_STRINGS = {
|
|||
editor_free_text2_aria_label: "Text Editor",
|
||||
editor_ink2_aria_label: "Draw Editor",
|
||||
editor_ink_canvas_aria_label: "User-created image",
|
||||
alt_text_button_label: "Alt text",
|
||||
};
|
||||
if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
|
||||
DEFAULT_L10N_STRINGS.print_progress_percent = "{{progress}}%";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue