Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow text alignment in button_text_image to be derived from nk_button_style text_alignment #674

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Allow text alignment in button_text_image to be derived from nk_button_style text_alignment #674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
07c7f65
Allow text alignment in button_text_image to be specified
Dodzey Aug 31, 2024
e511e90
symbols and adjustments
Dodzey Aug 31, 2024
d78413c
adjust content rectangle to add spacing between image/symbol and label
Dodzey Aug 31, 2024
3df61a2
Move declarations
Dodzey Sep 1, 2024
eeef7ae
Apply text alignment in overview demo
Dodzey Sep 1, 2024
99988b2
Remove commented line
Dodzey Sep 10, 2024
cb90adc
Remove commented line
Dodzey Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions demo/common/overview.c
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,8 +214,12 @@ overview(struct nk_context *ctx)
nk_button_symbol(ctx, NK_SYMBOL_TRIANGLE_RIGHT_OUTLINE);

nk_layout_row_static(ctx, 30, 100, 2);
nk_style_push_flags(ctx, &ctx->style.button.text_alignment, NK_TEXT_LEFT);
nk_button_symbol_label(ctx, NK_SYMBOL_TRIANGLE_LEFT, "prev", NK_TEXT_RIGHT);
nk_style_pop_flags(ctx);
Comment on lines +217 to +219
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

nk_style_push_flags(ctx, &ctx->style.button.text_alignment, NK_TEXT_RIGHT);
nk_button_symbol_label(ctx, NK_SYMBOL_TRIANGLE_RIGHT, "next", NK_TEXT_LEFT);
nk_style_pop_flags(ctx);

nk_tree_pop(ctx);
}
Expand Down
38 changes: 33 additions & 5 deletions nuklear.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24475,7 +24475,7 @@ nk_draw_button_text_symbol(struct nk_command_buffer *out,
text.text = nk_rgb_factor(text.text, style->color_factor_text);
text.padding = nk_vec2(0,0);
nk_draw_symbol(out, type, *symbol, style->text_background, sym, 0, font);
nk_widget_text(out, *label, str, len, &text, NK_TEXT_CENTERED, font);
nk_widget_text(out, *label, str, len, &text, style->text_alignment, font);
}
NK_LIB nk_bool
nk_do_button_text_symbol(nk_flags *state,
Expand All @@ -24487,6 +24487,7 @@ nk_do_button_text_symbol(nk_flags *state,
int ret;
struct nk_rect tri = {0,0,0,0};
struct nk_rect content;
float label_icon_spacing = 0.f;

NK_ASSERT(style);
NK_ASSERT(out);
Expand All @@ -24500,7 +24501,20 @@ nk_do_button_text_symbol(nk_flags *state,
if (align & NK_TEXT_ALIGN_LEFT) {
tri.x = (content.x + content.w) - (2 * style->padding.x + tri.w);
tri.x = NK_MAX(tri.x, 0);
} else tri.x = content.x + 2 * style->padding.x;

label_icon_spacing = ((bounds.x + bounds.w) - (tri.x + tri.w)) * 0.5f;
/*label_icon_spacing = ((content.x + content.w) - (tri.x + tri.w)) * 1.f;*/
content.w = tri.x - content.x - label_icon_spacing;
content.w = NK_MAX(content.w, 0);
} else {
tri.x = content.x + 2 * style->padding.x;

label_icon_spacing = (tri.x - bounds.x) * 0.5f;
/*label_icon_spacing = (tri.x - content.x) * 1.f;*/
content.x = tri.x + tri.w + label_icon_spacing;
content.w -= tri.w + label_icon_spacing;
content.w = NK_MAX(content.w, 0);
}

/* draw button */
if (style->draw_begin) style->draw_begin(out, style->userdata);
Expand Down Expand Up @@ -24532,7 +24546,7 @@ nk_draw_button_text_image(struct nk_command_buffer *out,

text.text = nk_rgb_factor(text.text, style->color_factor_text);
text.padding = nk_vec2(0, 0);
nk_widget_text(out, *label, str, len, &text, NK_TEXT_CENTERED, font);
nk_widget_text(out, *label, str, len, &text, style->text_alignment, font);
nk_draw_image(out, *image, img, nk_rgb_factor(nk_white, style->color_factor_background));
}
NK_LIB nk_bool
Expand All @@ -24545,6 +24559,7 @@ nk_do_button_text_image(nk_flags *state,
int ret;
struct nk_rect icon;
struct nk_rect content;
float label_icon_spacing = 0.f;

NK_ASSERT(style);
NK_ASSERT(state);
Expand All @@ -24557,9 +24572,22 @@ nk_do_button_text_image(nk_flags *state,
icon.y = bounds.y + style->padding.y;
icon.w = icon.h = bounds.h - 2 * style->padding.y;
if (align & NK_TEXT_ALIGN_LEFT) {
icon.x = (bounds.x + bounds.w) - (2 * style->padding.x + icon.w);
icon.x = (content.x + content.w) - (2 * style->padding.x + icon.w);
icon.x = NK_MAX(icon.x, 0);
} else icon.x = bounds.x + 2 * style->padding.x;

label_icon_spacing = ((bounds.x + bounds.w) - (icon.x + icon.w)) * 0.5f;
/*label_icon_spacing = ((content.x + content.w) - (icon.x + icon.w)) * 1.f;*/
content.w = icon.x - content.x - label_icon_spacing;
content.w = NK_MAX(content.w, 0);
} else {
icon.x = content.x + 2 * style->padding.x;

label_icon_spacing = (icon.x - bounds.x) * 0.5f;
/*label_icon_spacing = (icon.x - content.x) * 1.f;*/
content.x = icon.x + icon.w + label_icon_spacing;
content.w -= icon.w + label_icon_spacing;
content.w = NK_MAX(content.w, 0);
}

icon.x += style->image_padding.x;
icon.y += style->image_padding.y;
Expand Down
36 changes: 31 additions & 5 deletions src/nuklear_button.c
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ nk_draw_button_text_symbol(struct nk_command_buffer *out,
text.text = nk_rgb_factor(text.text, style->color_factor_text);
text.padding = nk_vec2(0,0);
nk_draw_symbol(out, type, *symbol, style->text_background, sym, 0, font);
nk_widget_text(out, *label, str, len, &text, NK_TEXT_CENTERED, font);
nk_widget_text(out, *label, str, len, &text, style->text_alignment, font);
}
NK_LIB nk_bool
nk_do_button_text_symbol(nk_flags *state,
Expand All @@ -325,6 +325,7 @@ nk_do_button_text_symbol(nk_flags *state,
int ret;
struct nk_rect tri = {0,0,0,0};
struct nk_rect content;
float label_icon_spacing = 0.f;

NK_ASSERT(style);
NK_ASSERT(out);
Expand All @@ -338,7 +339,20 @@ nk_do_button_text_symbol(nk_flags *state,
if (align & NK_TEXT_ALIGN_LEFT) {
tri.x = (content.x + content.w) - (2 * style->padding.x + tri.w);
tri.x = NK_MAX(tri.x, 0);
} else tri.x = content.x + 2 * style->padding.x;

label_icon_spacing = ((bounds.x + bounds.w) - (tri.x + tri.w)) * 0.5f;
/*label_icon_spacing = ((content.x + content.w) - (tri.x + tri.w)) * 1.f;*/
content.w = tri.x - content.x - label_icon_spacing;
content.w = NK_MAX(content.w, 0);
} else {
tri.x = content.x + 2 * style->padding.x;

label_icon_spacing = (tri.x - bounds.x) * 0.5f;
/*label_icon_spacing = (tri.x - content.x) * 1.f;*/
content.x = tri.x + tri.w + label_icon_spacing;
content.w -= tri.w + label_icon_spacing;
content.w = NK_MAX(content.w, 0);
}

/* draw button */
if (style->draw_begin) style->draw_begin(out, style->userdata);
Expand Down Expand Up @@ -370,7 +384,7 @@ nk_draw_button_text_image(struct nk_command_buffer *out,

text.text = nk_rgb_factor(text.text, style->color_factor_text);
text.padding = nk_vec2(0, 0);
nk_widget_text(out, *label, str, len, &text, NK_TEXT_CENTERED, font);
nk_widget_text(out, *label, str, len, &text, style->text_alignment, font);
nk_draw_image(out, *image, img, nk_rgb_factor(nk_white, style->color_factor_background));
}
NK_LIB nk_bool
Expand All @@ -383,6 +397,7 @@ nk_do_button_text_image(nk_flags *state,
int ret;
struct nk_rect icon;
struct nk_rect content;
float label_icon_spacing = 0.f;

NK_ASSERT(style);
NK_ASSERT(state);
Expand All @@ -395,9 +410,20 @@ nk_do_button_text_image(nk_flags *state,
icon.y = bounds.y + style->padding.y;
icon.w = icon.h = bounds.h - 2 * style->padding.y;
if (align & NK_TEXT_ALIGN_LEFT) {
icon.x = (bounds.x + bounds.w) - (2 * style->padding.x + icon.w);
icon.x = (content.x + content.w) - (2 * style->padding.x + icon.w);
icon.x = NK_MAX(icon.x, 0);
} else icon.x = bounds.x + 2 * style->padding.x;

label_icon_spacing = ((bounds.x + bounds.w) - (icon.x + icon.w)) * 0.5f;
content.w = icon.x - content.x - label_icon_spacing;
content.w = NK_MAX(content.w, 0);
} else {
icon.x = content.x + 2 * style->padding.x;

label_icon_spacing = (icon.x - bounds.x) * 0.5f;
content.x = icon.x + icon.w + label_icon_spacing;
content.w -= icon.w + label_icon_spacing;
content.w = NK_MAX(content.w, 0);
}

icon.x += style->image_padding.x;
icon.y += style->image_padding.y;
Expand Down