OHIFVIEWER17: Hiding Panel shall be appear when mouse is over on panel, hiding panel shall be hidden when mouse is away from panel.

OHIFVIEWER18: Pin/Unpin hiding panel

LesionTracker/client/components/viewer.styl

@@ -7,8 +7,13 @@
 
 #viewportAndLesionTable
   height: 100%
-  width: calc(100% - 120px)
+  width: 99%
   float: left
+  -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;
 
 #imageViewerViewports
   .viewportContainer

Packages/lesiontracker/client/components/lesionTable/lesionTable.js

@@ -241,9 +241,16 @@ Template.lesionTable.events({
 
         $(document).on('mousemove', function(e) {
             var topPosition = e.pageY - pY;
+            var newHeight = startHeight - topPosition;
+
+            // Min lesion table height = 5px
+            if(newHeight < 5) {
+                return;
+            }
+
             draggableParent.css({
                 top: topPosition,
-                height: startHeight - topPosition
+                height: newHeight
             });
 
             var viewportAndLesionTableHeight = $("#viewportAndLesionTable").height();

Packages/lesiontracker/client/components/studyDateList/studyDateList.styl

@@ -7,7 +7,6 @@
   margin: 0 auto 15px
   text-align: left
   width: 100%
-  border-top: 2px solid #777
 
   label
     font-weight: normal

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

@@ -1,15 +1,26 @@
 <template name="hidingPanel">
     <div class="hidingPanel">
-        <div class="toggleBtnContainer">
+        <i class="arrowIcon fa fa-angle-double-right"></i>
-            <button id="btnCollapse">
+        <div class="hidingPanelContent">
-                <i id="btnCollapseIcon" class="btnCollapseIcon fa fa-angle-left fa-lg"></i>
+            <div class="panelPinContainer">
-            </button>
+                {{#if panelPinned}}
-        </div>
+                    <button class="btnPin btnPinActive">
-        <div class="studyBrowserContainer">
+                        <i class="pinIcon pinActive fa fa-thumb-tack"></i>
+                    </button>
+                {{else}}
+                    <button class="btnPin btnPinInactive">
+                        <i class="pinIcon pinInactive fa fa-thumb-tack"></i>
+                    </button>
+                {{/if}}
+            </div>
+
             {{#if studyDateIsShown}}
                 {{> studyDateList}}
             {{/if}}
-            {{> studyBrowser}}
+
+            <div class="studyBrowserContainer">
+                {{> studyBrowser}}
+            </div>
         </div>
     </div>
 </template>

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

@@ -1,51 +1,75 @@
 Template.hidingPanel.events({
-    'click button#btnCollapse': function(e,template) {
+    'mouseover div.hidingPanel': function(e, template) {
 
-        // Check hidingPanel is open or not
+        if (!template.panelPinned.get()) {
-        var hidingPanelOpen = template.hidingPanelOpen.get();
-        hidingPanelOpen = !hidingPanelOpen;
-        template.hidingPanelOpen.set(hidingPanelOpen);
 
-        // Get hidingPanel width from hidingPanelWidth reactiveVar
+            var hidingPanel = $(e.currentTarget);
-        var contentId = this.contentId;
+            hidingPanel.css({
-        var hidingPanelElement = $("#"+contentId).find(".hidingPanel");
+                width: "120px"
-        var hidingPanelWidth = template.hidingPanelWidth.get();
+            });
-        if(hidingPanelWidth == 0) {
+
-            hidingPanelWidth = $(hidingPanelElement).width();
+            // Set panel as open
-            template.hidingPanelWidth.set(parseInt(hidingPanelWidth));
+            template.hidingPanelOpen.set(true);
+
+            // Rotate Arrow Icon
+            $('.arrowIcon').css( {'transform': 'rotate(180deg)'});
+
+            // 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();
         }
+    },
 
-        $(hidingPanelElement).toggleClass("hidingPanelCollapse");
+    'mouseout div.hidingPanel': function(e, template) {
 
-        var studyBrowserContainerElement = $("#"+contentId).find(".studyBrowserContainer");
+        if (!template.panelPinned.get()) {
-        $(studyBrowserContainerElement).toggleClass("studyBrowserContainerCollapse");
+            var hidingPanel = $(e.currentTarget);
+            hidingPanel.css({
+                width: "1%"
+            });
 
-        var btnCollapseIconElement = $("#"+contentId).find("#btnCollapseIcon");
+            // Set panel as closed
-        $(btnCollapseIconElement).toggleClass("btnCollapseIcon-collapse");
+            template.hidingPanelOpen.set(false);
 
-        // Set viewportAndLesionTable width according to hiding panel status
+            // Rotate Arrow Icon
-        if (hidingPanelOpen) {
+            $('.arrowIcon').css( {'transform': 'rotate(0deg)'});
-            var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable");
-            var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width();
-            $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth - hidingPanelWidth +"px");
 
-        } else {
+            // Set panel content opacity
-            var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable");
+            $(".hidingPanelContent").css("opacity", "0");
-            var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width();
+
-            $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth + hidingPanelWidth +"px");
+            // Calculate newWidth of viewportAndLesionTable
+            $("#viewportAndLesionTable").css("width", "99%");
+
+            resizeViewportElements();
         }
+    },
 
-
+    'click button.btnPin': function(e, template) {
+        var panelPinned = template.panelPinned.get();
+        panelPinned = !panelPinned;
+        template.panelPinned.set(panelPinned);
     }
 });
 
 Template.hidingPanel.helpers({
     'studyDateIsShown': function() {
         return true;
+    },
+    'panelPinned': function() {
+        return Template.instance().panelPinned.get();
+    },
+    'hidingPanelOpen': function() {
+        return Template.instance().hidingPanelOpen.get();
     }
 });
 
 Template.hidingPanel.onCreated(function() {
-    this.hidingPanelOpen =  new ReactiveVar(true);
+    this.hidingPanelOpen =  new ReactiveVar(false);
-    this.hidingPanelWidth = new ReactiveVar(0);
+    this.panelPinned = new ReactiveVar(false);
 });

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

@@ -1,70 +1,74 @@
 
-.hidingPanel,.hidingPanelCollapse, .toggleBtnContainer, .studyBrowserContainer, .studyBrowserContainerCollapse, #btnCollapse,.btnCollapseIcon, .btnCollapseIcon-collapse, .viewportStyle {
+.hidingPanel,.studyBrowserContainer, .arrowIcon
+
+  -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: 1%
+  height: 100%
+  position: relative
+  float: left
+
+  .arrowIcon
+    color: white
+    float: left
+    margin-top: 8px
+    margin-left: 2px;
+    line-height: 12px
+
+  .hidingPanelContent
+    width: 100%
+    height: 100%
+    margin: 0 auto
+    float: none
+    opacity: 0
+    border: 1px solid #666
+
+    .studyBrowserContainer
+      position: absolute
+      display: block
+      width: 100%
+      bottom: 0
+      left: 0
+      right: 0
+      top: 100px
+
+    .panelPinContainer
+      width: 100%
+      height: auto
+      text-align: right
+      vertical-align: center
+      padding: 0
+      margin: 0
+      border-bottom: 1px solid #666
+
+      .btnPin
+        margin: 1px
+        color: #424242
+        outline: none
+        background-color: #202020
+        border: solid 1px #424242
+        border-radius: 3px
+
+      .btnPinActive
+        border-color: white
+
+      .btnPinInactive
+        border: solid 1px #424242
+
+      .btnPin:hover
+        border: solid 1px lightgray
+
+      .pinActive
+        color: #FFFFFF
+
+      .pinInactive
+        color: #424242
 
-  -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);
-}