Merge pull request #8993 from Snuffleupagus/sidebar-constant-position

Layout the sidebar in the same vertical position regardless of the viewer width (issue 4052, bug 850591)

web/app.js

@@ -1576,12 +1576,11 @@ function webViewerInitialized() {
     appConfig.toolbar.viewFind.classList.add('hidden');
   }
 
-  appConfig.sidebar.mainContainer.addEventListener('transitionend',
+  appConfig.mainContainer.addEventListener('transitionend', function(evt) {
-    function(evt) {
+    if (evt.target === /* mainContainer */ this) {
-      if (evt.target === /* mainContainer */ this) {
+      PDFViewerApplication.eventBus.dispatch('resize');
-        PDFViewerApplication.eventBus.dispatch('resize');
+    }
-      }
+  }, true);
-    }, true);
 
   appConfig.sidebar.toggleButton.addEventListener('click', function() {
     PDFViewerApplication.pdfSidebar.toggle();

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) => {
+    this.viewerContainer.addEventListener('transitionend', (evt) => {
-      if (evt.target === this.mainContainer) {
+      if (evt.target === this.viewerContainer) {
         this.outerContainer.classList.remove('sidebarMoving');
       }
     });

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,
+.loadingInProgress #sidebarContainer {
-#outerContainer.sidebarOpen > #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),
+  box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15),
-              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),
+  box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15),
-              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;
   }
 

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