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

Updating design of OHIF Viewer using (OHIF-49)

Browse Source
This commit is contained in:
Erik Ziegler committed 2016-07-22 14:26:29 +02:00
1 parent f53ee8e030
commit a6c45ddd27
59 files changed
+776 -565
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

OHIFViewer/.meteor/packages
Executable → Regular
+2 -1
View File
@@ -27,13 +27,14 @@ check
cornerstone
dicomweb
design
ohif:core
ecmascript
viewerbase
worklist
reactive-var
practicalmeteor:loglevel
hangingprotocols
reactive-dict
gilbertwat:bootstrap3-daterangepicker
clinical:router
fastclick
standard-minifier-css
OHIFViewer/.meteor/versions
+1
View File
@@ -66,6 +66,7 @@ mrt:moment@2.8.1
natestrauser:select2@4.0.2
npm-mongo@1.4.45
observe-sequence@1.0.12
ohif:core@0.0.1
ordered-dict@1.0.8
orthanc-remote@0.0.1
practicalmeteor:chai@2.1.0_1
OHIFViewer/client/components/flexboxLayout/flexboxLayout.html
+13
View File
@@ -0,0 +1,13 @@
<template name="flexboxLayout">
<div class="viewerSection">
<div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
{{> studyBrowser (clone this)}}
</div>
<div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
{{> viewerMain (clone this)}}
</div>
<div class="sidebarMenu sidebar-right {{#if rightSidebarOpen}}sidebar-open{{/if}}">
{{> protocolEditor (clone this)}}
</div>
</div>
</template>
OHIFViewer/client/components/flexboxLayout/flexboxLayout.js
+19
View File
@@ -0,0 +1,19 @@
Template.flexboxLayout.events({
'transitionend .sidebarMenu'(event, instance) {
handleResize();
},
'transitionend .sidebar-option'(event, instance) {
// Prevent this event from bubbling
event.stopPropagation();
}
});
Template.flexboxLayout.helpers({
leftSidebarOpen() {
return Template.instance().data.state.get('leftSidebar');
},
rightSidebarOpen() {
return Template.instance().data.state.get('rightSidebar');
}
});
OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl
+80
View File
@@ -0,0 +1,80 @@
@import "{design}/app"
$lesionsSidebarMenuWidth = 450px
.viewerSection
display: flex
flex: 1
flex-flow: row nowrap
align-items: stretch
height: calc(100% - 78px);
width: 100%
.sidebarMenu
height: 100%
// required transformation to make inner fixed elements relative to this one
transform(scale(1))
transition($sidebarTransition)
.sidebar-option
height: 100%
position: fixed
transform(translateX(100%))
transition($sidebarTransition)
width: 100%
&.active
transform(translateX(0%))
.sidebar-left
max-width: $studiesSidebarMenuWidth
order: 1
flex: 1
margin-left: - $studiesSidebarMenuWidth
border-right: $uiBorderThickness $uiBorderColor solid
&.sidebar-open
margin-left: 0
.mainContent
flex: 1
order: 2
width: 100%
height: 100%
overflow: hidden
transition($sidebarTransition)
.sidebar-right
flex: 1
margin-left: -6px
margin-right: - $lesionsSidebarMenuWidth
max-width: $lesionsSidebarMenuWidth
order: 3
padding-left: 6px
position: relative
&[data-timepoints="3"]
margin-right: - ($lesionsSidebarMenuWidth + 135.5px)
max-width: $lesionsSidebarMenuWidth + 135.5px
&[data-timepoints="4"]
margin-right: - ($lesionsSidebarMenuWidth + 270px)
max-width: $lesionsSidebarMenuWidth + 270px
&:before
background-color: $uiBorderColor
content: ''
display: block
height: 100%
left: 5px
position: absolute
top: 0
width: $uiBorderThickness
&.sidebar-open
margin-right: 0
.studiesListedChanger
padding: 20px 10px
text-align: center
border-bottom: $uiBorderThickness $uiBorderColor solid
OHIFViewer/client/components/layout/layout.html
+8 -21
View File
@@ -1,25 +1,12 @@
<template name="layout">
<nav class="navbar navbar-default noselect" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img height="30px" src="/images/logo.png">
<h4 class="name">Open Health Imaging Foundation</h4>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://www.ohif.org">About</a>
</li>
</ul>
</div>
<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}}
OHIFViewer/client/components/layout/layout.styl
+20 -43
View File
@@ -1,50 +1,27 @@
.noselect
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
@import "{design}/app"
.navbar
.topBar
margin-bottom: 0
border-radius: 0
background-color: #060606
background-color: $primaryBackgroundColor
border: none
font-family: "Sanchez"
color: #C1C1C1
-webkit-transition: all 0.3s ease
-moz-transition: all 0.3s ease
transition: all 0.3s ease
.navbar-default .navbar-nav > li > a
color: #C1C1C1
font-weight: bold
font-size: 12pt
.navbar-form
height: 50px
margin: 0
padding: 15px 3px
font-weight: bold
font-size: 12pt
line-height: 20px
height: $topBarHeight
color: $textPrimaryColor
transition(all 0.3s ease)
.navbar-brand
display: inline-block
img
float: left
margin-right: 10px
margin-top: -5px
.brandSection
display: inline-block
height: 30px
text-decoration: none
h4.name
float: left
margin: 0
font-family: "Sanchez"
color: #C1C1C1
img.logoImage
display: inline-block
height: 100%
max-height: 50px
margin: 0 5px
@media (min-width: 768px)
.navbar
border-radius: 0px
div.logoText
display: inline-block
font-family: $logoFontFamily
font-weight: $logoFontWeight
color: $textPrimaryColor
OHIFViewer/client/components/viewer/viewer.html
+17 -9
View File
@@ -1,18 +1,26 @@
<template name="viewer">
{{#if Template.subscriptionsReady}}
<div class="viewerDialogs">
{{> cineDialog}}
</div>
<div id="viewer">
<div class="studyBrowserSidebar">
{{ >relatedStudySelect }}
{{> studyBrowser }}
</div>
{{> cineDialog }}
<div class='viewerMain'>
{{> toolbar }}
<div id='layoutManagerTarget'>
<div id="toolbar">
<div class='pull-left'>
<a class="btn btn-sm btn-secondary js-toggle-studies">
Studies
</a>
</div>
<div class='pull-left'>
{{> toolbar }}
</div>
<div class='pull-right'>
<a class='btn btn-sm btn-secondary js-toggle-protocol-editor'>
Hanging Protocols
</a>
</div>
</div>
{{> flexboxLayout (clone this)}}
</div>
{{ >protocolEditor }}
{{else}}
{{>loadingText}}
{{/if}}
OHIFViewer/client/components/viewer/viewer.js
+42 -17
View File
@@ -1,10 +1,19 @@
import { OHIF } from 'meteor/ohif:core';
OHIF.viewer = OHIF.viewer || {};
Template.viewer.onCreated(function() {
Session.setDefault('activeViewport', false);
Session.setDefault('leftSidebar', false);
Session.setDefault('rightSidebar', false);
Template.viewer.onCreated(() => {
const instance = Template.instance();
// Attach the Window resize listener
$(window).on('resize', handleResize);
$('.navbar').width('100%');
instance.data.state = new ReactiveDict();
instance.data.state.set('leftSidebar', Session.get('leftSidebar'));
instance.data.state.set('rightSidebar', Session.get('rightSidebar'));
Meteor.subscribe('hangingprotocols');
@@ -20,26 +29,27 @@ Template.viewer.onCreated(function() {
};
OHIF.viewer.functionList = {
invert: function(element) {
var viewport = cornerstone.getViewport(element);
invert: element => {
const viewport = cornerstone.getViewport(element);
viewport.invert = !viewport.invert;
cornerstone.setViewport(element, viewport);
},
resetViewport: function(element) {
var enabledElement = cornerstone.getEnabledElement(element);
resetViewport: element => {
const enabledElement = cornerstone.getEnabledElement(element);
if (enabledElement.fitToWindow === false) {
var imageId = enabledElement.image.imageId;
var instance = cornerstoneTools.metaData.get('instance', imageId);
const imageId = enabledElement.image.imageId;
const instance = cornerstoneTools.metaData.get('instance', imageId);
enabledElement.viewport = cornerstone.getDefaultViewport(enabledElement.canvas, enabledElement.image);
var instanceClassDefaultViewport = getInstanceClassDefaultViewport(instance, enabledElement, imageId);
const instanceClassDefaultViewport = getInstanceClassDefaultViewport(instance, enabledElement, imageId);
cornerstone.setViewport(element, instanceClassDefaultViewport);
} else {
cornerstone.reset(element);
}
},
clearTools: function(element) {
var toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
clearTools: element => {
const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
toolStateManager.clear(element);
cornerstone.updateImage(element);
}
@@ -55,7 +65,7 @@ Template.viewer.onCreated(function() {
};
}
var contentId = this.data.contentId;
const contentId = instance.data.contentId;
if (ViewerData[contentId].loadedSeriesData) {
log.info('Reloading previous loadedSeriesData');
@@ -80,27 +90,42 @@ Template.viewer.onCreated(function() {
// Update the ViewerStudies collection with the loaded studies
ViewerStudies.remove({});
this.data.studies.forEach(function(study) {
instance.data.studies.forEach(study => {
study.selected = true;
ViewerStudies.insert(study);
});
});
Template.viewer.onRendered(function() {
Template.viewer.onRendered(() => {
const instance = Template.instance();
// Enable hotkeys
enableHotkeys();
var parentNode = document.getElementById('layoutManagerTarget');
var studies = this.data.studies;
const parentNode = document.getElementById('layoutManagerTarget');
const studies = instance.data.studies;
layoutManager = new LayoutManager(parentNode, studies);
ProtocolEngine = new HP.ProtocolEngine(layoutManager, studies);
HP.setEngine(ProtocolEngine);
});
Template.viewer.onDestroyed(function() {
Template.viewer.onDestroyed(() => {
log.info('onDestroyed');
// Remove the Window resize listener
$(window).off('resize', handleResize);
});
Template.viewer.events({
'click .js-toggle-studies'() {
const instance = Template.instance();
const current = instance.data.state.get('leftSidebar');
instance.data.state.set('leftSidebar', !current);
},
'click .js-toggle-protocol-editor'() {
const instance = Template.instance();
const current = instance.data.state.get('rightSidebar');
instance.data.state.set('rightSidebar', !current);
},
})
OHIFViewer/client/components/viewer/viewer.styl
+26 -32
View File
@@ -1,37 +1,31 @@
@import "{design}/app.styl"
#viewer
border-top: 1px solid #525252
height: 100%
width: 100%
align-items: stretch
background-color: black
display: flex
flex-flow: column wrap
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
.noselect
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
.studyBrowser
width: auto
.viewerMain
float: left
background-color: gray
height: 100%
width: calc(100% - 120px)
-webkit-transition: all 0.3s ease
-moz-transition: all 0.3s ease
transition: all 0.3s ease
#layoutManagerTarget
height: calc(100% - 30px)
width: 100%
.studyBrowserSidebar
float: left
height: 100%
width: 120px
overflow: hidden
background-color: #000
padding-top: 10px
&.active, &:active
color: $activeColor
OHIFViewer/client/routeHooks.js
-5
View File
@@ -1,5 +0,0 @@
Router.onBeforeAction(function() {
// User is logged in, go ahead and route them
this.next();
});
OHIFViewer/client/routes.js
+6
View File
@@ -50,3 +50,9 @@ Router.route('/viewer/:_id', {
});
}
});
Router.onBeforeAction(function() {
// User is logged in, go ahead and route them
this.next();
});
OHIFViewer/defaultSettings.js
+2
View File
@@ -1,3 +1,5 @@
import { Meteor } from 'meteor/meteor';
Meteor.startup(function() {
if (Object.keys(Meteor.settings).length > 1) {
console.log('Using custom LesionTracker settings: ');