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}}
-        <div class="studyListLinkSection pull-left">
-            <a id="loadStudyList">Study List</a>
+        {{ #if studyListToggleText }}
+        <div class="studyListLinkSection pull-left js-toggle-studyList">
+            {{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) {
-        // If this tab is already active, do nothing
-        var tabButton = $(e.currentTarget);
-        var tabTitle = tabButton.parents('.tabTitle');
-        if (tabTitle.hasClass('active')) {
-            return;
+    'click .js-toggle-studyList': function() {
+        var contentId = Session.get('activeContentId');
+        var worklistContentId = 'worklistTab';
+        var viewerContentId = 'viewerTab';
+
+        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
+    cursor: pointer
 
-    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}}
-        {{>lesionLocationDialog}}
-        {{>nonTargetLesionDialog}}
-        {{>nonTargetResponseDialog}}
+        {{ >confirmDeleteDialog }}
+        {{ >lesionLocationDialog }}
+        {{ >nonTargetLesionDialog }}
+        {{ >nonTargetResponseDialog }}
+        {{ >lesionTableHUD }}
         <!-- >conformanceCheckFeedback -->
 
         {{ >toolbarSection }}
         {{ >flexboxLayout }}
     </div>
     {{else}}
-        {{>loadingText}}
+        {{ >loadingText }}
     {{/if}}
 </template>