UI: Demonstration of Non-Obscuring Area Borders #115251

Harley Acheson · 2023-11-22T02:52:26+01:00

Harley Acheson commented

2023-11-22 02:52:26 +01:00

Just a demonstration of changes to how area borders are drawn.

As discussed in our module meeting.

Most people do not realize that our area borders are drawn in a way that obscures content below them and keeps us from knowing, and using, the full extent of the areas to their edges.

Although each area appears to be 5 pixels or more apart, they are in fact one pixel apart. After each area is drawn all the edges are draw over top. At 1X scale this would be a band that is 2 1/2 pixels wide going around each area and including the rounded corners. This border is done with a single shader in one step. The corner radius is tied to the border thickness and we don't have separate control over these. And we have no way of having some corners rounded while others not.

This PR demonstrates a process that is probably closer to what you thought we were already doing.

Each area is pulled apart by an amount that is exactly equal to the visual border width. These borders are then drawn in between using the TH_EDITOR_OUTLINE color. Then each corner is rounded separately.

To help illustrate what this allows, a few changes from today are included here.

Because the bottom of the workspace tabs are no longer obscured by an unknown number of pixels, this PR change them to show in a tab style that uses the default highlight color on the bottom:

Because the above is possible this also changes the Sidebar tabs to look similarly. This style works nicely with a partially transparent background rather than the darkness we normally see behind it:

To match this also makes the background of the properties tabs look less dark , which makes it look more like it is a part of that area rather than part of the gutter.

This also adds a subtle change to the border highlighting for the active area.

Just a demonstration of changes to how area borders are drawn. --- As discussed in our module meeting. Most people do not realize that our area borders are drawn in a way that obscures content below them and keeps us from knowing, and using, the full extent of the areas to their edges. Although each area appears to be 5 pixels or more apart, they are in fact one pixel apart. After each area is drawn all the edges are draw over top. At 1X scale this would be a band that is 2 1/2 pixels wide going around each area and including the rounded corners. This border is done with a single shader in one step. The corner radius is tied to the border thickness and we don't have separate control over these. And we have no way of having some corners rounded while others not. This PR demonstrates a process that is probably closer to what you thought we were already doing. Each area is pulled apart by an amount that is exactly equal to the visual border width. These borders are then drawn in between using the TH_EDITOR_OUTLINE color. Then each corner is rounded separately. To help illustrate what this allows, a few changes from today are included here. Because the bottom of the workspace tabs are no longer obscured by an unknown number of pixels, this PR change them to show in a tab style that uses the default highlight color on the bottom: ![image](/attachments/97097b4c-414a-41d3-8e93-3b241f713241) Because the above is possible this also changes the Sidebar tabs to look similarly. This style works nicely with a partially transparent background rather than the darkness we normally see behind it: ![image](/attachments/d61d401f-96ec-4e29-a6cc-f0385e1bbe21) To match this also makes the background of the properties tabs look less dark , which makes it look more like it is a part of that area rather than part of the gutter. ![image](/attachments/911e88a3-2adc-4db7-a655-7ad85f5b6813) This also adds a subtle change to the border highlighting for the active area. ![image](/attachments/39d862a7-a4dc-432c-b7b0-fb838834296e)

45 KiB

224 KiB

33 KiB

228 KiB

image.png

37 KiB

image.png

50 KiB

borderhighlight.gif

35 KiB

image.png

41 KiB

👍 2 👀 2

Harley Acheson added 1 commit 2023-11-22 02:52:39 +01:00

a88d5bb1f5 UI: Demonstration of Non-Obscuring Area Borders

Just a demonstration of changes to how area borders are drawn.

Harley Acheson added 1 commit 2023-11-22 03:02:15 +01:00

fc4266b1b3 Header at 25, same as current visual. Statusbar slightly taller. Remove one pixel correction.

Harley Acheson added this to the User Interface project 2023-11-22 03:02:33 +01:00

Harley Acheson requested review from Julian Eisel 2023-11-22 03:02:42 +01:00

Harley Acheson requested review from Pablo Vazquez 2023-11-22 03:02:48 +01:00

Harley Acheson added 2 commits 2023-12-08 18:01:18 +01:00

8b470122e9 Merge branch 'main' of projects.blender.org:blender/blender into AreaBorders

838088c74c More experimentation. Workspace tabs connect to a field below

Harley Acheson added 3 commits 2023-12-10 20:07:20 +01:00

f7f7637451 Merge branch 'main' of projects.blender.org:blender/blender into AreaBorders

02ab248e36 Merge branch 'main' of projects.blender.org:blender/blender into AreaBorders

b09ae37439 Changing Tab style

Harley Acheson added 1 commit 2023-12-10 20:11:26 +01:00

4ceb809e43 unintentional whitespace changes

Justin commented

2023-12-16 07:17:30 +01:00

First-time contributor

Small issue with editor headers.

2023-12-16_17-11-32.mp4

3.2 MiB

Harley Acheson added 2 commits 2023-12-19 23:23:59 +01:00

700d233b39 Merge branch 'main' of projects.blender.org:blender/blender into AreaBorders

085e8ce63f Lots of experimental changes

Harley Acheson added 1 commit 2023-12-30 20:43:27 +01:00

a1949e73fd Merge branch 'main' of projects.blender.org:blender/blender into AreaBorders

Harley Acheson added 1 commit 2024-01-28 23:49:45 +01:00

bc1138ff50 Merge branch 'main' of projects.blender.org:blender/blender into AreaBorders

This pull request has changes conflicting with the target branch.

source/blender/blenloader/intern/versioning_userdef.cc
source/blender/editors/screen/screen_draw.cc
source/blender/editors/screen/screen_intern.h

View command line instructions.

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u AreaBorders:Harley-AreaBorders

git checkout Harley-AreaBorders

Sign in to join this conversation.

No reviewers

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

UI: Demonstration of Non-Obscuring Area Borders #115251

Checkout