ui-variable to set the tree view line height

[svoop]

This theme is really great!

Would it be possible to add a ui-variable or a setting to decrease the line height in the tree view? There's a lot of whitespace between the lines which renders the tree view less useful than it could be.

[simurai]

@svoop There is the @component-line-height that could be changed: https://github.com/atom/one-light-ui/blob/master/styles/ui-variables.less#L159 But if you change it locally, the next time the theme updates, it will be overridden again.

Instead you could override it in your syles.less file. Something like this:

// Make tree-view more compact
.tree-view {
  .list-group li:not(.list-nested-item),
  .list-tree li:not(.list-nested-item),
  .list-group li.list-nested-item > .list-item,
  .list-tree li.list-nested-item > .list-item {
    line-height: 20px;
  }
  .list-group .selected:before,
  .list-tree .selected:before {
    height: 20px;
  }
}

Kinda crazy selectors :see_no_evil: , but should work.

[svoop]

@simurai Thanks a lot for the hint, the styles work pretty well, only some render flaws here and then when the line height is as small as 17px. But the tree view holds at least 50% more entries now :+1:

[jpblancoder]

Here is my version, with Seti UI theme. Trying to get closer to Sublime Text sidebar layout line-heights..

.tree-view {
  font-size: 11px;

  .header:before {
    margin-right: 2px !important;
  }
}

.list-group li:not(.list-nested-item),
.list-tree li:not(.list-nested-item),
.list-group li.list-nested-item > .list-item,
.list-tree li.list-nested-item > .list-item {
  height: 18px;
}
.list-group .selected:before,
.list-tree .selected:before {
  height: 18px;
}