Styling updates for Study List

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html

@@ -1,16 +1,16 @@
 <template name="lesionTracker">
-    <div class="topBar">
+    <div class="topBar {{#if onStudyList}}studyList{{/if}}">
         <a class="brandSection pull-left" href="http://ohif.org">
             <img class="logoImage" src="/images/logo.png">
             <div class="logoText">
                 Open Health Imaging Foundation
             </div>
         </a>
-        {{ #unless onStudyList}}
+        {{ #if studyListToggleText }}
-        <div class="studyListLinkSection pull-left">
+        <div class="studyListLinkSection pull-left js-toggle-studyList">
-            <a id="loadStudyList">Study List</a>
+            {{studyListToggleText}}
         </div>
-        {{ /unless }}
+        {{ /if }}
         <div class="userAccountSection pull-right">
             {{>userAccountMenu}}
         </div>
@@ -32,5 +32,4 @@
     {{ >lastLoginModal }}
     {{ >studyContextMenu }}
     {{ >progressDialog}}
-    {{ >lesionTableHUD }}
 </template>

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js

@@ -36,23 +36,16 @@ Template.lesionTracker.onRendered(function() {
 });
 
 Template.lesionTracker.events({
-    'click #tablist a[data-toggle="tab"]': function(e) {
+    'click .js-toggle-studyList': function() {
-        // If this tab is already active, do nothing
+        var contentId = Session.get('activeContentId');
-        var tabButton = $(e.currentTarget);
+        var worklistContentId = 'worklistTab';
-        var tabTitle = tabButton.parents('.tabTitle');
+        var viewerContentId = 'viewerTab';
-        if (tabTitle.hasClass('active')) {
+
-            return;
+        if (contentId !== worklistContentId) {
+            switchToTab(worklistContentId);
+        } else {
+            switchToTab(viewerContentId);
         }
-
-        // Otherwise, switch to the tab
-        var contentId = tabButton.data('target').replace('#', '');
-        switchToTab(contentId);
-    },
-    'click #loadStudyList': function() {
-        // TODO: Make some set of 'closing study' callbacks
-        $('#lesionTableHUD').display('none');
-
-        switchToTab('worklistTab');
     }
 });
 
@@ -62,6 +55,21 @@ Template.lesionTracker.helpers({
     showWorklistMenu: function() {
         return Template.instance().showWorklistMenu.get();
     },
+    studyListToggleText: function() {
+        var contentId = Session.get('activeContentId');
+        if (!contentId) {
+            return;
+        }
+
+        var worklistContentId = 'worklistTab';
+        var viewerContentId = 'viewerTab';
+
+        if (contentId === worklistContentId) {
+            return 'Back to viewer';
+        } else if (contentId === viewerContentId) {
+            return 'Study list';
+        }
+    },
     onStudyList: function() {
         return (Session.get('activeContentId') === 'worklistTab');
     }

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl

@@ -4,6 +4,7 @@
   height: $topBarHeight
   color: $textPrimaryColor
   background-color: $primaryBackgroundColor
+  transition(all 0.5s ease)
 
   .brandSection
     height: 100%
@@ -11,6 +12,7 @@
 
     img.logoImage
       height: 100%
+      max-height: 50px
       margin: 0 5px
 
     .logoText
@@ -20,18 +22,41 @@
       color: $textPrimaryColor
 
   .studyListLinkSection
+    color: $textSecondaryColor
     border-left: $uiBorderThickness solid $uiBorderColor;
-    padding: 5px
+    font-weight: 400
+    font-size: 13px
+    line-height: 30px
+    padding: 0 10px
     margin: 0 10px
-
-    a
-      text-decoration: none
     cursor: pointer
-      line-height: 100%
+
+    &:hover
+      color: $hoverColor
+
+    &:active
+      color: $activeColor
 
   .userAccountSection
      margin: 0 10px
 
+  &.studyList
+    background-color: rgba(21, 25, 30, 0.7)
+    height: 160px
+
+    .brandSection
+      margin-top: 50px
+      margin-left: 50px
+
+      .logoText
+        font-size: 30px
+
+    .studyListLinkSection
+      position: absolute
+      border: none
+      top: 5px
+      left: 5px
+
 #worklistTabs
   height: "calc(100% - %s)" % $topBarHeight
 

Packages/lesiontracker/client/components/viewer/viewer.html

@@ -1,16 +1,17 @@
 <template name="viewer">
     {{#if Template.subscriptionsReady}}
     <div id="viewer">
-        {{>confirmDeleteDialog}}
+        {{ >confirmDeleteDialog }}
-        {{>lesionLocationDialog}}
+        {{ >lesionLocationDialog }}
-        {{>nonTargetLesionDialog}}
+        {{ >nonTargetLesionDialog }}
-        {{>nonTargetResponseDialog}}
+        {{ >nonTargetResponseDialog }}
+        {{ >lesionTableHUD }}
         <!-- >conformanceCheckFeedback -->
 
         {{ >toolbarSection }}
         {{ >flexboxLayout }}
     </div>
     {{else}}
-        {{>loadingText}}
+        {{ >loadingText }}
     {{/if}}
 </template>

Packages/worklist/client/components/worklist.styl

@@ -20,7 +20,6 @@ body
   background-color: black
   margin: 0 auto
   color: white
-  padding: 20px 30px
   
 #tabs
   width: 100%

Packages/worklist/client/components/worklistResult/worklistResult.html

@@ -1,76 +1,86 @@
 <template name="worklistResult">
-    <div id="studyListContainer">
+    <div class="studyListToolbar">
+        <div class="header">
+            Study list
+        </div>
+        <div class="studyCount pull-right">
+            85
+        </div>
+        <div class="pull-right">
             {{>worklistToolbar}}
+        </div>
+    </div>
+    <div id="studyListContainer">
         <table id="tblStudyList" class="worklistResult table noselect">
             <thead>
             <tr>
                 <th>
-                    <input type="text"
-                           class="form-control worklist-search"
-                           id="patientName"
-                           placeholder="Search Patient Name">
                     <div id="_patientName" class="sortingCell">
                         <span>Patient Name</span>
                         <i class="{{sortingColumnsIcons.patientName}}">&nbsp;</i>
                     </div>
+                    <input type="text"
+                           class="form-control worklist-search"
+                           id="patientName"
+                           placeholder="Patient Name">
                 </th>
                 <th>
+                    <div id="_patientId" class="sortingCell">
+                        <span>MRN</span>
+                        <i class="{{sortingColumnsIcons.patientId}}">&nbsp;</i>
+                    </div>
                     <input type="text"
                            class="form-control worklist-search"
                            id="patientId"
-                           placeholder="Search Patient ID">
+                           placeholder="MRN">
-                    <div id="_patientId" class="sortingCell">
-                        <span>Patient ID</span>
-                        <i class="{{sortingColumnsIcons.patientId}}">&nbsp;</i>
-                    </div>
                 </th>
 
                 {{#unless isTouchDevice}}
                     <th>
-                        <input type="text"
-                               class="form-control worklist-search"
-                               id="accessionNumber"
-                               placeholder="Search Accession #">
                         <div id="_accessionNumber" class="sortingCell">
                             <span>Accession #</span>
                             <i class="{{sortingColumnsIcons.accessionNumber}}">&nbsp;</i>
                         </div>
+                        <input type="text"
+                               class="form-control worklist-search"
+                               id="accessionNumber"
+                               placeholder="Accession #">
                     </th>
                 {{/unless}}
 
                 <th>
-                    <input type="text"
-                           class="form-control worklist-search"
-                           name="daterange"
-                           id="studyDate"
-                           placeholder="Search Study Date">
                     <div id="_studyDate" class="sortingCell">
                         <span>Study Date</span>
                         <i class="{{sortingColumnsIcons.studyDate}}">&nbsp;</i>
                     </div>
+                    <input type="text"
+                           class="form-control worklist-search"
+                           name="daterange"
+                           id="studyDate"
+                           placeholder="Study Date">
                 </th>
 
                 {{#unless isTouchDevice}}
                     <th>
-                        <input type="text"
-                               class="form-control worklist-search"
-                               id="modality"
-                               placeholder="Search Modality">
                         <div id="_modalities" class="sortingCell">
                             <span>Modality</span>
                             <i class="{{sortingColumnsIcons.modalities}}">&nbsp;</i>
                         </div>
+                        <input type="text"
+                               class="form-control worklist-search"
+                               id="modality"
+                               placeholder="Modality">
                     </th>
                 {{/unless}}
                 <th>
-                    <input type="text"
-                           class="form-control worklist-search"
-                           id="studyDescription"
-                           placeholder="Search Study Description">
                     <div id="_studyDescription" class="sortingCell">
                         <span>Study Description</span>
                         <i class="{{sortingColumnsIcons.studyDescription}}">&nbsp;</i>
                     </div>
+                    <input type="text"
+                           class="form-control worklist-search"
+                           id="studyDescription"
+                           placeholder="Study Description">
                 </th>
 
                 {{#unless isTouchDevice}}
@@ -79,6 +89,7 @@
                         <span># Images</span>
                         <i class="{{sortingColumnsIcons.numberOfStudyRelatedInstances}}">&nbsp;</i>
                     </div>
+                    <input type="text" class="form-control worklist-search invisible"/>
                 </th>
                 {{/unless}}
             </tr>

Packages/worklist/client/components/worklistResult/worklistResult.styl

@@ -1,20 +1,49 @@
-#studyListContainer
+@import "{design}/app"
-  position: relative
-  table#tblStudyList
-    color: #888888
-    border-collapse: collapse
-    border-color: gray
 
+$hoverColor = #2c363f
+$textPrimaryColor = white
+$textSecondaryColor = #91b9cd
+
+$inputBackgroundColor = #2c363f
+$inputPlaceholderColor = lightgray
+
+$studyListToolbarHeight = 75px
+
+.studyListToolbar
+  height: $studyListToolbarHeight
+  background: #151a1f
+  border-bottom: 2px solid black
+  padding: 0 30px
+
+  div
+    display: inline-block
+
+  .header
+    font-size: 22px
+    font-weight: 200
+    color: $textSecondaryColor
+    padding: 0 10px
+    line-height: $studyListToolbarHeight
+
+  .worklistToolbar
+    height: $studyListToolbarHeight
+    line-height: $studyListToolbarHeight
+
+  .studyCount
+    font-size: 40px
+    font-weight: 100
+    color: #6fbde2
+    padding: 0 10px
+    line-height: $studyListToolbarHeight
+
+#studyListContainer
+  table#tblStudyList
     thead
-      background-color: black
+      background-color: #151a1f
       white-space: nowrap
+      border-bottom: solid 1px #6fbde2;
 
       tr
-        th:first-child
-          div.sortingCell
-            border-right: 0.5px dashed #555555
-            border-left: none
-
         th
           padding: 0
 
@@ -24,11 +53,10 @@
             width: 100%
             min-width: 95px
             margin: 0 auto
-            color: white
+            color: $textPrimaryColor
-            padding: 10px
+            font-weight: 400
-            font-weight: 500
+            padding: 20px
             background: #171717
-            border-left: 0.5px dashed #555555
 
             span
               font-size: 15px
@@ -43,38 +71,38 @@
           input.worklist-search
             height: 34px
             margin: 0 5px 20px 5px
+            padding: 20px
             cursor: pointer
-            padding: 10px
             border: none
-            background-color: #707070
+            background-color: $inputBackgroundColor
-            color: #434343
+            color: $inputPlaceholderColor
             font-size: 10pt
             font-weight: normal
             width: calc(100% - 10px)
+            border-radius: 4px
             box-sizing: border-box
 
-            -webkit-transition: all 0.15s ease-in-out;
+            transition(all 0.15s ease)
-            -moz-transition: all 0.15s ease-in-out;
+
-            -o-transition: all 0.15s ease-in-out;
+            &.invisible
-            transition: all 0.15s ease-in-out;
+              visibility: hidden
 
             &:active, &:hover
-              color: black
+              background-color: $inputBackgroundColor
-              background-color: #d3d3d9
 
             &::-webkit-input-placeholder /* WebKit, Blink, Edge */
-              color:    #434343
+              color:    $inputPlaceholderColor
 
             &:-moz-placeholder /* Mozilla Firefox 4 to 18 */
-              color:    #434343
+              color:    $inputPlaceholderColor
               opacity:  1
 
             &::-moz-placeholder /* Mozilla Firefox 19+ */
-              color:    #434343
+              color:    $inputPlaceholderColor
               opacity:  1
 
             &:-ms-input-placeholder /* Internet Explorer 10-11 */
-              color:    #434343
+              color:    $inputPlaceholderColor
 
       ::-webkit-datetime-edit-year-field:not([aria-valuenow]),
       ::-webkit-datetime-edit-month-field:not([aria-valuenow]),
@@ -87,21 +115,23 @@
         padding: 5px
         background-color: black
 
+        &:nth-child(even)
+          background-color: #151a1f
+
         td
-          color: #ffffff
+          color: $textPrimaryColor
-          border-top: 0.5px dashed #555555
+          font-weight: 200
+          border-top: 1px solid #436270
           white-space: nowrap
 
-          -webkit-transition: all 0.1s ease
+          transition(all 0.1s ease)
-          transition: all 0.1s ease
 
         &:hover, &:active, &.active
-          background-color: #009BD2
+          background-color: $hoverColor
           color: white
 
           td
             // This selector is necessary to override bootstrap's 'table' class
-            border-top: 0.5px dashed #dddddd
+            border-top: 1px solid #436270
-            border-bottom: 0.5px dashed #dddddd
+            border-bottom: 1px solid #436270
-            color: white
+            background-color: $hoverColor
-            background-color: #009BD2

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

@@ -1,12 +1,12 @@
 <template name="worklistToolbar">
-    <div id='worklistToolbar'>
+    <div class='worklistToolbar'>
-        <div class="btn-group">
         {{#if importSupported }}
-                <span class="btn btn-default btn-file">
+        <div class="addNewStudy btn-file">
-                    <i class="fa fa-upload"></i>
+            <label for="btnImport">
-                    <input id="btnImport" title="Import Study" type="file" webkitdirectory directory multiple>
+                <i class="fa fa-plus"></i> Add new study
-                </span>
+            </label>
+            <input id="btnImport" class="inputfile" type="file" webkitdirectory directory multiple>
+        </div>
         {{/if }}
     </div>
-    </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,14 +21,11 @@ Template.worklistToolbar.helpers({
         var studyListFunctionsEnabled = Meteor.settings && Meteor.settings.public && Meteor.settings.public.ui &&
             Meteor.settings.public.ui.studyListFunctionsEnabled || false;
 
-        if (importSupported && studyListFunctionsEnabled) {
+        return (importSupported && studyListFunctionsEnabled);
-            return true;
-        }
-        return false;
     }
 });
 
-Meteor.call("importSupported", function(err, result) {
+Meteor.call('importSupported', function(err, result) {
     if (!err && result) {
         Session.set('importSupported', true);
     } else {

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

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

Packages/worklist/package.js

@@ -16,6 +16,7 @@ Package.onUse(function (api) {
     api.use('silentcicero:jszip');
 
     // Our custom packages
+    api.use('design');
     api.use('dicomweb');
     api.use('dimseservice');
     api.use('orthanc-remote');