From c7f4662b6c48a96fcaae8604288c7ffcdf6fb744 Mon Sep 17 00:00:00 2001 From: Evren Ozkan Date: Tue, 3 Nov 2015 11:27:43 -0500 Subject: [PATCH] hidingPanel is added for thumbnails --- LesionTracker/client/body.styl | 19 ++++- .../basic/hidingPanel/hidingPanel.html | 9 ++- .../basic/hidingPanel/hidingPanel.js | 45 +++++++++++ .../basic/hidingPanel/hidingPanel.styl | 76 +++++++++++++++++-- .../studyBrowser/studyBrowser.styl | 2 +- Packages/viewerbase/package.js | 1 + 6 files changed, 141 insertions(+), 11 deletions(-) create mode 100644 Packages/viewerbase/components/basic/hidingPanel/hidingPanel.js diff --git a/LesionTracker/client/body.styl b/LesionTracker/client/body.styl index 498ae65e3..74a876044 100644 --- a/LesionTracker/client/body.styl +++ b/LesionTracker/client/body.styl @@ -1,5 +1,18 @@ body background-color: #202020 - -#search-panel-head - background-color: #8845AB + +table#tblStudyList thead > tr { + background-color: #424242; + color: white; +} +table#tblStudyList tbody > tr:nth-child(even) { + background-color: #CCC; + } +table#tblStudyList tbody > tr:nth-child(odd) { + background-color: #DDD; +} +table#tblStudyList tbody > tr:hover{ + background-color: #009BD2 + color: white +} + diff --git a/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.html b/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.html index 30dc3777a..f39e4fd27 100644 --- a/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.html +++ b/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.html @@ -1,5 +1,12 @@ \ No newline at end of file diff --git a/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.js b/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.js new file mode 100644 index 000000000..36e5c8a2b --- /dev/null +++ b/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.js @@ -0,0 +1,45 @@ +Template.hidingPanel.events({ + 'click button#btnCollapse': function(e,template) { + + // Check hidingPanel is open or not + var hidingPanelOpen = template.hidingPanelOpen.get(); + hidingPanelOpen = !hidingPanelOpen; + template.hidingPanelOpen.set(hidingPanelOpen); + + // 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)); + } + + $(hidingPanelElement).toggleClass("hidingPanelCollapse"); + + var studyBrowserContainerElement = $("#"+contentId).find(".studyBrowserContainer"); + $(studyBrowserContainerElement).toggleClass("studyBrowserContainerCollapse"); + + var btnCollapseIconElement = $("#"+contentId).find("#btnCollapseIcon"); + $(btnCollapseIconElement).toggleClass("btnCollapseIcon-collapse"); + + // Set viewportAndLesionTable width according to hiding panel status + if (hidingPanelOpen) { + var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable"); + var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width(); + $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth - hidingPanelWidth +"px"); + + } else { + var viewportAndLesionTableElement = $("#"+contentId).find("#viewportAndLesionTable"); + var viewportAndLesionTableElementWidth = $(viewportAndLesionTableElement).width(); + $(viewportAndLesionTableElement).width(viewportAndLesionTableElementWidth + hidingPanelWidth +"px"); + } + + + } +}); + +Template.hidingPanel.onCreated(function() { + this.hidingPanelOpen = new ReactiveVar(true); + this.hidingPanelWidth = new ReactiveVar(0); +}); \ No newline at end of file diff --git a/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.styl b/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.styl index 8f0c0ce70..afdbe7f55 100644 --- a/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.styl +++ b/Packages/viewerbase/components/basic/hidingPanel/hidingPanel.styl @@ -1,6 +1,70 @@ -.hidingPanel - width: 120px - height: 100% - padding-top: 35px - position: relative - float: left \ No newline at end of file + +.hidingPanel,.hidingPanelCollapse, .toggleBtnContainer, .studyBrowserContainer, .studyBrowserContainerCollapse, #btnCollapse,.btnCollapseIcon, .btnCollapseIcon-collapse, .viewportStyle { + + -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); +} + + diff --git a/Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl b/Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl index 1135a00fa..aec804342 100644 --- a/Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl +++ b/Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl @@ -6,4 +6,4 @@ overflow-y: auto overflow-x: hidden background-color: black - padding-bottom: 20px \ No newline at end of file + padding-bottom: 20px diff --git a/Packages/viewerbase/package.js b/Packages/viewerbase/package.js index 52cdca459..6177cb7dd 100644 --- a/Packages/viewerbase/package.js +++ b/Packages/viewerbase/package.js @@ -27,6 +27,7 @@ Package.onUse(function (api) { api.addFiles('components/basic/notFound/notFound.html', 'client'); api.addFiles('components/basic/hidingPanel/hidingPanel.html', 'client'); + api.addFiles('components/basic/hidingPanel/hidingPanel.js', 'client'); api.addFiles('components/basic/hidingPanel/hidingPanel.styl', 'client'); // Study Browser components