search

brackets-archive / bracketsIssues

Archive of issues in brackets.
0 stars 0 forks source link

[CLOSED] Larz/linux scrollbar #4683

Open core-ai-bot opened 3 years ago

core-ai-bot commented 3 years ago

Issue by jasonsanjose Thursday Sep 05, 2013 at 23:22 GMT Originally opened as https://github.com/adobe/brackets/pull/5083

This is for #4884.

Squashed from #5082 for@larz0

jasonsanjose included the following code: https://github.com/adobe/brackets/pull/5083/commits

core-ai-bot commented 3 years ago

Comment by jasonsanjose Thursday Sep 05, 2013 at 23:38 GMT

@larz0 initial review complete

core-ai-bot commented 3 years ago

Comment by TomMalbran Friday Sep 06, 2013 at 01:27 GMT

I think that the scrollbars will look a better with some spacing around them, which can be achieved with:

    ::-webkit-scrollbar-thumb {
        border-radius: 999px;
        box-shadow: 0 0 0 4px`@`custom-scrollbar-thumb inset;
        border: 2px solid transparent;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        box-shadow: 0 0 0 5px`@`custom-scrollbar-thumb-inactive inset;
    }

Note that the padding is added with transparent border.

I think that the PNG images in the quiet scrollbars when used to add a spacing, which can be achieved with this.

core-ai-bot commented 3 years ago

Comment by jasonsanjose Friday Sep 06, 2013 at 01:46 GMT

It seems like we want these scrollbars to appear everywhere for Linux except the project panel. We want scrolling content in other areas like the extension manager dialog. Maybe the project panel should stop being an exception? At least for Linux?

core-ai-bot commented 3 years ago

Comment by TomMalbran Friday Sep 06, 2013 at 01:59 GMT

I was able to fix the scrollbars issue here: https://gist.github.com/TomMalbran/6458648

Which is also using a 2px spacing.

core-ai-bot commented 3 years ago

Comment by larz0 Friday Sep 06, 2013 at 03:20 GMT

@TomMalbran I replaced all the scrollbar styles with your brackets_scrollbars.less. Could you test the custom scrollbar? I couldn't get it to show with .platform-mac.

core-ai-bot commented 3 years ago

Comment by TomMalbran Friday Sep 06, 2013 at 03:45 GMT

@larz0 no problem, happy to help.

I think we could also update the quiet scrollbars to get rd of that PNG?

core-ai-bot commented 3 years ago

Comment by larz0 Friday Sep 06, 2013 at 03:46 GMT

Alright I'll give that a try.

core-ai-bot commented 3 years ago

Comment by TomMalbran Friday Sep 06, 2013 at 03:49 GMT

should be similar to the other ones, but with a different color. And since it looks like the quiet scrolbars use a 1px padding, maybe that should be used in the linux scrollbars too?

core-ai-bot commented 3 years ago

Comment by larz0 Friday Sep 06, 2013 at 03:57 GMT

Looks good on Mac, not sure if it's good on Windows also.

core-ai-bot commented 3 years ago

Comment by TomMalbran Friday Sep 06, 2013 at 04:18 GMT

I can't see scrollbars anymore without the PNGs. You should add a box-shadow and border, in replace of the images, as it was done with the linux scrollbars.

I updated my gist https://gist.github.com/TomMalbran/6458648 and with those changes I can see it again. You can change any colors and sizes.

core-ai-bot commented 3 years ago

Comment by larz0 Friday Sep 06, 2013 at 04:33 GMT

@TomMalbran updated. Thanks!

core-ai-bot commented 3 years ago

Comment by jasonsanjose Friday Sep 06, 2013 at 16:55 GMT

Looks good on mac, win and linux. Now all we need is the win8 style scrollbars! Nice work guys. Merging.

core-ai-bot commented 3 years ago

Comment by peterflynn Thursday Mar 06, 2014 at 00:39 GMT

@larz0@TomMalbran I noticed something in this LESS code today while playing with some other scrollbar stuff: there's extra padding at the far end of the Linux scrollbar track (bottom of a vertical scrollbar, right side of a horizontal one). It looks like this was introduced in 7ba7240. Did we intend for the spacing to be asymmetrical like that? It makes it feel a little bit like you can't scroll all the way to the end...

core-ai-bot commented 3 years ago

Comment by larz0 Thursday Mar 06, 2014 at 00:44 GMT

@peterflynn could you attach a screenshot? I can't remember…

core-ai-bot commented 3 years ago

Comment by TomMalbran Thursday Mar 06, 2014 at 00:47 GMT

It kind of was intentional since we might need to patch CodeMirror to fix it. The problem seems to be that CodeMirror can't calculate the space used by the scrollbars when use this custom ones. That means that it doesn't add the extra space at the bottom/right of the bars when there are both horizontal and vertical ones. So without the spaces added here the bars overlap on that corner, which is what is currently happening with the windows scrollbars.

We can fix this in CSS if we are able to know when we have both vertical and horizontal bars, which we could know if CodeMirror would add an extra class with this information.

core-ai-bot commented 3 years ago

Comment by TomMalbran Thursday Mar 06, 2014 at 00:51 GMT

You can see that here https://github.com/adobe/brackets/blob/master/src/styles/brackets_codemirror_override.less#L140 I had to set the width to 12px since CodeMirror gives them a width of 0px. Same with the height.

core-ai-bot commented 3 years ago

Comment by peterflynn Thursday Mar 06, 2014 at 01:39 GMT

@TomMalbran Interesting. Never noticed that odd overlap on Windows but now that you mention it I can indeed see that. I wonder if we should submit a CM bug on that, or a patch to provide a CSS class that disambiguates that case...

@larz0 Fwiw, here's the current appearance: scrollbar-top scrollbar-bot

core-ai-bot commented 3 years ago

Comment by TomMalbran Thursday Mar 06, 2014 at 02:08 GMT

We should submit a bug and ask marijnh if this is fixable in CM, and if it not, ask to add that class so we can fix it in Brackets.