Some style changes to the study panel sidebar

Packages/lesiontracker/client/components/studyDateList/studyDateList.html

@@ -4,7 +4,7 @@
         <span class="loading"><i class="fa fa-spinner fa-spin"></i></span>
         <select id="selectStudyDate">
             {{#each relatedStudies}}
-                <option value="{{studyInstanceUid}}" selected={{selected}}>{{formatDA studyDate}}</option>
+                <option value="{{studyInstanceUid}}" selected={{selected}}>{{formatDA studyDate 'DD/MM/YYYY'}}</option>
             {{/each}}
         </select>
     </div>

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

@@ -1,18 +1,19 @@
-#selectStudyDate
-  color: black
-  background-color: #666
-  border-color: #666
-
 .studyDateList
   margin: 0 auto 15px
   text-align: left
   width: 100%
 
+  #selectStudyDate
+    color: black
+    background-color: #666
+    border-color: #666
+    margin: 5px
+    width: 90%
+
   label
     font-weight: normal
     color: #666
-    padding-top: 5px
+    padding: 5px
-    padding-left: 5px
 
   .loading
     display: none

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

@@ -1,23 +1,17 @@
 <template name="hidingPanel">
-    <div class="hidingPanel">
+    <div class="hidingPanel {{#if isPinned}}pinned{{/if}}">
-        <i class="arrowIcon fa fa-angle-double-right"></i>
+        <div class="iconContainer">
+            {{#unless isPinned}}
+            <i class="arrowIcon fa fa-angle-double-right"></i>
+            {{/unless}}
+            <button class="btn btn-sm btn-primary btnPin {{#if isPinned}}active{{/if}}">
+                <i class="fa fa-thumb-tack"></i>
+            </button>
+        </div>
         <div class="hidingPanelContent">
-            <div class="panelPinContainer">
-                {{#if panelPinned}}
-                    <button class="btnPin btnPinActive">
-                        <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}}
-
             <div class="studyBrowserContainer">
                 {{> studyBrowser}}
             </div>

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

@@ -1,78 +1,82 @@
 Template.hidingPanel.events({
     'mouseover div.hidingPanel': function(e, template) {
-
+        var isPinned = template.isPinned.get();
-        if (!template.panelPinned.get()) {
+        if (isPinned) {
-
+            return;
-            var hidingPanel = $(e.currentTarget);
-            hidingPanel.css({
-                width: "122px"
-            });
-
-            // Set panel as open
-            template.hidingPanelOpen.set(true);
-
-            // Rotate Arrow Icon
-            $('.arrowIcon').css( {'transform': 'rotate(180deg)'});
-
-            // Set panel content opacity
-            $(".hidingPanelContent").css("opacity", "1");
         }
+
+        var hidingPanel = $(e.currentTarget);
+        hidingPanel.css({
+            width: '122px'
+        });
+
+        // Set panel as open
+        template.panelOpen.set(true);
+
+        // Rotate Arrow Icon
+        $('.arrowIcon').addClass('fa-flip-horizontal');
+
+        // Set panel content opacity
+        //hidingPanel.find('.hidingPanelContent').css('opacity', '1');
+        hidingPanel.find('.hidingPanelContent').css({
+            transform: 'translate(130px)'
+        });
     },
 
     'mouseout div.hidingPanel': function(e, template) {
-
+        var isPinned = template.isPinned.get();
-        if (!template.panelPinned.get()) {
+        if (isPinned) {
-            var hidingPanel = $(e.currentTarget);
+            return;
-            hidingPanel.css({
-                width: "1%"
-            });
-
-            // Set panel as closed
-            template.hidingPanelOpen.set(false);
-
-            // Rotate Arrow Icon
-            $('.arrowIcon').css( {'transform': 'rotate(0deg)'});
-
-            // Set panel content opacity
-            $(".hidingPanelContent").css("opacity", "0");
-
         }
+
+        var hidingPanel = $(e.currentTarget);
+        hidingPanel.css({
+            width: '1%'
+        });
+
+        // Set panel as closed
+        template.panelOpen.set(false);
+
+        // Rotate Arrow Icon
+        $('.arrowIcon').removeClass('fa-flip-horizontal');
+
+        // Set panel content opacity
+        //hidingPanel.find('.hidingPanelContent').css('opacity', '0');
+        hidingPanel.find('.hidingPanelContent').css({
+            transform: 'translate(-130px)'
+        });
     },
-
     'click button.btnPin': function(e, template) {
-        var panelPinned = template.panelPinned.get();
+        var isPinned = template.isPinned.get();
-        panelPinned = !panelPinned;
+        isPinned = !isPinned;
-        template.panelPinned.set(panelPinned);
+
-        if(panelPinned) {
+        template.isPinned.set(isPinned);
+
+        var mainElements = $('#viewportAndLesionTable');
+        if (isPinned) {
             // Calculate newWidth of viewportAndLesionTable
-            var viewerWidth = $("#viewer").width();
+            var viewerWidth = $('#viewer').width();
-            var newPercentageOfviewportAndLesionTable = 100 - 122 / viewerWidth *100;
+            var newWidth = 100 - 122 / viewerWidth * 100;
-            $("#viewportAndLesionTable").css("width", newPercentageOfviewportAndLesionTable+"%");
+            mainElements.css('width', newWidth + '%');
-
+        } else {
-            resizeViewportElements();
-        }else{
-
             // Calculate newWidth of viewportAndLesionTable
-            $("#viewportAndLesionTable").css("width", "99%");
+            mainElements.css('width', '99%');
-
-            resizeViewportElements();
         }
+
+        resizeViewportElements();
     }
 });
 
 Template.hidingPanel.helpers({
-    'studyDateIsShown': function() {
+    studyDateIsShown: function() {
         return true;
     },
-    'panelPinned': function() {
+    isPinned: function() {
-        return Template.instance().panelPinned.get();
+        return Template.instance().isPinned.get();
-    },
-    'hidingPanelOpen': function() {
-        return Template.instance().hidingPanelOpen.get();
     }
 });
 
 Template.hidingPanel.onCreated(function() {
-    this.hidingPanelOpen =  new ReactiveVar(false);
+    this.panelOpen = new ReactiveVar(false);
-    this.panelPinned = new ReactiveVar(false);
+    this.isPinned = new ReactiveVar(false);
-});
+});

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

@@ -1,81 +1,46 @@
-
-.hidingPanel, .hidingPanelContent, .studyBrowserContainer, .arrowIcon, .arrowIconRotate
-
-  -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: absolute
-  left: 0px
+  left: 0
   top: 70px
-  bottom: 0px
+  bottom: 0
   z-index: 10
   background-color: black
+  border: 1px solid #666
 
-  .arrowIcon
+  &.pinned
-    color: white
+    border: 1px solid transparent
-    float: left
-    margin-top: 8px
-    margin-left: 2px;
-    line-height: 12px
 
-  .arrowIconRotate
+  .iconContainer
-    -ms-transform: rotate(180deg)
+    width: 100%
-    -webkit-transform: rotate(180deg)
+    height: 35px
-    transform: rotate(180deg)
+    overflow: hidden
+
+    .arrowIcon
+      color: white
+      margin: 0px 3px
+      font-size: 15pt
+      line-height: 35px
+
+    .btnPin
+      float: right
+      margin: 3px
+      outline: none
 
   .hidingPanelContent
+    position: absolute
+    left: -130px
     width: 100%
     height: 100%
     margin: 1px auto
-    float: none
-    opacity: 0
-    border: 1px solid #666
-    text-align: center
 
     .studyBrowserContainer
-      position: absolute
-      display: block
-      width: 120px
-      left: 0
-      right: 0
-      top: 100px
       height: calc(100% - 150px)
 
-    .panelPinContainer
+.hidingPanel, .arrowIcon
-      width: 100%
+  -o-transition: all 0.3s ease-out
-      height: auto
+  -ms-transition: all 0.3s ease-out
-      text-align: right
+  -moz-transition: all 0.3s ease-out
-      vertical-align: center
+  -webkit-transition: all 0.3s ease-out
-      padding: 0
+  transition: all 0.3s ease-out
-      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

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

@@ -2,7 +2,7 @@
   float: left
   height: 100%
   width: 100%
-  min-width: 120px
+  //min-width: 120px
   overflow-y: auto
   overflow-x: hidden
   background-color: black