Hover Sidebar for Folder View to Help With Long Tree Nesting


#1

I like to open a folder in Atom. Especially for coding, it sometimes has multiple level of nesting. I want to easily navigate the tree so this means I need increase the viewspace of the left sidebar. This sacrifices space for content. What if I don’t have to increase the viewspace of the left sidebar, but instead able to collapse left sidebar and it hovers (either via mouse or key shortcut) ?


#2

You could use something like this:

.tree-view-resizer {
  width: 10px!important;
  min-width: 10px!important;
  transition: width .3s;

  &:hover {
    width: 200px!important;
  }
}

The transition works only with fixed width’s though… If you don’t care for a transition, you could do:

.tree-view-resizer {
  &:hover {
    width: auto!important;
  }
}

Oh, and add it to your styles.less (Ctrl-Shift-P then search for Open Your Stylesheet)


#3

Cool. I can do this to avoid seeing it at all until I hover.


#4

After a playing a bit, this does width: auto and has a transition:

.tree-view-resizer {
  width: auto!important;
  min-width: 5px!important;
  max-width: 5px;
  transition: max-width .4s;

  &:hover {
    max-width: 10000px;
  }
}

It’s a bit hacky, and it causes a delay, but I’m quite happy with the result :smiley:

And maybe you want to animate the opacity of the items in the tree-view because it looks a bit weird:

.tree-view-resizer {
  & > * {
    opacity: 0;
    transition: opacity: .5s;
  }

  &:hover > * {
    opacity: 1;
  }
}

#5

This works great. When I get a chance I’ll make it a package.


#6

Already done that :smile: you can find it here: autohide-tree-view