Allow text alignment in button_text_image to be derived from nk_button_style text_alignment

[Dodzey]

This removes the hardcoded NK_TEXT_CENTERED within a image+text button (eg. menu item or button_image_label etc) and allows the text alignment of text to be specified independently of the relative order of the image and text.
This allows the text to be to the left or right of the image, and allows the text within that content region to then be aligned left/center/right by pushing/setting a button style text_alignment value.

The existing align parameter of button_image_label remains and controls the position of the text relative to the image as it did previously. The text alignment itself is controlled with the button style text_alignment flag.

For nk_button image label this would be flags ctx.style.button.text_alignment
For menu items/combo items this would be flags ctx.style.contextual_button.text_alignment

Example code: (code is in C3 language, using my own bindings, so may look a little odd!)

nk::style_push_color(ctx, &ctx.style.button.border_color, {255,0,0,255});

nk::style_push_float(ctx, &ctx.style.button.rounding, 8.f);
nk::style_push_vec2(ctx, &ctx.style.button.padding, {4,4});
nk::style_push_vec2(ctx, &ctx.style.button.image_padding, {2,2});

nk::style_push_flags(ctx, &ctx.style.button.text_alignment, nk::TEXT_LEFT);
nk::button_image_label(ctx, smiley_img, "Text right of image. Left aligned", nk::WIDGET_ALIGN_RIGHT);
nk::button_symbol_label(ctx, nk::NKSymbolType.SYMBOL_CIRCLE_OUTLINE, "Text right of image. Left aligned", nk::WIDGET_ALIGN_RIGHT);
nk::button_image_label(ctx, smiley_img, "Text left of image. Left aligned", nk::WIDGET_ALIGN_LEFT);
nk::button_symbol_label(ctx, nk::NKSymbolType.SYMBOL_CIRCLE_OUTLINE, "Text left of image. Left aligned", nk::WIDGET_ALIGN_LEFT);
nk::style_pop_flags(ctx);

nk::style_push_flags(ctx, &ctx.style.button.text_alignment, nk::TEXT_CENTERED);
nk::button_image_label(ctx, smiley_img, "Text right of image. Center aligned", nk::WIDGET_ALIGN_RIGHT);
nk::button_symbol_label(ctx, nk::NKSymbolType.SYMBOL_CIRCLE_OUTLINE, "Text right of image. Center aligned", nk::WIDGET_ALIGN_RIGHT);
nk::button_image_label(ctx, smiley_img, "Text left of image. Center aligned", nk::WIDGET_ALIGN_LEFT);
nk::button_symbol_label(ctx, nk::NKSymbolType.SYMBOL_CIRCLE_OUTLINE, "Text left of image. Center aligned", nk::WIDGET_ALIGN_LEFT);
nk::style_pop_flags(ctx);

nk::style_push_flags(ctx, &ctx.style.button.text_alignment, nk::TEXT_RIGHT);
nk::button_image_label(ctx, smiley_img, "Text right of image. Right aligned", nk::WIDGET_ALIGN_RIGHT);
nk::button_symbol_label(ctx, nk::NKSymbolType.SYMBOL_CIRCLE_OUTLINE, "Text right of image. Right aligned", nk::WIDGET_ALIGN_RIGHT);
nk::button_image_label(ctx, smiley_img, "Text left of image. Right aligned", nk::WIDGET_ALIGN_LEFT);
nk::button_symbol_label(ctx, nk::NKSymbolType.SYMBOL_CIRCLE_OUTLINE, "Text left of image. Right aligned", nk::WIDGET_ALIGN_LEFT);
nk::style_pop_flags(ctx);

nk::style_pop_vec2(ctx);
nk::style_pop_vec2(ctx);
nk::style_pop_float(ctx);

nk::style_pop_color(ctx);

This also fixes a layout quirk where text in these buttons is aligned centrally within the button but not within the 'remaining' content region.

Before:

After:

This change doesn't otherwise seem to have any negative impact on the example:

[RobLoach]

Thanks for cleaning this up. Are there any opportunities in the overview demo to show this off or just the demo with the image? Does it improve the SYMBOL usage? If not that's no problem.

[Dodzey]

Hi - no problem!

I might be able to add something to this section, (or adjust the prev/next to use left/right alignment respectively?)

Yes, it works with the symbol - in fact in the example I gave the SYMBOL_CIRCLE_OUTLINE is used for some of the buttons.

[Dodzey]

I've pushed a change to use this in the demo.

[Dodzey]

@RobLoach Are you ok with the decision I made for the spacing between the image/symbol and text? I have used half of the distance between the left side of the image/symbol and the left bounds of the widget (and halfway from the right of the image/symbol to the right bounds on the other side). These seem to give enough 'breathing space' around the text, but 1 * the distance might look more balanced.

[Dodzey]

@RobLoach Do you want me to prepare anything else here?

[RobLoach]

Overall, I think this looks great! My only worry is that when reading it, we set text alignment to left, and then text alignment to right. While I understand why, it does seem confusing.

Would really appreciate more 👀 from others around here before we merge.

[Dodzey]

Yeah, I can appreciate that. It is actually possible to use the NK_WIDGET_LEFT and NK_WIDGET_RIGHT here - since they are the same values - perhaps that would actually be better. But in that case we would be flipping the meaning if we try to follow what nk_checkbox_label_align etc uses. Where the WIDGET_ALIGN specifies the position of the checkbox, not the text. Currently nk_button_symbol_label and nk_button_image_label align flags control the text position relative to the symbol, rather than the symbol position relative to the text.

[RobLoach]

Good point... Perhaps with the flags, that could make sense 🤔

[Dodzey]

I was trying to avoid introducing new APIs - or changing the behaviour of the existing ones - but one possibility is to introduce nk_button_image_label_align, nk_button_image_text_align, and the symbol variants - and in that one provide a widget alignment (that follows the checkbox_align) and text alignment?.
If I do that I think it would probably be a good idea to leave the changes I have made in, as that is just removing the hardcoded CENTER anyway, so is a requirement of the new apis to be able to work.