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)
2017-11-04 16:53:11 +01:00 · 2017-11-04 16:53:11 +01:00 · f87c16bcc4
commit f87c16bcc4
parent 99b62fe3d4 7a0db8960d
4 changed files with 50 additions and 83 deletions
--- a/web/app.js
+++ b/web/app.js
@ -1576,12 +1576,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'),