From 418d81f5434aa70d3b92470d79f6e16422876467 Mon Sep 17 00:00:00 2001 From: Evren Ozkan Date: Thu, 10 Dec 2015 07:45:13 -0500 Subject: [PATCH] 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 +- .../components/lesionTable/lesionTable.js | 9 +- .../studyDateList/studyDateList.styl | 1 - .../basic/hidingPanel/hidingPanel.html | 25 +++- .../basic/hidingPanel/hidingPanel.js | 82 +++++++---- .../basic/hidingPanel/hidingPanel.styl | 136 +++++++++--------- 6 files changed, 155 insertions(+), 105 deletions(-) diff --git a/LesionTracker/client/components/viewer.styl b/LesionTracker/client/components/viewer.styl index a2beb0524..591913716 100644 --- a/LesionTracker/client/components/viewer.styl +++ b/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 diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.js b/Packages/lesiontracker/client/components/lesionTable/lesionTable.js index a9005b906..47b7e2fd1 100644 --- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.js +++ b/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(); diff --git a/Packages/lesiontracker/client/components/studyDateList/studyDateList.styl b/Packages/lesiontracker/client/components/studyDateList/studyDateList.styl index 0d610ae79..740c8efad 100644 --- a/Packages/lesiontracker/client/components/studyDateList/studyDateList.styl +++ b/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 diff --git a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.html b/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.html index bbc909480..caa2aff28 100644 --- a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.html +++ b/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.html @@ -1,15 +1,26 @@ \ No newline at end of file diff --git a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.js b/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.js index 6e95ae46a..b3acfca0a 100644 --- a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.js +++ b/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 - var hidingPanelOpen = template.hidingPanelOpen.get(); - hidingPanelOpen = !hidingPanelOpen; - template.hidingPanelOpen.set(hidingPanelOpen); + if (!template.panelPinned.get()) { - // 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)); + var hidingPanel = $(e.currentTarget); + hidingPanel.css({ + width: "120px" + }); + + // Set panel as open + 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"); - $(studyBrowserContainerElement).toggleClass("studyBrowserContainerCollapse"); + if (!template.panelPinned.get()) { + var hidingPanel = $(e.currentTarget); + hidingPanel.css({ + width: "1%" + }); - var btnCollapseIconElement = $("#"+contentId).find("#btnCollapseIcon"); - $(btnCollapseIconElement).toggleClass("btnCollapseIcon-collapse"); + // Set panel as closed + template.hidingPanelOpen.set(false); - // Set viewportAndLesionTable width according to hiding panel status - if (hidingPanelOpen) { - var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable"); - var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width(); - $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth - hidingPanelWidth +"px"); + // Rotate Arrow Icon + $('.arrowIcon').css( {'transform': 'rotate(0deg)'}); - } else { - var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable"); - var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width(); - $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth + hidingPanelWidth +"px"); + // Set panel content opacity + $(".hidingPanelContent").css("opacity", "0"); + + // 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.hidingPanelWidth = new ReactiveVar(0); + this.hidingPanelOpen = new ReactiveVar(false); + this.panelPinned = new ReactiveVar(false); }); \ No newline at end of file diff --git a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.styl b/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.styl index afdbe7f55..f361e97aa 100644 --- a/Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.styl +++ b/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); -}