Using unsafe area toolbars in file selector

This commit is contained in:
Yousef Khadadeh 2026-04-26 18:20:37 +03:00
parent 667fefa3b4
commit 33e4b57d79
5 changed files with 159 additions and 133 deletions

View file

@ -72,13 +72,12 @@ void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideB
.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)}}
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(gui.io.safeWindowRect.min.x()), .height = CLAY_SIZING_FIT(0)}}
}) {}
innerContent();
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}}
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(gui.io.windowSize.x() - gui.io.safeWindowRect.max.x()), .height = CLAY_SIZING_FIT(0)}}
}) {}
}
}
@ -99,13 +98,12 @@ void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideB
.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)}}
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(gui.io.safeWindowRect.min.x()), .height = CLAY_SIZING_FIT(0)}}
}) {}
innerContent();
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}}
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(gui.io.windowSize.x() - gui.io.safeWindowRect.max.x()), .height = CLAY_SIZING_FIT(0)}}
}) {}
}
CLAY_AUTO_ID({
@ -132,13 +130,12 @@ void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideB
.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)}}
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(gui.io.safeWindowRect.min.y())}}
}) {}
innerContent();
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}}
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(gui.io.windowSize.y() - gui.io.safeWindowRect.max.y())}}
}) {}
}
}
@ -159,13 +156,12 @@ void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideB
.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)}}
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(gui.io.safeWindowRect.min.y())}}
}) {}
innerContent();
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}}
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(gui.io.windowSize.y() - gui.io.safeWindowRect.max.y())}}
}) {}
}
CLAY_AUTO_ID({
@ -178,4 +174,10 @@ void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideB
});
}
void window_safe_area_layout(GUIManager& gui, const char* id, const std::function<void()>& innerContent) {
gui.element<LayoutElement>(id, [&] (LayoutElement* l, const Clay_ElementId& lId) {
innerContent();
});
}
}}

View file

@ -21,5 +21,6 @@ struct WindowFillSideBarConfig {
};
void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideBarConfig& config, const std::function<void()>& innerContent);
void window_safe_area_layout(GUIManager& gui, const char* id, const std::function<void()>& innerContent);
}}

View file

@ -11,7 +11,7 @@ void PositionAdjustingPopupMenu::layout(const Clay_ElementId& id, Vector2f popup
auto& bb = layoutElement->get_bb().value();
if((popupPos.y() + bb.height()) > gui.io.windowSize.y())
popupPos.y() -= bb.height();
if((popupPos.x() + bb.width()) > gui.io.windowSize.y())
if((popupPos.x() + bb.width()) > gui.io.windowSize.x())
popupPos.x() -= bb.width();
}

View file

@ -10,6 +10,7 @@
#include "../GUIStuff/Elements/LayoutElement.hpp"
#include "../GUIStuff/Elements/SVGIcon.hpp"
#include "../GUIStuff/Elements/TextParagraph.hpp"
#include "../GUIStuff/ElementHelpers/LayoutHelpers.hpp"
#include "../GUIStuff/Elements/PositionAdjustingPopupMenu.hpp"
#include "../World.hpp"
#include "Helpers/StringHelpers.hpp"
@ -128,7 +129,7 @@ void FileSelectScreen::main_display() {
main_menu();
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_FIXED(gui.io.safeWindowRect.width()), .height = CLAY_SIZING_GROW(0)},
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_TOP },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
@ -154,6 +155,16 @@ void FileSelectScreen::main_display() {
actionBarOpenAnim->animation_trigger_reverse();
title_bar();
}
window_safe_area_layout(gui, "center area element", [&] {
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.padding = CLAY_PADDING_ALL(gui.io.theme->padding1),
.childGap = gui.io.theme->childGap1,
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_TOP },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
}) {
switch(selectedMenu) {
case SelectedMenu::FILES:
file_view();
@ -166,6 +177,8 @@ void FileSelectScreen::main_display() {
case SelectedMenu::SETTINGS:
break;
}
}
});
menu_black_box();
}
edit_action_bar();
@ -186,7 +199,7 @@ void FileSelectScreen::create_file_button() {
.element = CLAY_ATTACH_POINT_RIGHT_BOTTOM,
.parent = CLAY_ATTACH_POINT_RIGHT_BOTTOM
},
.attachTo = CLAY_ATTACH_TO_PARENT
.attachTo = CLAY_ATTACH_TO_ROOT
}
}) {
svg_icon_button(gui, "add button", "data/icons/plus.svg", {
@ -376,12 +389,16 @@ void FileSelectScreen::edit_title_bar() {
void FileSelectScreen::title_bar() {
auto& gui = main.g.gui;
window_fill_side_bar(gui, "top toolbar", {
.dir = WindowFillSideBarConfig::Direction::TOP,
.backgroundColor = gui.io.theme->backColor0
}, [&] {
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0)},
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.childGap = gui.io.theme->childGap1,
.childAlignment = { .x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_CENTER },
.layoutDirection = CLAY_LEFT_TO_RIGHT,
.childAlignment = {.x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_CENTER},
.layoutDirection = CLAY_LEFT_TO_RIGHT
}
}) {
svg_icon_button(gui, "main settings button", "data/icons/menu.svg", {
@ -464,6 +481,7 @@ void FileSelectScreen::title_bar() {
}
}
}
});
}
void FileSelectScreen::text_transparent_option_button(const char* id, const char* text, const std::function<void()>& onClick) {
@ -490,7 +508,11 @@ void FileSelectScreen::icon_text_transparent_option_selected_button(const char*
void FileSelectScreen::main_menu() {
if(!mainMenuOpenAnim->is_at_start()) {
auto& gui = main.g.gui;
gui.element<LayoutElement>("main menu popup", [&] (LayoutElement*, const Clay_ElementId& lId) {
window_fill_side_bar(gui, "main menu popup", {
.dir = WindowFillSideBarConfig::Direction::LEFT,
.backgroundColor = gui.io.theme->backColor0
}, [&] {
gui.element<LayoutElement>("inner main menu element", [&] (LayoutElement*, const Clay_ElementId& lId) {
CLAY(lId, {
.layout = {
.sizing = {.width = CLAY_SIZING_FIXED(300.0f * mainMenuOpenAnim->get_val()), .height = CLAY_SIZING_GROW(0)},
@ -517,6 +539,7 @@ void FileSelectScreen::main_menu() {
}
}
});
});
}
}

View file

@ -526,12 +526,12 @@ SDL_AppResult SDL_AppInit(void **appstate, int argc, char **argv) {
mS.m->window.canCreateSurfaces = true;
resize_window(mS);
mS.m->screen = std::make_unique<PhoneDrawingProgramScreen>(*mS.m);
mS.m->screen = std::make_unique<FileSelectScreen>(*mS.m);
if(listOfFilesToOpenFromCommand.empty()) {
mS.m->create_new_tab({
.isClient = false
});
//mS.m->create_new_tab({
// .isClient = false
//});
}
else {
for(std::filesystem::path& f : listOfFilesToOpenFromCommand) {