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

Merge pull request #12362 from Snuffleupagus/loadingBar-width

Browse Source 
Let the loadingBar have the same width as the viewerContainer
This commit is contained in:
Tim van der Meij 2020-09-11 00:18:59 +02:00 committed by GitHub
commit aef3fedc29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/ui_utils.js
View File

@ -23,6 +23,8 @@ const MAX_AUTO_SCALE = 1.25;
const SCROLLBAR_PADDING = 40;
const VERTICAL_PADDING = 5;
const LOADINGBAR_END_OFFSET_VAR = "--loadingBar-end-offset";
const PresentationModeState = {
UNKNOWN: 0,
NORMAL: 1,
@ -940,7 +942,8 @@ class ProgressBar {
const container = viewer.parentNode;
const scrollbarWidth = container.offsetWidth - viewer.offsetWidth;
if (scrollbarWidth > 0) {
this.bar.style.width = `calc(100% - ${scrollbarWidth}px)`;
const doc = document.documentElement;
doc.style.setProperty(LOADINGBAR_END_OFFSET_VAR, `${scrollbarWidth}px`);
}
}
@ -950,7 +953,6 @@ class ProgressBar {
}
this.visible = false;
this.bar.classList.add("hidden");
document.body.classList.remove("loadingInProgress");
}
show() {
@ -958,7 +960,6 @@ class ProgressBar {
return;
}
this.visible = true;
document.body.classList.add("loadingInProgress");
this.bar.classList.remove("hidden");
}
}

36
web/viewer.css
View File

@ -19,6 +19,7 @@
--sidebar-width: 200px;
--sidebar-transition-duration: 200ms;
--sidebar-transition-timing-function: ease;
--loadingBar-end-offset: 0;
--toolbar-icon-opacity: 0.7;
--doorhanger-icon-opacity: 0.9;
@ -253,10 +254,6 @@ html[dir="rtl"] #sidebarContainer {
right: calc(0px - var(--sidebar-width));
}
.loadingInProgress #sidebarContainer {
top: 36px;
}
#outerContainer.sidebarResizing #sidebarContainer {
/* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
transition-duration: 0s;
@ -406,11 +403,35 @@ html[dir="rtl"] #toolbarContainer,
}
#loadingBar {
position: relative;
width: 100%;
position: absolute;
height: 4px;
background-color: var(--body-bg-color);
border-bottom: 1px solid var(--toolbar-border-color);
transition-duration: var(--sidebar-transition-duration);
transition-timing-function: var(--sidebar-transition-timing-function);
}
html[dir="ltr"] #loadingBar {
transition-property: left;
left: 0;
right: var(--loadingBar-end-offset);
}
html[dir="rtl"] #loadingBar {
transition-property: right;
left: var(--loadingBar-end-offset);
right: 0;
}
html[dir="ltr"] #outerContainer.sidebarOpen #loadingBar {
left: var(--sidebar-width);
}
html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
right: var(--sidebar-width);
}
#outerContainer.sidebarResizing #loadingBar {
/* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
transition-duration: 0s;
}
#loadingBar .progress {
@ -1485,9 +1506,6 @@ html[dir="rtl"] .treeItemToggler::before {
z-index: 1000;
padding: 3px 6px;
}
.loadingInProgress #errorWrapper {
top: 37px;
}
#errorMessageLeft {
float: left;

2
web/viewer.html
View File

@ -71,7 +71,7 @@ See https://github.com/adobe-type-tools/cmap-resources
</head>
<body tabindex="1" class="loadingInProgress">
<body tabindex="1">
<div id="outerContainer">
<div id="sidebarContainer">