Theme-writing help required: How to colour modified files correctly in tree view


#1

Hi,

I have been working on the fusion-ui theme of mine and I noticed a problem that rather annoys me that I haven’t been able to fix on my own.

Notice in tree view of this screenshot I have only modified the TE/03-brackets/05-links.md file (which is why it is coloured orange, as are the folders it is found in) since my last git commit, yet the folders 01-introduction and 02-atom are also coloured orange (when as they contain no uncommitted changes they should be coloured white). I have been battling with the Less stylesheet for the tree view. Presently this is my Less stylesheet:

@import "ui-variables";

.tree-view {
    padding:              0;
    font-size:            @font-size;
    background:           @tree-view-background-color;
    vertical-align:       middle;

    .entry:before {
        background:       transparent;
    }
    .entry.selected:before {
        background-color: @accent-color-subtle;
    }
    .file.selected .name,
    .list-nested-item.selected > .header {
        font-weight:      500 !important;
    }

    .project-root > .header.list-item {
        line-height:      @tree-view-tab-height - @tab-indicator-size;
        height:           @tree-view-tab-height;
        text-align:       left;
        vertical-align:   middle;
        font-weight:      bold;
        font-size:        @font-size;
        border-bottom:    @tree-view-tab-indicator-size solid @tree-view-tab-border-color;
        background:       @tree-view-tab-background-color;

        &::before {
            visibility:   hidden;
        }
    }
    .project-root > .entries.list-tree {
        margin:           10px 0;
    }
  }

// gutter divider for left or right positioned tree view
.left .tree-view-scroller {
    &::after {
        content:          '';
        position:         absolute;
        top:              0;
        right:            0;
        bottom:           0;
        width:            1px;
        background:       @tree-view-background-color;
    }
}
.right .tree-view-scroller {
    &::after {
        content:          '';
        position:         absolute;
        top:              0;
        left:             0;
        bottom:           0;
        width:            1px;
        background:       @tree-view-background-color;
    }
}

.tree-view-resizer {
    .tree-view-resize-handle {
        width:            10px;
    }
}

li.directory.entry span.name {
  color:                  rgba(255,255,255,100);
  vertical-align:         middle;
}

li.status-modified.list-item span.name {
  color:                  rgb(253,132,64);
}

li.status-modified.list-item.selected span.name {
  color:                  rgba(100,255,100,50);
}

li.directory.entry.status-modified div.header.list-item span.name {
  color:                  rgb(253, 132, 64);
}

li.directory.entry div.header.list-item span.name {
  color:                  rgba(255,255,255,100);
}

li.directory.entry {
  color:                  rgba(255,255,255,100);
}

li.directory.entry.status-ignored span.name {
  color:                  rgb(107,107,107);
}

I have tried looking at the tree view stylesheets of the atom-dark-ui theme but it was of no use (mostly because I do not know what to include from it in my stylesheet and what not to, I tried including large chunks of it but it caused extra bugs in my theme).

Thanks for your time,
Brenton


#2

What you should be looking at is this bit of code. Ignore everything else

li.status-modified.list-item span.name {
  color:                  rgb(253,132,64);
}

li.status-modified.list-item.selected span.name {
  color:                  rgba(100,255,100,50);
}

li.directory.entry.status-modified div.header.list-item span.name {
  color:                  rgb(253, 132, 64);
}

First, you’re writing it in LESS, so these things should be nested. It’s a lot easier to read that way. Second, you have some unnecessary classes in there that (along with your lack of nesting) makes it even harder to read. You can be specific and communicate priority without throwing in every single class on the way. Third, a rule that’s written as parent child will catch all instances of child within parent, no matter how far down the tree they are. You’re using li.status-modified to indicate when you should color div.header > span.name, but with the way you’ve gotten it written, it also applies to li.status-modified > ol > li > div.header > span.name (which is how you get from “TE” to “01-introduction”). You want to only style instances of div.header that occur as the top child of an instance of li.status-modified. You would write that as .list-tree li.status-modified > .header > .name.

Looking at the atom-dark-ui theme, they chose to address the same issue with .list-tree li.list-nested-item.status-modified > .list-item. This of course addresses any .list-item tag and will also style the individual files. This seems to be what you also want to do, except that you have two rules where atom-dark-ui needs only one.


#3

Thanks that worked!


#4

No problem.