Adjusting OHIF Viewer to the new structure

OHIFViewer/client/components/ohifViewer/ohifViewer.html

@@ -1,44 +1,25 @@
 <template name="ohifViewer">
-    <div class="topBar noselect {{#if onStudyList}}studyList{{/if}}">
-        <div class="clearfix">
-            <a target='_blank'
-               class="brandSection pull-left"
-               href="http://ohif.org">
-                <svg class="logoImage">
-                    <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
-                </svg>
-                <div class="logoText">
-                    Open Health Imaging Foundation
-                </div>
-            </a>
+    {{#header brandHref='http://ohif.org' headerClasses=instance.headerClasses}}
+        {{#section 'brand'}}
+            <svg class="logo-image">
+                <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
+            </svg>
+            <div class="logo-text">Open Health Imaging Foundation</div>
+        {{/section}}
+        {{#section 'headerAfterBrand'}}
             {{#if studyListToggleText}}
-                <a class="btn studyListLinkSection pull-left js-toggle-studyList">
+                <a href="#" class="btn studyListLinkSection pull-left js-toggle-studyList">
                     {{studyListToggleText}}
                 </a>
             {{/if}}
-            <span class="pull-right">
-                <div class="dropdown">
-                    <div class="dropdown-toggle noselect clearfix" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        <span class="pull-left m-r-1">Options</span>
-                        <div class="menuButton pull-right"><span class="caret-down"></span></div>
-                    </div>
-                    <ul class="dropdown-menu dropdown-menu-right">
-                        <li>
-                            <a id="serverInformation">
-                                <i class="fa fa-server fa-lg"></i> Server Information
-                            </a>
-                        </li>
-                        <li role="separator" class="divider"></li>
-                        <li>
-                            <a data-toggle="modal" data-target="#aboutModal">
-                                <i class="fa fa-info"></i> About
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </span>
-        </div>
-    </div>
-    {{>studylist}}
-    {{>aboutModal}}
+        {{/section}}
+        {{#section 'headerMenu'}}
+            <span class="header-options pull-left m-r-1">Options</span>
+            <div class="menu-toggle pull-right">
+                <span class="caret-down"></span>
+            </div>
+        {{/section}}
+    {{/header}}
+
+    {{>Template.dynamic template=(choose this.template 'studylist') data=this}}
 </template>

OHIFViewer/client/components/ohifViewer/ohifViewer.js

@@ -14,7 +14,7 @@ Template.ohifViewer.onCreated(() => {
         icon: 'fa fa-server fa-lg',
         separatorAfter: true
     }, {
-        action: () => $('#aboutModal').show(),
+        action: () => OHIF.ui.showDialog('aboutModal'),
         text: 'About',
         icon: 'fa fa-info'
     }]);
@@ -55,7 +55,7 @@ Template.ohifViewer.helpers({
         const isViewer = Session.get('ViewerOpened');
 
         // Return empty if viewer was not opened yet
-        if (!OHIF.viewer.data.studyInstanceUids) return;
+        if (!OHIF.utils.ObjectPath.get(OHIF, 'viewer.data.studyInstanceUids')) return;
 
         return isViewer ? 'Study list' : 'Back to viewer';
     }

OHIFViewer/client/components/ohifViewer/ohifViewer.styl

@@ -1,42 +1,37 @@
 @import "{ohif:design}/app"
 
-$expandedHeight = 160px
+body>.header
 
-.logoImage
-  display: inline-block
-  height: 100%
-  float: left
-
-.topBar
-  height: $topBarHeight
-  padding: 10px 10px 0
-  theme('color', '$textPrimaryColor')
-  theme('background-color', '$primaryBackgroundColor')
-  transition(all 0.5s ease)
-
-  &>.clearfix
-    position: relative
-
-  .brandSection
+  .brand
     height: 30px
     display: inline-block
     text-decoration: none
 
-    .logoImage
+    .logo-image
+      display: inline-block
+      fill: transparent
+      float: left
+      height: 100%
       margin: 0 8px 0 0
       width: 30px
 
-    .logoText
+    .logo-text
       display: inline-block
       font-family: $logoFontFamily
+      font-size: 14px
       font-weight: $logoFontWeight
       theme('color', '$textPrimaryColor')
       line-height: 30px
 
-  .studyListLinkSection
-    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
-    margin: 3px 0 0 10px
-    padding: 0 0 0 10px
+  a.header-menu
+    theme('color', '$textPrimaryColor')
+
+    .header-options
+      font-size: 13px
+
+    .menu-toggle
+      display: inline-block
+      height: 18px
 
   .btn
     theme('color', '$textSecondaryColor')
@@ -51,22 +46,25 @@ $expandedHeight = 160px
     &:active
       theme('color', '$activeColor')
 
-  &.studyList
-    background-color: rgba(21, 25, 30, 0.7)
-    height: $expandedHeight
+  .studyListLinkSection
+    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+    margin: 3px 0 0 10px
+    padding: 0 0 0 10px
+
+  &.header-big
     padding-left: $studyListPadding
     padding-right: $studyListPadding
 
-    .brandSection
+    .brand
       height: 100%
       width: 80%
-      line-height: $expandedHeight - 10px
+      line-height: $topBarExpandedHeight - 10px
 
-      .logoImage
-        width: 50px
+      .logo-image
         margin: 0 20px 0 0
+        width: 50px
 
-      .logoText
+      .logo-text
         font-size: 30px
 
     .studyListLinkSection

OHIFViewer/client/components/viewer/viewer.js

@@ -93,7 +93,6 @@ Template.viewer.onCreated(() => {
     } else {
         OHIF.log.info('Setting default viewer data');
         OHIF.viewer.loadedSeriesData = {};
-        OHIF.viewer.data = {};
         OHIF.viewer.data.loadedSeriesData = OHIF.viewer.loadedSeriesData;
 
         // Update the viewer data object