Styling updates for Study List

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

@@ -1,12 +1,12 @@
 <template name="worklistToolbar">
-    <div id='worklistToolbar'>
-        <div class="btn-group">
-            {{#if importSupported }}
-                <span class="btn btn-default btn-file">
-                    <i class="fa fa-upload"></i>
-                    <input id="btnImport" title="Import Study" type="file" webkitdirectory directory multiple>
-                </span>
-            {{/if }}
+    <div class='worklistToolbar'>
+        {{#if importSupported }}
+        <div class="addNewStudy btn-file">
+            <label for="btnImport">
+                <i class="fa fa-plus"></i> Add new study
+            </label>
+            <input id="btnImport" class="inputfile" type="file" webkitdirectory directory multiple>
         </div>
+        {{/if }}
     </div>
 </template>

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

@@ -11,7 +11,7 @@ Template.worklistToolbar.events({
     'click #btnImport': function(e) {
         // Reset file input
         var fileInput = e.currentTarget;
-        $(fileInput).val("");
+        $(fileInput).val('');
     }
 });
 
@@ -21,17 +21,14 @@ Template.worklistToolbar.helpers({
         var studyListFunctionsEnabled = Meteor.settings && Meteor.settings.public && Meteor.settings.public.ui &&
             Meteor.settings.public.ui.studyListFunctionsEnabled || false;
 
-        if (importSupported && studyListFunctionsEnabled) {
-            return true;
-        }
-        return false;
+        return (importSupported && studyListFunctionsEnabled);
     }
 });
 
-Meteor.call("importSupported", function(err, result) {
+Meteor.call('importSupported', function(err, result) {
     if (!err && result) {
         Session.set('importSupported', true);
     } else {
         Session.set('importSupported', false);
     }
-});
+});

Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl

@@ -1,27 +1,24 @@
-#worklistToolbar
-  background-color: black
-  position: absolute
-  top: 0
-  right: 0
+@import "{design}/app"
 
-  .btn-file
-    position: relative
-    overflow: hidden
-    width: 30px
-    height: 30px
-    padding: 5px
-    line-height: 20px
+.worklistToolbar
+  .addNewStudy
+    margin: 0 10px
 
-    input[type=file]
-      position: absolute
-      top: 0
-      right: 0
-      min-width: 100%
-      min-height: 100%
-      font-size: 100 px
-      text-align: right
+    label
+      color: $textSecondaryColor
+      font-weight: 300
+      cursor: pointer
+
+      &:hover
+        color: $hoverColor
+
+      &:active
+        color: $activeColor
+
+    .inputfile
+      width: 0.1px;
+      height: 0.1px
       opacity: 0
-      outline: none
-      background: white
-      cursor: inherit
-      display: block
+      overflow: hidden
+      position: absolute
+      z-index: -1