From 9d8af2960f163544f4abd9d841974071f1b83a81 Mon Sep 17 00:00:00 2001 From: abe33 Date: Wed, 23 Sep 2015 16:10:03 +0200 Subject: [PATCH 1/3] Use a flex layout for the tree-view-resized div MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This change does not impact how the tree-view render, but will allow other packages to insert new content in the `tree-view-resizer` div without having to worry about the layout being broken or the list not scrolling to the last item (as the list can be pushed by the additional content). For instance `autohide-tree-view` sets the height using something like `calc(100% - 29px)` which maybe fine if it’s the only package. But it starts to get ugly when different packages insert content in the tree-view with different methods (see abe33/atom-tree-view-breadcrumb#19 for instance). --- styles/tree-view.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/styles/tree-view.less b/styles/tree-view.less index 64e4ebb7..dd67747a 100644 --- a/styles/tree-view.less +++ b/styles/tree-view.less @@ -9,6 +9,8 @@ min-width: 100px; width: 200px; z-index: 2; + display: flex; + flex-direction: column; .tree-view-resize-handle { position: absolute; From 613e22fd644080ada2bfb3a107ce1451a82db0e2 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 24 Sep 2015 13:32:19 +0900 Subject: [PATCH 2/3] Change tree-view-scroller to `flex: 1` instead of 100% height. This allows for other packages to share the available space. --- styles/tree-view.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/tree-view.less b/styles/tree-view.less index dd67747a..976c8a31 100644 --- a/styles/tree-view.less +++ b/styles/tree-view.less @@ -35,7 +35,7 @@ } .tree-view-scroller { - height: 100%; + flex: 1; width: 100%; overflow: auto; } From adbf8d37ee4380417ae67895a985f7eda3a01311 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 2 Oct 2015 16:04:39 +0900 Subject: [PATCH 3/3] Add order--xxx classes This allows other packages to decide where they want to appear no matter the DOM order. --- lib/tree-view.coffee | 2 +- styles/tree-view.less | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/tree-view.coffee b/lib/tree-view.coffee index 7f821fce..3295f9c2 100644 --- a/lib/tree-view.coffee +++ b/lib/tree-view.coffee @@ -26,7 +26,7 @@ class TreeView extends View @content: -> @div class: 'tree-view-resizer tool-panel', 'data-show-on-right-side': atom.config.get('tree-view.showOnRightSide'), => - @div class: 'tree-view-scroller', outlet: 'scroller', => + @div class: 'tree-view-scroller order--center', outlet: 'scroller', => @ol class: 'tree-view full-menu list-tree has-collapsable-children focusable-panel', tabindex: -1, outlet: 'list' @div class: 'tree-view-resize-handle', outlet: 'resizeHandle' diff --git a/styles/tree-view.less b/styles/tree-view.less index 976c8a31..e1829fa3 100644 --- a/styles/tree-view.less +++ b/styles/tree-view.less @@ -12,6 +12,12 @@ display: flex; flex-direction: column; + // use these classes to re-order + // using a value in-between is fine too, e.g. order: -3; + & > .order--start { order: -10; } + & > .order--center { order: 0; } + & > .order--end { order: 10; } + .tree-view-resize-handle { position: absolute; top: 0;