OHIFVIEWER18- Thumbnails panel is on top of images when it is not pinned

LesionTracker/client/components/viewer.styl

@@ -8,7 +8,7 @@
 #viewportAndLesionTable
   height: 100%
   width: 99%
-  float: left
+  float: right
   -o-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;

Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.js

@@ -12,17 +12,10 @@ Template.hidingPanel.events({
             template.hidingPanelOpen.set(true);
 
             // Rotate Arrow Icon
-            $('.arrowIcon').css( {'transform': 'rotate(180deg)'});
+            $('.arrowIcon').toggleClass("arrowIconRotate");
 
             // Set panel content opacity
-            $(".hidingPanelContent").css("opacity", "1");
-
-            // Calculate newWidth of viewportAndLesionTable
-            var viewerWidth = $("#viewer").width();
-            var newPercentageOfviewportAndLesionTable = 100 - 120 / viewerWidth *100;
-            $("#viewportAndLesionTable").css("width", newPercentageOfviewportAndLesionTable+"%");
-
-            resizeViewportElements();
+            $(".hidingPanelContent").toggleClass("hidingPanelContentOpaque");
         }
     },
 
@@ -38,15 +31,11 @@ Template.hidingPanel.events({
             template.hidingPanelOpen.set(false);
 
             // Rotate Arrow Icon
-            $('.arrowIcon').css( {'transform': 'rotate(0deg)'});
+            $('.arrowIcon').toggleClass("arrowIconRotate");
 
             // Set panel content opacity
-            $(".hidingPanelContent").css("opacity", "0");
+            $(".hidingPanelContent").toggleClass("hidingPanelContentOpaque");
 
-            // Calculate newWidth of viewportAndLesionTable
-            $("#viewportAndLesionTable").css("width", "99%");
-
-            resizeViewportElements();
         }
     },
 
@@ -54,6 +43,20 @@ Template.hidingPanel.events({
         var panelPinned = template.panelPinned.get();
         panelPinned = !panelPinned;
         template.panelPinned.set(panelPinned);
+        if(panelPinned) {
+            // Calculate newWidth of viewportAndLesionTable
+            var viewerWidth = $("#viewer").width();
+            var newPercentageOfviewportAndLesionTable = 100 - 120 / viewerWidth *100;
+            $("#viewportAndLesionTable").css("width", newPercentageOfviewportAndLesionTable+"%");
+
+            resizeViewportElements();
+        }else{
+
+            // Calculate newWidth of viewportAndLesionTable
+            $("#viewportAndLesionTable").css("width", "99%");
+
+            resizeViewportElements();
+        }
     }
 });
 

Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.styl

@@ -1,5 +1,5 @@
 
-.hidingPanel,.studyBrowserContainer, .arrowIcon
+.hidingPanel, .hidingPanelContent, .studyBrowserContainer, .arrowIcon, .arrowIconRotate, .hidingPanelContentOpaque
 
   -o-transition: all 0.3s ease-out
   -ms-transition: all 0.3s ease-out
@@ -11,8 +11,12 @@
 .hidingPanel
   width: 1%
   height: 100%
-  position: relative
-  float: left
+  position: absolute
+  left: 0px
+  top: 70px
+  bottom: 0px
+  z-index: 10
+  background-color: black
 
   .arrowIcon
     color: white
@@ -21,6 +25,11 @@
     margin-left: 2px;
     line-height: 12px
 
+  .arrowIconRotate
+    -ms-transform: rotate(180deg)
+    -webkit-transform: rotate(180deg)
+    transform: rotate(180deg)
+
   .hidingPanelContent
     width: 100%
     height: 100%
@@ -70,5 +79,5 @@
       .pinInactive
         color: #424242
 
-
-
+  .hidingPanelContentOpaque
+    opacity: 1;