fix(back): Remove "Back to " prefix, centralize into back button itself, align using vertial-align instead of margin-top

Summary: Fixes T2135

Test Plan: Run tests

Reviewers: evan

Reviewed By: evan

Maniphest Tasks: T2135

Differential Revision: https://phab.nylas.com/D1731

internal_packages/account-sidebar/lib/account-sidebar-store.coffee

@@ -74,7 +74,7 @@ AccountSidebarStore = Reflux.createStore
 
     # Sort the main tags so they always appear in a standard order
     mainTags = _.sortBy mainTags, (tag) -> mainTagIDs.indexOf(tag.id)
-    mainTags.push new Tag(name: 'All Mail', id: '*')
+    mainTags.push new Tag(name: 'All Mail', id: Tag.AllMailID)
 
     # Add the counts
     inboxTag = _.find tags, (tag) -> tag.id is 'inbox'

internal_packages/message-list/lib/main.cjsx

@@ -1,6 +1,5 @@
 MessageList = require "./message-list"
 MessageToolbarItems = require "./message-toolbar-items"
-MessageNavTitle = require "./message-nav-title"
 {ComponentRegistry,
  WorkspaceStore} = require 'nylas-exports'
 SidebarThreadParticipants = require "./sidebar-thread-participants"
@@ -16,15 +15,11 @@ module.exports =
     ComponentRegistry.register MessageToolbarItems,
       location: WorkspaceStore.Location.MessageList.Toolbar
 
-    ComponentRegistry.register MessageNavTitle,
-      location: WorkspaceStore.Location.MessageList.Toolbar
-
     ComponentRegistry.register SidebarThreadParticipants,
       location: WorkspaceStore.Location.MessageListSidebar
 
   deactivate: ->
     ComponentRegistry.unregister MessageList
-    ComponentRegistry.unregister MessageNavTitle
     ComponentRegistry.unregister MessageToolbarItems
 
   serialize: -> @state

internal_packages/message-list/lib/message-nav-title.cjsx

@@ -1,34 +0,0 @@
-
-_ = require 'underscore'
-_str = require 'underscore.string'
-React = require 'react'
-{Actions, FocusedTagStore} = require 'nylas-exports'
-
-class MessageNavTitle extends React.Component
-  @displayName: 'MessageNavTitle'
-
-  constructor: (@props) ->
-    @state = @_getStateFromStores()
-
-  componentDidMount: =>
-    @_unsubscriber = FocusedTagStore.listen @_onChange
-
-  componentWillUnmount: =>
-    @_unsubscriber() if @_unsubscriber
-
-  render: =>
-    if @state.tagId
-      title = "Back to #{_str.titleize(@state.tagId)}"
-    else
-      title = "Back"
-
-    <div onClick={ -> Actions.popSheet() }
-         className="message-nav-title">{title}</div>
-
-  _onChange: => _.defer =>
-    @setState(@_getStateFromStores())
-
-  _getStateFromStores: =>
-    tagId: FocusedTagStore.tagId()
-
-module.exports = MessageNavTitle

internal_packages/message-list/stylesheets/message-list.less

@@ -27,19 +27,6 @@
     opacity: 0;
   }
 
-  .message-nav-title {
-    order:-99;
-    cursor: default;
-    color:@text-color-heading;
-    margin:0;
-    margin-top:11px;
-    font-size: @font-size-h4;
-    font-weight: @font-weight-normal;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   .message-toolbar-arrow.down {
     order:101;
     margin-right: 0;

internal_packages/thread-list/lib/thread-list-store.coffee

@@ -12,6 +12,7 @@ _ = require 'underscore'
  Actions,
  Utils,
  Thread,
+ Tag,
  Message} = require 'nylas-exports'
 
 # Public: A mutable text container with undo/redo support and the ability to
@@ -67,7 +68,7 @@ ThreadListStore = Reflux.createStore
     else if namespaceId and tagId
       matchers = []
       matchers.push Thread.attributes.namespaceId.equal(namespaceId)
-      matchers.push Thread.attributes.tags.contains(tagId) if tagId isnt "*"
+      matchers.push Thread.attributes.tags.contains(tagId) if tagId isnt Tag.AllMailID
       view = new DatabaseView Thread, {matchers}, (ids) =>
         DatabaseStore.findAll(Message).where(Message.attributes.threadId.in(ids)).then (messages) ->
           messagesByThread = {}

src/flux/models/tag.coffee

@@ -26,6 +26,8 @@ Section: Models
 ###
 class Tag extends Model
 
+  @AllMailID: '*'
+  
   @attributes: _.extend {}, Model.attributes,
     'name': Attributes.String
       queryable: true

src/sheet-toolbar.cjsx

@@ -2,7 +2,10 @@ React = require 'react/addons'
 Sheet = require './sheet'
 Flexbox = require './components/flexbox'
 RetinaImg = require './components/retina-img'
+FocusedTagStore = require './flux/stores/focused-tag-store'
 TimeoutTransitionGroup = require './components/timeout-transition-group'
+Tag = require './flux/models/tag'
+_str = require 'underscore.string'
 _ = require 'underscore'
 
 {Actions,
@@ -34,9 +37,29 @@ class WindowTitle extends React.Component
 
 class ToolbarBack extends React.Component
   @displayName: 'ToolbarBack'
+
+  constructor: (@props) ->
+    @state =
+      tagId: FocusedTagStore.tagId()
+
+  componentDidMount: =>
+    @_unsubscriber = FocusedTagStore.listen =>
+      @setState(tagId: FocusedTagStore.tagId())
+
+  componentWillUnmount: =>
+    @_unsubscriber() if @_unsubscriber
+
   render: =>
+    if @state.tagId is Tag.AllMailID
+      title = 'All Mail'
+    else if @state.tagId
+      title = _str.titleize(@state.tagId)
+    else
+      title = "Back"
+
     <div className="item-back" onClick={@_onClick}>
       <RetinaImg name="sheet-back.png" mode={RetinaImg.Mode.ContentIsMask} />
+      <div className="item-back-title">{title}</div>
     </div>
 
   _onClick: =>

static/workspace.less

@@ -186,6 +186,16 @@ body.is-blurred {
     img.content-mask { background-color: @text-color-heading; }
     flex-grow: 0;
     flex-shrink: 0;
+
+    .item-back-title {
+      cursor: default;
+      color:@text-color-heading;
+      margin:0;
+      font-size: @font-size-h4;
+      font-weight: @font-weight-normal;
+      vertical-align: middle;
+      display:inline-block;
+    }
   }
 
   .btn-toolbar {
@@ -295,4 +305,3 @@ body.platform-win32 {
     cursor:ew-resize;
   }
 }
-