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

Some style changes to the study panel sidebar

Browse Source
This commit is contained in:
Erik Ziegler 2016-01-11 15:08:00 +01:00
parent 02a5b6c4b0
commit 798fe5a3dc
6 changed files with 107 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Packages/lesiontracker/client/components/studyDateList/studyDateList.html
View File

@ -4,7 +4,7 @@
<span class="loading"><i class="fa fa-spinner fa-spin"></i></span>
<select id="selectStudyDate">
{{#each relatedStudies}}
<option value="{{studyInstanceUid}}" selected={{selected}}>{{formatDA studyDate}}</option>
<option value="{{studyInstanceUid}}" selected={{selected}}>{{formatDA studyDate 'DD/MM/YYYY'}}</option>
{{/each}}
</select>
</div>

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

@ -1,18 +1,19 @@
#selectStudyDate
color: black
background-color: #666
border-color: #666
.studyDateList
margin: 0 auto 15px
text-align: left
width: 100%
#selectStudyDate
color: black
background-color: #666
border-color: #666
margin: 5px
width: 90%
label
font-weight: normal
color: #666
padding-top: 5px
padding-left: 5px
padding: 5px
.loading
display: none

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

@ -1,23 +1,17 @@
<template name="hidingPanel">
<div class="hidingPanel">
<i class="arrowIcon fa fa-angle-double-right"></i>
<div class="hidingPanel {{#if isPinned}}pinned{{/if}}">
<div class="iconContainer">
{{#unless isPinned}}
<i class="arrowIcon fa fa-angle-double-right"></i>
{{/unless}}
<button class="btn btn-sm btn-primary btnPin {{#if isPinned}}active{{/if}}">
<i class="fa fa-thumb-tack"></i>
</button>
</div>
<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}}
<div class="studyBrowserContainer">
{{> studyBrowser}}
</div>

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

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

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

@ -1,81 +1,46 @@
.hidingPanel, .hidingPanelContent, .studyBrowserContainer, .arrowIcon, .arrowIconRotate
-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: absolute
left: 0px
left: 0
top: 70px
bottom: 0px
bottom: 0
z-index: 10
background-color: black
border: 1px solid #666
.arrowIcon
color: white
float: left
margin-top: 8px
margin-left: 2px;
line-height: 12px
&.pinned
border: 1px solid transparent
.arrowIconRotate
-ms-transform: rotate(180deg)
-webkit-transform: rotate(180deg)
transform: rotate(180deg)
.iconContainer
width: 100%
height: 35px
overflow: hidden
.arrowIcon
color: white
margin: 0px 3px
font-size: 15pt
line-height: 35px
.btnPin
float: right
margin: 3px
outline: none
.hidingPanelContent
position: absolute
left: -130px
width: 100%
height: 100%
margin: 1px auto
float: none
opacity: 0
border: 1px solid #666
text-align: center
.studyBrowserContainer
position: absolute
display: block
width: 120px
left: 0
right: 0
top: 100px
height: calc(100% - 150px)
.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
.hidingPanel, .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

2
Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.styl
View File

@ -2,7 +2,7 @@
float: left
height: 100%
width: 100%
min-width: 120px
//min-width: 120px
overflow-y: auto
overflow-x: hidden
background-color: black