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.

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

Scrollpane rounded border #713

Merged
merged 5 commits into from
Dec 21, 2023
Merged

Scrollpane rounded border #713

merged 5 commits into from
Dec 21, 2023

Conversation

DevCharly
Copy link
Collaborator

@DevCharly DevCharly commented Aug 13, 2023

This is an attempt to bring rounded border to JScrollPane and all component that are usually placed into a scrollpane. E.g. JTextArea, JTextPane, JEditorPane, JList, JTree and JTable.

The problem is that there are multiple overlapping components involved:

  • the JScrollPane, which has the border
  • the JViewport, which has the view component as child (e.g. a JList)
  • optional column and row headers
  • optional corner components
  • vertical and horizontal JScrollBars

They are painted in this order and using rounded border on scrollpane would look like this:

grafik

The viewport/list and the scrollbar simply paint over the rounded corners.
And there is no way to fix this for the viewport in the look and feel.
(maybe a custom scrollpane implementation, that paints its border and corners after its children, could work)

So the idea to solve this problem is to add some extra space at left and right sides between the border and the viewport/scrollbars:

grafik

That's better, but the scrollbar should be at the border:

grafik

We can hide the scrollbar track and make the thumb round to improve the look:

ScrollBar.track = @componentBackground
ScrollBar.thumbInsets = 2,2,2,2
ScrollBar.thumbArc = 999

grafik

If the vertical scrollbar is hidden, it looks like this:

grafik

With rounded selection (and smaller border arc than in previous screenshots) this looks really nice:

ScrollPane.arc = 12
List.selectionArc = 8

grafik grafik

Here are some screenshot that shows the extra space, which was added for rounded border, in green:

grafik grafik

Smaller border arc results in smaller extra space, larger arc gives larger extra space:

grafik grafik

Possible improvements/ideas:

  • make viewport wider if vertical scrollbar is visible to remove the gap between viewport and vertical scrollbar (see above screenshot)
  • adapt vertical scrollbar painting to rounded border to allow full height vertical scrollbar
  • allow specifying scrollpane border arc for component types (e.g. use rounded border for multi-line text components, but not for lists, tables and trees)

For testing you need to enable rounded border. E.g.:

ScrollPane.arc = 12

@DevCharly
Copy link
Collaborator Author

Last commit removes gap between viewport and vertical scrollbar (if possible).

Before:

grafik

After:

grafik

If the scrollpane has a column header (e.g. a JTableHeader when using JTable) and a upper-right corner component (red rectangle), then it is not possible to remove the gap:

grafik

@BrantLauro
Copy link

BrantLauro commented Oct 25, 2023

Very good work, can I already use that as a Snapshot or something like this?

@DevCharly DevCharly force-pushed the scrollpane-rounded-border branch from 8a61f79 to b1fdbde Compare November 25, 2023 22:29
@DevCharly
Copy link
Collaborator Author

Last commit adds possibility to specify scroll pane arc for multi-line text components, lists, tables and trees.

There are four new UI properties that have default value -1, which means that ScrollPane.arc is used.

ScrollPane.List.arc = -1
ScrollPane.Table.arc = -1
ScrollPane.TextComponent.arc = -1
ScrollPane.Tree.arc = -1

E.g. if you want rounded border only for multi-line text components, then simply use:

ScrollPane.arc = 0
ScrollPane.TextComponent.arc = 12

@DevCharly DevCharly marked this pull request as ready for review November 25, 2023 22:39
@DevCharly DevCharly merged commit 92c4230 into main Dec 21, 2023
7 checks passed
@DevCharly DevCharly deleted the scrollpane-rounded-border branch December 21, 2023 17:09
@DevCharly DevCharly added this to the 3.3 milestone Dec 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants