From 667fefa3b43b461cc3ba5f3092e2168741f04810 Mon Sep 17 00:00:00 2001 From: Yousef Khadadeh Date: Sun, 26 Apr 2026 17:08:27 +0300 Subject: [PATCH] Added toolbar that goes into unsafe GUI area --- src/GUIStuff/ElementHelpers/LayoutHelpers.cpp | 128 ++++++++++++++++++ src/GUIStuff/ElementHelpers/LayoutHelpers.hpp | 13 ++ src/Screens/PhoneDrawingProgramScreen.cpp | 18 ++- 3 files changed, 152 insertions(+), 7 deletions(-) diff --git a/src/GUIStuff/ElementHelpers/LayoutHelpers.cpp b/src/GUIStuff/ElementHelpers/LayoutHelpers.cpp index 9713703..eba01c2 100644 --- a/src/GUIStuff/ElementHelpers/LayoutHelpers.cpp +++ b/src/GUIStuff/ElementHelpers/LayoutHelpers.cpp @@ -1,5 +1,6 @@ #include "LayoutHelpers.hpp" #include "../Elements/LayoutElement.hpp" +#include "Helpers/ConvertVec.hpp" namespace GUIStuff { namespace ElementHelpers { @@ -50,4 +51,131 @@ void left_to_right_line_centered_layout(GUIManager& gui, const std::function& innerContent) { + gui.element(id, [&](LayoutElement* l, const Clay_ElementId& lId) { + switch(config.dir) { + case WindowFillSideBarConfig::Direction::TOP: { + CLAY(lId, { + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) }, + .layoutDirection = CLAY_TOP_TO_BOTTOM + }, + .backgroundColor = convert_vec4(config.backgroundColor), + .border = config.border + }) { + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(gui.io.safeWindowRect.min.y())}} + }) {} + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) }, + .layoutDirection = CLAY_LEFT_TO_RIGHT + } + }) { + float paddingElementWidth = (gui.io.windowSize.x() - gui.io.safeWindowRect.width()) / 2.0f; + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}} + }) {} + innerContent(); + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}} + }) {} + } + } + break; + } + case WindowFillSideBarConfig::Direction::BOTTOM: { + CLAY(lId, { + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) }, + .layoutDirection = CLAY_TOP_TO_BOTTOM + }, + .backgroundColor = convert_vec4(config.backgroundColor), + .border = config.border + }) { + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) }, + .layoutDirection = CLAY_LEFT_TO_RIGHT + } + }) { + float paddingElementWidth = (gui.io.windowSize.x() - gui.io.safeWindowRect.width()) / 2.0f; + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}} + }) {} + innerContent(); + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}} + }) {} + } + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(gui.io.windowSize.y() - gui.io.safeWindowRect.max.y())}} + }) {} + } + break; + } + case WindowFillSideBarConfig::Direction::LEFT: { + CLAY(lId, { + .layout = { + .sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_GROW(0) }, + .layoutDirection = CLAY_LEFT_TO_RIGHT + }, + .backgroundColor = convert_vec4(config.backgroundColor), + .border = config.border + }) { + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIXED(gui.io.safeWindowRect.min.x()), .height = CLAY_SIZING_GROW(0)}} + }) {} + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_GROW(0) }, + .layoutDirection = CLAY_TOP_TO_BOTTOM + } + }) { + float paddingElementHeight = (gui.io.windowSize.y() - gui.io.safeWindowRect.height()) / 2.0f; + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}} + }) {} + innerContent(); + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}} + }) {} + } + } + break; + } + case WindowFillSideBarConfig::Direction::RIGHT: { + CLAY(lId, { + .layout = { + .sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_GROW(0) }, + .layoutDirection = CLAY_LEFT_TO_RIGHT + }, + .backgroundColor = convert_vec4(config.backgroundColor), + .border = config.border + }) { + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_GROW(0) }, + .layoutDirection = CLAY_TOP_TO_BOTTOM + } + }) { + float paddingElementHeight = (gui.io.windowSize.y() - gui.io.safeWindowRect.height()) / 2.0f; + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}} + }) {} + innerContent(); + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}} + }) {} + } + CLAY_AUTO_ID({ + .layout = {.sizing = {.width = CLAY_SIZING_FIXED(gui.io.windowSize.x() - gui.io.safeWindowRect.max.x()), .height = CLAY_SIZING_GROW(0)}} + }) {} + } + break; + } + } + }); +} + }} diff --git a/src/GUIStuff/ElementHelpers/LayoutHelpers.hpp b/src/GUIStuff/ElementHelpers/LayoutHelpers.hpp index 0fda635..1589e6f 100644 --- a/src/GUIStuff/ElementHelpers/LayoutHelpers.hpp +++ b/src/GUIStuff/ElementHelpers/LayoutHelpers.hpp @@ -9,4 +9,17 @@ void left_to_right_layout(GUIManager& gui, Clay_SizingAxis x, Clay_SizingAxis y, void left_to_right_line_layout(GUIManager& gui, const std::function& innerContent); void left_to_right_line_centered_layout(GUIManager& gui, const std::function& innerContent); +struct WindowFillSideBarConfig { + enum class Direction { + TOP, + BOTTOM, + LEFT, + RIGHT + } dir = Direction::TOP; + SkColor4f backgroundColor = {0.0f, 0.0f, 0.0f, 0.0f}; + Clay_BorderElementConfig border; +}; + +void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideBarConfig& config, const std::function& innerContent); + }} diff --git a/src/Screens/PhoneDrawingProgramScreen.cpp b/src/Screens/PhoneDrawingProgramScreen.cpp index a37d244..659e50b 100644 --- a/src/Screens/PhoneDrawingProgramScreen.cpp +++ b/src/Screens/PhoneDrawingProgramScreen.cpp @@ -4,6 +4,7 @@ #include "Helpers/ConvertVec.hpp" #include "../GUIStuff/Elements/LayoutElement.hpp" #include "../GUIStuff/ElementHelpers/ButtonHelpers.hpp" +#include "../GUIStuff/ElementHelpers/LayoutHelpers.hpp" #include "FileSelectScreen.hpp" using namespace GUIStuff; @@ -35,17 +36,20 @@ void PhoneDrawingProgramScreen::main_display() { void PhoneDrawingProgramScreen::top_toolbar() { auto& gui = main.g.gui; auto& io = gui.io; - gui.element("top toolbar", [&](LayoutElement* l, const Clay_ElementId& lId) { - CLAY(lId, { + + window_fill_side_bar(gui, "top toolbar", { + .dir = WindowFillSideBarConfig::Direction::TOP, + .backgroundColor = io.theme->backColor0, + .border = { + .color = convert_vec4(io.theme->frontColor1), + .width = {.bottom = 1} + } + }, [&] { + CLAY_AUTO_ID({ .layout = { .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) }, .childAlignment = { .x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_LEFT_TO_RIGHT - }, - .backgroundColor = convert_vec4(io.theme->backColor0), - .border = { - .color = convert_vec4(io.theme->frontColor1), - .width = {.bottom = 1} } }) { svg_icon_button(gui, "back exit button", "data/icons/RemixIcon/arrow-left-s-line.svg", {