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

LT-247: making rounded button group component toggleable

Browse Source
This commit is contained in:
Bruno Alves de Faria authored and Erik Ziegler committed 2016-07-22 11:00:16 +02:00
1 parent 7c92b9a7dd
commit 4ed13b25b2
12 files changed
+168 -181
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.html
+5 -5
View File
@@ -1,19 +1,19 @@
<template name="flexboxLayout">
<div class="viewerSection">
<div class="sidebarMenu sidebar-left {{ #if studySidebarOpen }}sidebar-open{{/if}}">
<div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
<div class="timepointButtonContainer p-t-2">
{{>roundedButtonGroup buttonGroupData}}
{{>roundedButtonGroup sidebarButtonGroupData}}
</div>
<hr class="m-y-0">
{{>studyTimepointBrowser timepointViewType=timepointViewType}}
</div>
<div class="mainContent {{ #if studySidebarOpen }}sidebar-left-open{{/if}} {{ #if rightSidebarOpen }}sidebar-right-open{{/if}}">
<div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
{{>viewerMain }}
</div>
<div class="sidebarMenu sidebar-right {{ #if lesionSidebarOpen }}sidebar-open{{/if}}">
<div class="sidebarMenu sidebar-right {{#if lesionSidebarOpen}}sidebar-open{{/if}}">
{{>lesionTable }}
</div>
<div class="sidebarMenu sidebar-right {{ #if additionalMeasurementsSidebarOpen }}sidebar-open{{/if}}">
<div class="sidebarMenu sidebar-right {{#if additionalMeasurementsSidebarOpen}}sidebar-open{{/if}}">
{{>additionalMeasurements }}
</div>
</div>
Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.js
+13 -20
View File
@@ -4,20 +4,18 @@ Template.flexboxLayout.onCreated(() => {
instance.timepointViewType = new ReactiveVar();
});
var resizeTimeout;
let resizeTimeout;
Template.flexboxLayout.onRendered(() => {
const instance = Template.instance();
instance.autorun(function() {
instance.autorun(() => {
Meteor.clearTimeout(resizeTimeout);
// Trigger a resize any time the layout state changes
var studySidebarOpen = instance.state.get('studySidebarOpen');
var lesionSidebarOpen = instance.state.get('lesionSidebarOpen');
instance.state.get('leftSidebar');
instance.state.get('rightSidebar');
var additionalMeasurementsSidebarOpen = instance.state.get('additionalMeasurementsSidebarOpen');
resizeTimeout = Meteor.setTimeout(function() {
resizeTimeout = Meteor.setTimeout(() => {
handleResize();
}, 300);
});
@@ -28,39 +26,34 @@ Template.flexboxLayout.helpers({
return Template.instance().timepointViewType;
},
buttonGroupData() {
sidebarButtonGroupData() {
const instance = Template.instance();
return {
value: instance.timepointViewType,
options: [{
key: 'key',
value: 'key',
text: 'Key Timepoints'
}, {
key: 'all',
value: 'all',
text: 'All Timepoints'
}]
};
},
studySidebarOpen() {
leftSidebarOpen() {
const instance = Template.instance();
return instance.state.get('studySidebarOpen');
return instance.state.get('leftSidebar');
},
lesionSidebarOpen() {
const instance = Template.instance();
return instance.state.get('lesionSidebarOpen');
return Template.instance().state.get('rightSidebar') === 'lesions';
},
additionalMeasurementsSidebarOpen() {
const instance = Template.instance();
return instance.state.get('additionalMeasurementsSidebarOpen');
return Template.instance().state.get('rightSidebar') === 'additional';
},
rightSidebarOpen() {
const instance = Template.instance();
const lesionSidebarOpen = instance.data.state.get('lesionSidebarOpen');
const additionalMeasurementsSidebarOpen = instance.data.state.get('additionalMeasurementsSidebarOpen');
return lesionSidebarOpen || additionalMeasurementsSidebarOpen;
return Template.instance().state.get('rightSidebar') !== null;
}
});
Packages/lesiontracker/client/components/lesionTable/lesionTable.js
+2 -2
View File
@@ -12,10 +12,10 @@ Template.lesionTable.helpers({
return {
value: instance.lesionTableLayout,
options: [{
key: 'comparison',
value: 'comparison',
text: 'Comparison'
}, {
key: 'key',
value: 'key',
text: 'Key Timepoints'
}]
};
Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
-1
View File
@@ -1,6 +1,5 @@
@import "{design}/app"
$boxBackgroundColor = #3E5975
$boxBorderColor = transparent
$boxHoverBackgroundColor = #14191E
$boxHoverBorderColor = #2d4660
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html
+7 -11
View File
@@ -1,14 +1,7 @@
<template name="toolbarSection">
<div class="toolbarSection">
<div id="studySidebarToggle" class="pull-left toolbarSectionButton">
<div class="capsule svgContainer">
<svg>
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-studies"></use>
</svg>
</div>
<div class="buttonLabel">
Studies
</div>
<div class="pull-left">
{{>roundedButtonGroup leftSidebarToggleButtonData}}
</div>
<div class="pull-left">
{{ #each toolbarButtons }}
@@ -33,7 +26,10 @@
<div class="pull-right toolbarSectionEntry">
{{ >caseProgress }}
</div>
<div class="capsule-group pull-right">
<div class="pull-right">
{{>roundedButtonGroup rightSidebarToggleButtonData}}
</div>
<!-- <div class="capsule-group pull-right">
<div id="lesionSidebarToggle" class="capsule-entry">
<div class="svgContainer capsule">
<svg>
@@ -54,7 +50,7 @@
Additional
</div>
</div>
</div>
</div> -->
<div id="toggleHUD" class="pull-right toolbarSectionButton">
<div class="svgContainer">
<svg>
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
+36 -20
View File
@@ -1,10 +1,40 @@
Template.toolbarSection.onRendered(function() {
var instance = this;
instance.state = instance.data.state;
});
Template.toolbarSection.helpers({
leftSidebarToggleButtonData() {
const instance = Template.instance();
return {
toggleable: true,
key: 'leftSidebar',
value: instance.data.state,
options: [{
value: 'studies',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-studies',
svgWidth: 15,
svgHeight: 13,
bottomLabel: 'Studies'
}]
};
},
rightSidebarToggleButtonData() {
const instance = Template.instance();
return {
toggleable: true,
key: 'rightSidebar',
value: instance.data.state,
options: [{
value: 'lesions',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-measurements-lesions',
svgWidth: 18,
svgHeight: 10,
bottomLabel: 'Lesions'
}, {
value: 'additional',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-measurements-additional',
svgWidth: 14,
svgHeight: 13,
bottomLabel: 'Additional'
}]
};
},
toolbarButtons: function() {
var buttonData = [];
buttonData.push({
@@ -61,20 +91,6 @@ Template.toolbarSection.helpers({
});
Template.toolbarSection.events({
'click #studySidebarToggle': function(event, instance) {
var isOpen = instance.data.state.get('studySidebarOpen');
instance.data.state.set('studySidebarOpen', !isOpen);
},
'click #lesionSidebarToggle': function(event, instance) {
var isOpen = instance.data.state.get('lesionSidebarOpen');
instance.data.state.set('lesionSidebarOpen', !isOpen);
instance.data.state.set('additionalMeasurementsSidebarOpen', false);
},
'click #additionalMeasurementsSidebarToggle': function(event, instance) {
var isOpen = instance.data.state.get('additionalMeasurementsSidebarOpen');
instance.data.state.set('additionalMeasurementsSidebarOpen', !isOpen);
instance.data.state.set('lesionSidebarOpen', false);
},
// TODO: Inherit these from toolbar template somehow
'click .imageViewerTool': function(e) {
$(e.currentTarget).tooltip('hide');
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
-79
View File
@@ -5,78 +5,6 @@
width: 100%
border-bottom: $uiBorderColor $uiBorderThickness solid
.capsule-group
display: inline-block
div.capsule-entry
display: inline-block
color: $defaultColor
fill: $defaultColor
stroke: $defaultColor
height: $toolbarHeight
min-width: 30px
cursor: pointer
text-align: center
margin: 0
div.capsule
width: 66px
height: 26px
&:first-child
.capsule
border-radius: 57px
background-color: #16202b
border: solid 1px #3c5d80
border-right: none
border-top-right-radius: 0
border-bottom-right-radius: 0
&:last-child
.capsule
border-radius: 57px
background-color: #16202b
border: solid 1px #3c5d80
border-left: none
border-top-left-radius: 0
border-bottom-left-radius: 0
&.disabled
opacity: 0.5
cursor: not-allowed
.svgContainer
margin: 0 auto
text-align: center
.capsule
width: 62px
height: 26px
border-radius: 100px
background-color: #16202b
border: solid 1px #3c5d80
svg
background-color: transparent
margin: 5px
width: 17px
height: 17px
&:active, &.active
color: $activeColor
svg
fill: $activeColor
stroke: $activeColor
&:hover
color: $hoverColor
svg
fill: $hoverColor
stroke: $hoverColor
.toolbarSectionButton
display: inline-block
color: $defaultColor
@@ -99,13 +27,6 @@
margin: 0 auto
text-align: center
.capsule
width: 62px
height: 26px
border-radius: 100px
background-color: #16202b
border: solid 1px #3c5d80
svg
background-color: transparent
margin: 2px
Packages/lesiontracker/client/components/viewer/viewer.js
+4 -6
View File
@@ -1,7 +1,6 @@
Session.setDefault('activeViewport', false);
Session.setDefault('studySidebarOpen', false);
Session.setDefault('lesionSidebarOpen', false);
Session.setDefault('additionalMeasurementsSidebarOpen', false);
Session.setDefault('leftSidebar', null);
Session.setDefault('rightSidebar', null);
Template.viewer.onCreated(function() {
// Attach the Window resize listener
@@ -11,9 +10,8 @@ Template.viewer.onCreated(function() {
var instance = this;
instance.data.state = new ReactiveDict();
instance.data.state.set('studySidebarOpen', Session.get('studySidebarOpen'));
instance.data.state.set('lesionSidebarOpen', Session.get('lesionSidebarOpen'));
instance.data.state.set('additionalMeasurementsSidebarOpen', Session.get('additionalMeasurementsSidebarOpen'));
instance.data.state.set('leftSidebar', Session.get('leftSidebar'));
instance.data.state.set('rightSidebar', Session.get('rightSidebar'));
var contentId = this.data.contentId;