Label alignment in top bar #61558

New Issue

William Reynish · 2019-02-15T00:20:24+01:00

William Reynish commented

2019-02-15 00:20:24 +01:00

The labels in the top bar are visually disconnected from the items they belong to, making it difficult to see which element each label is connected to.

The labels in the top bar are visually disconnected from the items they belong to, making it difficult to see which element each label is connected to. ![image.png](https://archive.blender.org/developer/F6613489/image.png)

William Reynish commented

2019-02-15 00:20:24 +01:00

Added subscribers: @WilliamReynish, @antoniov, @CharlieJolly, @schweppie, @Hexbob6, @freemind, @PierreSchiller, @SteffenD, @remotecrab131, @Thane5, @orvb, @brezdo, @iss, @0o00o0oo, @ideasman42, @RamiroCantu, @Regnas

Luis de Bethencourt Guimera commented

2019-08-01 20:56:15 +02:00

Added subscriber: @luisbg

Luis de Bethencourt Guimera commented

2019-08-01 20:56:15 +02:00

This looks like a great first task to get my feet wet in Blender coding again.

Can I get this assigned to me? I will start looking into it very soon.

This looks like a great first task to get my feet wet in Blender coding again. Can I get this assigned to me? I will start looking into it very soon.

Luis de Bethencourt Guimera self-assigned this 2019-08-01 21:08:02 +02:00

Luis de Bethencourt Guimera commented

2019-08-01 21:08:02 +02:00

I was recommended in IRC to just assign it to myself. "Be bold!"

Ray molenkamp commented

2019-08-01 21:10:04 +02:00

Added subscriber: @LazyDodo

Ray molenkamp commented

2019-08-01 21:10:04 +02:00

And i stand by that statement! However if you feel like this isn't gonna work out, and bail on it, be sure to un-assign your self so someone else can have a go at this one

Harley Acheson commented

2019-08-01 21:43:20 +02:00

Added subscriber: @Harley

Harley Acheson commented

2019-08-01 21:43:20 +02:00

Be bold. But don't be discouraged if you get bogged down in weeds. If so, there are lots of fun and easy things to do to get your feet wet. Don't want you running away in frustration.

It is possible that particular problem might look simple (just move some bits over) but could involve more that it seems. It's been a while since I looked around there, but I think those things are defined in Python and then are drawn with our layout engine that primarily puts things like that in vertical columns, not horizontal rows (hence the funny alignment). So this might be about communicating this intention to put things in a single horizontal row to Layout so that it can align things differently there.

Be bold. But don't be discouraged if you get bogged down in weeds. If so, there are lots of fun and easy things to do to get your feet wet. Don't want you running away in frustration. It is possible that particular problem might look simple (just move some bits over) but could involve more that it seems. It's been a while since I looked around there, but I think those things are defined in Python and then are drawn with our layout engine that primarily puts things like that in vertical columns, not horizontal rows (hence the funny alignment). So this might be about communicating this intention to put things in a single horizontal row to Layout so that it can align things differently there.

Luis de Bethencourt Guimera commented

2019-08-01 23:15:14 +02:00

Thanks @LazyDodo and @harley. I will read around this code and see how much work it entails to fix this.

If I get stuck or overwhelmed I will let you guys know so we can decide what to do.

Thanks @LazyDodo and @harley. I will read around this code and see how much work it entails to fix this. If I get stuck or overwhelmed I will let you guys know so we can decide what to do.

Jonathan Lampel commented

2019-08-01 23:33:45 +02:00

Added subscriber: @JonathanLampel-4

Harley Acheson commented

2019-08-01 23:38:30 +02:00

No worries. And feel free to ask questions. Here or [here ]] or [ https:*blender.chat/channel/blender-coders | here .

But again, if it seems impossibly complex don't assume it is you being dumb or that the source is somehow bad. It just might not be something good while learning the codebase. We have plenty of things that could look trivial but require some experience and other things that might seem tough but would just need a single word changed. But anything you do is appreciated and should be fun.

Cheers.

No worries. And feel free to ask questions. Here or [here ]] or [[ https:*blender.chat/channel/blender-coders | here ](https:*devtalk.blender.org/c/blender). But again, if it seems impossibly complex don't assume it is you being dumb or that the source is somehow bad. It just might not be something good while learning the codebase. We have plenty of things that could look trivial but require some experience and other things that might seem tough but would just need a single word changed. But anything you do is appreciated and should be fun. Cheers.

Luis de Bethencourt Guimera commented

2019-08-02 01:02:25 +02:00

Sounds good. I have time tomorrow to start exploring the code around this and then I will report back.

In the meantime, if you find something that is the opposite: looks tough but would just need a simple change. Throw it my way. I want to learn and contribute.

Sounds good. I have time tomorrow to start exploring the code around this and then I will report back. In the meantime, if you find something that is the opposite: looks tough but would just need a simple change. Throw it my way. I want to learn and contribute.

Luis de Bethencourt Guimera commented

2019-08-08 17:03:10 +02:00

It's been a week so I wanted to give an update.

I have spent around 4 hours diving into the Blender code base with the purpose of finding how the alignment in the top bar works. I got sidetracked looking at what DNA and RNA are, and a bit of how they work, since the UI elements are generated in pre-processing (source/blender/makesrna/intern/rna_scene.c). I will continue learning.

I prefer figuring things out to learn than being spoon-fed the answers. But is there anybody who can help me with some particular doubts/questions I have? Maybe somebody who is already mentoring a GSOC student?

It's been a week so I wanted to give an update. I have spent around 4 hours diving into the Blender code base with the purpose of finding how the alignment in the top bar works. I got sidetracked looking at what DNA and RNA are, and a bit of how they work, since the UI elements are generated in pre-processing (source/blender/makesrna/intern/rna_scene.c). I will continue learning. I prefer figuring things out to learn than being spoon-fed the answers. But is there anybody who can help me with some particular doubts/questions I have? Maybe somebody who is already mentoring a GSOC student?

Luis de Bethencourt Guimera commented

2019-08-08 21:54:23 +02:00

Ray answered a few of my questions about the relationship between DNA, RNA and Python. Now things are much clearer to me. Including that I should look at Python files in release/scripts/startup/bl_ui.

I will continue my research there and report soon.

Ray answered a few of my questions about the relationship between DNA, RNA and Python. Now things are much clearer to me. Including that I should look at Python files in `release/scripts/startup/bl_ui`. I will continue my research there and report soon.

Luis de Bethencourt Guimera commented

2019-08-13 23:01:16 +02:00

I think I have found the problem: when we calculate the width of the UI Item (as part of setting RNA callbacks to calculate the x, y, width, height in wm_draw_window_offscreen()) we are giving it too much margin.

https://git.blender.org/gitweb/gitweb.cgi/blender.git/blob/HEAD:/source/blender/editors/interface/interface_layout.c#l287
ui_text_icon_width() has a margin of 1.5, if I bring it down manually to 0.5 the label becomes flush with what it belongs to. For example "Orientation:" and the drop down enum.

This margin makes sense for disjointed items but not for labels.

I'm not sure what is the best approach to fix this though. Any ideas/hints? I don't see anything in Python code that describes VIEW3D_GGT_xform_gizmo that I could set. Or any flag in the PropertyNRA I could try to set either. Maybe I'm looking in the wrong place.

It has been fun reading how a the layout code for WM_main() works. 😄

I think I have found the problem: when we calculate the width of the UI Item (as part of setting RNA callbacks to calculate the x, y, width, height in `wm_draw_window_offscreen()`) we are giving it too much margin. https://git.blender.org/gitweb/gitweb.cgi/blender.git/blob/HEAD:/source/blender/editors/interface/interface_layout.c#l287 `ui_text_icon_width()` has a margin of 1.5, if I bring it down manually to 0.5 the label becomes flush with what it belongs to. For example "Orientation:" and the drop down enum. This margin makes sense for disjointed items but not for labels. I'm not sure what is the best approach to fix this though. Any ideas/hints? I don't see anything in Python code that describes `VIEW3D_GGT_xform_gizmo` that I could set. Or any flag in the `PropertyNRA` I could try to set either. Maybe I'm looking in the wrong place. It has been fun reading how a the layout code for `WM_main()` works. :smile:

Harley Acheson commented

2019-08-13 23:17:03 +02:00

@luisbg - reducing the amount at that location would tighten that margin, but it is probably not where you would want to do so.

If you examine what other functions are calling ui_text_icon_width() you'll see that it is the starting point for the width of UI elements and then that value is added to, or subtracted from, depending on what kind of thing it is. So right there would probably be more of a blunt hammer to it than you want. It could be part of an approach though, depending on how much else you discover. But the trick is to not just watch what your changes do in that top bar, but also how your changes affect everything else, like in the Properties panels. The fundamental root of this issue is the assumption that these things are show in vertical columns, not a horizontal strip. But I think we do have enough information, in thatLayout has concept of direction with flags such as UI_LAYOUT_HORIZONTAL.

@luisbg - reducing the amount at that location would tighten that margin, but it is probably not where you would want to do so. If you examine what other functions are calling ui_text_icon_width() you'll see that it is the *starting point* for the width of UI elements and then that value is added to, or subtracted from, depending on what kind of thing it is. So right there would probably be more of a blunt hammer to it than you want. It could be part of an approach though, depending on how much else you discover. But the trick is to not just watch what your changes do in that top bar, but also how your changes affect everything else, like in the Properties panels. The fundamental root of this issue is the assumption that these things are show in vertical columns, not a horizontal strip. But I think we do have enough information, in that*Layout* has concept of direction with flags such as UI_LAYOUT_HORIZONTAL.

Luis de Bethencourt Guimera commented

2019-08-13 23:29:57 +02:00

@Harley Thanks for the quick and informative response. I will read the other functions that call ui_text_icon_width() and see if I can come up with a better approach.

I arrived to this place because I saw when ui_item_layout() iterates over all elements of the top panel UI block, these already come with the item->w set and it just sets the x coordinates by iterating like for (i = item.first; i; i->next) { x += i->w }. So at that point each item follows the next without a gap and it is too late to change widths.

I will let you know how it goes. I will keep investigating this one and get it closer to delivery, but I'm starting to feel tempted to also get an easier get-your-feet-wet bug to feel like I'm progressing and contributing. Any suggestions?

@Harley Thanks for the quick and informative response. I will read the other functions that call `ui_text_icon_width()` and see if I can come up with a better approach. I arrived to this place because I saw when `ui_item_layout()` iterates over all elements of the top panel UI block, these already come with the `item->w` set and it just sets the x coordinates by iterating like `for (i = item.first; i; i->next) { x += i->w }`. So at that point each item follows the next without a gap and it is too late to change widths. I will let you know how it goes. I will keep investigating this one and get it closer to delivery, but I'm starting to feel tempted to also get an easier get-your-feet-wet bug to feel like I'm progressing and contributing. Any suggestions?

Mateusz commented

2020-05-18 15:34:32 +02:00

Removed subscriber: @brezdo

Luis de Bethencourt Guimera was unassigned by Hans Goudey

2020-05-28 06:08:07 +02:00

Antonio Vazquez commented

2020-05-28 08:43:29 +02:00

Removed subscriber: @antoniov