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?