Make ResizableRegion a core component, not registered with component registry

exports/ui-components.coffee

@@ -4,4 +4,7 @@ module.exports =
   # Models
   Menu: require '../src/components/menu'
   Popover: require '../src/components/popover'
-  TokenizingTextField: require '../src/components/tokenizing-text-field'
+  TokenizingTextField: require '../src/components/tokenizing-text-field'
+  ResizableRegion: require '../src/components/resizable-region'
+  Flexbox: require '../src/components/flexbox'
+

internal_packages/account-sidebar/lib/account-sidebar-item.cjsx

@@ -0,0 +1,14 @@
+React = require 'react'
+{Actions} = require("inbox-exports")
+
+module.exports =
+AccountSidebarItem = React.createClass
+  render: ->
+    className = "item " + if @props.select then " selected" else ""
+    <div className={className} onClick={@_onClick} id={@props.item.id}>
+      <span className="name"> {@props.item.name}</span>
+    </div>
+
+  _onClick: (event) ->
+    event.preventDefault()
+    Actions.selectView(@props.item.view)

internal_packages/composer/lib/composer-view.cjsx

@@ -7,6 +7,8 @@ _ = require 'underscore-plus'
  FileUploadStore,
  ComponentRegistry} = require 'inbox-exports'
 
+{ResizableRegion} = require 'ui-components'
+
 FileUploads = require './file-uploads.cjsx'
 ContenteditableComponent = require './contenteditable-component.cjsx'
 ParticipantsTextField = require './participants-text-field.cjsx'
@@ -32,7 +34,6 @@ ComposerView = React.createClass
     state
 
   getComponentRegistryState: ->
-    ResizableComponent: ComponentRegistry.findViewByName 'ResizableComponent'
     AttachmentComponent: ComponentRegistry.findViewByName 'AttachmentComponent'
     FooterComponents: ComponentRegistry.findAllViewsByRole 'Composer:Footer'
 
@@ -91,13 +92,11 @@ ComposerView = React.createClass
     @_proxy.changes.commit()
 
   render: ->
-    ResizableComponent = @state.ResizableComponent
-
-    if @props.mode is "inline" and ResizableComponent?
+    if @props.mode is "inline"
       <div className={@_wrapClasses()}>
-        <ResizableComponent position="bottom" barStyle={bottom: "57px", zIndex: 2}>
+        <ResizableRegion handle={ResizableRegion.Handle.Bottom}>
           {@_renderComposer()}
-        </ResizableComponent>
+        </ResizableRegion>
       </div>
     else
       <div className={@_wrapClasses()}>

internal_packages/inbox-activity-bar/lib/activity-bar.cjsx

@@ -1,12 +1,12 @@
 _ = require 'underscore-plus'
 React = require 'react/addons'
-{ComponentRegistry,
- DatabaseStore,
+{DatabaseStore,
  NamespaceStore,
  TaskQueue,
  Actions,
  Contact,
  Message} = require 'inbox-exports'
+{ResizableRegion} = require 'ui-components'
 
 ActivityBarStore = require './activity-bar-store'
 ActivityBarTask = require './activity-bar-task'
@@ -18,9 +18,6 @@ ActivityBarClosedHeight = 30
 module.exports =
 ActivityBar = React.createClass
 
-  mixins: [ComponentRegistry.Mixin]
-  components: ['ResizableComponent']
-
   getInitialState: ->
     _.extend @_getStateFromStores(),
       height: ActivityBarClosedHeight
@@ -30,18 +27,16 @@ ActivityBar = React.createClass
   componentDidMount: ->
     @taskQueueUnsubscribe = TaskQueue.listen @_onChange
     @activityStoreUnsubscribe = ActivityBarStore.listen @_onChange
-    @registryUnlisten = ComponentRegistry.listen @_onChange
 
   componentWillUnmount: ->
     @taskQueueUnsubscribe() if @taskQueueUnsubscribe
     @activityStoreUnsubscribe() if @activityStoreUnsubscribe
-    @registryUnlisten() if @registryUnlisten
 
   render: ->
-    ResizableComponent = @state.ResizableComponent
-    return <div></div> unless ResizableComponent?
-
-    <ResizableComponent initialHeight={@state.height} onResize={@_onTrayResized}>
+    <ResizableRegion className="activity-bar"
+                     initialHeight={@state.height}
+                     handle={ResizableRegion.Handle.Top}
+                     onResize={@_onTrayResized}>
       <div className="controls">
         {@_caret()}
         <div className="queue-status">
@@ -69,7 +64,7 @@ ActivityBar = React.createClass
         <div className="btn" onClick={@_onClear}>Clear</div>
         <input className="filter" placeholder="Filter..." value={@state.filter} onChange={@_onFilter} />
       </div>
-    </ResizableComponent>
+    </ResizableRegion>
 
   _caret: ->
     if @state.height > ActivityBarClosedHeight

internal_packages/inbox-activity-bar/lib/main.cjsx

@@ -1,22 +1,14 @@
 React = require 'react'
-ActivityBar = require('./activity-bar')
+{ComponentRegistry} = require 'inbox-exports'
 
 module.exports =
   item: null
 
   activate: (@state={}) ->
-    unless @item?
-      @item = document.createElement("div")
-      @item.setAttribute("id", "activity-bar")
-      @item.setAttribute("class", "activity-bar")
-
-      atom.workspace.addRow(@item)
-
-      React.render(<ActivityBar />, @item)
+    ComponentRegistry.register
+      name: 'activity-bar'
+      role: 'Global:Footer'
+      view: require './activity-bar'
 
   deactivate: ->
-    React.unmountComponentAtNode(@item)
-    @item.remove()
-    @item = null
-
-  serialize: -> @state
+    ComponentRegistry.unregister 'activity-bar'

internal_packages/inbox-activity-bar/stylesheets/activity-bar.less

@@ -1,6 +1,6 @@
 @import "ui-variables";
 
-#activity-bar {
+.activity-bar {
   background-color: rgba(80,80,80,1);
   border-top:1px solid rgba(0,0,0,0.7);
   color:white;
@@ -9,6 +9,7 @@
 
   .resizable {
     display: flex;
+    width:100%;
     flex-direction: column;
     .resizeBar {
       z-index:10;

internal_packages/resizable-component/lib/main.coffee

@@ -1,13 +0,0 @@
-{ComponentRegistry} = require 'inbox-exports'
-ResizableComponent = require './resizable-component.cjsx'
-
-module.exports =
-  activate: ->
-    ComponentRegistry.register
-      name: 'ResizableComponent'
-      view: ResizableComponent
-
-  deactivate: (state) ->
-    ComponentRegistry.unregister 'ResizableComponent'
-
-  serialize: ->

internal_packages/resizable-component/lib/resizable-component.cjsx

@@ -1,86 +0,0 @@
-_ = require "underscore-plus"
-React = require "react"
-
-positions =
-  top:
-    transform: (state, event) ->
-      height: state.bcr.bottom - Math.max(5, event.pageY)
-    cursor: "ns-resize"
-  bottom:
-    transform: (state, event) ->
-      height: Math.max(state.initialHeight, event.pageY - state.bcr.top)
-    cursor: "ns-resize"
-  left:
-    transform: (state, event) ->
-      width: Math.max(5, state.bcr.right - event.pageX)
-    cursor: "ew-resize"
-  right:
-    transform: (state, event) ->
-      width: Math.max(5, - state.bcr.left + event.pageX)
-    cursor: "ew-resize"
-
-module.exports = ResizableComponent =
-React.createClass
-  displayName: 'ResizableComponent'
-  propTypes:
-    position: React.PropTypes.string
-    onResize: React.PropTypes.func
-
-  render: ->
-    position = @props?.position ? 'top'
-    h =  @state.height ? @props.initialHeight
-    style = _.extend({}, @props.style ? {}, {height: h, width: @state.width})
-    <div style={style} className="resizable">
-      <div className={"resizeBar " + position} ref="resizeBar" style={@props.barStyle ? {}}/>
-      {@props.children}
-    </div>
-
-  getInitialState: ->
-    dragging: off
-
-  componentDidMount: ->
-    @refs.resizeBar.getDOMNode().addEventListener('mousedown', @_mouseDown)
-
-  componentWillReceiveProps: (nextProps) ->
-    if nextProps.initialHeight != @props.initialHeight
-      @setState(height: nextProps.initialHeight)
-
-  position: ->
-    positions[@props?.position ? 'top']
-
-  componentWillUnmount: ->
-    @refs.resizeBar.getDOMNode().removeEventListener('mousedown', @_mouseDown)
-
-  componentDidUpdate: (lastProps, lastState) ->
-    if lastState.dragging && !@state.dragging
-      document.body.style.cursor = ""
-      document.removeEventListener('mousemove', @_mouseMove)
-      document.removeEventListener('mouseup', @_mouseUp)
-    else if !lastState.dragging && @state.dragging
-      document.body.style.cursor = @position().cursor
-      document.addEventListener('mousemove', @_mouseMove)
-      document.addEventListener('mouseup', @_mouseUp)
-
-  _mouseDown: (event) ->
-    return if event.button != 0
-    bcr = @getDOMNode().getBoundingClientRect()
-    @setState
-      dragging: on
-      initialHeight: @state.initialHeight ? bcr.height
-      bcr: bcr
-    event.stopPropagation()
-    event.preventDefault()
-
-  _mouseUp: (event) ->
-    return if event.button != 0
-    @setState
-      dragging: off
-    @props.onResize(@state.height) if @props.onResize
-    event.stopPropagation()
-    event.preventDefault()
-
-  _mouseMove: (event) ->
-    return if !@state.dragging
-    @setState @position().transform(@state, event)
-    event.stopPropagation()
-    event.preventDefault()

internal_packages/resizable-component/package.json

@@ -1,8 +0,0 @@
-{
-  "name": "resizable-component",
-  "version": "0.1.0",
-  "main": "./lib/main",
-  "description": "Resizable DOM node",
-  "license": "Proprietary",
-  "private": "true"
-}

src/components/flexbox.cjsx

@@ -0,0 +1,21 @@
+React = require 'react'
+_ = require 'underscore-plus'
+{Actions,ComponentRegistry} = require "inbox-exports"
+
+module.exports =
+Flexbox = React.createClass
+  displayName: 'Flexbox'
+  propTypes:
+    name: React.PropTypes.string
+    direction: React.PropTypes.string
+    style: React.PropTypes.object
+
+  render: ->
+    style = _.extend (@props.style || {}),
+      'flexDirection': @props.direction,
+      'display': 'flex'
+      'height':'100%'
+
+    <div name={name} style={style}>
+      {@props.children}
+    </div>

src/components/resizable-region.cjsx

@@ -0,0 +1,122 @@
+React = require 'react'
+_ = require 'underscore-plus'
+{Actions,ComponentRegistry} = require "inbox-exports"
+
+ResizableHandle =
+  Top:
+    axis: 'vertical'
+    className: 'flexbox-handle-vertical flexbox-handle-top'
+    transform: (state, props, event) ->
+      'height': Math.min(props.maxHeight ? 10000, Math.max(props.minHeight ? 0, state.bcr.bottom - event.pageY))
+  Bottom:
+    axis: 'vertical'
+    className: 'flexbox-handle-vertical flexbox-handle-bottom'
+    transform: (state, props, event) ->
+      'height': Math.min(props.maxHeight ? 10000, Math.max(props.minHeight ? 0, event.pageY - state.bcr.top))
+  Left:
+    axis: 'horizontal'
+    className: 'flexbox-handle-horizontal flexbox-handle-left'
+    transform: (state, props, event) ->
+      'width': Math.min(props.maxWidth ? 10000, Math.max(props.minWidth ? 0, state.bcr.right - event.pageX))
+  Right:
+    axis: 'horizontal'
+    className: 'flexbox-handle-horizontal flexbox-handle-right'
+    transform: (state, props, event) ->
+      'width': Math.min(props.maxWidth ? 10000, Math.max(props.minWidth ? 0, event.pageX - state.bcr.left))
+
+
+module.exports = 
+ResizableRegion = React.createClass
+  displayName: 'ResizableRegion'
+
+  propTypes:
+    className: React.PropTypes.string
+    handle: React.PropTypes.object.isRequired
+    onResize: React.PropTypes.func
+
+    initialWidth: React.PropTypes.number
+    minWidth: React.PropTypes.number
+    maxWidth: React.PropTypes.number
+
+    initialHeight: React.PropTypes.number
+    minHeight: React.PropTypes.number
+    maxHeight: React.PropTypes.number
+
+  getDefaultProps: ->
+    handle: ResizableHandle.Right
+
+  getInitialState: ->
+    dragging: false
+
+  render: ->
+    if @props.handle.axis is 'horizontal'
+      containerStyle =
+        'minWidth': @props.minWidth
+        'maxWidth': @props.maxWidth
+        'position': 'relative'
+        'height': '100%'
+
+      if @state.width?
+        containerStyle.width = @state.width
+      else
+        containerStyle.flex = 1
+
+    else
+      containerStyle =
+        'minHeight': @props.minHeight
+        'maxHeight': @props.maxHeight
+        'position': 'relative'
+        'width': '100%'
+
+      if @state.height?
+        containerStyle.height = @state.height
+      else if @props.initialHeight?
+        containerStyle.height = @props.initialHeight
+      else
+        containerStyle.flex = 1
+
+    <div className={@props.className} style={containerStyle}>
+      {@props.children}
+      <div className={@props.handle.className}
+           onMouseDown={@_mouseDown}><div></div>
+      </div>
+    </div>
+
+  componentDidUpdate: (lastProps, lastState) ->
+    if lastState.dragging and not @state.dragging
+      document.removeEventListener('mousemove', @_mouseMove)
+      document.removeEventListener('mouseup', @_mouseUp)
+    else if not lastState.dragging and @state.dragging
+      document.addEventListener('mousemove', @_mouseMove)
+      document.addEventListener('mouseup', @_mouseUp)
+
+  componentWillReceiveProps: (nextProps) ->
+    if nextProps.handle.axis is 'vertical' and nextProps.initialHeight != @props.initialHeight
+      @setState(height: nextProps.initialHeight)
+    if nextProps.handle.axis is 'horizontal' and nextProps.initialWidth != @props.initialWidth
+      @setState(width: nextProps.initialWidth)
+
+  _mouseDown: (event) ->
+    return if event.button != 0
+    bcr = @getDOMNode().getBoundingClientRect()
+    @setState
+      dragging: true
+      bcr: bcr
+    event.stopPropagation()
+    event.preventDefault()
+
+  _mouseUp: (event) ->
+    return if event.button != 0
+    @setState
+      dragging: false
+    @props.onResize(@state.height ? @state.width) if @props.onResize
+    event.stopPropagation()
+    event.preventDefault()
+
+  _mouseMove: (event) ->
+    return if !@state.dragging
+    @setState @props.handle.transform(@state, @props, event)
+    event.stopPropagation()
+    event.preventDefault()
+
+ResizableRegion.Handle = ResizableHandle

src/flexbox-components.cjsx

@@ -1,108 +0,0 @@
-React = require 'react'
-_ = require 'underscore-plus'
-{Actions,ComponentRegistry} = require "inbox-exports"
-
-FlexboxResizeHandlePosition =
-  top:
-    className: 'flexbox-handle-vertical flexbox-handle-top'
-    transform: (state, props, event) ->
-      'height': Math.max(state.initialHeight, state.bcr.bottom - Math.max(5, event.pageY))
-  bottom:
-    className: 'flexbox-handle-vertical flexbox-handle-bottom'
-    transform: (state, props, event) ->
-      'height': Math.max(state.initialHeight, event.pageY - state.bcr.top)
-  left:
-    className: 'flexbox-handle-horizontal flexbox-handle-left'
-    transform: (state, props, event) ->
-      'width': Math.min(props.maxWidth, Math.max(props.minWidth, state.bcr.right - event.pageX))
-  right:
-    className: 'flexbox-handle-horizontal flexbox-handle-right'
-    transform: (state, props, event) ->
-      'width': Math.min(props.maxWidth, Math.max(props.minWidth, event.pageX - state.bcr.left))
-
-
-FlexboxResizableRegion = React.createClass
-  displayName: 'FlexboxResizableRegion'
-
-  propTypes:
-    handlePosition: React.PropTypes.object.isRequired
-
-  getDefaultProps: ->
-    handlePosition: FlexboxResizeHandlePosition.right
-
-  getInitialState: ->
-    dragging: false
-
-  render: ->
-    containerStyle =
-      'minWidth': @props.minWidth
-      'maxWidth': @props.maxWidth
-      'position': 'relative'
-      'height': '100%'
-
-    if @state.width?
-      containerStyle.width = @state.width
-    else
-      containerStyle.flex = 1
-
-    <div style={containerStyle}>
-      {@props.children}
-      <div className={@props.handlePosition.className}
-           onMouseDown={@_mouseDown}><div></div>
-      </div>
-    </div>
-
-  componentDidUpdate: (lastProps, lastState) ->
-    if lastState.dragging and not @state.dragging
-      document.removeEventListener('mousemove', @_mouseMove)
-      document.removeEventListener('mouseup', @_mouseUp)
-    else if not lastState.dragging and @state.dragging
-      document.addEventListener('mousemove', @_mouseMove)
-      document.addEventListener('mouseup', @_mouseUp)
-
-  _mouseDown: (event) ->
-    return if event.button != 0
-    bcr = @getDOMNode().getBoundingClientRect()
-    @setState
-      dragging: true
-      bcr: bcr
-    event.stopPropagation()
-    event.preventDefault()
-
-  _mouseUp: (event) ->
-    return if event.button != 0
-    @setState
-      dragging: false
-    event.stopPropagation()
-    event.preventDefault()
-
-  _mouseMove: (event) ->
-    return if !@state.dragging
-    @setState @props.handlePosition.transform(@state, @props, event)
-    event.stopPropagation()
-    event.preventDefault()
-
-
-
-Flexbox = React.createClass
-  displayName: 'Flexbox'
-  propTypes:
-    name: React.PropTypes.string
-    direction: React.PropTypes.string
-    style: React.PropTypes.object
-
-  render: ->
-    style = _.extend (@props.style || {}),
-      'flexDirection': @props.direction,
-      'display': 'flex'
-      'height':'100%'
-
-    <div name={name} style={style}>
-      {@props.children}
-    </div>
-
-
-module.exports =
-  Flexbox: Flexbox
-  FlexboxResizableRegion: FlexboxResizableRegion
-  FlexboxResizeHandlePosition: FlexboxResizeHandlePosition

src/sheet-container.cjsx

@@ -1,11 +1,10 @@
 React = require 'react'
 SheetStore = require './sheet-store'
 {Actions,ComponentRegistry} = require "inbox-exports"
-{Flexbox, FlexboxResizableRegion} = require './flexbox-components.cjsx'
+Flexbox = require './components/flexbox.cjsx'
 ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
 
 Toolbar = React.createClass
-  
   propTypes:
     type: React.PropTypes.string.isRequired
 
@@ -36,6 +35,31 @@ Toolbar = React.createClass
 
     items: [].concat(globalItems, typeItems)
 
+Footer = React.createClass
+  getInitialState: ->
+    @_getComponentRegistryState()
+
+  componentDidMount: ->
+    @unlistener = ComponentRegistry.listen (event) =>
+      @setState(@_getComponentRegistryState())
+
+  componentWillUnmount: ->
+    @unlistener() if @unlistener
+
+  render: ->
+    <div className="footer">
+      <Flexbox direction="row">
+        {@_footerComponents()}
+      </Flexbox>
+    </div>
+
+  _footerComponents: ->
+    @state.items.map (item) =>
+      <item {...@props} />
+
+  _getComponentRegistryState: ->
+    items: ComponentRegistry.findAllViewsByRole "Global:Footer"
+
 
 module.exports =
 SheetContainer = React.createClass
@@ -66,6 +90,9 @@ SheetContainer = React.createClass
           {@state.stack}
         </ReactCSSTransitionGroup>
       </div>
+      <div style={order:2} className="footer-container">
+        <Footer />
+      </div>
     </Flexbox>
 
   _onStoreChange: ->

src/sheet.cjsx

@@ -1,7 +1,8 @@
 React = require 'react'
 _ = require 'underscore-plus'
 {Actions,ComponentRegistry} = require "inbox-exports"
-{Flexbox, FlexboxResizableRegion, FlexboxResizeHandlePosition} = require './flexbox-components.cjsx'
+Flexbox = require './components/flexbox.cjsx'
+ResizableRegion = require './components/resizable-region.cjsx'
 
 module.exports =
 Sheet = React.createClass
@@ -56,13 +57,13 @@ Sheet = React.createClass
       resizable = minWidth != maxWidth && column != 'Center'
 
       if resizable
-        if column is 'Left' then handle = FlexboxResizeHandlePosition.right
-        if column is 'Right' then handle = FlexboxResizeHandlePosition.left
-        <FlexboxResizableRegion minWidth={minWidth} maxWidth={maxWidth} handlePosition={handle}>
+        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}>
             {components}
           </Flexbox>
-        </FlexboxResizableRegion>
+        </ResizableRegion>
       else
         <Flexbox direction="column" name={column} style={flex: 1}>
           {components}

static/workspace.less

@@ -103,3 +103,26 @@ atom-workspace {
     padding-right:2px;
   }
 }
+
+.flexbox-handle-vertical {
+  width:100%;
+  height:6px;
+  left:0;
+  right:0;
+  z-index:2;
+  position:absolute;
+  cursor: row-resize;
+  div {
+    width:100%;
+    border-top: 1px solid @border-color-divider;
+  }
+
+  &.flexbox-handle-top {
+    top:-3px;
+    padding-right:3px;
+  }
+  &.flexbox-handle-bottom {
+    bottom:-3px;
+    padding-right:2px;
+  }
+}