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

Remove tabbed layout in favour of current Lesion Tracker design (OHIF-49)

Browse Source
This commit is contained in:
Erik Ziegler committed 2016-07-23 20:11:01 +02:00
1 parent 8b364ce9d0
commit 82e374b1e3
48 files changed
+371 -511
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

OHIFViewer/client/components/flexboxLayout/flexboxLayout.js
+2 -2
View File
@@ -1,8 +1,8 @@
Template.flexboxLayout.events({
'transitionend .sidebarMenu'(event, instance) {
'transitionend .sidebarMenu'() {
handleResize();
},
'transitionend .sidebar-option'(event, instance) {
'transitionend .sidebar-option'(event) {
// Prevent this event from bubbling
event.stopPropagation();
}
OHIFViewer/client/components/layout/layout.html
-13
View File
@@ -1,13 +0,0 @@
<template name="layout">
<nav class="topBar noselect" role="navigation">
<div class="clearfix p-x-1 p-t-1">
<a class="brandSection pull-left" href="http://www.ohif.org">
<img class="logoImage" src="/images/logo.png">
<div class="logoText">
Open Health Imaging Foundation
</div>
</a>
</div>
</nav>
{{> yield}}
</template>
OHIFViewer/client/components/layout/layout.styl
-27
View File
@@ -1,27 +0,0 @@
@import "{design}/app"
.topBar
margin-bottom: 0
border-radius: 0
background-color: $primaryBackgroundColor
border: none
height: $topBarHeight
color: $textPrimaryColor
transition(all 0.3s ease)
.brandSection
display: inline-block
height: 30px
text-decoration: none
img.logoImage
display: inline-block
height: 100%
max-height: 50px
margin: 0 5px
div.logoText
display: inline-block
font-family: $logoFontFamily
font-weight: $logoFontWeight
color: $textPrimaryColor
OHIFViewer/client/components/ohifViewer/ohifViewer.html
+18
View File
@@ -0,0 +1,18 @@
<template name="ohifViewer">
<div class="topBar noselect {{#if onStudyList}}studyList{{/if}}">
<div class="clearfix p-x-1 p-t-1">
<a class="brandSection pull-left" href="http://ohif.org">
<img class="logoImage" src="/images/logo.png">
<div class="logoText">
Open Health Imaging Foundation
</div>
</a>
{{ #if studyListToggleText }}
<div class="studyListLinkSection pull-left m-x-1 p-x-2 js-toggle-studyList">
{{studyListToggleText}}
</div>
{{ /if }}
</div>
</div>
{{> worklist }}
</template>
OHIFViewer/client/components/ohifViewer/ohifViewer.js
+58
View File
@@ -0,0 +1,58 @@
const worklistContentId = 'worklistTab';
const viewerContentId = 'viewerTab';
// Define the ViewerData global object
// If there is currently any Session data for this object,
// use this to repopulate the variable
Template.ohifViewer.onCreated(() => {
ViewerData = Session.get('ViewerData') || {};
});
Template.ohifViewer.onRendered(() => {
const templateData = Template.currentData();
if (templateData && templateData.studyInstanceUid) {
const studyInstanceUid = templateData.studyInstanceUid;
openNewTab(studyInstanceUid, studyInstanceUid);
} else {
// If there is a tab set as active in the Session,
// switch to that now.
const contentId = Session.get('activeContentId');
// TODO: Fix this it seems to be forcing two switches
switchToTab(contentId);
}
});
Template.ohifViewer.events({
'click .js-toggle-studyList'() {
const contentId = Session.get('activeContentId');
if (contentId !== worklistContentId) {
switchToTab(worklistContentId);
} else {
switchToTab(viewerContentId);
}
}
});
Template.ohifViewer.helpers({
studyListToggleText() {
const contentId = Session.get('activeContentId');
// If the Viewer has not been opened yet, 'Back to viewer' should
// not be displayed
const viewerContentExists = !!Object.keys(ViewerData).length;
if (!viewerContentExists) {
return;
}
if (contentId === worklistContentId) {
return 'Back to viewer';
} else {
return 'Study list';
}
},
onStudyList() {
return (Session.get('activeContentId') === 'worklistTab');
}
});
OHIFViewer/client/components/ohifViewer/ohifViewer.styl
+74
View File
@@ -0,0 +1,74 @@
@import "{design}/app"
$expandedHeight = 160px
img.logoImage
display: inline-block
height: 100%
.topBar
height: $topBarHeight
color: $textPrimaryColor
background-color: $primaryBackgroundColor
transition(all 0.5s ease)
.brandSection
height: 30px
display: inline-block
text-decoration: none
img.logoImage
margin: 0 5px
.logoText
display: inline-block
font-family: $logoFontFamily
font-weight: $logoFontWeight
color: $textPrimaryColor
.studyListLinkSection
border-left: $uiBorderThickness solid $uiBorderColor;
color: $textSecondaryColor
cursor: pointer
font-size: 13px
font-weight: 500
line-height: 26px
margin-top: 3px
&:hover
color: $hoverColor
&:active
color: $activeColor
&.studyList
background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight
.brandSection
height: 100%
width: 80%
padding-left: 50px
line-height: $expandedHeight
img.logoImage
margin: 5px 5px 15px 5px
.logoText
font-size: 30px
.studyListLinkSection
position: absolute
border: none
top: 5px
left: 5px
#worklistTabs
height: "calc(100% - %s)" % $topBarHeight
.tab-pane
.viewerContainer
.loadingTextDiv
color: $textSecondaryColor
font-size: 30px
font-weight: 200
OHIFViewer/client/components/toolbarSection/toolbarSection.html
+4 -2
View File
@@ -4,9 +4,11 @@
<div class="pull-left m-t-1">
{{>roundedButtonGroup leftSidebarToggleButtonData}}
</div>
{{> toolbarSectionTools toolbarButtons=toolbarButtons extraToolbarButtons=extraToolbarButtons}}
{{> toolbarSectionTools
toolbarButtons=toolbarButtons
extraToolbarButtons=extraToolbarButtons}}
<div class="pull-right m-t-1 rm-x-1">
{{>roundedButtonGroup rightSidebarToggleButtonData}}
{{> roundedButtonGroup rightSidebarToggleButtonData}}
</div>
<div class="pull-right">
{{> toolbarSectionTools toolbarButtons=hangingProtocolButtons}}
OHIFViewer/client/components/viewer/viewer.html
+1 -1
View File
@@ -9,6 +9,6 @@
{{> flexboxLayout (clone this)}}
</div>
{{else}}
{{>loadingText}}
{{> loadingText}}
{{/if}}
</template>
OHIFViewer/client/components/viewer/viewer.js
+4 -16
View File
@@ -29,23 +29,11 @@ Template.viewer.onCreated(() => {
instance.data.state.set('leftSidebar', Session.get('leftSidebar'));
instance.data.state.set('rightSidebar', Session.get('rightSidebar'));
Meteor.subscribe('hangingprotocols');
log.info('viewer onCreated');
if (isTouchDevice()) {
OHIF.viewer.tooltipConfig = {
trigger: 'manual'
};
} else {
OHIF.viewer.tooltipConfig = {
trigger: 'hover'
};
}
instance.subscribe('hangingprotocols');
const contentId = instance.data.contentId;
if (ViewerData[contentId].loadedSeriesData) {
if (ViewerData[contentId] && ViewerData[contentId].loadedSeriesData) {
log.info('Reloading previous loadedSeriesData');
OHIF.viewer.loadedSeriesData = ViewerData[contentId].loadedSeriesData;
@@ -53,7 +41,7 @@ Template.viewer.onCreated(() => {
} else {
log.info('Setting default ViewerData');
OHIF.viewer.loadedSeriesData = {};
ViewerData[contentId] = {};
ViewerData[contentId].loadedSeriesData = OHIF.viewer.loadedSeriesData;
// Update the viewer data object
@@ -85,4 +73,4 @@ Template.viewer.events({
const current = instance.data.state.get('rightSidebar');
instance.data.state.set('rightSidebar', !current);
},
})
});
OHIFViewer/client/components/viewer/viewer.styl
+4 -24
View File
@@ -1,31 +1,11 @@
@import "{design}/app.styl"
@import "{design}/app"
#viewer
border-top: 1px solid #525252
height: 100%
width: 100%
align-items: stretch
background-color: black
display: flex
flex-flow: column wrap
height: 100%
width: 100%
margin: 0
padding: 0
#toolbar
float: left
height: 30px
a.btn
text-align: center
color: $defaultColor
background-color: $primaryBackgroundColor
transition(all 0.1s ease)
// Prevent the blue outline in Chrome when a viewport is selected
outline: 0 !important
&:hover
color: $hoverColor
&.active, &:active
color: $activeColor
padding: 0
OHIFViewer/client/head.html
+3
View File
@@ -8,4 +8,7 @@
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
OHIFViewer/client/routes.js
+6 -12
View File
@@ -17,13 +17,12 @@ Router.configure({
});
Router.onBeforeAction('loading');
Router.route('/', function() {
this.render('worklist');
Router.onBeforeAction(function() {
this.next();
});
Router.route('/worklist', function() {
this.render('worklist');
Router.route('/', function() {
this.render('ohifViewer');
});
Router.route('/viewer/:_id', {
@@ -37,11 +36,12 @@ Router.route('/viewer/:_id', {
var tabs = WorklistTabs.find({
studyInstanceUid: studyInstanceUid
});
if (tabs.count()) {
return;
}
this.render('worklist', {
this.render('ohifViewer', {
data: function() {
return {
studyInstanceUid: studyInstanceUid
@@ -49,10 +49,4 @@ Router.route('/viewer/:_id', {
}
});
}
});
Router.onBeforeAction(function() {
// User is logged in, go ahead and route them
this.next();
});