Merge pull request #892 from colinking/hoveractions_injectable

Move quick actions inside of flexbox with injectable component set

internal_packages/thread-list/lib/thread-list-quick-actions.cjsx

@@ -4,32 +4,22 @@ React = require 'react'
  TaskFactory,
  FocusedMailViewStore} = require 'nylas-exports'
 
-class ThreadListQuickActions extends React.Component
+class ThreadArchiveQuickAction extends React.Component
-  @displayName: 'ThreadListQuickActions'
+  @displayName: 'ThreadArchiveQuickAction'
   @propTypes:
     thread: React.PropTypes.object
 
   render: =>
     mailViewFilter = FocusedMailViewStore.mailView()
     archive = null
-    remove = null
 
     if mailViewFilter?.canArchiveThreads()
       archive = <div key="archive"
                      title="Archive"
+                     style={{ order: 110 }}
                      className="btn action action-archive"
                      onClick={@_onArchive}></div>
-
+    return archive
-    if mailViewFilter?.canTrashThreads()
-      trash = <div key="remove"
-                   title="Trash"
-                   className='btn action action-trash'
-                   onClick={@_onRemove}></div>
-
-    <div className="inner">
-      {archive}
-      {trash}
-    </div>
 
   shouldComponentUpdate: (newProps, newState) ->
     newProps.thread.id isnt @props?.thread.id
@@ -43,6 +33,26 @@ class ThreadListQuickActions extends React.Component
     # Don't trigger the thread row click
     event.stopPropagation()
 
+class ThreadTrashQuickAction extends React.Component
+  @displayName: 'ThreadTrashQuickAction'
+  @propTypes:
+    thread: React.PropTypes.object
+
+  render: =>
+    mailViewFilter = FocusedMailViewStore.mailView()
+    trash = null
+
+    if mailViewFilter?.canTrashThreads()
+      trash = <div key="remove"
+                   title="Trash"
+                   style={{ order: 100 }}
+                   className='btn action action-trash'
+                   onClick={@_onRemove}></div>
+    return trash
+
+  shouldComponentUpdate: (newProps, newState) ->
+    newProps.thread.id isnt @props?.thread.id
+
   _onRemove: (event) =>
     task = TaskFactory.taskForMovingToTrash
       threads: [@props.thread]
@@ -52,4 +62,4 @@ class ThreadListQuickActions extends React.Component
     # Don't trigger the thread row click
     event.stopPropagation()
 
-module.exports = ThreadListQuickActions
+module.exports = { ThreadArchiveQuickAction, ThreadTrashQuickAction }

internal_packages/thread-list/lib/thread-list.cjsx

@@ -19,9 +19,9 @@ classNames = require 'classnames'
  CategoryStore,
  FocusedContentStore,
  FocusedMailViewStore} = require 'nylas-exports'
-
 ThreadListParticipants = require './thread-list-participants'
-ThreadListQuickActions = require './thread-list-quick-actions'
+{ThreadArchiveQuickAction,
+ ThreadTrashQuickAction} = require './thread-list-quick-actions'
 ThreadListStore = require './thread-list-store'
 ThreadListIcon = require './thread-list-icon'
 
@@ -137,7 +137,20 @@ class ThreadList extends React.Component
     c5 = new ListTabular.Column
       name: "HoverActions"
       resolver: (thread) =>
-        <ThreadListQuickActions thread={thread} />
+        <div className="inner">
+          <InjectedComponentSet
+            key="injected-component-set"
+            inline={true}
+            containersRequired={false}
+            children=
+            {[
+              <ThreadTrashQuickAction key="thread-trash-quick-action" thread={thread} />
+              <ThreadArchiveQuickAction key="thread-arhive-quick-action" thread={thread} />
+            ]}
+            matching={role: "ThreadListQuickAction"}
+            className="thread-injected-quick-actions"
+            exposedProps={thread: thread}/>
+        </div>
 
     @wideColumns = [c1, c2, c3, c4, c5]
 

internal_packages/thread-list/stylesheets/thread-list.less

@@ -229,9 +229,6 @@
     height: 57px;
     margin: 9px 16px 0 16px;
   }
-  .action:last-child {
-    margin-right:40px;
-  }
   .action.action-archive {
     background: url(@archive-img) center no-repeat, @background-gradient;
   }
@@ -244,9 +241,6 @@ body.platform-win32 {
     .action {
       border: 0;
       margin: 9px 0 0 0;
-      &:last-child {
-        margin-right: 30px;
-      }
     }
     .action.action-archive {
       background: url(@archive-img) center no-repeat;
@@ -268,6 +262,9 @@ body.platform-win32 {
     width:300px;
     height:100%;
     left: -300px;
+    .thread-injected-quick-actions {
+      margin-right: 10px;
+    }
   }
 }