From 7a0db8960d330793233a187efd8ee0a224cc0445 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Sat, 30 Sep 2017 16:41:46 +0200 Subject: [PATCH] Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591) If we want to (eventually) make it possible to resize the sidebar, then having its width indirectly affect the toolbar is going to wreck havoc on the media queries used to show/hide buttons in the main toolbar (since many of them depend on the toolbar state, and thus its width). Updating all of the media queries dynamically with JavaScript seems like a non-starter, given that it'd cause *very* messy code. It thus seem to me that we'd need to fix the position of the sidebar, to have any hope of (in the short term) addressing issue 2072. Hence, I'm suggesting that the we always layout the sidebar in a consistent vertical position, and only animate the `viewerContainer` rather than the entire `mainContainer`. Fixes 4052. Fixes bug 850591. --- web/app.js | 11 +++-- web/pdf_sidebar.js | 10 ++--- web/viewer.css | 110 ++++++++++++++++----------------------------- web/viewer.js | 2 +- 4 files changed, 50 insertions(+), 83 deletions(-) diff --git a/web/app.js b/web/app.js index 786d4b9ca..2530e24bf 100644 --- a/web/app.js +++ b/web/app.js @@ -1588,12 +1588,11 @@ function webViewerInitialized() { appConfig.toolbar.viewFind.classList.add('hidden'); } - appConfig.sidebar.mainContainer.addEventListener('transitionend', - function(evt) { - if (evt.target === /* mainContainer */ this) { - PDFViewerApplication.eventBus.dispatch('resize'); - } - }, true); + appConfig.mainContainer.addEventListener('transitionend', function(evt) { + if (evt.target === /* mainContainer */ this) { + PDFViewerApplication.eventBus.dispatch('resize'); + } + }, true); appConfig.sidebar.toggleButton.addEventListener('click', function() { PDFViewerApplication.pdfSidebar.toggle(); diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js index 89cfcf58c..d984a3d34 100644 --- a/web/pdf_sidebar.js +++ b/web/pdf_sidebar.js @@ -30,10 +30,10 @@ const SidebarView = { * @property {PDFViewer} pdfViewer - The document viewer. * @property {PDFThumbnailViewer} pdfThumbnailViewer - The thumbnail viewer. * @property {PDFOutlineViewer} pdfOutlineViewer - The outline viewer. - * @property {HTMLDivElement} mainContainer - The main container - * (in which the viewer element is placed). * @property {HTMLDivElement} outerContainer - The outer container * (encasing both the viewer and sidebar elements). + * @property {HTMLDivElement} viewerContainer - The viewer container + * (in which the viewer element is placed). * @property {EventBus} eventBus - The application event bus. * @property {HTMLButtonElement} toggleButton - The button used for * opening/closing the sidebar. @@ -73,8 +73,8 @@ class PDFSidebar { this.pdfThumbnailViewer = options.pdfThumbnailViewer; this.pdfOutlineViewer = options.pdfOutlineViewer; - this.mainContainer = options.mainContainer; this.outerContainer = options.outerContainer; + this.viewerContainer = options.viewerContainer; this.eventBus = options.eventBus; this.toggleButton = options.toggleButton; @@ -382,8 +382,8 @@ class PDFSidebar { * @private */ _addEventListeners() { - this.mainContainer.addEventListener('transitionend', (evt) => { - if (evt.target === this.mainContainer) { + this.viewerContainer.addEventListener('transitionend', (evt) => { + if (evt.target === this.viewerContainer) { this.outerContainer.classList.remove('sidebarMoving'); } }); diff --git a/web/viewer.css b/web/viewer.css index b0e580beb..83e4ff0c6 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -143,15 +143,17 @@ select { #sidebarContainer { position: absolute; - top: 0; + top: 32px; bottom: 0; width: 200px; visibility: hidden; + z-index: 100; + border-top: 1px solid #333; + -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease; transition-duration: 200ms; transition-timing-function: ease; - } html[dir='ltr'] #sidebarContainer { -webkit-transition-property: left; @@ -164,14 +166,18 @@ html[dir='rtl'] #sidebarContainer { right: -200px; } -#outerContainer.sidebarMoving > #sidebarContainer, -#outerContainer.sidebarOpen > #sidebarContainer { +.loadingInProgress #sidebarContainer { + top: 36px; +} + +#outerContainer.sidebarMoving #sidebarContainer, +#outerContainer.sidebarOpen #sidebarContainer { visibility: visible; } -html[dir='ltr'] #outerContainer.sidebarOpen > #sidebarContainer { +html[dir='ltr'] #outerContainer.sidebarOpen #sidebarContainer { left: 0px; } -html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer { +html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer { right: 0px; } @@ -182,20 +188,6 @@ html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer { bottom: 0; left: 0; min-width: 320px; - -webkit-transition-duration: 200ms; - -webkit-transition-timing-function: ease; - transition-duration: 200ms; - transition-timing-function: ease; -} -html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer { - -webkit-transition-property: left; - transition-property: left; - left: 200px; -} -html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer { - -webkit-transition-property: right; - transition-property: right; - right: 200px; } #sidebarContent { @@ -204,7 +196,7 @@ html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer { overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; - width: 200px; + width: 100%; background-color: hsla(0,0%,0%,.1); } html[dir='ltr'] #sidebarContent { @@ -225,6 +217,11 @@ html[dir='rtl'] #sidebarContent { bottom: 0; left: 0; outline: none; + + -webkit-transition-duration: 200ms; + -webkit-transition-timing-function: ease; + transition-duration: 200ms; + transition-timing-function: ease; } html[dir='ltr'] #viewerContainer { box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05); @@ -233,6 +230,17 @@ html[dir='rtl'] #viewerContainer { box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05); } +html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer { + -webkit-transition-property: left; + transition-property: left; + left: 200px; +} +html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer { + -webkit-transition-property: right; + transition-property: right; + right: 200px; +} + .toolbar { position: relative; left: 0; @@ -246,7 +254,7 @@ html[dir='rtl'] #viewerContainer { } #toolbarSidebar { - width: 200px; + width: 100%; height: 32px; background-color: #424242; /* fallback */ background-image: url(images/texture.png), @@ -273,15 +281,13 @@ html[dir='rtl'] #toolbarSidebar { linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95)); } html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar { - box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08), - inset 0 1px 1px hsla(0,0%,0%,.15), + box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15), inset 0 -1px 0 hsla(0,0%,100%,.05), 0 1px 0 hsla(0,0%,0%,.15), 0 1px 1px hsla(0,0%,0%,.1); } html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar { - box-shadow: inset -1px 0 0 hsla(0,0%,100%,.08), - inset 0 1px 1px hsla(0,0%,0%,.15), + box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15), inset 0 -1px 0 hsla(0,0%,100%,.05), 0 1px 0 hsla(0,0%,0%,.15), 0 1px 1px hsla(0,0%,0%,.1); @@ -1118,17 +1124,17 @@ html[dir='rtl'] .verticalToolbarSeparator { #thumbnailView { position: absolute; - width: 120px; + width: calc(100% - 60px); top: 0; bottom: 0; - padding: 10px 40px 0; + padding: 10px 30px 0; overflow: auto; -webkit-overflow-scrolling: touch; } .thumbnail { float: left; - margin-bottom: 5px; + margin: 0 10px 5px 10px; } #thumbnailView > a:last-of-type > .thumbnail { @@ -1141,7 +1147,7 @@ html[dir='rtl'] .verticalToolbarSeparator { .thumbnail:not([data-loaded]) { border: 1px dashed rgba(255, 255, 255, 0.5); - margin: -1px -1px 4px -1px; + margin: -1px 9px 4px 9px; } .thumbnailImage { @@ -1192,7 +1198,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing, #outlineView, #attachmentsView { position: absolute; - width: 192px; + width: calc(100% - 8px); top: 0; bottom: 0; overflow: auto; @@ -1841,28 +1847,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { display: none; } -@media all and (max-width: 1040px) { - #outerContainer.sidebarMoving #toolbarViewerMiddle, - #outerContainer.sidebarOpen #toolbarViewerMiddle { - display: table; - margin: auto; - left: auto; - position: inherit; - transform: none; - } -} - -@media all and (max-width: 980px) { - .sidebarMoving .hiddenLargeView, - .sidebarOpen .hiddenLargeView { - display: none; - } - .sidebarMoving .visibleLargeView, - .sidebarOpen .visibleLargeView { - display: inherit; - } -} - @media all and (max-width: 900px) { #toolbarViewerMiddle { display: table; @@ -1871,33 +1855,17 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * { position: inherit; transform: none; } - .sidebarMoving .hiddenMediumView, - .sidebarOpen .hiddenMediumView { - display: none; - } - .sidebarMoving .visibleMediumView, - .sidebarOpen .visibleMediumView { - display: inherit; - } } @media all and (max-width: 840px) { - #sidebarContainer { - top: 32px; - z-index: 100; - } - .loadingInProgress #sidebarContainer { - top: 37px; - } #sidebarContent { - top: 32px; background-color: hsla(0,0%,0%,.7); } - html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer { + html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer { left: 0px; } - html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer { + html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer { right: 0px; } diff --git a/web/viewer.js b/web/viewer.js index 70ff43f4f..4c2453b13 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -105,8 +105,8 @@ function getViewerConfiguration() { }, sidebar: { // Divs (and sidebar button) - mainContainer: document.getElementById('mainContainer'), outerContainer: document.getElementById('outerContainer'), + viewerContainer: document.getElementById('viewerContainer'), toggleButton: document.getElementById('sidebarToggle'), // Buttons thumbnailButton: document.getElementById('viewThumbnail'),