Slight readability improvements to GUI

This commit is contained in:
Yousef Khadadeh 2025-11-01 18:07:39 +03:00
parent 49d72e384c
commit 30f7856815
8 changed files with 37 additions and 19 deletions

View file

@ -192,7 +192,7 @@ void DrawingProgram::toolbar_gui() {
.layout = {
.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIT(0)},
.padding = CLAY_PADDING_ALL(t.io->theme->padding1),
.childGap = t.io->theme->childGap1,
.childGap = static_cast<uint16_t>(t.io->theme->childGap1 / 2),
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_TOP},
.layoutDirection = CLAY_TOP_TO_BOTTOM
},

View file

@ -26,8 +26,8 @@ namespace GUIStuff {
theme->fillColor2 = {0.31f, 0.31f, 0.48f, 1.0f};
theme->backColor1 = {0.156f, 0.156f, 0.18f, 1.0f};
theme->backColor2 = {0.24f, 0.24f, 0.29f, 1.0f};
theme->frontColor1 = {0.9f, 0.9f, 0.9f, 1.0f};
theme->frontColor2 = {0.8f, 0.8f, 0.8f, 1.0f};
theme->frontColor1 = {0.87f, 0.87f, 0.87f, 1.0f};
theme->frontColor2 = {0.64f, 0.64f, 0.64f, 1.0f};
return theme;
}

View file

@ -59,7 +59,7 @@ struct Theme {
SkColor4f warningColor = {1.0f, 1.0f, 0.0f, 1.0f};
float hoverExpandTime = 0.1f;
uint16_t childGap1 = 8;
uint16_t childGap1 = 10;
uint16_t padding1 = 8;
float windowCorners1 = 8;
uint16_t windowBorders1 = 0;
@ -108,7 +108,7 @@ struct UpdateInputData {
SkFont get_font(float fSize) const;
uint16_t fontSize = 14;
uint16_t fontSize = 16;
sk_sp<SkTypeface> textTypeface;
sk_sp<skia::textlayout::FontCollection> fontCollection;

View file

@ -35,7 +35,7 @@ void MovableTabList::update(UpdateInputData& io, const std::vector<std::pair<std
CLAY({.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.padding = CLAY_PADDING_ALL(0),
.childGap = 0,
.childGap = 4,
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER },
.layoutDirection = CLAY_LEFT_TO_RIGHT
}

View file

@ -115,6 +115,7 @@ void GUIManager::draw(SkCanvas* canvas) {
skia::textlayout::TextStyle tStyle;
tStyle.setFontSize(config->fontSize);
tStyle.setFontFamilies({SkString{"Roboto"}});
tStyle.setColor(convert_vec4<SkColor4f>(config->textColor).toSkColor());
pStyle.setTextStyle(tStyle);
skia::textlayout::ParagraphBuilderImpl a(pStyle, io->fontCollection, SkUnicodes::ICU::Make());
@ -272,6 +273,10 @@ void GUIManager::text_label_color(const std::string& val, const SkColor4f& color
CLAY_TEXT(strArena.std_str_to_clay_str(val), CLAY_TEXT_CONFIG({.textColor = convert_vec4<Clay_Color>(color), .fontSize = io->fontSize }));
}
void GUIManager::text_label_light(const std::string& val) {
CLAY_TEXT(strArena.std_str_to_clay_str(val), CLAY_TEXT_CONFIG({.textColor = convert_vec4<Clay_Color>(io->theme->frontColor2), .fontSize = io->fontSize }));
}
void GUIManager::text_label(const std::string& val) {
CLAY_TEXT(strArena.std_str_to_clay_str(val), CLAY_TEXT_CONFIG({.textColor = convert_vec4<Clay_Color>(io->theme->frontColor1), .fontSize = io->fontSize }));
}
@ -287,6 +292,17 @@ void GUIManager::text_label_centered(const std::string& val) {
}
}
void GUIManager::text_label_light_centered(const std::string& val) {
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) },
.childAlignment = {.x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER},
}
}) {
CLAY_TEXT(strArena.std_str_to_clay_str(val), CLAY_TEXT_CONFIG({.textColor = convert_vec4<Clay_Color>(io->theme->frontColor2), .fontSize = io->fontSize }));
}
}
bool GUIManager::radio_button(const std::string& id, bool val, const std::function<void()>& elemUpdate) {
push_id(id);
RadioButton* e = insert_element<RadioButton>();

View file

@ -52,7 +52,9 @@ class GUIManager {
void text_paragraph(const std::string& id, std::unique_ptr<skia::textlayout::Paragraph> paragraph, float width, const std::function<void()>& elemUpdate = nullptr);
void text_label_color(const std::string& val, const SkColor4f& color);
void text_label_size(const std::string& val, float modifier);
void text_label_light(const std::string& val);
void text_label(const std::string& val);
void text_label_light_centered(const std::string& val);
void text_label_centered(const std::string& val);
bool text_button_left_transparent(const std::string& id, const std::string& text, bool isSelected = false, const std::function<void()>& elemUpdate = nullptr);
bool text_button(const std::string& id, const std::string& text, bool isSelected = false, const std::function<void()>& elemUpdate = nullptr);

View file

@ -463,7 +463,7 @@ void RichTextBox::rebuild() {
pData.pStyle.setTextAlign(skia::textlayout::TextAlign::kLeft);
pData.pStyle.setTextDirection(skia::textlayout::TextDirection::kLtr);
skia::textlayout::TextStyle tStyle;
tStyle.setFontSize(14.0f);
tStyle.setFontSize(16.0f);
tStyle.setFontFamilies({SkString{"Roboto"}});
pData.pStyle.setTextStyle(tStyle);

View file

@ -405,7 +405,7 @@ void Toolbar::top_toolbar() {
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) },
.padding = CLAY_PADDING_ALL(io->theme->padding1),
.childGap = io->theme->childGap1,
.childGap = static_cast<uint16_t>(io->theme->childGap1 / 2),
.childAlignment = { .x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_CENTER},
.layoutDirection = CLAY_LEFT_TO_RIGHT
},
@ -428,7 +428,7 @@ void Toolbar::top_toolbar() {
tabNames.emplace_back(main.worlds[i]->network_being_used() ? "data/icons/network.svg" : "", main.worlds[i]->name);
std::optional<size_t> closedTab;
gui.tab_list("file tab list", tabNames, main.worldIndex, closedTab);
if(main.world->network_being_used() && gui.svg_icon_button("Player List Toggle Button", "data/icons/list.svg", playerMenuOpen))
if(main.world->network_being_used() && gui.svg_icon_button_transparent("Player List Toggle Button", "data/icons/list.svg", playerMenuOpen))
playerMenuOpen = !playerMenuOpen;
if(gui.svg_icon_button_transparent("Menu Undo Button", "data/icons/undo.svg"))
main.world->undo_with_checks();
@ -1407,7 +1407,7 @@ void Toolbar::options_menu() {
gui.push_id("general settings");
gui.input_text_field("display name input", "Display Name", &main.displayName);
main.update_display_names();
gui.text_label("Note: Changes in display name dont affect canvases that are connected online");
gui.text_label_light("Note: Changes in display name dont affect canvases that are connected online");
SkColor4f newBackColor{main.defaultCanvasBackgroundColor.x(), main.defaultCanvasBackgroundColor.y(), main.defaultCanvasBackgroundColor.z(), 1.0f};
gui.color_picker_button_field("defaultCanvasBackgroundColor", "Default canvas background color", &newBackColor, false);
main.defaultCanvasBackgroundColor = convert_vec3<Vector3f>(newBackColor);
@ -1492,7 +1492,7 @@ void Toolbar::options_menu() {
});
}
gui.text_label("Edit theme:");
gui.text_label("Note: Changes only remain if theme is saved");
gui.text_label_light("Note: Changes only remain if theme is saved");
gui.color_picker_button_field("fillColor1", "Fill Color 1", &io->theme->fillColor1, true);
gui.color_picker_button_field("fillColor2", "Fill Color 2", &io->theme->fillColor2, true);
gui.color_picker_button_field("backColor1", "Back Color 1", &io->theme->backColor1, true);
@ -1533,7 +1533,7 @@ void Toolbar::options_menu() {
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) },
.padding = CLAY_PADDING_ALL(4),
.padding = CLAY_PADDING_ALL(0),
.childGap = io->theme->childGap1,
.childAlignment = { .x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_CENTER},
.layoutDirection = CLAY_LEFT_TO_RIGHT
@ -1695,7 +1695,7 @@ void Toolbar::about_menu_gui() {
.layout = {
.sizing = {.width = CLAY_SIZING_FIT(200), .height = CLAY_SIZING_FIT(0) },
.padding = CLAY_PADDING_ALL(io->theme->padding1),
.childGap = io->theme->childGap1,
.childGap = 1,
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_TOP},
.layoutDirection = CLAY_TOP_TO_BOTTOM
}
@ -1704,19 +1704,19 @@ void Toolbar::about_menu_gui() {
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) },
.padding = CLAY_PADDING_ALL(io->theme->padding1),
.childGap = io->theme->childGap1,
.padding = CLAY_PADDING_ALL(0),
.childGap = 1,
}
}) {
if(gui.text_button_left_transparent("infinipaintnoticebutton", "InfiniPaint", selectedLicense == -1)) selectedLicense = -1;
}
gui.text_label_centered("Third Party Libraries");
gui.text_label_light_centered("Third Party Libraries");
for(int i = 0; i < static_cast<int>(thirdPartyLicenses.size()); i++) {
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) },
.padding = CLAY_PADDING_ALL(io->theme->padding1),
.childGap = io->theme->childGap1,
.padding = CLAY_PADDING_ALL(0),
.childGap = 1,
}
}) {
gui.push_id(i);
@ -1956,7 +1956,7 @@ float Toolbar::final_gui_scale() {
}
void Toolbar::calculate_final_gui_scale() {
Vector2f maxWindowSizeBeforeForcedFit = final_gui_scale_not_fit() * Vector2f{800.0f, 880.0f};
Vector2f maxWindowSizeBeforeForcedFit = final_gui_scale_not_fit() * Vector2f{700.0f, 700.0f};
Vector2f fitRatio = {main.window.size.x() / maxWindowSizeBeforeForcedFit.x(), main.window.size.y() / maxWindowSizeBeforeForcedFit.y()};
finalCalculatedGuiScale = final_gui_scale_not_fit() * std::min(std::min(fitRatio.x(), fitRatio.y()), 1.0f);
}