spiking out resizable panes

src/pane-view.coffee

@@ -20,6 +20,8 @@ class PaneView extends View
 
   @content: (wrappedView) ->
     @div class: 'pane', tabindex: -1, =>
+      @div class: 'pane-view-resize-horizontal-handle'
+      @div class: 'pane-view-resize-vertical-handle'
       @div class: 'item-views', outlet: 'itemViews'
 
   @delegatesProperties 'items', 'activeItem', toProperty: 'model'
@@ -44,6 +46,9 @@ class PaneView extends View
     @handleEvents()
 
   handleEvents: ->
+    @on 'mousedown', '.pane-view-resize-horizontal-handle', (e) => @resizeStarted(e)
+    @on 'mousedown', '.pane-view-resize-vertical-handle', (e) => @resizeStarted(e)
+
     @subscribe @model.$activeItem, @onActiveItemChanged
     @subscribe @model, 'item-added', @onItemAdded
     @subscribe @model, 'item-removed', @onItemRemoved
@@ -183,6 +188,18 @@ class PaneView extends View
   activeItemTitleChanged: =>
     @trigger 'pane:active-item-title-changed'
 
+  resizeStarted: =>
+    $(document.body).on('mousemove', @resizePaneView)
+    $(document.body).on('mouseup', @resizeStopped)
+
+  resizeStopped: =>
+    $(document.body).off('mousemove', @resizeTreeView)
+    $(document.body).off('mouseup', @resizeStopped)
+
+  resizePaneView: ({pageX}) =>
+    width = pageX
+    @css 'max-width', "#{width}px"
+
   viewForItem: (item) ->
     return unless item?
     if item instanceof $

static/panes.less

@@ -48,3 +48,25 @@
     }
   }
 }
+
+.pane-view-resize-horizontal-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  cursor: col-resize;
+  z-index: 3;
+  background-color: red;
+  width: 2px;
+}
+
+.pane-view-resize-vertical-handle {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  cursor: row-resize;
+  z-index: 3;
+  background-color: red;
+  height: 2px;
+}