public/gpu-screen-recorder-ui
1
0
Fork 0
mirror of https://repo.dec05eba.com/gpu-screen-recorder-ui synced 2026-03-31 09:17:04 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make sure all sizes are scaled by window size, make sure all elements are visible for very low resolutions and text doesn't get too small

Browse Source
This commit is contained in:
dec05eba
2024-08-06 08:59:38 +02:00
parent b3f5a53ece
commit b229b060ad
8 changed files with 81 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
TODO
View File

@@ -10,8 +10,6 @@ Maybe change design to have black triangles appear and get larger until they fil
DISPLAY gamescope-0
Colorscheme should follow graphics card in use. On nvidia use nvidia green, on intel use intel blue and on amd use amd red.
Optimize list/page when having a few items in it (dont use vector<unique_ptr<Widget>>).
Only redraw ui if changed (dirty state, propagate upward. Set dirty when adding widget or changing any visible properly on a widget or when event updates how the widget should be displayed).

4
include/gui/CheckBox.hpp
View File

@@ -1,7 +1,6 @@
#pragma once
#include "Widget.hpp"
#include <functional>
#include <mglpp/graphics/Color.hpp>
#include <mglpp/graphics/Text.hpp>
@@ -17,8 +16,7 @@ namespace gsr {
void draw(mgl::Window &window, mgl::vec2f offset) override;
mgl::vec2f get_size() override;
std::function<void()> on_click;
bool is_checked() const;
private:
mgl::vec2f get_checkbox_size();
private:

6
src/Theme.cpp
View File

@@ -37,13 +37,13 @@ namespace gsr {
if(!theme->title_font_file.load("/usr/share/fonts/noto/NotoSans-Bold.ttf", mgl::MemoryMappedFile::LoadOptions{true, false}))
goto error;
if(!theme->title_font.load_from_file(theme->title_font_file, window_size.y * 0.019f))
if(!theme->title_font.load_from_file(theme->title_font_file, std::max(16.0f, window_size.y * 0.019f)))
goto error;
if(!theme->top_bar_font.load_from_file(theme->title_font_file, window_size.y * 0.03f))
if(!theme->top_bar_font.load_from_file(theme->title_font_file, std::max(23.0f, window_size.y * 0.03f)))
goto error;
if(!theme->body_font.load_from_file(theme->body_font_file, window_size.y * 0.015f))
if(!theme->body_font.load_from_file(theme->body_font_file, std::max(13.0f, window_size.y * 0.015f)))
goto error;
if(!theme->combobox_arrow.load_from_file((resources_path + "images/combobox_arrow.png").c_str(), {false, false, false}))

15
src/gui/Button.cpp
View File

@@ -7,10 +7,10 @@
#include <mglpp/system/FloatRect.hpp>
namespace gsr {
static const float padding_top = 10.0f;
static const float padding_bottom = 10.0f;
static const float padding_left = 10.0f;
static const float padding_right = 10.0f;
static const float padding_top_scale = 0.004629f;
static const float padding_bottom_scale = 0.004629f;
static const float padding_left_scale = 0.007f;
static const float padding_right_scale = 0.007f;
Button::Button(mgl::Font *font, const char *text, mgl::vec2f size, mgl::Color bg_color) : size(size), bg_color(bg_color), text(text, *font) {
@@ -40,10 +40,15 @@ namespace gsr {
const bool mouse_inside = mgl::FloatRect(draw_pos, item_size).contains(window.get_mouse_position().to_vec2f());
if(mouse_inside)
draw_rectangle_outline(window, draw_pos, item_size, gsr::get_theme().tint_color, border_scale * gsr::get_theme().window_height);
draw_rectangle_outline(window, draw_pos, item_size, get_theme().tint_color, border_scale * get_theme().window_height);
}
mgl::vec2f Button::get_size() {
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_bottom = padding_bottom_scale * get_theme().window_height;
const int padding_left = padding_left_scale * get_theme().window_height;
const int padding_right = padding_right_scale * get_theme().window_height;
const mgl::vec2f text_bounds = text.get_bounds().size;
mgl::vec2f s = size;
if(s.x < 0.0001f)

15
src/gui/CheckBox.cpp
View File

@@ -18,11 +18,8 @@ namespace gsr {
bool CheckBox::on_event(mgl::Event &event, mgl::Window&, mgl::vec2f offset) {
if(event.type == mgl::Event::MouseButtonPressed && event.mouse_button.button == mgl::Mouse::Left) {
const bool clicked_inside = mgl::FloatRect(position + offset, get_size()).contains({ (float)event.mouse_button.x, (float)event.mouse_button.y });
if(clicked_inside) {
if(clicked_inside)
checked = !checked;
if(on_click)
on_click();
}
}
return true;
}
@@ -40,7 +37,7 @@ namespace gsr {
const float side_margin = checked_margin_scale * get_theme().window_height;
mgl::Rectangle background(get_checkbox_size() - mgl::vec2f(side_margin, side_margin).floor() * 2.0f);
background.set_position(draw_pos.floor() + mgl::vec2f(side_margin, side_margin).floor());
background.set_color(gsr::get_theme().tint_color);
background.set_color(get_theme().tint_color);
window.draw(background);
}
@@ -50,8 +47,8 @@ namespace gsr {
const bool mouse_inside = mgl::FloatRect(draw_pos, get_size()).contains(window.get_mouse_position().to_vec2f());
if(mouse_inside) {
const int border_size = border_scale * gsr::get_theme().window_height;
const mgl::Color border_color = gsr::get_theme().tint_color;
const int border_size = std::max(1.0f, border_scale * get_theme().window_height);
const mgl::Color border_color = get_theme().tint_color;
draw_rectangle_outline(window, draw_pos, checkbox_size, border_color, border_size);
}
}
@@ -68,4 +65,8 @@ namespace gsr {
const mgl::vec2f text_bounds = text.get_bounds().size;
return mgl::vec2f(text_bounds.y, text_bounds.y).floor();
}
bool CheckBox::is_checked() const {
return checked;
}
}

39
src/gui/ComboBox.cpp
View File

@@ -8,10 +8,10 @@
#include <assert.h>
namespace gsr {
static const float padding_top = 10.0f;
static const float padding_bottom = 10.0f;
static const float padding_left = 10.0f;
static const float padding_right = 10.0f;
static const float padding_top_scale = 0.004629f;
static const float padding_bottom_scale = 0.004629f;
static const float padding_left_scale = 0.007f;
static const float padding_right_scale = 0.007f;
static const float border_scale = 0.0015f;
ComboBox::ComboBox(mgl::Font *font) : font(font), dropdown_arrow(&get_theme().combobox_arrow) {
@@ -19,6 +19,10 @@ namespace gsr {
}
bool ComboBox::on_event(mgl::Event &event, mgl::Window&, mgl::vec2f offset) {
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_bottom = padding_bottom_scale * get_theme().window_height;
const int padding_left = padding_left_scale * get_theme().window_height;
if(event.type == mgl::Event::MouseButtonPressed && event.mouse_button.button == mgl::Mouse::Left) {
const mgl::vec2f draw_pos = position + offset;
const mgl::vec2f mouse_pos = { (float)event.mouse_button.x, (float)event.mouse_button.y };
@@ -61,6 +65,11 @@ namespace gsr {
if(items.empty())
return;
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_bottom = padding_bottom_scale * get_theme().window_height;
const int padding_left = padding_left_scale * get_theme().window_height;
const int padding_right = padding_right_scale * get_theme().window_height;
const mgl::vec2f draw_pos = (position + offset).floor();
const mgl::vec2f item_size(max_size.x, font->get_character_size() + padding_top + padding_bottom);
@@ -89,8 +98,8 @@ namespace gsr {
Item &item = items[selected_item];
item.text.set_position(pos.floor());
if(show_dropdown || mouse_inside) {
const int border_size = border_scale * gsr::get_theme().window_height;
const mgl::Color border_color = gsr::get_theme().tint_color;
const int border_size = border_scale * get_theme().window_height;
const mgl::Color border_color = get_theme().tint_color;
draw_rectangle_outline(window, pos - mgl::vec2f(padding_left, padding_top), item_size.floor(), border_color, border_size);
}
window.draw(item.text);
@@ -105,8 +114,8 @@ namespace gsr {
if(!inside) {
inside = mgl::FloatRect(text_bounds.position - mgl::vec2f(padding_left, padding_top), item_size).contains({ (float)mouse_pos.x, (float)mouse_pos.y });
if(inside) {
mgl::Rectangle item_background(text_bounds.position - mgl::vec2f(padding_left, padding_top), item_size);
item_background.set_color(gsr::get_theme().tint_color);
mgl::Rectangle item_background((text_bounds.position - mgl::vec2f(padding_left, padding_top)).floor(), item_size.floor());
item_background.set_color(get_theme().tint_color);
window.draw(item_background);
} else {
/*const int border_size = 3;
@@ -139,7 +148,12 @@ namespace gsr {
if(!dirty)
return;
max_size = { 0.0f, font->get_character_size() + padding_top + padding_bottom };
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_bottom = padding_bottom_scale * get_theme().window_height;
const int padding_left = padding_left_scale * get_theme().window_height;
const int padding_right = padding_right_scale * get_theme().window_height;
max_size = { 0.0f, font->get_character_size() + (float)padding_top + (float)padding_bottom };
for(Item &item : items) {
const mgl::vec2f bounds = item.text.get_bounds().size;
max_size.x = std::max(max_size.x, bounds.x + padding_left + padding_right);
@@ -151,10 +165,15 @@ namespace gsr {
mgl::vec2f ComboBox::get_size() {
update_if_dirty();
return { max_size.x, font->get_character_size() + padding_top + padding_bottom };
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_bottom = padding_bottom_scale * get_theme().window_height;
return { max_size.x, font->get_character_size() + (float)padding_top + (float)padding_bottom };
}
float ComboBox::get_dropdown_arrow_height() const {
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_bottom = padding_bottom_scale * get_theme().window_height;
return (font->get_character_size() + padding_top + padding_bottom) * 0.4f;
}
}

25
src/gui/DropdownButton.cpp
View File

@@ -8,10 +8,10 @@
#include <mglpp/system/FloatRect.hpp>
namespace gsr {
static const float padding_top = 15.0f;
static const float padding_bottom = 15.0f;
static const float padding_left = 20.0f;
static const float padding_right = 20.0f;
static const float padding_top_scale = 0.00694f;
static const float padding_bottom_scale = 0.00694f;
static const float padding_left_scale = 0.009259f;
static const float padding_right_scale = 0.009259f;
static const float border_scale = 0.003f;
DropdownButton::DropdownButton(mgl::Font *title_font, mgl::Font *description_font, const char *title, const char *description_activated, const char *description_deactivated, mgl::Texture *icon_texture, mgl::vec2f size) :
@@ -59,7 +59,11 @@ namespace gsr {
update_if_dirty();
const mgl::vec2f draw_pos = position + offset;
const int border_size = border_scale * gsr::get_theme().window_height;
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_bottom = padding_bottom_scale * get_theme().window_height;
const int padding_left = padding_left_scale * get_theme().window_height;
const int border_size = border_scale * get_theme().window_height;
if(show_dropdown) {
// Background
@@ -70,7 +74,7 @@ namespace gsr {
window.draw(rect);
}
const mgl::Color border_color = gsr::get_theme().tint_color;
const mgl::Color border_color = get_theme().tint_color;
// Green line at top
{
@@ -88,7 +92,7 @@ namespace gsr {
window.draw(rect);
}
const mgl::Color border_color = gsr::get_theme().tint_color;
const mgl::Color border_color = get_theme().tint_color;
draw_rectangle_outline(window, draw_pos, size, border_color, border_size);
} else {
// Background
@@ -132,7 +136,7 @@ namespace gsr {
const mgl::vec2f item_size(max_size.x, item_height);
const bool inside = mgl::FloatRect(item_position, item_size).contains({ (float)mouse_pos.x, (float)mouse_pos.y });
if(inside) {
draw_rectangle_outline(window, item_position, item_size, gsr::get_theme().tint_color, 5);
draw_rectangle_outline(window, item_position, item_size, get_theme().tint_color, border_size);
mouse_inside_item = i;
}
}
@@ -180,6 +184,11 @@ namespace gsr {
if(!dirty)
return;
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_bottom = padding_bottom_scale * get_theme().window_height;
const int padding_left = padding_left_scale * get_theme().window_height;
const int padding_right = padding_right_scale * get_theme().window_height;
max_size = { size.x, 0.0f };
for(Item &item : items) {
const mgl::vec2f bounds = item.text.get_bounds().size;

20
src/gui/Entry.cpp
View File

@@ -9,11 +9,12 @@
#include <optional>
namespace gsr {
static const float padding_top = 10.0f;
static const float padding_bottom = 10.0f;
static const float padding_left = 10.0f;
static const float padding_right = 10.0f;
static const float padding_top_scale = 0.004629f;
static const float padding_bottom_scale = 0.004629f;
static const float padding_left_scale = 0.007f;
static const float padding_right_scale = 0.007f;
static const float border_scale = 0.0015f;
static const float caret_width_scale = 0.001f;
Entry::Entry(mgl::Font *font, const char *text, float max_width) : text("", *font), max_width(max_width) {
this->text.set_color(get_theme().text_color);
@@ -41,17 +42,20 @@ namespace gsr {
void Entry::draw(mgl::Window &window, mgl::vec2f offset) {
const mgl::vec2f draw_pos = position + offset;
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_left = padding_left_scale * get_theme().window_height;
mgl::Rectangle background(get_size());
background.set_position(draw_pos.floor());
background.set_color(selected ? mgl::Color(0, 0, 0, 255) : mgl::Color(0, 0, 0, 120));
window.draw(background);
if(selected) {
const int border_size = border_scale * gsr::get_theme().window_height;
const int border_size = border_scale * get_theme().window_height;
draw_rectangle_outline(window, draw_pos.floor(), get_size().floor(), get_theme().tint_color, border_size);
const int caret_width = 2;
mgl::Rectangle caret({caret_width, text.get_bounds().size.y});
const int caret_width = std::max(1.0f, caret_width_scale * get_theme().window_height);
mgl::Rectangle caret({(float)caret_width, text.get_bounds().size.y});
caret.set_position((draw_pos + mgl::vec2f(padding_left + caret_offset_x, padding_top)).floor());
caret.set_color(mgl::Color(255, 255, 255));
window.draw(caret);
@@ -62,6 +66,8 @@ namespace gsr {
}
mgl::vec2f Entry::get_size() {
const int padding_top = padding_top_scale * get_theme().window_height;
const int padding_bottom = padding_bottom_scale * get_theme().window_height;
return { max_width, text.get_bounds().size.y + padding_top + padding_bottom };
}