From 0a64acc3d68fecf5e7f23c6b0a013272f9288af8 Mon Sep 17 00:00:00 2001 From: dec05eba Date: Sat, 5 Mar 2022 07:45:14 +0100 Subject: Make ui behavior nicer with spacing_scale less than 1.0 --- src/Body.cpp | 10 +++++----- src/QuickMedia.cpp | 11 ++++++----- src/RoundedRectangle.cpp | 20 +++++++++++--------- src/SearchBar.cpp | 20 ++++++++++++-------- src/Tabs.cpp | 4 ++-- 5 files changed, 36 insertions(+), 29 deletions(-) (limited to 'src') diff --git a/src/Body.cpp b/src/Body.cpp index 6fdb285..1c436f5 100644 --- a/src/Body.cpp +++ b/src/Body.cpp @@ -1378,10 +1378,10 @@ namespace QuickMedia { auto image_scale = get_ratio(image_size_f, new_image_size); image.set_scale(image_scale); image.set_position(item_pos + mgl::vec2f(body_spacing[body_theme].image_padding_x, padding_y)); - if(thumbnail_mask_shader && item->thumbnail_mask_type == ThumbnailMaskType::CIRCLE) { + if(thumbnail_mask_shader && thumbnail_mask_shader->is_valid() && item->thumbnail_mask_type == ThumbnailMaskType::CIRCLE) { thumbnail_mask_shader->set_uniform("resolution", new_image_size); window.draw(image, thumbnail_mask_shader); - } else if(rounded_rectangle_mask_shader) { + } else if(rounded_rectangle_mask_shader && rounded_rectangle_mask_shader->is_valid()) { rounded_rectangle_mask_shader->set_uniform("radius", 10.0f); rounded_rectangle_mask_shader->set_uniform("resolution", new_image_size); window.draw(image, rounded_rectangle_mask_shader); @@ -1395,7 +1395,7 @@ namespace QuickMedia { } else if(!item->thumbnail_url.empty()) { mgl::vec2f content_size = thumbnail_size.to_vec2f(); - if(thumbnail_mask_shader && item->thumbnail_mask_type == ThumbnailMaskType::CIRCLE) { + if(thumbnail_mask_shader && thumbnail_mask_shader->is_valid() && item->thumbnail_mask_type == ThumbnailMaskType::CIRCLE) { // TODO: Use the mask shader instead, but a vertex shader is also needed for that to pass the vertex coordinates since // shapes dont have texture coordinates. // TODO: Cache circle shape @@ -1556,10 +1556,10 @@ namespace QuickMedia { image.set_scale(image_scale); image.set_position(pos + pos_offset + mgl::vec2f(card_padding_x, card_padding_y) + mgl::vec2f(card_max_image_size.x * 0.5f, 0.0f) - mgl::vec2f(new_image_size.x * 0.5f, 0.0f)); image_height = new_image_size.y; - if(thumbnail_mask_shader && item->thumbnail_mask_type == ThumbnailMaskType::CIRCLE) { + if(thumbnail_mask_shader && thumbnail_mask_shader->is_valid() && item->thumbnail_mask_type == ThumbnailMaskType::CIRCLE) { thumbnail_mask_shader->set_uniform("resolution", new_image_size); window.draw(image, thumbnail_mask_shader); - } else if(rounded_rectangle_mask_shader) { + } else if(rounded_rectangle_mask_shader && rounded_rectangle_mask_shader->is_valid()) { rounded_rectangle_mask_shader->set_uniform("radius", 10.0f); rounded_rectangle_mask_shader->set_uniform("resolution", new_image_size); window.draw(image, rounded_rectangle_mask_shader); diff --git a/src/QuickMedia.cpp b/src/QuickMedia.cpp index ddb81a9..96da31f 100644 --- a/src/QuickMedia.cpp +++ b/src/QuickMedia.cpp @@ -4311,7 +4311,7 @@ namespace QuickMedia { bool redraw = true; - Entry comment_input("Press i to begin writing a comment...", &rounded_rectangle_shader); + Entry comment_input("Press i to start writing a comment...", &rounded_rectangle_shader); comment_input.draw_background = false; comment_input.set_editable(false); @@ -4789,7 +4789,7 @@ namespace QuickMedia { redraw = false; comment_input.set_max_width(window_size.x - (logo_padding_x + logo_size.x + chat_input_padding_x + logo_padding_x)); - comment_input.set_position(vec2f_floor(logo_padding_x + logo_size.x + chat_input_padding_x, chat_input_padding_y)); + comment_input.set_position(vec2f_floor(logo_padding_x + logo_size.x + chat_input_padding_x, chat_input_padding_y - 5.0f * get_config().scale)); const float body_width = window_size.x; @@ -5561,7 +5561,7 @@ namespace QuickMedia { read_marker_timeout_sec = 0; redraw = true; - Entry chat_input("Press i to begin writing a message...", &rounded_rectangle_shader); + Entry chat_input("Press i to start writing a message...", &rounded_rectangle_shader); chat_input.draw_background = false; chat_input.set_editable(false); @@ -6978,7 +6978,7 @@ namespace QuickMedia { chat_input_shade.set_position(mgl::vec2f(body_pos.x, window_size.y - chat_input_shade.get_size().y)); chat_input.set_max_width(window_size.x - (logo_padding_x + logo_size.x + chat_input_padding_x + logo_padding_x + body_pos.x)); - chat_input.set_position(vec2f_floor(body_pos.x + logo_padding_x + logo_size.x + chat_input_padding_x, window_size.y - chat_height - chat_input_padding_y)); + chat_input.set_position(vec2f_floor(body_pos.x + logo_padding_x + logo_size.x + chat_input_padding_x, window_size.y - chat_height - chat_input_padding_y - 5.0f * get_config().scale)); more_messages_below_rect.set_size(mgl::vec2f(chat_input_shade.get_size().x, gradient_height)); more_messages_below_rect.set_position(mgl::vec2f(chat_input_shade.get_position().x, std::floor(window_size.y - chat_input_height_full - gradient_height))); @@ -7107,7 +7107,8 @@ namespace QuickMedia { room_avatar_texture_size.x *= room_avatar_sprite.get_scale().x; room_avatar_texture_size.y *= room_avatar_sprite.get_scale().y; room_avatar_sprite.set_position(mgl::vec2f(body_pos.x + std::floor(10.0f * get_config().scale), room_name_total_height * 0.5f - room_avatar_texture_size.y * 0.5f + 5.0f)); - circle_mask_shader.set_uniform("resolution", mgl::vec2f(room_avatar_texture_size.x, room_avatar_texture_size.y)); + if(circle_mask_shader.is_valid()) + circle_mask_shader.set_uniform("resolution", mgl::vec2f(room_avatar_texture_size.x, room_avatar_texture_size.y)); window.draw(room_avatar_sprite, &circle_mask_shader); room_name_text_offset_x += room_avatar_texture_size.x + 10.0f; } diff --git a/src/RoundedRectangle.cpp b/src/RoundedRectangle.cpp index 587560c..82ade02 100644 --- a/src/RoundedRectangle.cpp +++ b/src/RoundedRectangle.cpp @@ -54,16 +54,18 @@ namespace QuickMedia { void RoundedRectangle::draw(mgl::Window &target) { const mgl::vec2f resolution = size + mgl::vec2f(shadow_radius*2.0f, shadow_radius*2.0f); - if(abs(cached_radius - radius) > 0.01f) { - // TODO: Remove these for optimizations. Also do the same in other places where set_uniform is called - rounded_rectangle_shader->set_uniform("radius", radius); - cached_radius = radius; - } + if(rounded_rectangle_shader && rounded_rectangle_shader->is_valid()) { + if(abs(cached_radius - radius) > 0.01f) { + // TODO: Remove these for optimizations. Also do the same in other places where set_uniform is called + rounded_rectangle_shader->set_uniform("radius", radius); + cached_radius = radius; + } - if(abs(cached_resolution_x - resolution.x) > 0.01f || abs(cached_resolution_y - resolution.y) > 0.01f) { - rounded_rectangle_shader->set_uniform("resolution", size + mgl::vec2f(shadow_radius*2.0f, shadow_radius*2.0f)); - cached_resolution_x = resolution.x; - cached_resolution_y = resolution.y; + if(abs(cached_resolution_x - resolution.x) > 0.01f || abs(cached_resolution_y - resolution.y) > 0.01f) { + rounded_rectangle_shader->set_uniform("resolution", size + mgl::vec2f(shadow_radius*2.0f, shadow_radius*2.0f)); + cached_resolution_x = resolution.x; + cached_resolution_y = resolution.y; + } } target.draw(vertices, 4, mgl::PrimitiveType::Quads, rounded_rectangle_shader); diff --git a/src/SearchBar.cpp b/src/SearchBar.cpp index 4ec1056..2393823 100644 --- a/src/SearchBar.cpp +++ b/src/SearchBar.cpp @@ -15,7 +15,7 @@ namespace QuickMedia { return (int)v; } - static const float background_margin_horizontal = floor(15.0f * get_config().scale); + static const float background_margin_horizontal = floor(5.0f * get_config().scale + 10.0f * get_config().spacing_scale); static const float padding_top_default = floor(10.0f * get_config().scale * get_config().spacing_scale); static const float padding_bottom_default = floor(15.0f * get_config().scale * get_config().spacing_scale); static const float background_margin_vertical = floor(4.0f * get_config().scale * get_config().spacing_scale); @@ -68,20 +68,22 @@ namespace QuickMedia { background.draw(window); + const int caret_offset_y = character_size * 0.4f; + const bool show_placeholder = text.get_string().empty(); if(type == SearchBarType::Password && !show_placeholder) { std::string masked_str(text.get_string().size(), '*'); mgl::Text masked_text(std::move(masked_str), *text.get_font()); masked_text.set_position(text.get_position()); window.draw(masked_text); - caret.set_position(masked_text.get_position() + mgl::vec2f(masked_text.get_bounds().size.x, 0.0f).floor() + mgl::vec2f(0.0f, character_size * 0.4f)); + caret.set_position(masked_text.get_position() + mgl::vec2f(masked_text.get_bounds().size.x, 0.0f).floor() + mgl::vec2f(0.0f, caret_offset_y)); } else { if(show_placeholder) { window.draw(placeholder_text); - caret.set_position(placeholder_text.get_position() + mgl::vec2f(-caret.get_size().x, character_size * 0.4f)); + caret.set_position(placeholder_text.get_position() + mgl::vec2f(-caret.get_size().x, caret_offset_y)); } else { window.draw(text); - caret.set_position(text.get_position() + mgl::vec2f(text.get_bounds().size.x, 0.0f).floor() + mgl::vec2f(0.0f, character_size * 0.4f)); + caret.set_position(text.get_position() + mgl::vec2f(text.get_bounds().size.x, 0.0f).floor() + mgl::vec2f(0.0f, caret_offset_y)); } } @@ -165,6 +167,8 @@ namespace QuickMedia { float font_height = character_size + 7.0f; float rect_height = floor(font_height + background_margin_vertical * 2.0f); + const int x_pad = padding_x * get_config().scale * get_config().spacing_scale; + float offset_x; if(draw_logo) { float one_line_height = floor(character_size + 8.0f + background_margin_vertical * 2.0f); @@ -172,13 +176,13 @@ namespace QuickMedia { mgl::vec2f texture_size_f(texture_size.x, texture_size.y); mgl::vec2f new_size = wrap_to_size(texture_size_f, mgl::vec2f(200.0f, one_line_height)); plugin_logo_sprite.set_scale(get_ratio(texture_size_f, new_size)); - plugin_logo_sprite.set_position(mgl::vec2f(pos.x + padding_x, pos.y + padding_top + rect_height * 0.5f - plugin_logo_sprite.get_texture()->get_size().y * plugin_logo_sprite.get_scale().y * 0.5f)); - offset_x = padding_x + new_size.x + floor(10.0f * get_config().spacing_scale); + plugin_logo_sprite.set_position(vec2f_floor(pos.x + x_pad, pos.y + padding_top + rect_height * 0.5f - plugin_logo_sprite.get_texture()->get_size().y * plugin_logo_sprite.get_scale().y * 0.5f)); + offset_x = x_pad + new_size.x + floor(10.0f * get_config().spacing_scale); } else { - offset_x = padding_x; + offset_x = x_pad; } - const float width = floor(size.x - offset_x - padding_x); + const float width = floor(size.x - offset_x - x_pad); background.set_size(mgl::vec2f(width, rect_height)); shade.set_size(mgl::vec2f(size.x, padding_top + rect_height + padding_bottom)); diff --git a/src/Tabs.cpp b/src/Tabs.cpp index 213e11e..095a62a 100644 --- a/src/Tabs.cpp +++ b/src/Tabs.cpp @@ -15,7 +15,7 @@ namespace QuickMedia { } static const float tab_text_size = floor(get_config().tab.font_size * get_config().scale * get_config().font_scale); - static const float tab_height = tab_text_size + floor(10.0f * get_config().scale); + static const float tab_height = tab_text_size + floor(10.0f * get_config().scale * get_config().spacing_scale); static const float tab_min_width = 250.0f; static const float tab_margin_x = floor(10.0f * get_config().spacing_scale); @@ -152,7 +152,7 @@ namespace QuickMedia { float text_pos_x = floor(pos.x + i*width_per_tab + width_per_tab*0.5f - tab_text.get_bounds().size.x*0.5f); text_pos_x = std::max(text_pos_x, background_pos_x); - window.set_view(create_scissor_view({ text_pos_x, tab_text_y }, { tab_background_width, tab_height })); + window.set_view(create_scissor_view({ text_pos_x, tab_text_y }, { tab_background_width, tab_height*2 })); window.draw(tab_text); window.set_view(prev_view); } -- cgit v1.2.3