Display of breadcrumbs looks strange

[swrobel]

Atom 0.141.0, Atom Light UI

[abe33]

Yep, this is how it should render, not ideal, but sadly most Atom themes doesn't styles bootstrap breadcrumbs. I was waiting for someone to raise up the issue, but I'm not sure how I can solve that in a way that play nicely with every themes.

[swrobel]

OK, thanks. Are there any good examples of how to style the breadcrumbs?

[abe33]

I didn't wrote anything about that yet - it was originally a package I wrote as a proof of concept and I wasn't expecting much usage - but it should pretty easy, basically it's just .btns inside a .btn-group with a .btn-primary on the last button, so something like that should work:

.tree-view-breadcrumb {
  .btn {
    // clearing buttons styles
    border: none;
    background: transparent;

    // add a / after folder and reduce the padding
    padding: 0px 2px;
    &:after {
      content: '/';
      color: red;
    }

    // to remove the / after the last item
    &:last-child:after {
      display: none;
    }

    // to make the left item less close to the scree edge
    &:first-child { 
      padding-left: 10px;
    }
  }
}

I think the next iteration will concern the appearance of the package, if you have any preference on the way it should be rendered I'm open to suggestions.

[kankaristo]

I took the style sheet above and made a very simplistic style for the breadcrumbs:

@import "ui-variables";

tree-view-breadcrumb {
  border-top: 1px solid @background-color-highlight;
  overflow-y: hidden;

  .tree-view-breadcrumb {
    .btn-group {
      background: inherit;

      .btn {
        transition: all 0.2s;

        // Clear button styles
        border: none;
        background: none;
        border-radius: 0 !important;

        // Set button text color
        color: @text-color;

        // Less padding
        padding: 0px 2px;

        // Extra padding to the first and last items
        &:first-child {
          padding-left: 5px;
        }
        &:last-child {
          padding-right: 10px;
        }

        // Move the project root icon down
        &.root {
          padding-top: 3px;
        }

        // Last button
        &.btn-primary {
          color: @text-color-highlight;
        }

        // Add a '/' before each directory (except the first one)
        &:not(:first-child):before {
          color: @text-color;
          content: '/';
        }

        // Hover style
        &:hover {
          color: @text-color-highlight;

          &:first-child {
            background: @background-color-highlight;
          }
          &:not(:first-child) {
            background-image: -webkit-linear-gradient(left, transparent 7px, @background-color-highlight 7px, @background-color-highlight 100%);
            background-image: linear-gradient(left, transparent 7px, @background-color-highlight 7px, @background-color-highlight 100%);
          }
        }
      }
    }
  }
}

I'd like to add a short transition for the horizontal scroll (when the breadcrumb gets too wide), but I'm not sure if that can be done in pure Less/CSS.

I also get some weird pixel high artifacts, where the tree view is showing between the breadcrumb and its horizontal scroll bar.

Edit: Found a fix for the 1 pixel high artifact (.btn-group was transparent, it needed to inherit the background).

[abe33]

Thanks @kankaristo, I'll try to make something by mixing your code with mine and see where it leads.

As for the transition on scroll, AFAIK there's no such thing available in CSS, however, I programatically set the scroll so it could be done in JS.

[kankaristo]

@abe33: The "Path Style" breadcrumb has a small bug: if the breadcrumb gets too wide, it gets obscured by the scroll bar. Also, the rapid change in height while scrolling in the tree view is a little distracting. Maybe the scroll bar's height should be added to the total height whether it's visible or not?

I also re-added my one pixel top-border, so that it looks a little smarter with tree-view-open-files.

[abe33]

the breadcrumb gets too wide, it gets obscured by the scroll bar

Yes, I haven't looked yet at how I could deal with that scrollbar thing. I hesitate between hiding it or making it a thin line at the bottom of the view like in the screen below:

Tell what you think about that.

Also, the rapid change in height while scrolling in the tree view is a little distracting

You mean when the breadcrumb appear? Because there's a setting to make it always visible.

I also re-added my one pixel top-border, so that it looks a little smarter with tree-view-open-files.

That's why user stylesheets are for ;). I can't assume that everybody has tree-view-open-file in combination with tree-view-breadcrumb, even if like you I use both altogether, so I choosed to remove the border from your example.

[abe33]

BTW, if you want to try the thin line version you can use that code in your stylesheet, that's what I used to make the screen above:

tree-view-breadcrumb::-webkit-scrollbar {
    height: 1px;
}

tree-view-breadcrumb::-webkit-scrollbar-thumb {
    background-color: @text-color-subtle;
}

tree-view-breadcrumb::-webkit-scrollbar-track {
    background-color: @background-color-highlight;
}

[kankaristo]

That's why user stylesheets are for ;).

True, agreed. :)

You mean when the breadcrumb appear? Because there's a setting to make it always visible.

No, I actually have that enabled. I mean the height change when the scroll bar appears.

I hesitate between hiding it or making it a thin line at the bottom of the view like in the screen below:

I really like it! But... Is it difficult to grab with the mouse cursor? I wouldn't really care, because my mouse has horizontal scrolling, but not all mice do. I guess the scrolling isn't strictly necessary though, since you can just click the directories to get to the root.

I can't get the above style sheets to work, the scroll bar doesn't change... :(

[kankaristo]

I have no idea why, but I had to add !important to all of the above (scroll bar height and colors).

@text-color-subtle is too subtle in my theme (doesn't show up at all). I'm using Atom Dark and Base16 Tomorrow Dark. How does @text-color-highlight look for you?

[kankaristo]

And to answer my earlier question: the 1px scroll bar is not too difficult to grab with the mouse. :)

I think I'm sticking with it.

[abe33]

How does @text-color-highlight look for you?

Looks quite too bright for my taste, but there's no good solution here (it all depends of the theme).

And to answer my earlier question: the 1px scroll bar is not too difficult to grab with the mouse. :)

Haha, I was wondering, I'm mostly on OSX now, with a magic mouse at work and the trackpad at home, so I no longer drag scrollbars :).

I have no idea why, but I had to add !important to all of the above (scroll bar height and colors).

It' probably because of the theme you use, maybe it already define styles for scrollbars with a more specific selector.

[kankaristo]

Looks quite too bright for my taste, but there's no good solution here (it all depends of the theme).

What about @text-color? Atom Dark UI is probably one of the most common UI themes, and the scroll bar is invisible with @text-color-subtle (seems to be the same as @background-color-highlight).

I no longer drag scrollbars :).

Yeah, me neither, but I was thinking of an "average" user with an "average" mouse. :)

It' probably because of the theme you use, maybe it already define styles for scrollbars with a more specific selector.

Atom Dark UI seems to have:

.scrollbars-visible-always /deep/ ::-webkit-scrollbar {...}

This works without !important:

tree-view-breadcrumb.path-style::-webkit-scrollbar {...}

[kankaristo]

Here's what I ended up using:

tree-view-breadcrumb.path-style, .tree-view-open-files ul, div.tree-view-scroller {
  &::-webkit-scrollbar:horizontal {
    height: 2px;
  }
  &::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(@text-color, rgba(255, 255, 255, 0));
  }
  &::-webkit-scrollbar-track:horizontal {
    background: @background-color-highlight;
  }
}

It's an attempt to emulate a height of "one and a half" pixels. I added this style to all horizontal scroll bars in the tree view, and 1 pixel was a little bit too skinny, especially for the actual tree view, where the scroll bar is touching the edge of the window.

[abe33]

What do you think of making that a setting, one where you can choose whether to use the native scrollbar or the modified ones (maybe with some various styles, like a thin version, a version with bottom padding, etc)?

[kankaristo]

That would probably be best. I think that 2 versions is enough, a thin one (1 pixel) and a regular one, with extra bottom padding so it doesn't obscure the breadcrumb.

Everything else (like my 1.5 pixel version) should be left to styles.less.

[abe33]

Looks good to, I'll try to push something soon.