Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CLOSED] Custom Scrollbars for Windows #4993

Open
core-ai-bot opened this issue Aug 30, 2021 · 30 comments
Open

[CLOSED] Custom Scrollbars for Windows #4993

core-ai-bot opened this issue Aug 30, 2021 · 30 comments

Comments

@core-ai-bot
Copy link
Member

Issue by VizuaaLOG
Sunday Oct 06, 2013 at 21:15 GMT
Originally opened as adobe/brackets#5438

Using the image on this trello post (https://trello.com/c/jhCb7dvV/909-windows-scroll-bars) i have made the scrollbars in windows prior to windows 8 look like the windows 8 scroll bars as requested.

VizuaaLOG included the following code: https://github.com/adobe/brackets/pull/5438/commits
@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Monday Oct 07, 2013 at 09:21 GMT

They are also changed a little bit in Win8, the hover effect isn't there. I like the hover effect.
Also, the buttons for up/down (left/right) aren't there. It would be cool if the whole scrollbar looks like in Win8.

@core-ai-bot
Copy link
Member Author

Comment by VizuaaLOG
Monday Oct 07, 2013 at 13:29 GMT

I will have a look into it when I finish college. Thanks for the feedback.

@core-ai-bot
Copy link
Member Author

Comment by VizuaaLOG
Monday Oct 07, 2013 at 17:37 GMT

@SAPlayer Do you have Windows 8? If you do is it possible if you could take a screenshot of the scroll bar in normal and hover state. Just i do not have windows 8. Thanks, would be much appreciated.

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Monday Oct 07, 2013 at 17:53 GMT

I have done it myself, in my opinion the scrollbar now looks pretty good (but it's not best!). I will send you a pr.

EDIT: VizuaaLOG/brackets#1, can you please merge it?

@core-ai-bot
Copy link
Member Author

Comment by VizuaaLOG
Monday Oct 07, 2013 at 18:32 GMT

Thanks for the help it looks brilliant. Do you know if it looks the same on XP and Vista? It looks fine on windows 7

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Monday Oct 07, 2013 at 18:37 GMT

I can try it on Vista, but my old pc takes a lot of time to start, so I will maybe try it tomorrow (but Vista looks not much different as Win7). Let's let some others try it on XP.

And as I just commented, the :corner-present doesn't work for some reason, so the scrollbar doesn't reach the bottom to not run into an horizontal scrollbar which can be there (I think this is caused by CEF). It would be cool if that was running, too, because then the scrollbar could reach the button if that is possible (that would look much better).

@core-ai-bot
Copy link
Member Author

Comment by VizuaaLOG
Monday Oct 07, 2013 at 19:24 GMT

If i am correct you mean that if there is no horizontal scroll then the vertical should extend the full height. If this is correct, could it be done with javascript?

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Monday Oct 07, 2013 at 19:41 GMT

Yes, you're right (sorry if I express myself the wrong way, but I'm from germany :D). Currently it looks like this when there are both horizontal and vertical scrollbars:
image

But if there is only a vertical scrollbar:
image

This scrollbar should have no margin-bottom, but it has.

This maybe can be fixed within JavaScript, but that won't be a good soultion. I think this will be possible LESS/CSS-only at least when CEF is updated.

@core-ai-bot
Copy link
Member Author

Comment by VizuaaLOG
Monday Oct 07, 2013 at 20:05 GMT

Yes, i understand what you mean. If they fix this when it is updated then i will look into patching the problem if it doesn't fix it automatically.

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Monday Oct 07, 2013 at 20:22 GMT

@VizuaaLOG I have just created a test site, with Chrome 30 it works just fine (the code is pretty much the same as in brackets itself). You mustn't even use the :corner-present, it only needs to have a ::-webkit-scrollbar-corner.
So on updating we only have to delete the lines that control the margin.

@core-ai-bot
Copy link
Member Author

Comment by VizuaaLOG
Tuesday Oct 08, 2013 at 18:01 GMT

@SAPlayer Looked at the demo you did and tried changing the code in brackets but the same effect with the horizontal scrollbar being underneath the vertical one. Will just have to wait for CEF to get updated. Thanks for trying it out in chrome though.

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Tuesday Oct 08, 2013 at 18:19 GMT

Yes, that is what I meant. But until this is fixed the current solution is good enough, I think.

@core-ai-bot
Copy link
Member Author

Comment by VizuaaLOG
Tuesday Oct 08, 2013 at 19:00 GMT

Yes I think it looks brilliant. (Thanks to your help :) )

@core-ai-bot
Copy link
Member Author

Comment by JeffryBooher
Tuesday Oct 08, 2013 at 19:00 GMT

Small problem with the dead-man's corner in the lower right edge of the editor (the square box where the two scrollbars would intersect)

image

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Tuesday Oct 08, 2013 at 19:14 GMT

This is what we described, please read the whole conversation. Maybe you know how to fix this.

@core-ai-bot
Copy link
Member Author

Comment by redmunds
Tuesday Oct 08, 2013 at 20:26 GMT

Same issue that Jeff commented on but in the lower-left corner (i.e. shouldn't be a line number next to horizontal scrollbar) unless they're only shown on mouse-over.

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Tuesday Oct 08, 2013 at 20:46 GMT

@redmunds But isn't it the same behaviour on linux?

@core-ai-bot
Copy link
Member Author

Comment by JeffryBooher
Tuesday Oct 08, 2013 at 21:02 GMT

@larz0 has the vertical scrollbar extended to the bottom working but, when there are both vertical and horizontal scrollbars, it looks kind of strange. Ultimately, though, it's what we want when there is just a vertical or horizontal scrollbar. The extended vertical scrollbar may be good enough but, typically, Windows apps just have dead space there. I suggested that we try an AP div with a white background but it may be too much trouble.

@SAPlayer the issue you describe didn't illustrate that the text in the editor shows up in the "neutral-zone" (the corner where the 2 scrollbars would intersect) which is why I commented and illustrated that with a screen grab. If it were just white -- it would have been acceptable as-is but scrolling the document presented a drawing issue which is not acceptable so we must find a way to fix that before it can be merged.

Thanks for helping us out with this issue! Your contributions are helping make Brackets a great editor!

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Tuesday Oct 08, 2013 at 21:11 GMT

So the core problen is that we can't use ::-webkit-scrollbar-corner, which is exactly this corner.

@core-ai-bot
Copy link
Member Author

Comment by larz0
Tuesday Oct 08, 2013 at 21:36 GMT

@SAPlayer I'm trying to figure out why ::-webkit-scrollbar-corner won't work.

@redmunds any ideas?

@core-ai-bot
Copy link
Member Author

Comment by redmunds
Tuesday Oct 08, 2013 at 21:50 GMT

@larz0 Not sure. Need to take a closer look.

@core-ai-bot
Copy link
Member Author

Comment by redmunds
Tuesday Oct 08, 2013 at 21:55 GMT

CodeMirror already fixes the problems that@JeffryBooher and I describe using AP Divs -- take a look at CodeMirror-scrollbar-filler and CodeMirror-gutter-filler classes. So, shouldn't need any scrollbar-filler pseudo-elements.

@core-ai-bot
Copy link
Member Author

Comment by larz0
Tuesday Oct 08, 2013 at 21:59 GMT

Schweet. Thanks@redmunds.

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Wednesday Oct 09, 2013 at 08:30 GMT

@redmunds Seems this is already used since #3756, but it doesn't work. (seems this doesn't work with webkit scrollbars?) I just tested out the linux scrollbars, you can see these gutters too, but it's not that important (what about using them scrollbars also for win? They are not looking this bad, maybe we can also add a hover effect.)

@core-ai-bot
Copy link
Member Author

Comment by VizuaaLOG
Wednesday Oct 09, 2013 at 21:04 GMT

I have just posted a new commit which adds the class to place the filler in the corner i have also made it the same colour as the scrollbars. However, i'm not sure how to put it there if both scrollbars are visible and not if there is only one.

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Thursday Oct 10, 2013 at 19:56 GMT

I for myself don't see the scrollbar-filler at all...

@core-ai-bot
Copy link
Member Author

Comment by redmunds
Thursday Oct 10, 2013 at 20:19 GMT

Watch the word-wrap on my previous comment. The class names are CodeMirror-scrollbar-filler and CodeMirror-gutter-filler. They're already defined in CodeMirror and overridden in brackets_codemirror_override.less. CodeMirror controls when they are hidden and shown. It would be nice if these scrollbars fit into the CodeMirror model, but otherwise you may need to hide/show these elements yourself.

@core-ai-bot
Copy link
Member Author

Comment by MarcelGerber
Thursday Oct 10, 2013 at 20:32 GMT

But also with .CodeMirror-scrollbar-filler it won't work. I saw the code in the Developer Tools, but they were width: 0px; height: 0px;, also in a file with both horizontal and vertical scrollbars (in my case FindReplace.js). And there is also the problem that the scrollbar isn't reaching the bottom is there is only one scrollbar.

I think we will need some javascript...

@core-ai-bot
Copy link
Member Author

Comment by VizuaaLOG
Thursday Oct 10, 2013 at 20:40 GMT

@SAPlayer i have been trying to think of how i could do it with javascript but it needs to be checked periodically because onload it might not be enough for a scrollbar but when they have typed a few lines it then needs it. The only way i could think of doing this was with setTimeout() but i think this would cause performance problems.

@core-ai-bot
Copy link
Member Author

Comment by redmunds
Thursday Oct 10, 2013 at 21:53 GMT

This looks pretty cool on Win7, except that the arrow buttons at top and bottom of scrollbar are missing. Is that by design?

Unfortunately, I don't have a Win8 machine to look at that bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@core-ai-bot