othmane/ohif-viewer
1
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 2016-06-08 12:03:43 -03:00 committed by Erik Ziegler
parent 7c92b9a7dd
commit 4ed13b25b2
12 changed files with 168 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Packages/design/components/roundedButtonGroup/roundedButtonGroup.html
View File

@ -1,7 +1,21 @@
<template name="roundedButtonGroup">
<div class="{{class}} viewerRoundedButtonGroup clearfix center-table">
<div class="{{class}} roundedButtonGroup clearfix center-table">
{{#each item in this.options}}
<a class="viewerRoundedButton noselect {{inlineIf value.get item.key 'active'}}" data-key="{{item.key}}">{{item.text}}</a>
<a class="roundedButtonWrapper noselect {{inlineIf getValue item.value 'active'}}" data-value="{{item.value}}">
<div class="roundedButton">
{{#if item.svgLink}}
<svg style="width: {{item.svgWidth}}px; height: {{item.svgHeight}}px">
<use xlink:href="{{item.svgLink}}"></use>
</svg>
{{/if}}
{{#if item.text}}
<span>{{item.text}}</span>
{{/if}}
</div>
{{#if item.bottomLabel}}
<div class="bottomLabel">{{item.bottomLabel}}</div>
{{/if}}
</a>
{{/each}}
</div>
</template>

41
Packages/design/components/roundedButtonGroup/roundedButtonGroup.js
View File

@ -1,15 +1,40 @@
Template.roundedButtonGroup.onRendered(() => {
Template.roundedButtonGroup.onCreated(() => {
const instance = Template.instance();
const value = instance.data.value;
if (!value.get()) {
value.set(instance.data.options[0].key);
const reactiveValue = instance.data.value;
// Get the value for ReactiveVar or ReactiveDict objects
instance.getValue = () => {
return reactiveValue.get(instance.data.key);
};
// Set the value for ReactiveVar or ReactiveDict objects
instance.setValue = value => {
const args = [value];
if (reactiveValue instanceof ReactiveDict) {
args.unshift(instance.data.key);
}
reactiveValue.set(...args);
};
// Initialize the value with the first option if there's no value set and options are not toggleable
if (!instance.getValue() && !instance.data.toggleable) {
instance.setValue(instance.data.options[0].value);
}
});
Template.roundedButtonGroup.events({
'click [data-key]'(event, instance) {
const $element = $(event.currentTarget);
const key = $element.attr('data-key');
instance.data.value.set(key);
'click [data-value]'(event, instance) {
event.preventDefault();
const $target = $(event.currentTarget);
const nullValue = $target.hasClass('active') && instance.data.toggleable;
const value = nullValue ? null : $target.attr('data-value');
instance.setValue(value);
}
});
Template.roundedButtonGroup.helpers({
getValue() {
return Template.instance().getValue();
}
});

78
Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
View File

@ -4,43 +4,67 @@ $height = 25px
$borderColorActive = #3C8074
$textColorActive = #2D2D2D
.viewerRoundedButtonGroup
.roundedButtonGroup
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
font-weight: 500
position: relative
.viewerRoundedButton
background: $darkUiColor
border: 1px $uiBorderColorDark solid
color: $textSecondaryColor
.roundedButtonWrapper
cursor: pointer
display: inline-block
margin-left: -1px
float: left
font-size: 11px
height: $height
line-height: $height
padding: 0 15px
margin-left: -1px
text-decoration: none
text-transform: uppercase
transition: $sidebarTransition
-webkit-transition: $sidebarTransition
-ms-transition: $sidebarTransition
-o-transition: $sidebarTransition
-moz-transition: $sidebarTransition
z-index: 1
text-align: center
&.active
background: $activeColor
color: $textColorActive
border-color: $borderColorActive
z-index: 2
.roundedButton
align-items: center
background-color: $darkUiColor
border: 1px $uiBorderColorDark solid
color: $textSecondaryColor
display: flex
font-size: 11px
font-weight: 500
justify-content: center
height: $height
line-height: $height
padding: 0 22px
text-transform: uppercase
transition: transition($sidebarTransition)
svg
fill: $defaultColor
stroke: $defaultColor
svg
span
margin: 0 2px
.bottomLabel
color: $textSecondaryColor
font-size: 12px
line-height: 12px
margin-top: 8px
&:first-child
margin-left: 0
border-bottom-left-radius: $height
border-top-left-radius: $height
.roundedButton
border-bottom-left-radius: $height
border-top-left-radius: $height
&:last-child
&:last-child .roundedButton
border-bottom-right-radius: $height
border-top-right-radius: $height
&:hover .roundedButton
background-color: $boxBackgroundColor
color: $darkUiColor
&.active .roundedButton
background-color: $activeColor
border-color: $borderColorActive
color: $textColorActive
&:hover .roundedButton
&.active .roundedButton
svg
fill: $darkUiColor
stroke: $darkUiColor

1
Packages/design/styles/variables.styl
View File

@ -6,6 +6,7 @@ $uiBorderColor = #436270
$uiBorderColorDark = #3C5D80
$darkUiColor = #16202B
$primaryBackgroundColor = #000000
$boxBackgroundColor = #3E5975
// Text Colors
$textPrimaryColor = #ffffff

10
Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.html
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>

33
Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.js
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;
}
});

4
Packages/lesiontracker/client/components/lesionTable/lesionTable.js
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'
}]
};

1
Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
View File

@ -1,6 +1,5 @@
@import "{design}/app"
$boxBackgroundColor = #3E5975
$boxBorderColor = transparent
$boxHoverBackgroundColor = #14191E
$boxHoverBorderColor = #2d4660

18
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html
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>

56
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
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');

79
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
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

10
Packages/lesiontracker/client/components/viewer/viewer.js
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;