UI: Experiment - Editor Edge Highlighting #116684

Harley Acheson · 2024-01-01T01:54:03+01:00

Harley Acheson commented

2024-01-01 01:54:03 +01:00

Optional highlighting of editor edges.

With this PR applied you can go to Edit / Preferences / Themes / User Interface and you will see two new items in "Styles": "Editor Outline" and "Active Editor Outline". The current "Editor Outline" is renamed to "Editor Border"

These can be used in a number of different ways. The first is to leave both items with an opacity of zero and you see no change from today.

Or you can add a color to just "Active Editor Edge" and now you get see areas become activated with a highlighted edge. This effect can be as subtle or as strong as you wish by carefully adjusting the opacity.

You can also set both items to the same color. This can add extra contrast to edges, making them easier to hit, but without any hover changes. This could really come in handy if we have a light theme that uses a light gutter since we can add a contrasting darker edge.

Or set both colors to something different. Then each area has an outline that brightens when you hover over it.

For users with visual impairment they could make these color values stronger. You could show a bright blue outline for the active area. Or show red for inactive and green for active.

Optional highlighting of editor edges. --- With this PR applied you can go to Edit / Preferences / Themes / User Interface and you will see two new items in "Styles": "Editor Outline" and "Active Editor Outline". The current "Editor Outline" is renamed to "Editor Border" ![image](/attachments/cff9177a-a97e-42d0-92a6-f73e5b8a9ffc) These can be used in a number of different ways. The first is to leave both items with an opacity of zero and you see no change from today. Or you can add a color to just "Active Editor Edge" and now you get see areas become activated with a highlighted edge. This effect can be as subtle or as strong as you wish by carefully adjusting the opacity. ![Edge1.gif](/attachments/0b97e3bc-a020-4743-b94c-a5261df193fb) You can also set both items to the same color. This can add extra contrast to edges, making them easier to hit, but without any hover changes. This could really come in handy if we have a light theme that uses a light gutter since we can add a contrasting darker edge. ![image](/attachments/2893f798-0cbd-4759-b188-a5006502caf4) Or set both colors to something different. Then each area has an outline that brightens when you hover over it. For users with visual impairment they could make these color values stronger. You could show a bright blue outline for the active area. Or show red for inactive and green for active.

image.png

31 KiB

image.png

38 KiB

Edge1.gif

46 KiB

image.png

38 KiB

👍 4 ❤️ 8

Harley Acheson added 1 commit 2024-01-01 01:54:14 +01:00

7331c5f080 UI: Experiment - Editor Edge Highlighting

Optional highlighting of editor edges.

Harley Acheson added this to the User Interface project 2024-01-01 01:56:12 +01:00

Harley Acheson requested review from Pablo Vazquez 2024-01-01 01:56:21 +01:00

Harley Acheson added 2 commits 2024-01-21 00:17:39 +01:00

4649687579 Merge branch 'main' of projects.blender.org:blender/blender into EditorHightlight

1702faa2fc formatting changes

Harley Acheson added 1 commit 2024-01-21 00:50:19 +01:00

27ff0af128 Show highlight by default. Do not lift header color on active.

Harley Acheson added 2 commits 2024-01-24 04:13:19 +01:00

2a51d4dbf1 Merge branch 'main' of projects.blender.org:blender/blender into EditorHightlight

49c0dc3121 Do current header highlight if active color alpha is zero.

Harley Acheson added 1 commit 2024-01-24 04:18:28 +01:00

7adbe53aac formatting changes

Harley Acheson added 1 commit 2024-01-24 04:19:51 +01:00

0f9c8868ca Formatting

Pablo Vazquez commented

2024-01-30 20:07:28 +01:00

This actually feels quite nice. The default values for the active editor outline could go a bit higher even. I've set it to around 0.160 in the following video:

This also shows how useful this could be for accessibility.

During the meeting we agreed on renaming Editor Edge to Editor Outline, and the current outline to Editors Separator or boundary?

This actually feels quite nice. The default values for the active editor outline could go a bit higher even. I've set it to around `0.160` in the following video: <video src="/attachments/c517803f-1b77-4877-8e45-a1167769ee16" title="Screen Recording 2024-01-30 at 20.03.00.mov" controls></video> This also shows how useful this could be for accessibility. During the meeting we agreed on renaming `Editor Edge` to `Editor Outline`, and the current outline to `Editors Separator` or boundary?

Screen Recording 2024-01-30 at 20.03.00.mov

38 MiB

👍 1

Harley Acheson added 2 commits 2024-01-31 02:40:08 +01:00

c9339abbe2 Merge branch 'main' of projects.blender.org:blender/blender into EditorHightlight

9b6dc5f135 Remove the header highlighting. Set default outline active to blue.

Harley Acheson commented

2024-01-31 02:41:54 +01:00

@pablovazquez

After seeing your video above I tried this while setting the active outline color to blue. And that is my favorite. Having an actual color change always works for me while just an opacity change was harder for me to tell where I am.

@pablovazquez After seeing your video above I tried this while setting the active outline color to blue. And that is my favorite. Having an actual color change always works for me while just an opacity change was harder for me to tell where I am.

Harley Acheson added 2 commits 2024-02-13 00:29:59 +01:00

3a5d9f3916 Merge branch 'main' of projects.blender.org:blender/blender into EditorHightlight

f965a2ca51 Updating to the current state of main

Harley Acheson force-pushed EditorHightlight from f965a2ca51 to 1a8ab47b20

2024-04-15 01:22:40 +02:00

Compare

Harley Acheson added 1 commit 2024-04-28 22:33:58 +02:00

40c21e1a0e Merge branch 'main' of projects.blender.org:blender/blender into EditorHightlight

Merge conflict checking is in progress. Try again in few moments.

View command line instructions.

Checkout

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

git fetch -u EditorHightlight:Harley-EditorHightlight

git checkout Harley-EditorHightlight

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: Experiment - Editor Edge Highlighting #116684

Checkout