Wide white space around directory open arrow in tree-view


#1

I am not 100% sure, but it seems that after the update to the dock tree-view in Atom 1.17, the white space used for the directory arrows uses a lot more space from left to right. Is there a way to change this so that the space between the folder icon and left border of the tree-view is smaller?

Just to be clear, I’m not talking about vertical ‘compactness’, just compressing the dead space a bit from left to right. I took a small screen shot to maybe show what I’m talking about.

Not sure if it would be in my selected UI theme, or somewhere else.

Thanks in advance!


#2

Have you tried changing your UI theme? Do you have any rules targeting the tree view in your styles.less?


#3

I just tried the default UI theme, and it does compress that white space a little. I am hoping to get it compressed a bit more, though.
I only have the empty, default example for .tree-view{} in my styles.less. I do not have much experience with javascript or css, just tinkering around in the code for my syntax theme of choice to customize it a bit for myself. To compress that white space, do I just need to add a line to my styles.less? Do you know of where I can look to find some examples and methods to call that will do the job?

Again, thank you!


#4

Which themes are you using to test?

First we have to figure out why it’s happening in the first place.


#5

I am using the Atom Material UI theme, and Atom Material Syntax Dark for the syntax option. Both are by username silvestreh. Maybe I should just message him/her directly. But I would like to start learning this stuff.
When I turn on the Atom core UI package entitled Atom Dark UI, leaving my syntax theme set to Atom Material syntax Dark, this is when I see that space compressed more.
I’m on my phone now, in a little bit when I get home, I can upload the two comparison pictures showing that the core ui theme ‘atom dark’ shows a larger portion of the file names in the same number of pixels on the screen.


#6

I’ve been super busy last night and today. Just now getting back to this. Rather than upload the images I mentioned I could get, I realized I should do some checking around. There was an update to the theme that I use upon updating to Atom 1.17.
So likely it was this update, not the Atom update, that made this spacing larger. I went through the theme code, and found a couple of spots I could change some of the spacing myself.
I’m no pro, and I don’t think this is a permanent solution. There are some “issues” risen on the theme page that raised spacing and padding in the theme. I should have looked this up before.

But while I’m on the topic, I decided to tinker around in the styles.less as I’ve never tried to customize it before. I was able to get some things changed as I expected them to change, looking through some example code (my styles.less is probably really bad form and coding, but hey, it worked). One thing I didn’t get to work is setting the background color of the tree-view.
`.tree-view {

background: @syntax-background-color-CUSTOM-treeView;

}`

When I switch to an Atom core UI theme, this kicks into effect, and the custom background color I defined appears in the tree view, but when I switch back to my preferred UI theme, it is deactivated, and the tree view background color defined by the UI theme takes over. Is this expected behavior?

I’d like to know if this is an issue I did raise on the theme repo, or if it is expected. I wouldn’t think it is expected, as my definition works with other UI themes. Also not sure if I should start a new discussion post in discussion.

Thank you again for the help and teaching me a bit about how things work.


#7

Maybe. It depends on the priority of the various rules. You can check out the HTML and CSS code in the developer tools and see which rules are being obeyed and how they’re written. The easiest way to bump your rule up in priority would be to use the following:

.tree-view {
  background: @syntax-background-color-CUSTOM-treeView !important;
}

It’s not necessarily an issue with the theme. They might have an overdetermined rule for the .tree-view background, but it’s easy to overcome that and this is small potatoes in the big picture of having to make special adjustments to compensate for other people’s CSS being written in a particular fashion.


#8

This worked! Thank you so much.
That is a very well worded explanation. Glad I asked here before submitting an issue.

If you have time, there is one other change I tried to make, should have mentioned it with the tree-view background color, because it seems to be the same. However, when I use this same line for the title-bar background color, including the suggestion you made with !important it doesn’t change the title bar color. I’ve been reading

And it seems this may a Mac only option, but not sure. If it is, I don’t know if you use macOS or not. Either way, I’ll throw it out there in case you have time to send me another tidbit of code that might do the trick.

I used the same thing as with tree-view, just replacing it with title-bar:

.title-bar { background: @syntax-background-color-CUSTOM-titleBar !important; }

In the theme code, the author has this line (with a different color and without the !important included), but then has some other calls before the closing curly bracket. Looks like some of the calls are from a couple of settings options available on the front end, as well as some internal set parameters part of his design. Is it possible these other settings are causing the priority to be higher, even though I include the important tag (I am not sure what css would call that, tag, flag, etc) and none of the predefined rules in his theme code include it?
That’s probably a dumb question. It’s answer is probably “of course it’s possible.” Any other suggestions on how I could possibly get the background color to change (and maybe the text color, as well)?

Thank you again!


#9

I don’t use a Mac, so I have no ability to figure out how to make that work.


#10

Ok, sounds great. I’ll search around some more for that. Thank you for the assistance!


#12

Hello!
This code will help you managing spaces in a treeview. Paste it into styles.less and have fun =).

.tree-view {
  // background-color: whitesmoke;
  margin-left: -0.4rem;
}

span.icon {
  margin-left: -0.4rem;
    &::before {
      width: 0.6rem;
    }
}

#13

And this one to manage a step-size of children elements

.list-tree.has-collapsable-children .list-nested-item > .list-tree > li {
   padding-left: 0.6rem;
 }