From 066d8dc944c685372630400eee2dcdd0c856e65f Mon Sep 17 00:00:00 2001 From: probablycorey Date: Fri, 3 Jan 2014 15:26:27 -0800 Subject: [PATCH 1/3] Add prependToBottom and appendToBottom --- src/workspace-view.coffee | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/workspace-view.coffee b/src/workspace-view.coffee index 98d05a91f..9da5dd2b7 100644 --- a/src/workspace-view.coffee +++ b/src/workspace-view.coffee @@ -272,6 +272,12 @@ class WorkspaceView extends View getOpenBufferPaths: -> _.uniq(_.flatten(@getEditorViews().map (editorView) -> editorView.getOpenBufferPaths())) + prependToBottom: (element)-> + @panes.after(element) + + appendToBottom: (element)-> + @vertical.append(element) + # Public: Returns the currently focused {Pane}. getActivePane: -> @panes.getActivePane() From 5d99acd8c5c0c8b176320ec301293ed88d065d64 Mon Sep 17 00:00:00 2001 From: probablycorey Date: Fri, 3 Jan 2014 15:26:51 -0800 Subject: [PATCH 2/3] Update docs --- docs/internals/view-system.md | 25 +++++++++---------------- docs/your-first-package.md | 35 ++++++++++++++++++----------------- 2 files changed, 27 insertions(+), 33 deletions(-) diff --git a/docs/internals/view-system.md b/docs/internals/view-system.md index d3b24ee1a..1498e7b07 100644 --- a/docs/internals/view-system.md +++ b/docs/internals/view-system.md @@ -40,25 +40,18 @@ window, and contains every other view. If you open Atom's inspector with #### Panes -The `WorkspaceView` contains a `#horizontal` and a `#vertical` axis surrounding -`#panes`. Elements in the horizontal axis will tile across the window -horizontally, appearing to have a vertical orientation. Items in the vertical -axis will tile across the window vertically, appearing to have a horizontal -orientation. You would typically attach tool panels to the root view's primary -axes. Tool panels are elements which take up some screen real estate that isn't -devoted to direct editing. In the example above, the `TreeView` is present in -the `#horizontal` axis to the left of the `#panes`, and the `CommandPanel` is -present in the `#vertical` axis below the `#panes`. - -You can attach a tool panel to an axis using the `horizontal` or `vertical` -outlets as follows: +The `WorkspaceView` contains `prependToBottom/Top/Left/Right` and +`appendToBottom/Top/Left/Right` methods, which are used to add Tool Panels. Tool +panels are elements that take up screen real estate not devoted to text editing. +In the example above, the `TreeView` is appended to the left, and the +`CommandPanel` is appended to the top. ```coffeescript -# place a view to the left of the panes (or use .append() to place it to the right) -atom.workspaceView.horizontal.prepend(new MyView) +# place a view to the left of the panes +atom.workspaceView.appendToLeft(new MyView) -# place a view below the panes (or use .prepend() to place it above) -atom.workspaceView.vertical.append(new MyOtherView) +# place a view below the panes +atom.workspaceView.appendToBottom(new MyOtherView) ``` [spacepen]: http://github.com/nathansobo/space-pen diff --git a/docs/your-first-package.md b/docs/your-first-package.md index 957f75fee..9f9901229 100644 --- a/docs/your-first-package.md +++ b/docs/your-first-package.md @@ -177,32 +177,33 @@ ul.modified-files-list { } ``` -We'll add one more line to the end of the `magic` method to make this pane appear: +We'll add one more line to the end of the `magic` method to make this pane +appear: ```coffeescript -atom.workspaceView.vertical.append(this) +atom.workspaceView.prependToBottom(this) ``` -If you refresh Atom and hit the key command, you'll see a box appear right underneath -the editor: +If you refresh Atom and hit the key command, you'll see a box appear right +underneath the editor: ![Changer_Panel_Append] -As you might have guessed, `atom.workspaceView.vertical.append` tells Atom to append `this` -item (_i.e._, whatever is defined by`@content`) _vertically_ to the editor. If -we had called `atom.workspaceView.horizontal.append`, the pane would be attached to the -right-hand side of the editor. +As you might have guessed, `atom.workspaceView.prependToBottom` tells Atom to +prepend `this` item (_i.e._, whatever is defined by`@content`). If we had called +`atom.workspaceView.appendToBottom`, the pane would be attached below the status +bar. -Before we populate this panel for real, let's apply some logic to toggle the pane -off and on, just like we did with the tree view. Replace the `atom.workspaceView.vertical.append` -call with this code: +Before we populate this panel for real, let's apply some logic to toggle the +pane off and on, just like we did with the tree view. Replace the +`atom.workspaceView.prependToBottom` call with this code: ```coffeescript # toggles the pane if @hasParent() - atom.workspaceView.vertical.children().last().remove() + @remove() else - atom.workspaceView.vertical.append(this) + atom.workspaceView.prependToBottom(this) ``` There are about a hundred different ways to toggle a pane on and off, and this @@ -261,13 +262,13 @@ appending it to `modifiedFilesList`: ```coffeescript # toggles the pane if @hasParent() - atom.workspaceView.vertical.children().last().remove() + @remove() else for file in modifiedFiles stat = fs.lstatSync(file) mtime = stat.mtime @modifiedFilesList.append("
  • #{file} - Modified at #{mtime}") - atom.workspaceView.vertical.append(this) + atom.workspaceView.prependToBottom(this) ``` When you toggle the modified files list, your pane is now populated with the @@ -283,13 +284,13 @@ this demonstration, we'll just clear the `modifiedFilesList` each time it's clos # toggles the pane if @hasParent() @modifiedFilesList.empty() # added this to clear the list on close - atom.workspaceView.vertical.children().last().remove() + @remove() else for file in modifiedFiles stat = fs.lstatSync(file) mtime = stat.mtime @modifiedFilesList.append("
  • #{file} - Modified at #{mtime}") - atom.workspaceView.vertical.append(this) + atom.workspaceView.prependToBottom(this) ``` ## Coloring UI Elements From 9f32a24e7eb2cb759cde6678ef4b3111d31a91eb Mon Sep 17 00:00:00 2001 From: probablycorey Date: Fri, 3 Jan 2014 15:32:34 -0800 Subject: [PATCH 3/3] Add all Tool Panel append and prepend methods --- spec/workspace-view-spec.coffee | 4 ++-- src/workspace-view.coffee | 30 ++++++++++++++++++++++++++++-- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/spec/workspace-view-spec.coffee b/spec/workspace-view-spec.coffee index 3147ee13a..9a1f75297 100644 --- a/spec/workspace-view-spec.coffee +++ b/spec/workspace-view-spec.coffee @@ -111,7 +111,7 @@ describe "WorkspaceView", -> it "passes focus to the first focusable element", -> focusable1 = $$ -> @div "One", id: 'one', tabindex: -1 focusable2 = $$ -> @div "Two", id: 'two', tabindex: -1 - atom.workspaceView.horizontal.append(focusable1, focusable2) + atom.workspaceView.appendToLeft(focusable1, focusable2) expect(document.activeElement).toBe document.body atom.workspaceView.focus() @@ -120,7 +120,7 @@ describe "WorkspaceView", -> describe "when there are no visible focusable elements", -> it "surrenders focus to the body", -> focusable = $$ -> @div "One", id: 'one', tabindex: -1 - atom.workspaceView.horizontal.append(focusable) + atom.workspaceView.appendToLeft(focusable) focusable.hide() expect(document.activeElement).toBe document.body diff --git a/src/workspace-view.coffee b/src/workspace-view.coffee index 9da5dd2b7..a8f5f15ad 100644 --- a/src/workspace-view.coffee +++ b/src/workspace-view.coffee @@ -272,12 +272,38 @@ class WorkspaceView extends View getOpenBufferPaths: -> _.uniq(_.flatten(@getEditorViews().map (editorView) -> editorView.getOpenBufferPaths())) - prependToBottom: (element)-> + # Public: Prepends the element to the top of the window. + prependToTop: (element) -> + @vertical.prepend(element) + + # Public: Appends the element to the top of the window. + appendToTop: (element) -> + @panes.before(element) + + # Public: Prepends the element to the bottom of the window. + prependToBottom: (element) -> @panes.after(element) - appendToBottom: (element)-> + # Public: Appends the element to bottom of the window. + appendToBottom: (element) -> @vertical.append(element) + # Public: Prepends the element to the left side of the window. + prependToLeft: (element) -> + @horizontal.prepend(element) + + # Public: Appends the element to the left side of the window. + appendToLeft: (element) -> + @vertical.before(element) + + # Public: Prepends the element to the right side of the window. + prependToRight: (element) -> + @vertical.after(element) + + # Public: Appends the element to the right side of the window. + appendToRight: (element) -> + @horizontal.append(element) + # Public: Returns the currently focused {Pane}. getActivePane: -> @panes.getActivePane()