From c7d12cb6b581843342659bad32a83ae6666db035 Mon Sep 17 00:00:00 2001 From: Pat Nakajima Date: Thu, 17 Jan 2013 12:48:29 -0800 Subject: [PATCH 01/11] 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 { From cb8d18d83cdb745bb7ae778ebcb77d0f277eaf28 Mon Sep 17 00:00:00 2001 From: Pat Nakajima Date: Thu, 17 Jan 2013 12:56:34 -0800 Subject: [PATCH 02/11] Increase size of resize handle to 10px --- src/packages/tree-view/stylesheets/tree-view.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/tree-view/stylesheets/tree-view.css b/src/packages/tree-view/stylesheets/tree-view.css index c29cb0299..4da9fbd44 100644 --- a/src/packages/tree-view/stylesheets/tree-view.css +++ b/src/packages/tree-view/stylesheets/tree-view.css @@ -17,7 +17,7 @@ float: right; left: 212px; height: 100%; - width: 2px; + width: 10px; background: transparent; cursor: col-resize; } From b36228c3ac624375a51ca411db5ac8029476768c Mon Sep 17 00:00:00 2001 From: Pat Nakajima Date: Thu, 17 Jan 2013 13:09:18 -0800 Subject: [PATCH 03/11] No need for left padding, since the sidebar is resizable --- src/packages/tree-view/src/tree-view.coffee | 2 +- src/packages/tree-view/stylesheets/tree-view.css | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/packages/tree-view/src/tree-view.coffee b/src/packages/tree-view/src/tree-view.coffee index fe9ae0139..1eeb061d7 100644 --- a/src/packages/tree-view/src/tree-view.coffee +++ b/src/packages/tree-view/src/tree-view.coffee @@ -131,7 +131,7 @@ class TreeView extends ScrollView resizeTreeView: (e) => $('.tree-view').css(width: e.pageX) - $('.tree-view .tree-view-resizer').css(left: e.pageX + 12) # Tree view has padding-left: 12 + $('.tree-view .tree-view-resizer').css(left: e.pageX) updateRoot: -> @root?.remove() diff --git a/src/packages/tree-view/stylesheets/tree-view.css b/src/packages/tree-view/stylesheets/tree-view.css index 4da9fbd44..d9483c0a8 100644 --- a/src/packages/tree-view/stylesheets/tree-view.css +++ b/src/packages/tree-view/stylesheets/tree-view.css @@ -9,13 +9,12 @@ min-width: 100px; width: 200px; z-index: 2; - padding-left: 12px; } .tree-view .tree-view-resizer { position: fixed; float: right; - left: 212px; + left: 200px; height: 100%; width: 10px; background: transparent; From a139125c9e5669d0957cc2e019b6cbdba7dda998 Mon Sep 17 00:00:00 2001 From: Pat Nakajima Date: Thu, 17 Jan 2013 13:20:32 -0800 Subject: [PATCH 04/11] Use pointer cursor for package manager --- static/select-list.css | 1 + 1 file changed, 1 insertion(+) diff --git a/static/select-list.css b/static/select-list.css index 9e716d9f2..a17e22023 100644 --- a/static/select-list.css +++ b/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 { From b241cf9fd44675fd3a1d7af6df68c432cdcfda12 Mon Sep 17 00:00:00 2001 From: Pat Nakajima Date: Thu, 17 Jan 2013 13:24:33 -0800 Subject: [PATCH 05/11] Prevent selection highlight styles on tabs --- src/packages/tabs/stylesheets/tabs.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/packages/tabs/stylesheets/tabs.css b/src/packages/tabs/stylesheets/tabs.css index 8ddf33b0f..cf47e87e6 100644 --- a/src/packages/tabs/stylesheets/tabs.css +++ b/src/packages/tabs/stylesheets/tabs.css @@ -2,6 +2,12 @@ background: #333333; border-bottom: 4px solid #424242; font: caption; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .tab { From 2e94c130ed7efc36dc2b53da00f148403e93d8db Mon Sep 17 00:00:00 2001 From: Pat Nakajima Date: Thu, 17 Jan 2013 14:57:43 -0800 Subject: [PATCH 06/11] Remove use of CSS selectors (use outlets instead) --- src/packages/tree-view/src/tree-view.coffee | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/packages/tree-view/src/tree-view.coffee b/src/packages/tree-view/src/tree-view.coffee index 1eeb061d7..5307edf69 100644 --- a/src/packages/tree-view/src/tree-view.coffee +++ b/src/packages/tree-view/src/tree-view.coffee @@ -28,7 +28,7 @@ class TreeView extends ScrollView @content: (rootView) -> @ol class: 'tree-view tool-panel', tabindex: -1, => - @div class: 'tree-view-resizer' + @div class: 'tree-view-resizer', outlet: 'resizer' @deserialize: (state, rootView) -> treeView = new TreeView(rootView) @@ -122,16 +122,18 @@ class TreeView extends ScrollView false resizeStarted: (e) => - $(document.body).bind('mousemove', @resizeTreeView) - $(document.body).bind('mouseup', @resizeStopped) + $(document.body).on('mousemove', @resizeTreeView) + $(document.body).on('mouseup', @resizeStopped) + @css(overflow: 'hidden') resizeStopped: (e) => - $(document.body).unbind('mousemove', @resizeTreeView) - $(document.body).unbind('mouseup', @resizeStopped) + $(document.body).off('mousemove', @resizeTreeView) + $(document.body).off('mouseup', @resizeStopped) + @css(overflow: 'auto') resizeTreeView: (e) => - $('.tree-view').css(width: e.pageX) - $('.tree-view .tree-view-resizer').css(left: e.pageX) + @css(width: e.pageX) + @resizer.css(left: e.pageX) updateRoot: -> @root?.remove() From fbd65ecbb1a26486424f64204a00f68c406438e7 Mon Sep 17 00:00:00 2001 From: Pat Nakajima Date: Thu, 17 Jan 2013 14:59:40 -0800 Subject: [PATCH 07/11] Remove unnecessary CSS rules --- src/packages/tabs/stylesheets/tabs.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/packages/tabs/stylesheets/tabs.css b/src/packages/tabs/stylesheets/tabs.css index cf47e87e6..02650af58 100644 --- a/src/packages/tabs/stylesheets/tabs.css +++ b/src/packages/tabs/stylesheets/tabs.css @@ -2,11 +2,7 @@ background: #333333; border-bottom: 4px solid #424242; font: caption; - -webkit-touch-callout: none; -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } From fef9aae2f30173590633c2cc8ccb6ec8f84582e8 Mon Sep 17 00:00:00 2001 From: Pat Nakajima Date: Thu, 17 Jan 2013 15:02:56 -0800 Subject: [PATCH 08/11] No need for the min-width on tree-view anymore --- src/packages/tree-view/stylesheets/tree-view.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/packages/tree-view/stylesheets/tree-view.css b/src/packages/tree-view/stylesheets/tree-view.css index d9483c0a8..a94028f16 100644 --- a/src/packages/tree-view/stylesheets/tree-view.css +++ b/src/packages/tree-view/stylesheets/tree-view.css @@ -6,7 +6,6 @@ cursor: default; -webkit-user-select: none; border-right: 2px solid #191919; - min-width: 100px; width: 200px; z-index: 2; } From a6dfabfe7117c42dae88bb74657213dfd2f9be9a Mon Sep 17 00:00:00 2001 From: Corey Johnson Date: Mon, 21 Jan 2013 10:38:41 -0800 Subject: [PATCH 09/11] Remove width from .tree-view-resizer --- src/packages/tree-view/stylesheets/tree-view.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/packages/tree-view/stylesheets/tree-view.css b/src/packages/tree-view/stylesheets/tree-view.css index a94028f16..705921ffc 100644 --- a/src/packages/tree-view/stylesheets/tree-view.css +++ b/src/packages/tree-view/stylesheets/tree-view.css @@ -11,9 +11,7 @@ } .tree-view .tree-view-resizer { - position: fixed; float: right; - left: 200px; height: 100%; width: 10px; background: transparent; From 9e5c7a77d5cb400c0eecbdc677bdc55f1bb66b09 Mon Sep 17 00:00:00 2001 From: Corey Johnson Date: Mon, 21 Jan 2013 10:39:31 -0800 Subject: [PATCH 10/11] Add min-width back for TreeView In case someone sets the width to 0 and wonders where it went. --- src/packages/tree-view/stylesheets/tree-view.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/tree-view/stylesheets/tree-view.css b/src/packages/tree-view/stylesheets/tree-view.css index 705921ffc..6376a0c09 100644 --- a/src/packages/tree-view/stylesheets/tree-view.css +++ b/src/packages/tree-view/stylesheets/tree-view.css @@ -6,7 +6,7 @@ cursor: default; -webkit-user-select: none; border-right: 2px solid #191919; - width: 200px; + min-width: 100px; z-index: 2; } From 3a5d02fccf421a9c075357da2daac83c0a02ef80 Mon Sep 17 00:00:00 2001 From: Corey Johnson Date: Mon, 21 Jan 2013 10:41:27 -0800 Subject: [PATCH 11/11] Serialize TreeView width --- src/packages/tree-view/src/tree-view.coffee | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/packages/tree-view/src/tree-view.coffee b/src/packages/tree-view/src/tree-view.coffee index 5307edf69..6cee5f8af 100644 --- a/src/packages/tree-view/src/tree-view.coffee +++ b/src/packages/tree-view/src/tree-view.coffee @@ -36,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 @@ -81,6 +82,7 @@ class TreeView extends ScrollView hasFocus: @hasFocus() attached: @hasParent() scrollTop: @scrollTop() + width: @width() deactivate: -> @root?.unwatchEntries()