othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OHIFVIEWER17: Hiding Panel shall be appear when mouse is over on panel, hiding panel shall be hidden when mouse is away from panel.

Browse Source 
OHIFVIEWER18: Pin/Unpin hiding panel
This commit is contained in:
Evren Ozkan 2015-12-10 07:45:13 -05:00
parent e4112c44f1
commit 418d81f543
6 changed files with 155 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
LesionTracker/client/components/viewer.styl
View File

@ -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

9
Packages/lesiontracker/client/components/lesionTable/lesionTable.js
View File

@ -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();

1
Packages/lesiontracker/client/components/studyDateList/studyDateList.styl
View File

@ -7,7 +7,6 @@
margin: 0 auto 15px
text-align: left
width: 100%
border-top: 2px solid #777
label
font-weight: normal

25
Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.html
View File

@ -1,15 +1,26 @@
<template name="hidingPanel">
<div class="hidingPanel">
<div class="toggleBtnContainer">
<button id="btnCollapse">
<i id="btnCollapseIcon" class="btnCollapseIcon fa fa-angle-left fa-lg"></i>
</button>
</div>
<div class="studyBrowserContainer">
<i class="arrowIcon fa fa-angle-double-right"></i>
<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}}
{{> studyBrowser}}
<div class="studyBrowserContainer">
{{> studyBrowser}}
</div>
</div>
</div>
</template>

82
Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.js
View File

@ -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);
});

136
Packages/viewerbase/client/components/basic/hidingPanel/hidingPanel.styl
View File

@ -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);
}