Merge pull request #17287 from Snuffleupagus/CSS-loading-icon
Re-factor the loading-icons used in the viewer toolbars
This commit is contained in:
Jonas Jenwald
GitHub
commit
83f0029212
@ -1,24 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
|
||||
fill="rgba(255,255,255,1)" style="animation:spinLoadingIcon 1s steps(12,end)
|
||||
infinite"><style>@keyframes
|
||||
spinLoadingIcon{to{transform:rotate(360deg)}}</style><path
|
||||
d="M7 3V1s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z"/><path d="M4.63
|
||||
4.1l-1-1.73S3.13 1.5 4 1c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37
|
||||
1.37c-.87.57-1.37-.37-1.37-.37z" fill-opacity=".93"/><path
|
||||
d="M3.1 6.37l-1.73-1S.5 4.87 1 4c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37
|
||||
1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".86"/><path d="M3
|
||||
9H1S0 9 0 8s1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".79"/><path d="M4.1 11.37l-1.73 1S1.5 12.87 1
|
||||
12c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z"
|
||||
fill-opacity=".72"/><path d="M3.63 13.56l1-1.73s.5-.87
|
||||
1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z"
|
||||
fill-opacity=".65"/><path d="M7 15v-2s0-1 1-1 1 1 1 1v2s0 1-1
|
||||
1-1-1-1-1z" fill-opacity=".58"/><path d="M10.63
|
||||
14.56l-1-1.73s-.5-.87.37-1.37c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37
|
||||
1.37c-.87.5-1.37-.37-1.37-.37z" fill-opacity=".51"/><path
|
||||
d="M13.56 12.37l-1.73-1s-.87-.5-.37-1.37c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37
|
||||
1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".44"/><path d="M15
|
||||
9h-2s-1 0-1-1 1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".37"/><path d="M14.56 5.37l-1.73
|
||||
1s-.87.5-1.37-.37c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37
|
||||
1.37z" fill-opacity=".3"/><path d="M9.64 3.1l.98-1.66s.5-.874
|
||||
1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z"
|
||||
fill-opacity=".23"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -22,8 +22,6 @@ import {
|
||||
toggleCheckedBtn,
|
||||
} from "./ui_utils.js";
|
||||
|
||||
const PAGE_NUMBER_LOADING_INDICATOR = "visiblePageIsLoading";
|
||||
|
||||
/**
|
||||
* @typedef {Object} ToolbarOptions
|
||||
* @property {HTMLDivElement} container - Container for the secondary toolbar.
|
||||
@ -300,7 +298,7 @@ class Toolbar {
|
||||
updateLoadingIndicatorState(loading = false) {
|
||||
const { pageNumber } = this.items;
|
||||
|
||||
pageNumber.classList.toggle(PAGE_NUMBER_LOADING_INDICATOR, loading);
|
||||
pageNumber.classList.toggle("loading", loading);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -168,11 +168,6 @@
|
||||
--doorhanger-separator-color: rgb(92 92 97);
|
||||
--dialog-button-bg-color: rgb(92 92 97);
|
||||
--dialog-button-hover-bg-color: rgb(115 115 115);
|
||||
|
||||
/* This image is used in <input> elements, which unfortunately means that
|
||||
* the `mask-image` approach used with all of the other images doesn't work
|
||||
* here; hence why we still have two versions of this particular image. */
|
||||
--loading-icon: url(images/loading-dark.svg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -494,22 +489,21 @@ body {
|
||||
|
||||
#findInput {
|
||||
width: 200px;
|
||||
}
|
||||
/*#if !MOZCENTRAL*/
|
||||
#findInput::-webkit-input-placeholder {
|
||||
color: rgb(191 191 191);
|
||||
}
|
||||
/*#endif*/
|
||||
#findInput::placeholder {
|
||||
font-style: normal;
|
||||
}
|
||||
#findInput[data-status="pending"] {
|
||||
background-image: var(--loading-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: calc(50% + 48% * var(--dir-factor));
|
||||
}
|
||||
#findInput[data-status="notFound"] {
|
||||
background-color: rgb(255 102 102);
|
||||
|
||||
/*#if !MOZCENTRAL*/
|
||||
&::-webkit-input-placeholder {
|
||||
color: rgb(191 191 191);
|
||||
}
|
||||
/*#endif*/
|
||||
&::placeholder {
|
||||
font-style: normal;
|
||||
}
|
||||
.loadingInput:has(> &[data-status="pending"])::after {
|
||||
visibility: visible;
|
||||
}
|
||||
&[data-status="notFound"] {
|
||||
background-color: rgb(255 102 102);
|
||||
}
|
||||
}
|
||||
|
||||
.secondaryToolbar,
|
||||
@ -1100,22 +1094,42 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
|
||||
width: 40px;
|
||||
background-size: 0 0;
|
||||
transition-property: none;
|
||||
|
||||
/*#if !MOZCENTRAL*/
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
/*#endif*/
|
||||
|
||||
.loadingInput:has(> &.loading)::after {
|
||||
visibility: visible;
|
||||
|
||||
transition-property: visibility;
|
||||
transition-delay: var(--loading-icon-delay);
|
||||
}
|
||||
}
|
||||
#pageNumber.visiblePageIsLoading {
|
||||
background-image: var(--loading-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: calc(50% - 42% * var(--dir-factor));
|
||||
background-size: 16px 16px;
|
||||
/* Using a delay with background-image doesn't work,
|
||||
consequently we use background-size. */
|
||||
transition-property: background-size;
|
||||
transition-delay: var(--loading-icon-delay);
|
||||
|
||||
.loadingInput {
|
||||
&::after {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
top: calc(50% - 8px);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
content: "";
|
||||
background-color: var(--toolbar-icon-bg-color);
|
||||
mask-size: cover;
|
||||
mask-image: var(--loading-icon);
|
||||
}
|
||||
|
||||
&.start::after {
|
||||
inset-inline-start: 4px;
|
||||
}
|
||||
&.end::after {
|
||||
inset-inline-end: 4px;
|
||||
}
|
||||
}
|
||||
/*#if !MOZCENTRAL*/
|
||||
#pageNumber::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
/*#endif*/
|
||||
|
||||
.toolbarField:focus {
|
||||
border-color: #0a84ff;
|
||||
|
||||
@ -138,7 +138,9 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
<div id="mainContainer">
|
||||
<div class="findbar hidden doorHanger" id="findbar">
|
||||
<div id="findbarInputContainer">
|
||||
<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="pdfjs-find-input" aria-invalid="false">
|
||||
<span class="loadingInput end">
|
||||
<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="pdfjs-find-input" aria-invalid="false">
|
||||
</span>
|
||||
<div class="splitToolbarButton">
|
||||
<button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="pdfjs-find-previous-button">
|
||||
<span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
|
||||
@ -325,7 +327,9 @@ See https://github.com/adobe-type-tools/cmap-resources
|
||||
<span data-l10n-id="pdfjs-next-button-label">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" data-l10n-id="pdfjs-page-input" autocomplete="off">
|
||||
<span class="loadingInput start">
|
||||
<input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" data-l10n-id="pdfjs-page-input" autocomplete="off">
|
||||
</span>
|
||||
<span id="numPages" class="toolbarLabel"></span>
|
||||
</div>
|
||||
<div id="toolbarViewerRight">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user