Fix handle icon and thumbnail scroll loading for mobile layout

will-moore · will-moore · commit 6965d027ff7e · 2024-11-19T23:22:29.000Z
diff --git a/css/app.css b/css/app.css
@@ -551,14 +551,22 @@ span.sp-thumb-el {
     .collapse-left, .collapse-right {
         position: absolute;
         left: 5px;
-        bottom: -5px;
+        bottom: -9px;
         cursor: pointer;
-        width: 15px;
-        height: 15px;
+        width: 17px;
+        height: 17px;
+        border-radius: 5px;
+        background: url('images/expand.png') no-repeat scroll center center #fff;
+        background-size: 100%;
     }
     .collapse-right {
+        bottom: -2px;
         background: url('images/expand.png') no-repeat scroll center center #fff;
     }
+    /* rotate the V down arrow to point up */
+    .arrowsUp {
+        transform: rotate(180deg);
+    }
 }
 
 .viewer {
@@ -650,6 +658,7 @@ span.sp-thumb-el {
     width: 80px;
     height: 80px;
     margin: 5px;
+    flex: auto 0 0;
 }
 thumbnail-slider img {
     margin: 0;
diff --git a/src/app/index.html b/src/app/index.html
@@ -63,7 +63,7 @@ <h4 class="modal-title">Confirmation</h4>
         </thumbnail-slider>
 
         <div class="col-splitter left-split">
-            <div class="collapse-left"></div>
+            <div class="collapse-left arrowsUp"></div>
         </div>
 
         <div class="frame col-xs-12"
diff --git a/src/app/thumbnail-slider.js b/src/app/thumbnail-slider.js
@@ -410,14 +410,19 @@ export default class ThumbnailSlider extends EventSubscriber {
      * @memberof ThumbnailSlider
      */
     loadVisibleThumbnails(scrollTop, init = false, refresh = false) {
+        const panel = document.querySelector('.thumbnail-scroll-panel');
         if (scrollTop === undefined) {
-            const panel = document.querySelector('.thumbnail-scroll-panel');
-            if (panel)
-            scrollTop = panel.scrollTop;
+            if (panel) {
+                scrollTop = panel.scrollTop;
+            }
         }
+        // handle horizontal scrolling (mobile layout) or vertical scrolling (desktop layout)
+        let slider_width = document.querySelector('.thumbnail-scroll-panel').clientWidth;
+        let sliderSize = Math.max(slider_width, this.slider_height);
+        let scrollStart = Math.max(scrollTop, panel.scrollLeft);
 
-        let thumb_start_index = parseInt(scrollTop / this.thumbnail_size);
-        let thumb_end_index = parseInt((scrollTop + this.slider_height) / this.thumbnail_size);
+        let thumb_start_index = parseInt(scrollStart / this.thumbnail_size);
+        let thumb_end_index = parseInt((scrollStart + sliderSize) / this.thumbnail_size);
 
         let unloaded = [];
         for (var idx=thumb_start_index; idx<=thumb_end_index; idx++){
diff --git a/src/utils/ui.js b/src/utils/ui.js
@@ -123,6 +123,7 @@ export default class Ui {
     static collapseSidePanel(eventbus, leftSplit) {
             
             let el = leftSplit ? $('.thumbnail-panel') : $('.right-hand-panel');
+            let handle = leftSplit ? $('.collapse-left') : $('.collapse-right');
 
             let width = parseInt(el.css('--panelWidth'));
             let height = parseInt(el.css('--panelHeight'));
@@ -141,6 +142,14 @@ export default class Ui {
             // update css - the appropriate width/height var will be used depending on layout
             el.css('--panelHeight', newHeight + "px");
             el.css('--panelWidth', newWidth + "px");
+            // class used to set the collapse-handle icon
+            if (leftSplit) {
+                if (newHeight > 0) {handle.addClass("arrowsUp");}
+                else {handle.removeClass("arrowsUp");}
+            } else {
+                if (newHeight == 0) {handle.addClass("arrowsUp");}
+                else {handle.removeClass("arrowsUp");}
+            }
             eventbus.publish(IMAGE_VIEWER_RESIZE, {config_id: -1});
     }
 
