Tree View Compact List Option has no effect

[primalmotion]

Option Tree View Compact List has no effect

Reproduction Steps:

1. Check Tree View Compact
2. Realize that nothing happens
3. Be sad

Expected behavior:

Tree view should be compacted

Observed behavior:

Tree view is not compacted

Atom    : 1.17.0
Electron: 1.3.15
Chrome  : 52.0.2743.82
Node    : 6.5.0

OS and version: macOS 10.12.5

Installed packages:

apm list
Built-in Atom Packages (90)
├── atom-dark-syntax@0.28.0
├── atom-dark-ui@0.53.0
├── atom-light-syntax@0.29.0
├── atom-light-ui@0.46.0
├── base16-tomorrow-dark-theme@1.5.0
├── base16-tomorrow-light-theme@1.5.0
├── one-dark-ui@1.10.3
├── one-light-ui@1.10.3
├── one-dark-syntax@1.7.1
├── one-light-syntax@1.7.1
├── solarized-dark-syntax@1.1.2
├── solarized-light-syntax@1.1.2
├── about@1.7.6
├── archive-view@0.63.2
├── autocomplete-atom-api@0.10.1
├── autocomplete-css@0.16.1
├── autocomplete-html@0.7.3
├── autocomplete-plus@2.35.3
├── autocomplete-snippets@1.11.0
├── autoflow@0.29.0
├── autosave@0.24.2
├── background-tips@0.27.0
├── bookmarks@0.44.3
├── bracket-matcher@0.85.5
├── command-palette@0.40.4
├── dalek@0.2.1
├── deprecation-cop@0.56.7
├── dev-live-reload@0.47.1
├── encoding-selector@0.23.3
├── exception-reporting@0.41.3
├── find-and-replace@0.207.6
├── fuzzy-finder@1.5.6
├── git-diff@1.3.5
├── go-to-line@0.32.0
├── grammar-selector@0.49.4
├── image-view@0.61.2
├── incompatible-packages@0.27.3
├── keybinding-resolver@0.38.0
├── line-ending-selector@0.6.3
├── link@0.31.3
├── markdown-preview@0.159.11
├── metrics@1.2.3
├── notifications@0.67.1
├── open-on-github@1.2.1
├── package-generator@1.1.1
├── settings-view@0.249.4
├── snippets@1.1.4
├── spell-check@0.71.4
├── status-bar@1.8.7
├── styleguide@0.49.6
├── symbols-view@0.115.5
├── tabs@0.106.0
├── timecop@0.36.0
├── tree-view@0.217.0-7
├── update-package-dependencies@0.11.0
├── welcome@0.36.2
├── whitespace@0.36.2
├── wrap-guide@0.40.1
├── language-c@0.57.0
├── language-clojure@0.22.2
├── language-coffee-script@0.48.6
├── language-csharp@0.14.2
├── language-css@0.42.2
├── language-gfm@0.88.1
├── language-git@0.19.0
├── language-go@0.43.1
├── language-html@0.47.2
├── language-hyperlink@0.16.1
├── language-java@0.27.0
├── language-javascript@0.126.1
├── language-json@0.19.0
├── language-less@0.32.0
├── language-make@0.22.3
├── language-mustache@0.13.1
├── language-objective-c@0.15.1
├── language-perl@0.37.0
├── language-php@0.38.0
├── language-property-list@0.9.1
├── language-python@0.45.2
├── language-ruby@0.71.0
├── language-ruby-on-rails@0.25.2
├── language-sass@0.59.0
├── language-shellscript@0.25.0
├── language-source@0.9.0
├── language-sql@0.25.4
├── language-text@0.7.2
├── language-todo@0.29.1
├── language-toml@0.18.1
├── language-xml@0.35.0
└── language-yaml@0.29.0

Community Packages (47) /Users/tonio/.atom/packages
├── Sublime-Style-Column-Selection@1.7.4
├── aligner@1.0.0
├── atom-jinja2@0.6.0
├── atom-material-ui@2.0.3
├── auto-reveal-in-sidebar@0.8.0
├── autocomplete-python@1.8.63
├── busy-signal@1.4.1
├── custom-title@1.0.1
├── file-icons@2.1.5
├── file-types@0.5.5
├── flex-tool-bar@0.12.0
├── go-debug@1.3.1
├── go-outline@0.6.6
├── go-plus@5.5.5
├── go-signature-statusbar@1.2.0
├── hyperclick@0.0.40
├── intentions@1.1.2
├── language-babel@2.61.0
├── language-docker@1.1.7
├── language-gherkin@1.0.4
├── language-markdown@0.22.0
├── language-nginx@0.7.3
├── language-objective-j@0.2.0
├── linter@2.1.4
├── linter-eslint@8.1.7
├── linter-flake8@2.2.1
├── linter-shellcheck@1.4.4
├── linter-ui-default@1.4.0
├── markdown-scroll-sync@2.1.2
├── markdown-themeable-pdf@1.2.0
├── markdown-toc@0.4.2
├── minimap@4.28.2
├── minimap-git-diff@4.3.1
├── minimap-hide@0.3.0
├── minimap-linter@2.0.0
├── nord-atom-ui@0.11.0
├── open-no-binaries@0.1.1
├── pigments@0.39.1
├── platformio-ide-terminal@2.5.0
├── pretty-json@1.6.3
├── project-manager@3.3.4
├── show-in-system@0.4.0
├── sort-lines@0.14.0
├── spacegray-dark-neue-syntax@1.4.2
├── todo-show@1.11.0
├── tool-bar@1.1.0
└── zentabs@0.8.8

[silvestreh]

Yep, it's compact by default… I just forgot to kill the option.

[primalmotion]

it doesn't look like compact to me :/

[alutman]

Here's a less snippet hack to stick into styles.less to make the tree actually compact.

/* Reduce tree view size a bit */
.tree-view {
  li:not(.list-nested-item), li.list-nested-item > .list-item {
    line-height: 1.5rem;
  }
  .list-nested-item .selected::before {
    height: 2em;
  }
  .project-root {
    &::before {
      height: 2.5em;
    }
    > .header {
      height: 1.75rem;
      span, &::before {
          line-height: 1.75rem;
      }
    }
  }
}

As it is, I find the default tree has way too much padding.

[johanvanhelden]

@silvestreh Hmm, if that is compact, I would very much like to see a super-compact option.

[ducky]

Yeah, I noticed this option stopped working and things weren't as compact as they used to be before. I snuck back into v1.3.9 and stole some of the compact styles from there and tweaked based on what @alutman had.

I mainly modified the left/right horizontal padding to not be so spaced out.

.tree-view {
  li:not(.list-nested-item), li.list-nested-item > .list-item {
    line-height: 1.85rem; // Edit me for height
  }
  .list-group .selected::before, .list-tree .selected::before {
    height: 1.85rem; // Edit me for height
  }
  .name.icon::before {
    margin: 0 0.5rem 0 0;
  }
  .list-tree.has-collapsable-children .list-nested-item > .list-tree > li,
  .list-tree.has-collapsable-children .list-nested-item > .list-group > li {
    padding-left: 1rem;
  }
  .list-tree.has-collapsable-children li.list-item {
    margin-left: 1.1rem;
  }
  .list-tree.has-collapsable-children .list-nested-item > .list-item::before {
    margin-right: 0.3rem;
  }
}

I was a huge fan of the original compact setting though.

[FNGR2911]

Can't work with that "compact tree" on a normal MacBook.

[franknoel]

Got the same problem since I updated to the latest version.

[max-degterev]

Can't work with that "compact tree" on a normal MacBook.

Same. That plus the new "killer" docks feature made the editor unusable

[silvestreh]

Alright… looks like you guys really liked this feature! I reduced line height all over the theme in hopes to find a nice "middle ground" … I'll restore it as soon as I get some free time to work on it!

[primalmotion]

I think what would be great is to let people configure line height and left padding

[johanvanhelden]

Reducing the line height would be great, thanks, but it is also the horizontal padding that is just to much. As soon as you have a few nested folders, you do not properly see them anymore without scrolling horizontally. Reducing the line height would not fix that. That would only solve the vertical scrolling. Maybe just restore the actual compact view, or like @primalmotion suggested, let us configure it manually, that would be fine by me.

[willviles]

@silvestreh is the reinstation of a compact tree bar planned for the next release? I must admit, I've had to switch (to an inferior looking) theme for the time being, because the tree view is pretty unusable for me at the moment!

[rlex]

@willviles https://github.com/atom-material/atom-material-ui/issues/394#issuecomment-302123319 - this comment have stylesheet to fix tree view.

[silvestreh]

@willviles yeah, I'll reimplement the feature in a future release 😄

[hatched]

@chrisxclash thanks for supplying the styles :) they worked like a charm! @silvestreh thanks for the great and continued work on this theme!

[silvestreh]

Thanks for the kind words… I've been pretty busy lately and wasn't able to put in almost any work into this. Hang in there, I'll hopefully be able to write this up during the weekend!