From ee9ea4450d33bf1904786c49f5d3d1b299146cfd Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Thu, 9 Jun 2016 11:21:21 +0200
Subject: [PATCH] More study list styling

---
 .../userAccountMenu/userAccountMenu.html      | 10 ++--
 .../userAccountMenu/userAccountMenu.js        |  4 ++
 .../userAccountMenu/userAccountMenu.styl      | 14 ++++++
 .../basic/loadingText/loadingText.html        |  2 +-
 .../basic/loadingText/loadingText.styl        |  4 +-
 Packages/viewerbase/lib/createStacks.js       |  4 ++
 .../worklistResult/worklistResult.html        |  4 +-
 .../worklistResult/worklistResult.styl        | 49 +++++++++++++++++--
 8 files changed, 77 insertions(+), 14 deletions(-)

diff --git a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.html b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.html
index 8af506eaf..2b5352a87 100644
--- a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.html
+++ b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.html
@@ -1,10 +1,12 @@
 <template name="userAccountMenu">
     {{#if currentUser}}
         <div id="userAccountMenu" class="dropdown">
-            <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                {{name}} {{currentPath}} | <i class="fa fa-cog fa-lg"></i>
-                <span class="caret"></span>
-            </a>
+            <div class="dropdown-toggle noselect" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                {{name}} {{currentPath}}
+                <div class="menuButton">
+                    <i class="fa fa-cog"></i> <span class="caret"></span>
+                </div>
+            </div>
             <ul class="dropdown-menu dropdown-menu-right">
                 {{#if showWorklistMenu}}
                     <li>
diff --git a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.js b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.js
index be3a8965f..58ec7edaf 100644
--- a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.js
+++ b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.js
@@ -45,6 +45,10 @@ Template.userAccountMenu.onRendered(function() {
     this.autorun(function() {
         // Hook login/logout
         var user = Meteor.user();
+        if (!user) {
+            return;
+        }
+
         var newUserId = user._id;
 
         if (oldUserId === null && newUserId) {
diff --git a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
index ce4eab0d5..c21955f4b 100644
--- a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
+++ b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
@@ -6,10 +6,24 @@
 
   .dropdown-toggle
     cursor: pointer
+    line-height: 20px
+    font-weight: 400
+    font-size: 13px
     text-decoration: none
     background-color: $primaryBackgroundColor
     color: $textSecondaryColor
 
+    .menuButton
+      display: inline-block
+      padding-left: 5px
+      border-left: solid 1px #516873
+
+      .fa
+        color: #94a8b3
+
+      .caret
+        color: #516873
+
   ul.dropdown-menu
     li
       cursor: pointer
diff --git a/Packages/viewerbase/client/components/basic/loadingText/loadingText.html b/Packages/viewerbase/client/components/basic/loadingText/loadingText.html
index 73237dfdd..246376ed8 100644
--- a/Packages/viewerbase/client/components/basic/loadingText/loadingText.html
+++ b/Packages/viewerbase/client/components/basic/loadingText/loadingText.html
@@ -1,5 +1,5 @@
 <template name="loadingText">
     <div class="loadingTextDiv">
-        <h5>Loading... <i class="fa fa-spinner fa-pulse"></i></h5>
+        Loading... <i class="fa fa-spin fa-circle-o-notch fa-fw"></i>
     </div>
 </template>
\ No newline at end of file
diff --git a/Packages/viewerbase/client/components/basic/loadingText/loadingText.styl b/Packages/viewerbase/client/components/basic/loadingText/loadingText.styl
index 62728d08b..d8236c94b 100644
--- a/Packages/viewerbase/client/components/basic/loadingText/loadingText.styl
+++ b/Packages/viewerbase/client/components/basic/loadingText/loadingText.styl
@@ -1,5 +1,3 @@
 .loadingTextDiv
   margin: 30px
-
-  h5
-    text-align: center
\ No newline at end of file
+  text-align: center
\ No newline at end of file
diff --git a/Packages/viewerbase/lib/createStacks.js b/Packages/viewerbase/lib/createStacks.js
index d3f9f43b7..d77c943f2 100644
--- a/Packages/viewerbase/lib/createStacks.js
+++ b/Packages/viewerbase/lib/createStacks.js
@@ -14,6 +14,10 @@ createStacks = function(study) {
     // Define an empty array of stacks
     var stacks = [];
 
+    if (!study.seriesList) {
+    	return stacks;
+    }
+
     // TODO: Split by multi-frame, modality, image size, etc
     study.seriesList.forEach(function(series) {
         // If the series has no instances, skip it
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.html b/Packages/worklist/client/components/worklistResult/worklistResult.html
index 03c2a11f9..519d6e823 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.html
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.html
@@ -10,6 +10,8 @@
             {{>worklistToolbar}}
         </div>
     </div>
+    <div class="theadBackground">
+    </div>
     <div id="studyListContainer">
         <table id="tblStudyList" class="worklistResult table noselect">
             <thead>
@@ -105,7 +107,7 @@
         {{/if}}
 
         {{#if showNotFoundMessage}}
-            <h5 class="text-center">No Studies Found</h5>
+            <div class="notFound">No matching results</div>
         {{/if}}
     </div>
 </template>
\ No newline at end of file
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.styl b/Packages/worklist/client/components/worklistResult/worklistResult.styl
index 60b3ebe30..8c96bd50e 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.styl
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.styl
@@ -8,6 +8,8 @@ $inputBackgroundColor = #2c363f
 $inputPlaceholderColor = lightgray
 
 $studyListToolbarHeight = 75px
+$theadBackgroundColor =  #151a1f
+$tablePadding = 80px
 
 .studyListToolbar
   height: $studyListToolbarHeight
@@ -36,16 +38,44 @@ $studyListToolbarHeight = 75px
     padding: 0 10px
     line-height: $studyListToolbarHeight
 
+.theadBackground
+  background-color: $theadBackgroundColor
+  width: 100%
+  height: 122px
+  position: absolute
+  z-index: 1
+
 #studyListContainer
+  padding: 0 $tablePadding
+  position: absolute
+  z-index: 2
+
+  .loadingTextDiv
+    color: $textSecondaryColor
+    font-size: 30px
+    font-weight: 200
+
+  .notFound
+    color: $textSecondaryColor
+    font-size: 30px
+    font-weight: 200
+    text-align: center
+
   table#tblStudyList
     thead
-      background-color: #151a1f
+      background-color: $theadBackgroundColor
       white-space: nowrap
-      border-bottom: solid 1px #6fbde2;
 
       tr
         th
           padding: 0
+          border-bottom: solid 1px #6fbde2
+
+          &:first-child
+            padding-left: $tablePadding
+
+          &:last-child
+            padding-right: $tablePadding
 
           div.sortingCell
             display: inline-block
@@ -56,7 +86,6 @@ $studyListToolbarHeight = 75px
             color: $textPrimaryColor
             font-weight: 400
             padding: 20px
-            background: #171717
 
             span
               font-size: 15px
@@ -65,8 +94,12 @@ $studyListToolbarHeight = 75px
             i
               margin: 0 5px
 
-            &:hover, &.active
-              background: #252525
+            &:hover
+              color: $activeColor
+
+            &.active, &:active
+              color: $activeColor
+
 
           input.worklist-search
             height: 34px
@@ -126,6 +159,12 @@ $studyListToolbarHeight = 75px
 
           transition(all 0.1s ease)
 
+          &:first-child
+            padding-left: $tablePadding
+
+          &:last-child
+            padding-right: $tablePadding
+
         &:hover, &:active, &.active
           background-color: $hoverColor
           color: white