From c7d12cb6b581843342659bad32a83ae6666db035 Mon Sep 17 00:00:00 2001 From: Pat Nakajima Date: Thu, 17 Jan 2013 12:48:29 -0800 Subject: [PATCH] Allow tree view sidebar to be resized. --- src/packages/tree-view/src/tree-view.coffee | 16 +++++++++++++++- src/packages/tree-view/stylesheets/tree-view.css | 13 +++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/packages/tree-view/src/tree-view.coffee b/src/packages/tree-view/src/tree-view.coffee index 989603938..fe9ae0139 100644 --- a/src/packages/tree-view/src/tree-view.coffee +++ b/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' @deserialize: (state, rootView) -> treeView = new TreeView(rootView) @@ -46,6 +47,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 @@ -119,6 +121,18 @@ class TreeView extends ScrollView false + resizeStarted: (e) => + $(document.body).bind('mousemove', @resizeTreeView) + $(document.body).bind('mouseup', @resizeStopped) + + resizeStopped: (e) => + $(document.body).unbind('mousemove', @resizeTreeView) + $(document.body).unbind('mouseup', @resizeStopped) + + resizeTreeView: (e) => + $('.tree-view').css(width: e.pageX) + $('.tree-view .tree-view-resizer').css(left: e.pageX + 12) # Tree view has padding-left: 12 + updateRoot: -> @root?.remove() if rootDirectory = @rootView.project.getRootDirectory() diff --git a/src/packages/tree-view/stylesheets/tree-view.css b/src/packages/tree-view/stylesheets/tree-view.css index b9de058e2..c29cb0299 100644 --- a/src/packages/tree-view/stylesheets/tree-view.css +++ b/src/packages/tree-view/stylesheets/tree-view.css @@ -7,12 +7,25 @@ -webkit-user-select: none; border-right: 2px solid #191919; min-width: 100px; + width: 200px; z-index: 2; padding-left: 12px; } +.tree-view .tree-view-resizer { + position: fixed; + float: right; + left: 212px; + height: 100%; + width: 2px; + background: transparent; + cursor: col-resize; +} + .tree-view .entry { text-shadow: 0 -1px 0 #000; + text-wrap: none; + white-space: nowrap; } .tree-view .entries {