Some style changes to the study panel sidebar

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

@@ -1,78 +1,82 @@
 Template.hidingPanel.events({
     'mouseover div.hidingPanel': function(e, template) {
-
-        if (!template.panelPinned.get()) {
-
-            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 isPinned = template.isPinned.get();
+        if (isPinned) {
+            return;
         }
+
+        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) {
-
-        if (!template.panelPinned.get()) {
-            var hidingPanel = $(e.currentTarget);
-            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 isPinned = template.isPinned.get();
+        if (isPinned) {
+            return;
         }
+
+        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();
-        panelPinned = !panelPinned;
-        template.panelPinned.set(panelPinned);
-        if(panelPinned) {
+        var isPinned = template.isPinned.get();
+        isPinned = !isPinned;
+
+        template.isPinned.set(isPinned);
+
+        var mainElements = $('#viewportAndLesionTable');
+        if (isPinned) {
             // Calculate newWidth of viewportAndLesionTable
-            var viewerWidth = $("#viewer").width();
-            var newPercentageOfviewportAndLesionTable = 100 - 122 / viewerWidth *100;
-            $("#viewportAndLesionTable").css("width", newPercentageOfviewportAndLesionTable+"%");
-
-            resizeViewportElements();
-        }else{
-
+            var viewerWidth = $('#viewer').width();
+            var newWidth = 100 - 122 / viewerWidth * 100;
+            mainElements.css('width', newWidth + '%');
+        } else {
             // Calculate newWidth of viewportAndLesionTable
-            $("#viewportAndLesionTable").css("width", "99%");
-
-            resizeViewportElements();
+            mainElements.css('width', '99%');
         }
+
+        resizeViewportElements();
     }
 });
 
 Template.hidingPanel.helpers({
-    'studyDateIsShown': function() {
+    studyDateIsShown: function() {
         return true;
     },
-    'panelPinned': function() {
-        return Template.instance().panelPinned.get();
-    },
-    'hidingPanelOpen': function() {
-        return Template.instance().hidingPanelOpen.get();
+    isPinned: function() {
+        return Template.instance().isPinned.get();
     }
 });
 
 Template.hidingPanel.onCreated(function() {
-    this.hidingPanelOpen =  new ReactiveVar(false);
-    this.panelPinned = new ReactiveVar(false);
-});
+    this.panelOpen = new ReactiveVar(false);
+    this.isPinned = new ReactiveVar(false);
+});