UI: Use collection color tag to draw arrow in outliner #121109

Pratik Borhade · 2024-04-26T09:06:30+02:00

Pratik Borhade commented

2024-04-26 09:06:30 +02:00

Hierarchy line already uses the collection color tag (or the collection theme
color). For consistency, also use it to draw the arrow next to collection.

Main	PR

Hierarchy line already uses the collection color tag (or the collection theme color). For consistency, also use it to draw the arrow next to collection. | Main | PR | | -- | -- | | ![main](/attachments/42e3b271-0797-4621-9f0e-57cdbbd7305d) | ![PR](/attachments/a6bd2cd4-cce6-460c-98dc-906afac35cf9) |

main.png

26 KiB

PR.png

26 KiB

❤️ 4

Pratik Borhade added 1 commit 2024-04-26 09:06:40 +02:00

f461a19b4d UI: Use collection color tag to draw arrow

Hierarchy line already uses the collection color tag. For consistency,
use it to draw the arrow next to collection.

Pratik Borhade requested review from Pablo Vazquez 2024-04-26 09:08:34 +02:00

Pratik Borhade requested review from Julian Eisel 2024-04-26 09:08:35 +02:00

Pratik Borhade added the

Module

User Interface

label 2024-04-26 09:08:40 +02:00

Pratik Borhade changed title from ~~UI: Use collection color tag to draw arrow~~ to UI: Use collection color tag to draw arrow in outliner

2024-04-26 09:08:57 +02:00

Pablo Vazquez commented

2024-04-26 12:31:17 +02:00

I'm not sure about coloring the arrows, they are an interactive element, like a button. If a button is fully red like one of the default collection colors, it might signal the wrong message.

For that reason the arrow should stay the same color as the text label (also an interactive element).

That being said though... I took part of your code and experimented with a (very) subtle background for the rows which I think it helps even more:

I only colored the background row where the collection is, but ideally all rows nested under the collection should have this subtle color as well. I just don't know how to implement it. Are you interested in giving this a try?

Here is the diff to test it out:

diff --git forkSrcPrefix/source/blender/editors/space_outliner/outliner_draw.cc forkDstPrefix/source/blender/editors/space_outliner/outliner_draw.cc
index 20c77f25b8ffb0a05c627e94274ba42f0f0d1bf8..568945ffe9daf2c3fe8500f3aaf1543b638f1558 100644
--- forkSrcPrefix/source/blender/editors/space_outliner/outliner_draw.cc
+++ forkDstPrefix/source/blender/editors/space_outliner/outliner_draw.cc
@@ -3750,6 +3750,7 @@ static void outliner_draw_highlights(uint pos,
                                      const float col_active[4],
                                      const float col_highlight[4],
                                      const float col_searchmatch[4],
+                                     uchar col_collection[4],
                                      int start_x,
                                      int *io_start_y)
 {
@@ -3761,6 +3762,20 @@ static void outliner_draw_highlights(uint pos,
     const TreeStoreElem *tselem = TREESTORE(te);
     const int start_y = *io_start_y;
 
+    Collection *collection = nullptr;
+    bTheme *btheme = UI_GetTheme();
+    if (outliner_is_collection_tree_element(te)) {
+      collection = outliner_collection_from_tree_element(te);
+      col_collection = (collection && collection->color_tag != COLLECTION_COLOR_NONE) ?
+                                btheme->collection_color[collection->color_tag].color :
+                                btheme->space_outliner.back;
+      col_collection[3] = 25;
+
+      /* Collection color. */
+      immUniformColor4ubv(col_collection);
+      immRecti(pos, 0, start_y, int(region->v2d.cur.xmax), start_y + UI_UNIT_Y);
+    }
+
     /* Selection status. */
     if ((tselem->flag & TSE_ACTIVE) && (tselem->flag & TSE_SELECTED)) {
       immUniformColor4fv(col_active);
@@ -3823,6 +3838,7 @@ static void outliner_draw_highlights(ARegion *region,
 {
   const float col_highlight[4] = {1.0f, 1.0f, 1.0f, 0.13f};
   float col_selection[4], col_active[4], col_searchmatch[4];
+  uchar col_collection[4];
 
   UI_GetThemeColor3fv(TH_SELECT_HIGHLIGHT, col_selection);
   col_selection[3] = 1.0f; /* No alpha. */
@@ -3842,6 +3858,7 @@ static void outliner_draw_highlights(ARegion *region,
                            col_active,
                            col_highlight,
                            col_searchmatch,
+                           col_collection,
                            startx,
                            starty);
   immUnbindProgram();

Thanks for the prototype!

I'm not sure about coloring the arrows, they are an interactive element, like a button. If a button is fully red like one of the default collection colors, it might signal the wrong message. For that reason the arrow should stay the same color as the text label (also an interactive element). That being said though... I took part of your code and experimented with a (very) subtle background for the rows which I think it helps even more: ![background rows](/attachments/8c7a1e46-fa7b-4b4d-8113-9a6d8fa84519) <video src="/attachments/d5d3f962-bab3-4d44-8d8c-3383af69d851" title="outliner_collection_color_background.mov" controls></video> I only colored the background row where the collection is, but ideally all rows nested under the collection should have this subtle color as well. I just don't know how to implement it. Are you interested in giving this a try? Here is the diff to test it out: ```diff diff --git forkSrcPrefix/source/blender/editors/space_outliner/outliner_draw.cc forkDstPrefix/source/blender/editors/space_outliner/outliner_draw.cc index 20c77f25b8ffb0a05c627e94274ba42f0f0d1bf8..568945ffe9daf2c3fe8500f3aaf1543b638f1558 100644 --- forkSrcPrefix/source/blender/editors/space_outliner/outliner_draw.cc +++ forkDstPrefix/source/blender/editors/space_outliner/outliner_draw.cc @@ -3750,6 +3750,7 @@ static void outliner_draw_highlights(uint pos, const float col_active[4], const float col_highlight[4], const float col_searchmatch[4], + uchar col_collection[4], int start_x, int *io_start_y) { @@ -3761,6 +3762,20 @@ static void outliner_draw_highlights(uint pos, const TreeStoreElem *tselem = TREESTORE(te); const int start_y = *io_start_y; + Collection *collection = nullptr; + bTheme *btheme = UI_GetTheme(); + if (outliner_is_collection_tree_element(te)) { + collection = outliner_collection_from_tree_element(te); + col_collection = (collection && collection->color_tag != COLLECTION_COLOR_NONE) ? + btheme->collection_color[collection->color_tag].color : + btheme->space_outliner.back; + col_collection[3] = 25; + + /* Collection color. */ + immUniformColor4ubv(col_collection); + immRecti(pos, 0, start_y, int(region->v2d.cur.xmax), start_y + UI_UNIT_Y); + } + /* Selection status. */ if ((tselem->flag & TSE_ACTIVE) && (tselem->flag & TSE_SELECTED)) { immUniformColor4fv(col_active); @@ -3823,6 +3838,7 @@ static void outliner_draw_highlights(ARegion *region, { const float col_highlight[4] = {1.0f, 1.0f, 1.0f, 0.13f}; float col_selection[4], col_active[4], col_searchmatch[4]; + uchar col_collection[4]; UI_GetThemeColor3fv(TH_SELECT_HIGHLIGHT, col_selection); col_selection[3] = 1.0f; /* No alpha. */ @@ -3842,6 +3858,7 @@ static void outliner_draw_highlights(ARegion *region, col_active, col_highlight, col_searchmatch, + col_collection, startx, starty); immUnbindProgram(); ``` Thanks for the prototype!

image.png

102 KiB

outliner_collection_color_background.mov

2.6 MiB

❤️ 1

Pratik Borhade commented

2024-04-26 12:41:11 +02:00

Hi, thanks for checking. I can take a look to color rows "below the collection" but I fear outliner will look way too colorful 😅

Understood your point about the "arrow", make sense to some extent to keep color as it is

Hi, thanks for checking. I can take a look to color rows "below the collection" but I fear outliner will look way too colorful 😅 Understood your point about the "arrow", make sense to some extent to keep color as it is

Harley Acheson commented

2024-04-26 20:45:10 +02:00

I'm also not sure on the arrow coloring since this makes the visual weight of the arrows differ. I don't mind this much on the lines since they are such a secondary feature, but I'd rather the arrows look alike.

I only colored the background row where the collection is, but ideally all rows nested under the collection should have this subtle color as well.

I worry a bit that this would not only remove the benefit of the current zebra striping but also be visually competitive with hover and selected states. In the top example "Essentials" and "Lighting" both look highlighted, but it doesn't look immediately obvious why. I think I'd need to see a mockup that includes hover, active, multiple-item selection, along with this coloring.

I'm also not sure on the arrow coloring since this makes the visual weight of the arrows differ. I don't mind this much on the lines since they are such a secondary feature, but I'd rather the arrows look alike. > I only colored the background row where the collection is, but ideally all rows nested under the collection should have this subtle color as well. I worry a bit that this would not only remove the benefit of the current zebra striping but also be visually competitive with hover and selected states. In the top example "Essentials" and "Lighting" both look highlighted, but it doesn't look immediately obvious why. I think I'd need to see a mockup that includes hover, active, multiple-item selection, along with this coloring.

Daniel Salazar commented

2024-04-27 00:19:13 +02:00

Background colors are already used to signal selection status, zebra stripes and so on. Adding colors to it seems too much distraction.

About the arrows, only relying on vertical position can be difficult to read in some cases, at least I found it difficult to calculate if an arrow is perfectly on top of one or another line.

Coloring the arrows visually connects them to the vertical hierarchy line, while still looking clean. Without this it can signal that the arrow does not belong to the same hierarchy representation (visually any arrow could be related to any hierarchy line)

Background colors are already used to signal selection status, zebra stripes and so on. Adding colors to it seems too much distraction. About the arrows, only relying on vertical position can be difficult to read in some cases, at least I found it difficult to calculate if an arrow is perfectly on top of one or another line. Coloring the arrows visually connects them to the vertical hierarchy line, while still looking clean. Without this it can signal that the arrow does not belong to the same hierarchy representation (visually any arrow could be related to any hierarchy line)

Harley Acheson commented

2024-04-27 01:39:24 +02:00

The capture in the first comment only shows the arrows open (facing down). Is it proposed that they also have the collection color when closed? I think that would look odd. And also odd to have them change from white to a color as they open.

Pratik Borhade commented

2024-04-27 06:40:20 +02:00

The capture in the first comment only shows the arrows open (facing down). Is it proposed that they also have the collection color when closed?

@Harley hi, yes, both closed and open arrows are colored in this PR :)

> The capture in the first comment only shows the arrows open (facing down). Is it proposed that they also have the collection color when closed? @Harley hi, yes, both closed and open arrows are colored in this PR :)

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 outliner-collection-arrow:PratikPB2123-outliner-collection-arrow

git checkout PratikPB2123-outliner-collection-arrow

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: Use collection color tag to draw arrow in outliner #121109

Checkout