Adapting header to the new structure

Packages/ohif-header/client/components/header/header.html

@@ -0,0 +1,14 @@
+<template name="header">
+    <div class="header noselect {{reactive headerClasses}}">
+        <div class="clearfix">
+            <a target='_blank' class="brand pull-left" href="{{choose this.brandHref '/'}}">
+                {{>section 'brand'}}
+            </a>
+            {{>section 'headerAfterBrand'}}
+            <a href='#' class="header-menu pull-right">
+                {{>section 'headerMenu'}}
+            </a>
+        </div>
+        {{>UI.contentBlock}}
+    </div>
+</template>

Packages/ohif-header/client/components/header/header.js

@@ -0,0 +1,37 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { $ } from 'meteor/jquery';
+import { OHIF } from 'meteor/ohif:core';
+
+Template.header.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.dropdownOpen = new ReactiveVar(false);
+    instance.dropdownItems = [];
+    instance.autorun(() => {
+        OHIF.header.dropdownObserver.depend();
+        instance.dropdownItems = OHIF.header.getDropdownItems();
+    });
+});
+
+Template.header.events({
+    'mousedown .header-menu'(event, instance) {
+        if (instance.dropdownOpen.get()) {
+            event.preventDefault();
+            return $(event.currentTarget).focus();
+        }
+    },
+
+    'click .header-menu'(event, instance) {
+        event.preventDefault();
+        if (instance.dropdownOpen.get()) return;
+        instance.dropdownOpen.set(true);
+        const closeHandler = () => Meteor.setTimeout(() => instance.dropdownOpen.set(false), 200);
+        OHIF.ui.showDropdown(instance.dropdownItems, {
+            parentElement: event.currentTarget,
+            menuClasses: 'dropdown-menu-right',
+            marginTop: '25px'
+        }).then(closeHandler).catch(closeHandler);
+    }
+});

Packages/ohif-header/client/components/header/header.styl

@@ -0,0 +1,23 @@
+@import "{ohif:design}/app"
+
+body>.header
+  height: $topBarHeight
+  padding: 10px 10px 0
+  theme('color', '$textPrimaryColor')
+  theme('background-color', '$primaryBackgroundColor')
+  transition(all 0.5s ease)
+
+  &>.clearfix
+    position: relative
+
+  .header-menu
+    padding: 4px 0
+    font-size: 13px
+    font-weight: 400
+    line-height: 18px
+    text-decoration: none
+    theme('color', '$defaultColor')
+
+  &.header-big
+    height: $topBarExpandedHeight
+    background-color: rgba(21, 25, 30, 0.7)

Packages/ohif-header/client/components/index.js

@@ -0,0 +1,3 @@
+import './header/header.html';
+import './header/header.js';
+import './header/header.styl';

Packages/ohif-header/client/index.js

@@ -0,0 +1 @@
+import './components';

Packages/ohif-header/client/lib/header.js

@@ -0,0 +1,35 @@
+import { Tracker } from 'meteor/tracker';
+import { _ } from 'meteor/underscore';
+
+export class Header {
+    constructor() {
+        this.dropdownObserver = new Tracker.Dependency();
+        this._dropdownItems = [];
+        this.dropdownObserver.changed();
+    }
+
+    clearDropDownItems() {
+        this._dropdownItems = [];
+        this.dropdownObserver.changed();
+    }
+
+    setDropdownItems(items) {
+        this._dropdownItems = items;
+        this.dropdownObserver.changed();
+    }
+
+    addDropdownItem(item) {
+        this._dropdownItems.push(item);
+        this.dropdownObserver.changed();
+    }
+
+    removeDropdownItem(item) {
+        this._dropdownItems = _.without(this._dropdownItems, item);
+        this.dropdownObserver.changed();
+    }
+
+    getDropdownItems() {
+        this.dropdownObserver.depend();
+        return this._dropdownItems;
+    }
+}

Packages/ohif-header/components/header.html

@@ -1,12 +0,0 @@
-<template name="header">
-    <div class="header noselect {{headerClasses}}">
-        <div class="clearfix">
-            <a target='_blank' class="brand pull-left" href="{{choose this.brandHref '/'}}">
-                {{>section 'brand'}}
-            </a>
-            <div class="header-menu pull-right">
-                
-            </div>
-        </div>
-    </div>
-</template>

Packages/ohif-header/components/header.styl

@@ -1,31 +0,0 @@
-$expandedHeight = 160px
-
-.header
-  height: $topBarHeight
-  padding: 10px 10px 0
-  theme('color', '$textPrimaryColor')
-  theme('background-color', '$primaryBackgroundColor')
-  transition(all 0.5s ease)
-
-  &>.clearfix
-    position: relative
-
-  .brand
-    background-image: url(/packages/pim_webviewer/assets/logo.svg)
-    background-repeat: no-repeat
-    background-size: 100%
-    display: block
-    font-size: 9px
-    height: 3.5em
-    text-decoration: none
-    width: 34.6em
-
-  &.studyList
-    background-color: rgba(21, 25, 30, 0.7)
-    height: $expandedHeight
-    padding-left: $studyListPadding
-    padding-right: $studyListPadding
-
-    .brand
-      font-size: 16px
-      margin-top: 44px

Packages/ohif-header/index.js

@@ -1,2 +0,0 @@
-import './components/header.html';
-import './components/header.styl';

Packages/ohif-header/main.js

@@ -0,0 +1,11 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Header } from './client/lib/header';
+
+/*
+ * Defines the base OHIF header object
+ */
+const header = new Header();
+
+OHIF.header = header;
+
+export { header };

Packages/ohif-header/package.js

@@ -9,11 +9,16 @@ Package.onUse(function(api) {
 
     // Meteor packages
     api.use('ecmascript');
+    api.use('templating');
+    api.use('underscore');
     api.use('stylus');
 
     // OHIF dependencies
     api.use('ohif:core', 'client');
 
+    // Main module
+    api.mainModule('main.js', 'client');
+
     // Client imports
-    api.addFiles('index.js', 'client');
+    api.addFiles('client/index.js', 'client');
 });