Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Larz/linux scrollbar #5083

Merged
jasonsanjose merged 13 commits into from
Sep 6, 2013
Merged

Larz/linux scrollbar #5083

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7376838
squashed from larz/linux-scrollbar
jasonsanjose Sep 5, 2013
18369b4
Updated based on Jason's feedback.
larz0 Sep 5, 2013
2c0eaf6
Removed test selector.
larz0 Sep 5, 2013
7ba7240
Added @TomMalbran's new less file that consolidates all scrollbar sty…
larz0 Sep 6, 2013
ee13a99
Removed quiet scrollbar styles as they're all in brackets_scrollbars.…
larz0 Sep 6, 2013
181ead8
Updated link.
larz0 Sep 6, 2013
3561353
Cleaned up a bit.
larz0 Sep 6, 2013
c175487
Removed linux scrollbar style.
larz0 Sep 6, 2013
62834b3
Fixed based on @TomMalbran's feedback.
larz0 Sep 6, 2013
d3e359f
Updated year.
larz0 Sep 6, 2013
32ab5ee
Merge branch 'master' of https://github.com/adobe/brackets into larz/…
larz0 Sep 6, 2013
4ce40aa
Removed base64 PNGs as they're no longer required.
larz0 Sep 6, 2013
edce885
Fixed quiet scrollbar based on @TomMalbran's feedback.
larz0 Sep 6, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions src/styles/brackets.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,28 @@ html, body {
backface-visibility: hidden;
}

body {
height: 100%;
.platform-linux {
Copy link
Copy Markdown
Member Author

@jasonsanjose jasonsanjose Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This accidentally shows up on the project tree for the normal, non-hovered state. During hover, we get quiet scrollbars form quiet-scrollbars.css. Do we want the older quiet scrollbars to take priority instead?

Copy link
Copy Markdown
Member

@larz0 larz0 Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes we want the old quiet scrollbars to take priority instead. Not sure how to do that.

Copy link
Copy Markdown
Contributor

@TomMalbran TomMalbran Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try with .platform-linux :not(.quiet-scrollbars) as the selector.

Copy link
Copy Markdown
Member

@larz0 larz0 Sep 6, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm that doesn't work.

Copy link
Copy Markdown
Contributor

@TomMalbran TomMalbran Sep 6, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this scrollbars are applied only on the editor, we could just add a more specific class before the scrollbars pseudo classes.

Copy link
Copy Markdown
Member

@larz0 larz0 Sep 6, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The scrollbar actually applies to the Extension Manager as well.

Copy link
Copy Markdown
Contributor

@TomMalbran TomMalbran Sep 6, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I figure it should also be applied in the dialogs. But check my gist at the last comment for a better solution :)

::-webkit-scrollbar {
Copy link
Copy Markdown
Member Author

@jasonsanjose jasonsanjose Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a note in index.html for quiet-scrollbars.css from @njx about not being able to use this webkit specific syntax in less files. This seems to work fine though. Did something change?

Copy link
Copy Markdown
Member

@larz0 larz0 Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't know about that. Did it get fixed? less/less.js#1152

Copy link
Copy Markdown
Contributor

@TomMalbran TomMalbran Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The difference is that these are applied to any element, while the quite scrollbars are applied to elements with a particular class. The issue @larz0 linked to, has a solution to use it in less:

.webkit-scrollbar-gray {
    &::-webkit-scrollbar {
        height: 4px;
    }
}

Should we have all the custom scrollbars together in a separate file?

Copy link
Copy Markdown
Member Author

@jasonsanjose jasonsanjose Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it.

width: 8px;
Copy link
Copy Markdown
Contributor

@TomMalbran TomMalbran Sep 6, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we restore this?

Copy link
Copy Markdown
Member

@larz0 larz0 Sep 6, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need because it's already declared above.

Copy link
Copy Markdown
Contributor

@TomMalbran TomMalbran Sep 6, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I found it now.

height: 8px;
}

::-webkit-scrollbar-track-piece {
background: none;
}

::-webkit-scrollbar-thumb {
background: @custom-scrollbar-thumb;
border-radius: 4px;
Copy link
Copy Markdown
Member Author

@jasonsanjose jasonsanjose Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hooray for border-radius. I don't remember why we use an encoded PNG for quiet scrollbars. Perhaps it's not a perfect semi-circle? @njx do you remember why or was it some webkit bug where border-radius didn't work?

Copy link
Copy Markdown
Contributor

@TomMalbran TomMalbran Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this works, we should update the quiet scrollbars.

}

::-webkit-scrollbar-corner {
Copy link
Copy Markdown
Member Author

@jasonsanjose jasonsanjose Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When scrolled all the way right and down, the scrollbar thumbs overlap. This doesn't happen with the project tree's quiet scrollbars.

Copy link
Copy Markdown
Member

@larz0 larz0 Sep 5, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed. Nice catch~

background: none;
}

::-webkit-scrollbar-thumb:window-inactive {
background: @custom-scrollbar-thumb-inactive;
}
}

.resizing-container {
Expand Down
6 changes: 5 additions & 1 deletion src/styles/brackets_theme_default.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,13 +107,17 @@
@open-working-file-name-highlight: #8fddff;
@open-working-file-ext-highlight: #8fddff;

/* Selection colors */
/* selection colors */
@selection-color-focused: #D9EFF7;
@selection-color-unfocused: #e9e9e9;

/* background color of the line that has the cursor */
@activeline-bgcolor: #e6e9e9;

/* custom scrollbar colors */
@custom-scrollbar-thumb: rgba(0, 0, 0, 0.24);
@custom-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12);

/* Code font formatting
*
* NOTE (JRB): In order to get the web font to load early enough, we have a div called "dummy-text" that
Expand Down
⚡