From 757513906c4ef93db58a6bf8e9bcddb5922c4a1d Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Thu, 9 Jun 2016 11:42:37 +0200
Subject: [PATCH] Study list context menu styling

---
 .../lesionTrackerWorklistContextMenu.html     | 34 ++++++++-----------
 .../studyContextMenu/studyContextMenu.html    | 24 ++++++-------
 .../studyContextMenu/studyContextMenu.styl    | 21 ++++++++----
 .../worklistResult/worklistResult.styl        |  7 ++--
 4 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/Packages/lesiontracker/client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.html b/Packages/lesiontracker/client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.html
index 8c262a0f7..b24e896c8 100644
--- a/Packages/lesiontracker/client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.html
+++ b/Packages/lesiontracker/client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.html
@@ -1,4 +1,5 @@
 <template name="lesionTrackerWorklistContextMenu">
+    {{#if studyListFunctionsEnabled}}
     <div id="studyContextMenu" class="studyContextMenu noselect"
          oncontextmenu='return false;'
          unselectable='on'
@@ -7,40 +8,33 @@
             <li>
                 <a id="viewStudies" type="button"
                    title="View Studies">
-                    <i class="fa fa-desktop fa-lg"></i>
                     View
                 </a>
-                <!-- TODO: Make this dynamically accept options-->
+                <hr/>
                 <a id="launchStudyAssociation" type="button"
                    data-toggle="modal"
                    data-target="#associationModal"
                    title="Launch Study Association">
-                    <i class="fa fa-calendar-plus-o fa-lg"></i>
                     Associate
                 </a>
                 <a id="launchRemoveAssociation" type="button"
                    data-toggle="modal"
                    data-target="#confirmRemoveTimepointAssociation"
                     title="Remove Timepoint Association">
-                    <i class="fa fa-eraser fa-lg"></i> Remove Association
+                    Remove Association
                 </a>
-
-                {{#if studyListFunctionsEnabled}}
-                    <a class="disabled"><span class="fa-stack fa-lg">
-                          <i class="fa fa-user fa-stack-1x"></i>
-                          <i class="fa fa-ban fa-stack-2x text-danger"></i>
-                        </span> Anonymize
-                    </a>
-                    <a id="exportSelectedStudies" type="button"
-                       title="Export Selected Studies">
-                        <i class="fa fa-exchange fa-lg"></i> Export
-                    </a>
-                {{/if}}
-                <a class="disabled"><i class="fa fa-trash fa-lg"></i> Delete</a>
-                <a class="disabled"><i class="fa fa-send-o fa-lg"></i> Send</a>
-                <a class="disabled"><i class="fa fa-download fa-lg"></i> Download</a>
-                <a class="disabled"><i class="fa fa-photo fa-lg"></i> View Series Details</a>
+                <hr/>
+                <a class="disabled">View Series Details</a>
+                <a class="disabled">Anonymize</a>
+                <a class="disabled">Send</a>
+                <hr/>
+                <a id="exportSelectedStudies"
+                   title="Export Selected Studies">
+                    Export
+                </a>
+                <a class="disabled">Delete</a>
             </li>
         </ul>
     </div>
+    {{/if}}
 </template>
\ No newline at end of file
diff --git a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.html b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.html
index 52920f358..0326400b4 100644
--- a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.html
+++ b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.html
@@ -1,25 +1,21 @@
 <template name="studyContextMenu">
+    {{#if studyListFunctionsEnabled}}
     <div id="studyContextMenu" class="studyContextMenu noselect"
          oncontextmenu='return false;'
          unselectable='on'
          onselectstart='return false;'>
         <ul>
             <li>
-                {{#if studyListFunctionsEnabled}}
-                    <a class="disabled"><span class="fa-stack fa-lg">
-                      <i class="fa fa-user fa-stack-1x"></i>
-                      <i class="fa fa-ban fa-stack-2x text-danger"></i>
-                    </span> Anonymize
-                    </a>
-                    <a id="exportSelectedStudies" type="button" title="Export Selected Studies">
-                        <i class="fa fa-exchange fa-lg"></i> Export
-                    </a>
-                {{/if}}
-                <a class="disabled"><i class="fa fa-trash fa-lg"></i> Delete</a>
-                <a class="disabled"><i class="fa fa-send-o fa-lg"></i> Send</a>
-                <a class="disabled"><i class="fa fa-download fa-lg"></i> Download</a>
-                <a class="disabled"><i class="fa fa-photo fa-lg"></i> View Series Details</a>
+                <a class="disabled">Anonymize</a>
+                <a class="disabled">Send</a>
+                <hr/>
+                <a class="disabled">Delete</a>
+                <a id="exportSelectedStudies"
+                   title="Export Selected Studies">
+                    Export
+                </a>
             </li>
         </ul>
     </div>
+    {{/if}}
 </template>
\ No newline at end of file
diff --git a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl
index c283e1900..04a0f9a55 100644
--- a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl
+++ b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl
@@ -1,13 +1,16 @@
+@import "{design}/app"
+
 .studyContextMenu
   z-index: 10000
   display: none
   position: absolute
-  color: whitesmoke
-  background-color: #2d2d2d
+  color:  #2f2f2f
+  background-color: #f2f2f2
 
   width: -moz-fit-content
   width: -webkit-fit-content
   width: fit-content
+  width: 207px
 
   height: -moz-fit-content
   height: -webkit-fit-content
@@ -19,10 +22,14 @@
   -webkit-background-clip: padding-box
   background-clip: padding-box
   border: 1px solid rgba(0, 0, 0, .15)
-  border-radius: 4px
+  border-radius: 3px
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
   box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
 
+  hr
+    border-top: solid 1px #d1d1d1
+    margin: 2px
+
   ul
     width: 100%
     margin: 5px 0
@@ -38,13 +45,13 @@
         display: block
         text-decoration: none
         cursor: pointer
-        line-height: 25px
-        color: #808080
+        font-size: 15px
+        line-height: 1.7
+        color: black
 
         &:not(.disabled):hover
-          color: #439193
+          color: $activeColor
           text-decoration: none
-          background-color: #1d1d1d
 
         &.disabled
           opacity: 0.4
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.styl b/Packages/worklist/client/components/worklistResult/worklistResult.styl
index 8c96bd50e..01c0e9f53 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.styl
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.styl
@@ -9,7 +9,8 @@ $inputPlaceholderColor = lightgray
 
 $studyListToolbarHeight = 75px
 $theadBackgroundColor =  #151a1f
-$tablePadding = 80px
+$tablePadding = 60px
+$bodyCellHeight = 40px
 
 .studyListToolbar
   height: $studyListToolbarHeight
@@ -100,7 +101,6 @@ $tablePadding = 80px
             &.active, &:active
               color: $activeColor
 
-
           input.worklist-search
             height: 34px
             margin: 0 5px 20px 5px
@@ -144,7 +144,6 @@ $tablePadding = 80px
 
     tbody
       tr
-        height: 22px
         padding: 5px
         background-color: black
 
@@ -152,6 +151,8 @@ $tablePadding = 80px
           background-color: #151a1f
 
         td
+          height: $bodyCellHeight
+          line-height: $bodyCellHeight
           color: $textPrimaryColor
           font-weight: 200
           border-top: 1px solid #436270