copilot/infinipaint
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

Added toolbar that goes into unsafe GUI area

Browse source
This commit is contained in:
Yousef Khadadeh 2026-04-26 17:08:27 +03:00
parent b1f6f04d37
commit 667fefa3b4
3 changed files with 152 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

128
src/GUIStuff/ElementHelpers/LayoutHelpers.cpp
View file

@ -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<voi
}
}
void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideBarConfig& config, const std::function<void()>& innerContent) {
gui.element<LayoutElement>(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<Clay_Color>(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<Clay_Color>(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<Clay_Color>(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<Clay_Color>(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;
}
}
});
}
}}

13
src/GUIStuff/ElementHelpers/LayoutHelpers.hpp
View file

@ -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<void()>& innerContent);
void left_to_right_line_centered_layout(GUIManager& gui, const std::function<void()>& 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<void()>& innerContent);
}}

18
src/Screens/PhoneDrawingProgramScreen.cpp
View file

@ -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<LayoutElement>("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<Clay_Color>(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<Clay_Color>(io.theme->backColor0),
.border = {
.color = convert_vec4<Clay_Color>(io.theme->frontColor1),
.width = {.bottom = 1}
}
}) {
svg_icon_button(gui, "back exit button", "data/icons/RemixIcon/arrow-left-s-line.svg", {