- {{> toolbar }}
-
+
+ {{> flexboxLayout (clone this)}}
- {{ >protocolEditor }}
{{else}}
{{>loadingText}}
{{/if}}
diff --git a/OHIFViewer/client/components/viewer/viewer.js b/OHIFViewer/client/components/viewer/viewer.js
index fdcd2baee..e307d1964 100644
--- a/OHIFViewer/client/components/viewer/viewer.js
+++ b/OHIFViewer/client/components/viewer/viewer.js
@@ -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);
+ },
+})
\ No newline at end of file
diff --git a/OHIFViewer/client/components/viewer/viewer.styl b/OHIFViewer/client/components/viewer/viewer.styl
index 85d1041b5..d36f303aa 100644
--- a/OHIFViewer/client/components/viewer/viewer.styl
+++ b/OHIFViewer/client/components/viewer/viewer.styl
@@ -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
diff --git a/OHIFViewer/client/routeHooks.js b/OHIFViewer/client/routeHooks.js
deleted file mode 100644
index a58d7db8d..000000000
--- a/OHIFViewer/client/routeHooks.js
+++ /dev/null
@@ -1,5 +0,0 @@
-Router.onBeforeAction(function() {
-
- // User is logged in, go ahead and route them
- this.next();
-});
diff --git a/OHIFViewer/client/routes.js b/OHIFViewer/client/routes.js
index b7ed170a0..fd474a142 100644
--- a/OHIFViewer/client/routes.js
+++ b/OHIFViewer/client/routes.js
@@ -50,3 +50,9 @@ Router.route('/viewer/:_id', {
});
}
});
+
+Router.onBeforeAction(function() {
+
+ // User is logged in, go ahead and route them
+ this.next();
+});
\ No newline at end of file
diff --git a/OHIFViewer/defaultSettings.js b/OHIFViewer/defaultSettings.js
index 501be2589..3f435f009 100644
--- a/OHIFViewer/defaultSettings.js
+++ b/OHIFViewer/defaultSettings.js
@@ -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: ');
diff --git a/Packages/cornerstone/package.js b/Packages/cornerstone/package.js
index d084bce88..f0b5ac915 100644
--- a/Packages/cornerstone/package.js
+++ b/Packages/cornerstone/package.js
@@ -5,7 +5,7 @@ Package.describe({
});
Package.onUse(function(api) {
- api.versionsFrom('1.3.4.1');
+ api.versionsFrom('1.3.5.1');
api.use('jquery');
api.use('dicomweb');
diff --git a/Packages/design/package.js b/Packages/design/package.js
index 64115b13a..e50709f7b 100644
--- a/Packages/design/package.js
+++ b/Packages/design/package.js
@@ -5,7 +5,7 @@ Package.describe({
});
Package.onUse(function(api) {
- api.versionsFrom('1.3.4.1');
+ api.versionsFrom('1.3.5.1');
api.use('ecmascript');
api.use('standard-app-packages');
diff --git a/Packages/design/styles/common/global.styl b/Packages/design/styles/common/global.styl
index 445af08b8..23fde9535 100644
--- a/Packages/design/styles/common/global.styl
+++ b/Packages/design/styles/common/global.styl
@@ -21,3 +21,11 @@ html hr
border-top: 5px solid
border-right: 5px solid transparent
border-left: 5px solid transparent
+
+.noselect
+ -webkit-touch-callout: none
+ -webkit-user-select: none
+ -khtml-user-select: none
+ -moz-user-select: none
+ -ms-user-select: none
+ user-select: none
diff --git a/Packages/design/styles/imports/variables.styl b/Packages/design/styles/imports/variables.styl
index b69e39a61..8af1920d4 100644
--- a/Packages/design/styles/imports/variables.styl
+++ b/Packages/design/styles/imports/variables.styl
@@ -19,12 +19,19 @@ $boxBackgroundColor = #3E5975
$boxBackgroundColorDark = #22374D
// Text Colors
+$textColorActive = #2D2D2D
$textPrimaryColor = #ffffff
$textSecondaryColor = #91B9CD
// Other Colors
$menuBackgroundColor = #F2F2F2
+// Viewport Settings
+$viewportBorderThickness = 1px
+$viewportBorderColor = $uiBorderColorDark
+$viewportBorderColorHover = $uiBorderColor
+$viewportBorderColorActive = $uiBorderColorActive
+
// Sizes
$topBarHeight = 40px
$toolbarHeight = 78px
diff --git a/Packages/hangingprotocols/client/components/hangingProtocolButtons/hangingProtocolButtons.html b/Packages/hangingprotocols/client/components/hangingProtocolButtons/hangingProtocolButtons.html
index a1d931e0a..b428626e5 100644
--- a/Packages/hangingprotocols/client/components/hangingProtocolButtons/hangingProtocolButtons.html
+++ b/Packages/hangingprotocols/client/components/hangingProtocolButtons/hangingProtocolButtons.html
@@ -1,6 +1,6 @@
\ No newline at end of file
diff --git a/Packages/hangingprotocols/client/components/matchedProtocols/matchedProtocols.js b/Packages/hangingprotocols/client/components/matchedProtocols/matchedProtocols.js
index 00ab87993..41436c0a4 100644
--- a/Packages/hangingprotocols/client/components/matchedProtocols/matchedProtocols.js
+++ b/Packages/hangingprotocols/client/components/matchedProtocols/matchedProtocols.js
@@ -1,14 +1,15 @@
import { OHIF } from 'meteor/ohif:core';
-Template.matchedProtocols.onRendered(function() {
- $('#matchedProtocols button').tooltip(OHIF.viewer.tooltipConfig);
+Template.matchedProtocols.onRendered(() => {
+ const instance = Template.instance();
+ instance.$('#matchedProtocols button').tooltip(OHIF.viewer.tooltipConfig);
});
Template.matchedProtocols.helpers({
/**
* Reactively re-render the MatchedProtocols Collection contents
*/
- matchedProtocols: function() {
+ matchedProtocols() {
return MatchedProtocols.find();
}
});
@@ -20,33 +21,5 @@ Template.matchedProtocols.events({
'click .matchedProtocol': function() {
var protocol = this;
ProtocolEngine.setHangingProtocol(protocol);
- },
- /**
- * Show/hide the Protocol Editor sidebar
- */
- 'click #toggleProtocolEditor': function() {
- // Select the Protocol Editor DOM element
- var editor = $('#protocolEditor');
-
- // Modulate the main viewer width in response to the sidebar being open
-
- // This code is commented out so that the protocol editor is an overlay, rather than a sidebar
- // This is something that is debatable at the moment, so I am not removing the code just yet
- //
- /* if (editor.hasClass('cbp-spmenu-open')) {
- // Set the Viewer widths to reflect a hidden Protocol Editor
- $('.viewerMain').width('calc(100% - 120px)');
- $('.navbar').width('100%');
- } else {
- // Set the Viewer widths to reflect an open Protocol Editor
- $('.viewerMain').width('calc(100% - 120px - 450px)');
- $('.navbar').width('calc(100% - 450px)');
- }*/
-
- // Toggle a class reflect whether or not the Protocol Editor is displayed
- editor.toggleClass('cbp-spmenu-open');
-
- // Fire the resize handler after a short delay so that the animation can complete
- setTimeout(handleResize, 150);
}
});
diff --git a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.html b/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.html
index 478505bb3..21a51f498 100644
--- a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.html
+++ b/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.html
@@ -2,7 +2,7 @@
{{ >ruleEntryDialog }}
{{ >settingEntryDialog }}
{{ >textEntryDialog }}
-