Adapting header to the new structure

Packages/ohif-core/client/components/base/mixins/action.js

@@ -31,14 +31,17 @@ OHIF.mixins.action = new OHIF.Mixin({
 
                 // Stop here calling the action if it's a function
                 if (typeof action === 'function') {
-                    return action.call(this, params);
+                    component.actionResult = action.call(this, params);
+                    return component.actionResult;
                 }
 
                 // Stop here if no API or action was defined
                 if (!api || !action || typeof api[action] !== 'function') return;
 
                 // Call the defined action function
-                api[action].call(this, params);
+                component.actionResult = api[action].call(this, params);
+
+                return component.actionResult;
             }
         }
     }

Packages/ohif-core/client/components/base/mixins/dropdown.js

@@ -1,6 +1,7 @@
 import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 import { Blaze } from 'meteor/blaze';
+import { $ } from 'meteor/jquery';
 import { OHIF } from 'meteor/ohif:core';
 
 /*
@@ -11,7 +12,7 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
     composition: {
         onRendered() {
             const instance = Template.instance();
-            const { event, centered } = instance.data.options;
+            const { event, centered, marginTop } = instance.data.options;
 
             // Destroy the Blaze created view (either created with template calls or with renderWithData)
             instance.destroyView = () => {
@@ -22,6 +23,12 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
                 }
             };
 
+            // Stop here and destroy the view if no items was given
+            if (!instance.data.items.length) {
+                instance.data.promiseReject();
+                return instance.destroyView();
+            }
+
             // Get the dropdown element to enable position manipulation
             const $dropdown = instance.$('.dropdown');
             const dropdown = $dropdown[0];
@@ -29,20 +36,22 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
 
             dropdown.oncontextmenu = () => false;
 
-            const cssBefore = {
-                'z-index': 10000
-            };
+            const cssBefore = { 'z-index': 10000 };
             if (event) {
                 cssBefore.position = 'fixed';
                 $dropdownMenu.bounded();
             }
 
-            $dropdownMenu.css(cssBefore).focus();
+            if (marginTop) {
+                cssBefore['margin-top'] = marginTop;
+            }
+
+            $dropdownMenu.css(cssBefore);
 
             // Postpone visibility change to allow CSS transitions
             Meteor.defer(() => {
-                // Show the dropdown
-                $dropdown.addClass('open');
+                // Show the dropdown and focus the first option
+                $dropdown.addClass('open').find('a:first').focus();
 
                 // Change the dropdown position if mouse event was given
                 if (event) {
@@ -62,9 +71,18 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
         },
 
         events: {
-            'click .form-action.disabled'(event, instance) {
-                event.preventDefault();
+            'click .form-action'(event, instance) {
                 event.stopPropagation();
+                const $target = $(event.currentTarget);
+                const isDisabled = $target.hasClass('disabled');
+                if (isDisabled) {
+                    instance.data.promiseReject();
+                } else {
+                    const component = $target.data('component');
+                    instance.data.promiseResolve(component.actionResult);
+                }
+
+                instance.destroyView();
             },
 
             'click .dropdown'(event, instance) {
@@ -73,8 +91,19 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
                     event.preventDefault();
                     event.stopPropagation();
                 } else {
+                    instance.data.promiseReject();
                     instance.destroyView();
                 }
+            },
+
+            'blur .dropdown'(event, instance) {
+                Meteor.defer(() => {
+                    const $focus = $(':focus');
+                    if (!$focus.length || !$.contains(event.currentTarget, $focus[0])) {
+                        instance.data.promiseReject();
+                        instance.destroyView();
+                    }
+                });
             }
         }
     }

Packages/ohif-core/client/components/bootstrap/dropdown/backdrop.html

@@ -1,3 +0,0 @@
-<template name="dropdownBackdrop">
-    <div class="dropdown-backdrop"></div>
-</template>

Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl

@@ -1,3 +1,19 @@
+@import "{ohif:design}/app"
+
 .dropdown
-  ul.dropdown-menu li
-    cursor: pointer
+  outline: none
+
+  ul.dropdown-menu
+
+    li.divider
+      margin: 4px 0
+
+    li a
+      outline: none
+      padding: 8px 20px
+
+      svg
+        display: inline-block
+        max-width: 18px
+        max-height: 18px
+        vertical-align: middle

Packages/ohif-core/client/components/bootstrap/dropdown/form.html

@@ -1,6 +1,5 @@
 <template name="dropdownForm">
     {{#form (extend this mixins='dropdown' class='dropdown' hideValidationBox=true)}}
-        {{>dropdownBackdrop}}
         <ul class="dropdown-menu {{this.options.menuClasses}}">
             {{#if UI.contentBlock}}
                 {{>UI.contentBlock}}
@@ -11,8 +10,13 @@
                     {{/if}}
                     <li class="{{#if item.disabled}}disabled{{/if}}">
                         {{#link item}}
-                            {{#if item.iconClasses}}
-                                <i class="{{item.iconClasses}}"></i>
+                            {{#if item.icon}}
+                                <i class="{{item.icon}} {{item.iconClasses}}"></i>
+                            {{/if}}
+                            {{#if item.iconSvgUse}}
+                                <svg class="{{item.iconClasses}}">
+                                    <use xlink:href={{absoluteUrl item.iconSvgUse}}></use>
+                                </svg>
                             {{/if}}
                             {{#if item.text}}
                                 <span>{{item.text}}</span>

Packages/ohif-core/client/components/bootstrap/index.js

@@ -15,7 +15,6 @@ import './dialog/simple.js';
 import './dialog/unsavedChangesDialog.html';
 import './dialog/unsavedChangesDialog.js';
 
-import './dropdown/backdrop.html';
 import './dropdown/form.html';
 
 import './form/button.html';

Packages/ohif-core/client/ui/dropdown/dropdown.js

@@ -3,27 +3,31 @@ import { Blaze } from 'meteor/blaze';
 import { OHIF } from 'meteor/ohif:core';
 
 OHIF.ui.showDropdown = (items=[], options={}) => {
+    let promiseResolve;
+    let promiseReject;
+    const promise = new Promise((resolve, reject) => {
+        promiseResolve = resolve;
+        promiseReject = reject;
+    });
+
     // Prepare the method to destroy the view
     let view;
     const destroyView = () => Blaze.remove(view);
+
+    // Create the data object that the dropdown will receive
     const templateData = {
         items,
         options,
-        destroyView
+        destroyView,
+        promise,
+        promiseResolve,
+        promiseReject
     };
 
     // Render the dialog with the given template and data
     const parentElement = options.parentElement || document.body;
     view = Blaze.renderWithData(Template.dropdownForm, templateData, parentElement);
-};
 
-Meteor.startup(() => {
-    OHIF.ui.showDropdown([{
-        text: 'test 1',
-        action: () => console.warn('test1Clicked'),
-        separatorAfter: true
-    }, {
-        text: 'test 2',
-        action: () => console.warn('test2Clicked')
-    }]);
-});
+    // Return the promise to allow callbacks stacking from outside
+    return promise;
+};