Started replacing toolbar in OHIF Viewer with that of Lesion Tracker (OHIF-49)

Packages/worklist/client/components/tabContent/tabContent.styl

@@ -1,7 +1,10 @@
+@import "{design}/app"
+
 .tab-pane
   .loadingTextDiv
-    h5
-      color: #777
+    color: $textSecondaryColor
+    font-size: 30px
+    font-weight: 200
 
   .viewerContainer
     height: 100%

Packages/worklist/client/components/worklist.html

@@ -1,22 +1,18 @@
 <template name="worklist">
     <ul class="nav noselect" role="tablist" id="tablist">
-        {{#if showStudyListTab }}
-            <li role="presentation" class="tabTitle active">
-                <a data-target="#worklistTab" role="tab" data-toggle="tab">Study List</a>
-            </li>
-        {{/if}}
+        <li role="presentation" class="tabTitle active">
+            <a data-target="#worklistTab" role="tab" data-toggle="tab">Study List</a>
+        </li>
         {{#each worklistTabs }}
             {{>tabTitle }}
         {{/each }}
     </ul>
     <div id="worklistTabs" class="tab-content">
-        {{#if showStudyListTab }}
-            <div role="tabpanel" class="tab-pane active" id="worklistTab">
-                <div class="worklistContainer">
-                    {{> worklistResult }}
-                </div>
+        <div role="tabpanel" class="tab-pane active" id="worklistTab">
+            <div class="worklistContainer">
+                {{> worklistResult }}
             </div>
-        {{/if}}
+        </div>
         {{#each worklistTabs }}
             {{>tabContent }}
         {{/each }}

Packages/worklist/client/components/worklist.js

@@ -19,15 +19,18 @@ WorklistTabs._debugName = 'WorklistTabs';
 WorklistStudies = new Meteor.Collection(null);
 WorklistStudies._debugName = 'WorklistStudies';
 
-Template.worklist.onRendered(function() {
-    var templateData = Template.currentData();
-    if (templateData && templateData.studyInstanceUid) {
-        var studyInstanceUid = templateData.studyInstanceUid;
+
+Session.setDefault('activeContentId', 'worklistTab');
+
+Template.worklist.onRendered(() => {
+    const instance = Template.instance();
+    if (instance.data && instance.data.studyInstanceUid) {
+        const studyInstanceUid = instance.data.studyInstanceUid;
         openNewTab(studyInstanceUid, studyInstanceUid);
     } else {
         // If there is a tab set as active in the Session,
         // switch to that now.
-        var contentId = Session.get('activeContentId');
+        const contentId = Session.get('activeContentId');
 
         // TODO: FIx this it seems to be forcing two switches
         switchToTab(contentId);        
@@ -41,36 +44,22 @@ Template.worklist.helpers({
      * Returns the current set of Worklist Tabs
      * @returns Meteor.Collection The current state of the WorklistTabs Collection
      */
-    worklistTabs: function() {
+    worklistTabs() {
         return WorklistTabs.find();
-    },
-    showStudyListTab: function() {
-        // StudyListTab is shown by default
-        const instance = Template.instance();
-        if (!instance.data) {
-            return true;
-        }
-
-        var showStudyListTab = instance.data.showStudyListTab;
-        if (showStudyListTab === undefined) {
-            return true;
-        }
-
-        return showStudyListTab;
     }
 });
 
 Template.worklist.events({
     'click #tablist a[data-toggle="tab"]': function(e) {
         // If this tab is already active, do nothing
-        var tabButton = $(e.currentTarget);
-        var tabTitle = tabButton.parents('.tabTitle');
+        const tabButton = $(e.currentTarget);
+        const tabTitle = tabButton.parents('.tabTitle');
         if (tabTitle.hasClass('active')) {
             return;
         }
 
         // Otherwise, switch to the tab
-        var contentId = tabButton.data('target').replace('#', '');
+        const contentId = tabButton.data('target').replace('#', '');
         switchToTab(contentId);
     }
 });

Packages/worklist/client/components/worklistToolbar/worklistToolbar.html

@@ -5,7 +5,7 @@
             <label for="btnImport">
                 <i class="fa fa-plus"></i> Add new study
             </label>
-            <input id="btnImport" type="file" webkitdirectory directory multiple>
+            <input id="btnImport" class='js-import-files' type="file" webkitdirectory directory multiple>
         </div>
         {{/if }}
     </div>

Packages/worklist/client/components/worklistToolbar/worklistToolbar.js

@@ -1,34 +1,36 @@
+Template.worklistToolbar.onCreated(() => {
+    Meteor.call('importSupported', function(error, result) {
+        if (error || !result) {
+            Session.set('importSupported', false);
+        } else {
+            Session.set('importSupported', true);
+        }
+    });
+});
+
 Template.worklistToolbar.events({
-    'change #btnImport': function(e) {
+    'change .js-import-files'(event) {
         //  Get selected files located in the client machine
-        var selectedFiles = $.map(e.currentTarget.files, function(value) {
+        var selectedFiles = $.map(event.currentTarget.files, (value) => {
             return value;
         });
         
         importStudies(selectedFiles);
     },
 
-    'click #btnImport': function(e) {
+    'click .js-import-files'(event) {
         // Reset file input
-        var fileInput = e.currentTarget;
+        var fileInput = event.currentTarget;
         $(fileInput).val('');
     }
 });
 
 Template.worklistToolbar.helpers({
-    importSupported: function() {
+    importSupported() {
         var importSupported = Session.get('importSupported');
         var studyListFunctionsEnabled = Meteor.settings && Meteor.settings.public && Meteor.settings.public.ui &&
             Meteor.settings.public.ui.studyListFunctionsEnabled || false;
 
         return (importSupported && studyListFunctionsEnabled);
     }
-});
-
-Meteor.call('importSupported', function(err, result) {
-    if (!err && result) {
-        Session.set('importSupported', true);
-    } else {
-        Session.set('importSupported', false);
-    }
-});
+});