diff --git a/LesionTracker/client/components/viewer.styl b/LesionTracker/client/components/viewer.styl index 591913716..26674498a 100644 --- a/LesionTracker/client/components/viewer.styl +++ b/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; diff --git a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.js b/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.js index b3acfca0a..a09948028 100644 --- a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.js +++ b/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(); + } } }); diff --git a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.styl b/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.styl index f361e97aa..f5ece37ca 100644 --- a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.styl +++ b/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; \ No newline at end of file