fix(quick-actions): change styles and only archie/trash

Summary: Fixes T2875 Test Plan: manual Reviewers: bengotow, dillon Reviewed By: dillon Maniphest Tasks: T2875 Differential Revision: https://phab.nylas.com/D2041
silky · Sep 18, 2015 · 314ebc3 · 314ebc3
1 parent c7ba9c3
commit 314ebc3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx b/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx
@@ -17,13 +17,12 @@ class ThreadListQuickActions extends React.Component
 
   render: =>
     actions = []
-    actions.push <div key="reply" className="action action-reply" onClick={@_onReply}></div>
-    actions.push <div key="fwd" className="action action-forward" onClick={@_onForward}></div>
     if @_shouldDisplayArchiveButton()
-      actions.push <div key="archive" className="action action-archive" onClick={@_onArchive}></div>
+      actions.push <div key="archive" className="btn action action-archive" onClick={@_onArchive}></div>
     else if AccountStore.current().usesLabels() and @props.categoryId == CategoryStore.getStandardCategory('all').id
-      actions.push <div key="trash" className="action action-trash" onClick={@_onTrash}></div>
+      actions.push <div key="trash" className="btn action action-trash" onClick={@_onTrash}></div>
 
+    return [] if actions.length is 0
     <div className="inner">
       {actions}
     </div>

diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less
@@ -219,24 +219,24 @@
     display:inline-block;
     background-size: 100%;
     zoom:0.5;
-    width:42px;
-    height:42px;
-    margin:16px;
+    width: 81px;
+    height: 57px;
+    margin: 9px 16px 0 16px;
   }
   .action:last-child {
     margin-right:40px;
   }
   .action.action-reply {
-    background: url(../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png) top left no-repeat, @background-gradient;
   }
   .action.action-forward {
-    background: url(../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png) top left no-repeat, @background-gradient;
   }
   .action.action-archive {
-    background: url(../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png) center no-repeat, @background-gradient;
   }
   .action.action-trash {
-    background: url(../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png) center no-repeat, @background-gradient;
   }
 }
 .thread-list .list-item:hover .list-column-HoverActions {

diff --git a/static/buttons.less b/static/buttons.less
@@ -16,7 +16,7 @@ button, html input[type="button"] {
   display:inline-block;
   color:      @btn-default-text-color;
   img.content-mask { background-color:@btn-default-text-color; }
-  background: linear-gradient(to top, rgba(241,241,241,0.75) 0%, rgba(253,253,253,0.75) 100%);
+  background: @background-gradient;
 
   // Use 4 box shadows to create a 0.5px hairline around the button, and another
   // for the actual shadow. Pending https://code.google.com/p/chromium/issues/detail?id=236371

diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less
@@ -452,6 +452,9 @@
 @background-color-error: @red;
 @background-color-pending: @light-gray;
 
+@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
+rgba(253,253,253,0.75) 100%);
+
 @base-border-color: darken(@background-color, 15%);
 @border-color: darken(@background-color, 15%);
 @border-color-subtle: darken(@background-color, 8%);