Updating design of OHIF Viewer using (OHIF-49)

OHIFViewer/client/components/viewer/viewer.html

@@ -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

@@ -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

@@ -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