Merge pull request #136 from github/resize-sidebar-tree-view

Allow tree view sidebar to be resized.

src/packages/tabs/stylesheets/tabs.css

@@ -2,6 +2,8 @@
   background: #333333;
   border-bottom: 4px solid #424242;
   font: caption;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .tab {

src/packages/tree-view/src/tree-view.coffee

@@ -27,7 +27,8 @@ class TreeView extends ScrollView
     @instance.serialize()
 
   @content: (rootView) ->
-    @ol class: 'tree-view tool-panel', tabindex: -1
+    @ol class: 'tree-view tool-panel', tabindex: -1, =>
+      @div class: 'tree-view-resizer', outlet: 'resizer'
 
   @deserialize: (state, rootView) ->
     treeView = new TreeView(rootView)
@@ -35,6 +36,7 @@ class TreeView extends ScrollView
     treeView.selectEntryForPath(state.selectedPath)
     treeView.focusAfterAttach = state.hasFocus
     treeView.scrollTopAfterAttach = state.scrollTop
+    treeView.width(state.width)
     treeView.attach() if state.attached
     treeView
 
@@ -46,6 +48,7 @@ class TreeView extends ScrollView
   initialize: (@rootView) ->
     super
     @on 'click', '.entry', (e) => @entryClicked(e)
+    @on 'mousedown', '.tree-view-resizer', (e) => @resizeStarted(e)
     @command 'core:move-up', => @moveUp()
     @command 'core:move-down', => @moveDown()
     @command 'core:close', => @detach(); false
@@ -79,6 +82,7 @@ class TreeView extends ScrollView
     hasFocus: @hasFocus()
     attached: @hasParent()
     scrollTop: @scrollTop()
+    width: @width()
 
   deactivate: ->
     @root?.unwatchEntries()
@@ -119,6 +123,20 @@ class TreeView extends ScrollView
 
     false
 
+  resizeStarted: (e) =>
+    $(document.body).on('mousemove', @resizeTreeView)
+    $(document.body).on('mouseup', @resizeStopped)
+    @css(overflow: 'hidden')
+
+  resizeStopped: (e) =>
+    $(document.body).off('mousemove', @resizeTreeView)
+    $(document.body).off('mouseup', @resizeStopped)
+    @css(overflow: 'auto')
+
+  resizeTreeView: (e) =>
+    @css(width: e.pageX)
+    @resizer.css(left: e.pageX)
+
   updateRoot: ->
     @root?.remove()
     if rootDirectory = @rootView.project.getRootDirectory()

src/packages/tree-view/stylesheets/tree-view.css

@@ -8,11 +8,20 @@
   border-right: 2px solid #191919;
   min-width: 100px;
   z-index: 2;
-  padding-left: 12px;
+}
+
+.tree-view .tree-view-resizer {
+  float: right;
+  height: 100%;
+  width: 10px;
+  background: transparent;
+  cursor: col-resize;
 }
 
 .tree-view .entry {
   text-shadow: 0 -1px 0 #000;
+  text-wrap: none;
+  white-space: nowrap;
 }
 
 .tree-view .entries {

static/select-list.css

@@ -10,6 +10,7 @@
   -webkit-box-shadow: 0 0 5px 5px #222;
   padding: 5px;
   z-index: 99;
+  cursor: pointer;
 }
 
 .select-list .editor {