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

Update the zoom dropdown width calculation to work better in locales with long zoom-strings (PR 11077 follow-up)

Browse Source 
With the changes in PR 11077, the zoom dropdown now looks "squashed" in locales with longer than average zoom-strings[1]. The reason is that the zoom-value and the dropdown-icon are too close together, which doesn't look good in affected locales.

To fix this, the following changes are made:
 - Increase the calculated dropdown width, in `Toolbar._adjustScaleWidth`, to account for the much wider icon (7 px -> 16 px) and the increased padding.
 - Move the dropdown-icon *slightly* outwards, and also *slightly* reduce the left (right in RTL locales) padding of the dropdown-contents.
 - Finally, remove the right (left in RTL locales) padding to reduce the chance of the *default* browser dropdown-icon being visible.

---
[1] This affects e.g. the `de` and `nl` locales, but there's probably other examples as well.
This commit is contained in:
Jonas Jenwald 2020-08-20 09:36:35 +02:00
parent 965d20db2a
commit 2683f44b40
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/toolbar.js
View File

@ -271,7 +271,7 @@ class Toolbar {
} }
} }
const overflow = SCALE_SELECT_WIDTH - SCALE_SELECT_CONTAINER_WIDTH; const overflow = SCALE_SELECT_WIDTH - SCALE_SELECT_CONTAINER_WIDTH;
maxWidth += 1.5 * overflow; maxWidth += 2 * overflow;
if (maxWidth > SCALE_SELECT_CONTAINER_WIDTH) { if (maxWidth > SCALE_SELECT_CONTAINER_WIDTH) {
items.scaleSelect.style.width = `${maxWidth + overflow}px`; items.scaleSelect.style.width = `${maxWidth + overflow}px`;

15
web/viewer.css
View File

@ -352,7 +352,7 @@ html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentatio
background-color: var(--sidebar-bg-color); background-color: var(--sidebar-bg-color);
} }
html[dir='ltr'] #toolbarSidebar { html[dir='ltr'] #toolbarSidebar {
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.1); 0 0 1px rgba(0, 0, 0, 0.1);
} }
@ -869,10 +869,10 @@ html[dir='rtl'] #toolbarViewerLeft > .toolbarButton:first-child {
max-width: 16px; max-width: 16px;
} }
html[dir='ltr'] .dropdownToolbarButton::after { html[dir='ltr'] .dropdownToolbarButton::after {
right: 8px; right: 7px;
} }
html[dir='rtl'] .dropdownToolbarButton::after { html[dir='rtl'] .dropdownToolbarButton::after {
left: 8px; left: 7px;
} }
.dropdownToolbarButton > select { .dropdownToolbarButton > select {
@ -881,11 +881,16 @@ html[dir='rtl'] .dropdownToolbarButton::after {
font-size: 12px; font-size: 12px;
color: var(--main-color); color: var(--main-color);
margin: 0; margin: 0;
padding: 1px 5px 2px; padding: 1px 0 2px;
border: none; border: none;
background-color: var(--dropdown-btn-bg-color); background-color: var(--dropdown-btn-bg-color);
} }
html[dir='ltr'] .dropdownToolbarButton > select {
padding-left: 4px;
}
html[dir='rtl'] .dropdownToolbarButton > select {
padding-right: 4px;
}
.dropdownToolbarButton > select:hover { .dropdownToolbarButton > select:hover {
background-color: var(--button-hover-color); background-color: var(--button-hover-color);
} }