github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-01-23 22:08:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Ensure tree view highlights extend full-width, even when scrolled

Browse Source 
The .tree-view-wrapper element is renamed to `.tree-view-resizer` to
clarify its purpose, and the actual draggable div is renamed to
`.tree-view-resize-handle`. Then a new div is introduced beneath the
resized wrapper called `tree-view-scroller`. This element has 100%
width/height and overflow scroll, allowing the actual tree view list
to *not* scroll. It uses the cutting edge `min-content` property as
its min width, which ensures it's always wide enough to contain its 
content even when the scroller wrapper is narrower. This allows the
absolutely-positioned highlights to always extend *at least* across
the full width of the list elements.
This commit is contained in:
Nathan Sobo
2013-04-16 11:20:47 -06:00
parent a8f27a7848
commit 917ab3fe7b
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/packages/tree-view/lib/tree-view.coffee
View File

@@ -11,9 +11,10 @@ _ = require 'underscore'
module.exports =
class TreeView extends ScrollView
@content: (rootView) ->
@div class: 'tree-view-wrapper', =>
@ol class: 'list-unstyled tree-view tool-panel', tabindex: -1, outlet: 'treeViewList'
@div class: 'tree-view-resizer', outlet: 'resizer'
@div class: 'tree-view-resizer', =>
@div class: 'tree-view-scroller', =>
@ol class: 'list-unstyled tree-view tool-panel', tabindex: -1, outlet: 'treeViewList'
@div class: 'tree-view-resize-handle', outlet: 'resizeHandle'
root: null
focusAfterAttach: false
@@ -23,7 +24,7 @@ class TreeView extends ScrollView
initialize: (state) ->
super
@on 'click', '.entry', (e) => @entryClicked(e)
@on 'mousedown', '.tree-view-resizer', (e) => @resizeStarted(e)
@on 'mousedown', '.tree-view-resize-handle', (e) => @resizeStarted(e)
@command 'core:move-up', => @moveUp()
@command 'core:move-down', => @moveDown()
@command 'core:close', => @detach(); false

14
src/packages/tree-view/stylesheets/tree-view.less
View File

@@ -1,7 +1,7 @@
@import "bootstrap/less/variables.less";
@import "octicon-mixins.less";
.tree-view-wrapper {
.tree-view-resizer {
position: relative;
height: 100%;
overflow: hidden;
@@ -10,7 +10,7 @@
min-width: 50px;
z-index: 2;
.tree-view-resizer {
.tree-view-resize-handle {
position: absolute;
top: 0;
right: 0;
@@ -21,14 +21,18 @@
}
}
.tree-view-scroller {
height: 100%;
width: 100%;
overflow: scroll;
}
.tree-view {
min-width: -webkit-min-content;
@item-line-height: @line-height-base * 1.25;
@disclosure-arrow-size: 12px;
@icon-margin: @line-height-base / 4;
height: 100%;
width: 100%;
overflow: scroll;
position: relative;
padding: 0 @icon-margin;
margin-bottom: 0;