refactor(toolbar): Better base for building toolbars

internal_packages/composer/lib/main.cjsx

@@ -76,4 +76,4 @@ module.exports =
     ComponentRegistry.register
       view: NewComposeButton
       name: 'NewComposeButton'
-      role: 'Global:Toolbar'
+      role: 'ThreadList:Left:Toolbar'

internal_packages/composer/stylesheets/composer.less

@@ -266,6 +266,7 @@
 // new-compose-button.cjsx //
 /////////////////////////////
 #new-compose-button {
+  order: -100;
   .btn-compose {
     margin-top: @spacing-half;
     margin-left: @spacing-standard;

internal_packages/search-bar/lib/main.cjsx

@@ -13,7 +13,7 @@ module.exports =
     ComponentRegistry.register
       view: SearchBar
       name: 'SearchBar'
-      role: 'Global:Toolbar'
+      role: 'ThreadList:Right:Toolbar'
 
   deactivate: ->
     ComponentRegistry.unregister 'SearchBar'

src/components/flexbox.cjsx

@@ -17,6 +17,6 @@ Flexbox = React.createClass
       'display': 'flex'
       'height':'100%'
 
-    <div name={name} style={style}>
+    <div name={@props.name} style={style}>
       {@props.children}
     </div>

src/sheet-container.cjsx

@@ -4,42 +4,6 @@ SheetStore = require './sheet-store'
 Flexbox = require './components/flexbox.cjsx'
 ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
 
-ToolbarSpacer = React.createClass
-  render: ->
-    <div style={flex: 1, order:50}></div>
-
-Toolbar = React.createClass
-  propTypes:
-    type: React.PropTypes.string.isRequired
-
-  getInitialState: ->
-    @_getComponentRegistryState()
-
-  componentDidMount: ->
-    @unlistener = ComponentRegistry.listen (event) =>
-      @setState(@_getComponentRegistryState())
-
-  componentWillUnmount: ->
-    @unlistener() if @unlistener
-
-  render: ->
-    <div className="toolbar" name={@props.type}>
-      <Flexbox direction="row">
-        {@_buttonComponents()}
-        <ToolbarSpacer />
-      </Flexbox>
-    </div>
-
-  _buttonComponents: ->
-    @state.items.map (item) =>
-      <item {...@props} />
-
-  _getComponentRegistryState: ->
-    globalItems = ComponentRegistry.findAllViewsByRole "Global:Toolbar"
-    typeItems = ComponentRegistry.findAllViewsByRole "#{@props.type}:Toolbar"
-
-    items: [].concat(globalItems, typeItems)
-
 Footer = React.createClass
   getInitialState: ->
     @_getComponentRegistryState()
@@ -85,11 +49,6 @@ SheetContainer = React.createClass
     type = @state.stack?[@state.stack - 1]?.props.type or 'none'
 
     <Flexbox direction="column">
-      <div style={order:0} className="toolbar-container">
-        <ReactCSSTransitionGroup transitionName="toolbar">
-          <Toolbar type={type} />
-        </ReactCSSTransitionGroup>
-      </div>
       <div style={order:1, flex: 1, position:'relative'}>
         <ReactCSSTransitionGroup transitionName="sheet-stack">
           {@state.stack}

src/sheet.cjsx

@@ -4,6 +4,13 @@ _ = require 'underscore-plus'
 Flexbox = require './components/flexbox.cjsx'
 ResizableRegion = require './components/resizable-region.cjsx'
 
+
+ToolbarSpacer = React.createClass
+  propTypes:
+    order: React.PropTypes.number
+  render: ->
+    <div style={flex: 1, order:@props.order ? 0}></div>
+
 module.exports =
 Sheet = React.createClass
   displayName: 'Sheet'
@@ -33,7 +40,7 @@ Sheet = React.createClass
       width:'100%'
       height:'100%'
 
-    <div name={@props.type} style={style}>
+    <div name={"Sheet-#{@props.type}"} style={style}>
       <Flexbox direction="row">
         {@_backButtonComponent()}
         {@_columnFlexboxComponents()}
@@ -52,6 +59,8 @@ Sheet = React.createClass
       return if classes.length is 0
 
       components = classes.map (c) => <c {...@props} />
+      components.push(@_columnToolbarComponent(column))
+
       maxWidth = _.reduce classes, ((m,c) -> Math.min(c.maxWidth ? 10000, m)), 10000
       minWidth = _.reduce classes, ((m,c) -> Math.max(c.minWidth ? 0, m)), 0
       resizable = minWidth != maxWidth && column != 'Center'
@@ -60,19 +69,32 @@ Sheet = React.createClass
         if column is 'Left' then handle = ResizableRegion.Handle.Right
         if column is 'Right' then handle = ResizableRegion.Handle.Left
         <ResizableRegion minWidth={minWidth} maxWidth={maxWidth} handle={handle}>
-          <Flexbox direction="column" name={column}>
+          <Flexbox direction="column" name={"#{@props.type}:#{column}"}>
             {components}
           </Flexbox>
         </ResizableRegion>
       else
-        <Flexbox direction="column" name={column} style={flex: 1}>
+        <Flexbox direction="column" name={"#{@props.type}:#{column}"} style={flex: 1}>
           {components}
         </Flexbox>
 
+  _columnToolbarComponent: (column) ->
+    components = @state["#{column}Toolbar"].map (item) =>
+      <item {...@props} />
+
+    <div className="sheet-column-toolbar">
+      <Flexbox direction="row">
+        {components}
+        <ToolbarSpacer order={-50}/>
+        <ToolbarSpacer order={50}/>
+      </Flexbox>
+    </div>
+
   _getComponentRegistryState: ->
     state = {}
     for column in @props.columns
       state[column] = ComponentRegistry.findAllViewsByRole "#{@props.type}:#{column}"
+      state["#{column}Toolbar"] = ComponentRegistry.findAllViewsByRole "#{@props.type}:#{column}:Toolbar"
     state
 
   _pop: ->

static/workspace.less

@@ -53,14 +53,20 @@ atom-workspace {
   left:100%;
 }
 
-.toolbar-container {
+.sheet-column-toolbar {
   background: @toolbar-background-color;
   border-bottom: 1px solid @border-color-divider;
+  width:  100%;
+  height: 50px;
 
-  .toolbar {
-    width:  100%;
-    height: 50px;
-  }
+  // prevent flexbox from ever, ever resizing toolbars, no matter
+  // how much it thinks other content is being squished
+  min-height: 50px;
+  max-height: 50px;
+
+  // cover up the vertical resizing separators, so the toolbar appears
+  // to be one continuous bar.
+  z-index: 10;
 }
 
 .flexbox-handle-horizontal {