hidingPanel is added for thumbnails

LesionTracker/client/body.styl

@@ -1,5 +1,18 @@
 body
   background-color: #202020
-  
-#search-panel-head
-  background-color: #8845AB
+
+table#tblStudyList thead > tr {
+ background-color: #424242;
+  color: white;
+}
+table#tblStudyList tbody > tr:nth-child(even) {
+   background-color: #CCC;
+ }
+table#tblStudyList tbody > tr:nth-child(odd) {
+  background-color: #DDD;
+}
+table#tblStudyList tbody > tr:hover{
+  background-color: #009BD2
+  color: white
+}
+

Packages/viewerbase/components/basic/hidingPanel/hidingPanel.html

@@ -1,5 +1,12 @@
 <template name="hidingPanel">
     <div class="hidingPanel">
-        {{> studyBrowser}}
+        <div class="toggleBtnContainer">
+            <button id="btnCollapse">
+                <i id="btnCollapseIcon" class="btnCollapseIcon fa fa-angle-left fa-lg"></i>
+            </button>
+        </div>
+        <div class="studyBrowserContainer">
+            {{> studyBrowser}}
+        </div>
     </div>
 </template>

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

@@ -0,0 +1,45 @@
+Template.hidingPanel.events({
+    'click button#btnCollapse': function(e,template) {
+
+        // Check hidingPanel is open or not
+        var hidingPanelOpen = template.hidingPanelOpen.get();
+        hidingPanelOpen = !hidingPanelOpen;
+        template.hidingPanelOpen.set(hidingPanelOpen);
+
+        // Get hidingPanel width from hidingPanelWidth reactiveVar
+        var contentId = this.contentId;
+        var hidingPanelElement = $("#"+contentId).find(".hidingPanel");
+        var hidingPanelWidth = template.hidingPanelWidth.get();
+        if(hidingPanelWidth == 0) {
+            hidingPanelWidth = $(hidingPanelElement).width();
+            template.hidingPanelWidth.set(parseInt(hidingPanelWidth));
+        }
+
+        $(hidingPanelElement).toggleClass("hidingPanelCollapse");
+
+        var studyBrowserContainerElement = $("#"+contentId).find(".studyBrowserContainer");
+        $(studyBrowserContainerElement).toggleClass("studyBrowserContainerCollapse");
+
+        var btnCollapseIconElement = $("#"+contentId).find("#btnCollapseIcon");
+        $(btnCollapseIconElement).toggleClass("btnCollapseIcon-collapse");
+
+        // Set viewportAndLesionTable width according to hiding panel status
+        if (hidingPanelOpen) {
+            var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable");
+            var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width();
+            $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth - hidingPanelWidth +"px");
+
+        } else {
+            var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable");
+            var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width();
+            $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth + hidingPanelWidth +"px");
+        }
+
+
+    }
+});
+
+Template.hidingPanel.onCreated(function() {
+    this.hidingPanelOpen =  new ReactiveVar(true);
+    this.hidingPanelWidth = new ReactiveVar(0);
+});

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

@@ -1,6 +1,70 @@
-.hidingPanel
-  width: 120px
-  height: 100%
-  padding-top: 35px
-  position: relative
-  float: left
+
+.hidingPanel,.hidingPanelCollapse, .toggleBtnContainer, .studyBrowserContainer, .studyBrowserContainerCollapse, #btnCollapse,.btnCollapseIcon, .btnCollapseIcon-collapse, .viewportStyle {
+
+  -o-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -moz-transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.hidingPanel {
+  width: 120px;
+  height: 100%;
+  position: relative;
+  float: left;
+}
+
+.hidingPanelCollapse{
+  width: 0px;
+}
+
+.toggleBtnContainer{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 25px;
+  height: 25px;
+}
+
+.studyBrowserContainer {
+  position: absolute;
+  display: block;
+  margin-top: 30px;
+  height: calc(100% - 30px);
+  width: 100%;
+  opacity: 1;
+}
+
+.studyBrowserContainerCollapse {
+  opacity: 0;
+  width: 0px;
+
+}
+.studyBrowserContainerCollapseDisplay {
+  display: none;
+}
+
+#btnCollapse{
+  position: absolute;
+  display: block;
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  padding: 0;
+  border: 0;
+  border-top: 1px solid #e6e6e6;
+  background: #f6f6f6;
+  color: #666;
+  font-size: 0.875rem;
+  text-align: center;
+  cursor: pointer;
+}
+
+.btnCollapseIcon-collapse{
+  -moz-transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+

Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl

@@ -6,4 +6,4 @@
   overflow-y: auto
   overflow-x: hidden
   background-color: black
-  padding-bottom: 20px
+  padding-bottom: 20px

Packages/viewerbase/package.js

@@ -27,6 +27,7 @@ Package.onUse(function (api) {
     api.addFiles('components/basic/notFound/notFound.html', 'client');
 
     api.addFiles('components/basic/hidingPanel/hidingPanel.html', 'client');
+    api.addFiles('components/basic/hidingPanel/hidingPanel.js', 'client');
     api.addFiles('components/basic/hidingPanel/hidingPanel.styl', 'client');
 
     // Study Browser components