Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #15552 from Snuffleupagus/simplify-dropdownToolbarButton

Browse Source 
Simplify the `dropdownToolbarButton`-select width computation
This commit is contained in:
Tim van der Meij 2022-10-09 13:37:15 +02:00 committed by GitHub
commit bf6e287572
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/toolbar.js
View File

@ -320,15 +320,10 @@ class Toolbar {
]); ]);
await animationStarted; await animationStarted;
const style = getComputedStyle(items.scaleSelect), const style = getComputedStyle(items.scaleSelect);
scaleSelectContainerWidth = parseInt( const scaleSelectWidth = parseFloat(
style.getPropertyValue("--scale-select-container-width"), style.getPropertyValue("--scale-select-width")
10 );
),
scaleSelectOverflow = parseInt(
style.getPropertyValue("--scale-select-overflow"),
10
);
// The temporary canvas is used to measure text length in the DOM. // The temporary canvas is used to measure text length in the DOM.
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
@ -342,10 +337,12 @@ class Toolbar {
maxWidth = width; maxWidth = width;
} }
} }
maxWidth += 2 * scaleSelectOverflow; // Account for the icon width, and ensure that there's always some spacing
// between the text and the icon.
maxWidth += 0.3 * scaleSelectWidth;
if (maxWidth > scaleSelectContainerWidth) { if (maxWidth > scaleSelectWidth) {
docStyle.setProperty("--scale-select-container-width", `${maxWidth}px`); docStyle.setProperty("--scale-select-width", `${maxWidth}px`);
} }
// Zeroing the width and height cause Firefox to release graphics resources // Zeroing the width and height cause Firefox to release graphics resources
// immediately, which can greatly reduce memory consumption. // immediately, which can greatly reduce memory consumption.

15
web/viewer.css
View File

@ -20,8 +20,7 @@
--sidebar-width: 200px; --sidebar-width: 200px;
--sidebar-transition-duration: 200ms; --sidebar-transition-duration: 200ms;
--sidebar-transition-timing-function: ease; --sidebar-transition-timing-function: ease;
--scale-select-container-width: 140px; --scale-select-width: 140px;
--scale-select-overflow: 22px;
--toolbar-icon-opacity: 0.7; --toolbar-icon-opacity: 0.7;
--doorhanger-icon-opacity: 0.9; --doorhanger-icon-opacity: 0.9;
@ -791,29 +790,27 @@ body {
} }
.dropdownToolbarButton { .dropdownToolbarButton {
width: var(--scale-select-container-width); width: var(--scale-select-width);
padding: 0; padding: 0;
overflow: hidden;
background-color: var(--dropdown-btn-bg-color); background-color: var(--dropdown-btn-bg-color);
border: var(--dropdown-btn-border); border: var(--dropdown-btn-border);
} }
.dropdownToolbarButton::after { .dropdownToolbarButton::after {
top: 6px; top: 6px;
inset-inline-end: 7px; inset-inline-end: 6px;
pointer-events: none; pointer-events: none;
mask-image: var(--toolbarButton-menuArrow-icon); mask-image: var(--toolbarButton-menuArrow-icon);
} }
.dropdownToolbarButton > select { .dropdownToolbarButton > select {
width: calc( appearance: none;
var(--scale-select-container-width) + var(--scale-select-overflow) width: inherit;
);
height: 28px; height: 28px;
font-size: 12px; font-size: 12px;
color: var(--main-color); color: var(--main-color);
margin: 0; margin: 0;
padding: 1px 0 2px; padding: 1px 0 2px;
padding-inline-start: 4px; padding-inline-start: 6px;
border: none; border: none;
background-color: var(--dropdown-btn-bg-color); background-color: var(--dropdown-btn-bg-color);
} }

2
web/viewer.html
View File

@ -296,7 +296,7 @@ See https://github.com/adobe-type-tools/cmap-resources
<span data-l10n-id="next_label">Next</span> <span data-l10n-id="next_label">Next</span>
</button> </button>
</div> </div>
<input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" size="4" min="1" tabindex="15" data-l10n-id="page" autocomplete="off"> <input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" data-l10n-id="page" autocomplete="off">
<span id="numPages" class="toolbarLabel"></span> <span id="numPages" class="toolbarLabel"></span>
</div> </div>
<div id="toolbarViewerRight"> <div id="toolbarViewerRight">