Closed swrobel closed 9 years ago
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.
OK, thanks. Are there any good examples of how to style the breadcrumbs?
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 .btn
s 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.
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).
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.
@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.
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.
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;
}
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... :(
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?
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.
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.
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 {...}
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.
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)?
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
.
Looks good to, I'll try to push something soon.
Atom 0.141.0, Atom Light UI