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.
2017-09-30 16:41:46 +02:00 · 2017-09-30 16:41:46 +02:00 · 7a0db8960d
commit 7a0db8960d
parent 853db85b76
4 changed files with 50 additions and 83 deletions
--- 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();
--- 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');
      }
    });
--- 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;
  }

--- 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'),