diff --git a/src/GUIStuff/ElementHelpers/LayoutHelpers.cpp b/src/GUIStuff/ElementHelpers/LayoutHelpers.cpp index eba01c2..35acca0 100644 --- a/src/GUIStuff/ElementHelpers/LayoutHelpers.cpp +++ b/src/GUIStuff/ElementHelpers/LayoutHelpers.cpp @@ -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& innerContent) { + gui.element(id, [&] (LayoutElement* l, const Clay_ElementId& lId) { + innerContent(); + }); +} + }} diff --git a/src/GUIStuff/ElementHelpers/LayoutHelpers.hpp b/src/GUIStuff/ElementHelpers/LayoutHelpers.hpp index 1589e6f..f281439 100644 --- a/src/GUIStuff/ElementHelpers/LayoutHelpers.hpp +++ b/src/GUIStuff/ElementHelpers/LayoutHelpers.hpp @@ -21,5 +21,6 @@ struct WindowFillSideBarConfig { }; void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideBarConfig& config, const std::function& innerContent); +void window_safe_area_layout(GUIManager& gui, const char* id, const std::function& innerContent); }} diff --git a/src/GUIStuff/Elements/PositionAdjustingPopupMenu.cpp b/src/GUIStuff/Elements/PositionAdjustingPopupMenu.cpp index 41a2cbf..56cf994 100644 --- a/src/GUIStuff/Elements/PositionAdjustingPopupMenu.cpp +++ b/src/GUIStuff/Elements/PositionAdjustingPopupMenu.cpp @@ -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(); } diff --git a/src/Screens/FileSelectScreen.cpp b/src/Screens/FileSelectScreen.cpp index 094cc04..ec587d5 100644 --- a/src/Screens/FileSelectScreen.cpp +++ b/src/Screens/FileSelectScreen.cpp @@ -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,18 +155,30 @@ void FileSelectScreen::main_display() { actionBarOpenAnim->animation_trigger_reverse(); title_bar(); } - switch(selectedMenu) { - case SelectedMenu::FILES: - file_view(); - if(!editMode) - create_file_button(); - break; - case SelectedMenu::TRASH: - file_view(); - break; - case SelectedMenu::SETTINGS: - break; - } + 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(); + if(!editMode) + create_file_button(); + break; + case SelectedMenu::TRASH: + file_view(); + break; + 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,94 +389,99 @@ void FileSelectScreen::edit_title_bar() { void FileSelectScreen::title_bar() { auto& gui = main.g.gui; - CLAY_AUTO_ID({ - .layout = { - .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0)}, - .childGap = gui.io.theme->childGap1, - .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", { - .drawType = SelectableButton::DrawType::TRANSPARENT_ALL, - .onClick = [&] { - mainMenuOpenAnim->animation_trigger(); - } - }); - switch(selectedMenu) { - case SelectedMenu::FILES: - mutable_text_label(gui, "main screen header text", "Files"); - break; - case SelectedMenu::TRASH: - mutable_text_label(gui, "main screen header text", "Trash"); - break; - case SelectedMenu::SETTINGS: - mutable_text_label(gui, "main screen header text", "Settings"); - break; - } + 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_GROW(0)}, + .childGap = gui.io.theme->childGap1, + .childAlignment = {.x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_CENTER}, + .layoutDirection = CLAY_LEFT_TO_RIGHT } - }) {} - if(selectedMenu == SelectedMenu::FILES || selectedMenu == SelectedMenu::TRASH) { - SelectableButton* moreButton = svg_icon_button(gui, "more settings button", "data/icons/RemixIcon/more-2-fill.svg", { + }) { + svg_icon_button(gui, "main settings button", "data/icons/menu.svg", { .drawType = SelectableButton::DrawType::TRANSPARENT_ALL, .onClick = [&] { - moreOptionsMenu = MoreOptionsMenu::MAIN; + mainMenuOpenAnim->animation_trigger(); } }); - if(moreButton->get_bb().has_value() && moreOptionsMenu != MoreOptionsMenu::CLOSED) { - gui.set_z_index(gui.get_z_index() + 10, [&] { - gui.element("more options popup", moreButton->get_bb().value().top_right(), [&] { - CLAY_AUTO_ID({ - .layout = { - .sizing = {.width = CLAY_SIZING_FIT(200), .height = CLAY_SIZING_FIT(0)}, - .layoutDirection = CLAY_TOP_TO_BOTTOM - }, - .backgroundColor = convert_vec4(gui.io.theme->backColor1), - .cornerRadius = CLAY_CORNER_RADIUS(4) - }) { - if(moreOptionsMenu == MoreOptionsMenu::MAIN) { - text_transparent_option_button("Edit", "Edit", [&] { - moreOptionsMenu = MoreOptionsMenu::CLOSED; - start_edit_mode(); - }); - text_transparent_option_button("View", "View", [&] { - moreOptionsMenu = MoreOptionsMenu::VIEW; - }); - } - else if(moreOptionsMenu == MoreOptionsMenu::VIEW) { - text_transparent_option_button("Large Grid", "Large Grid", [&] { - fileViewType = FileViewType::LARGE_GRID; - moreOptionsMenu = MoreOptionsMenu::CLOSED; - }); - text_transparent_option_button("Medium Grid", "Medium Grid", [&] { - fileViewType = FileViewType::MEDIUM_GRID; - moreOptionsMenu = MoreOptionsMenu::CLOSED; - }); - text_transparent_option_button("Small Grid", "Small Grid", [&] { - fileViewType = FileViewType::SMALL_GRID; - moreOptionsMenu = MoreOptionsMenu::CLOSED; - }); - text_transparent_option_button("List", "List", [&] { - fileViewType = FileViewType::LIST; - moreOptionsMenu = MoreOptionsMenu::CLOSED; - }); - } - } - }, LayoutElement::Callbacks{ - .mouseButton = [&](LayoutElement* l, const InputManager::MouseButtonCallbackArgs& m) { - if(!l->mouseHovering && m.down) { - moreOptionsMenu = MoreOptionsMenu::CLOSED; - main.g.gui.set_to_layout(); - } - } - }); + switch(selectedMenu) { + case SelectedMenu::FILES: + mutable_text_label(gui, "main screen header text", "Files"); + break; + case SelectedMenu::TRASH: + mutable_text_label(gui, "main screen header text", "Trash"); + break; + case SelectedMenu::SETTINGS: + mutable_text_label(gui, "main screen header text", "Settings"); + break; + } + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}, + } + }) {} + if(selectedMenu == SelectedMenu::FILES || selectedMenu == SelectedMenu::TRASH) { + SelectableButton* moreButton = svg_icon_button(gui, "more settings button", "data/icons/RemixIcon/more-2-fill.svg", { + .drawType = SelectableButton::DrawType::TRANSPARENT_ALL, + .onClick = [&] { + moreOptionsMenu = MoreOptionsMenu::MAIN; + } }); + if(moreButton->get_bb().has_value() && moreOptionsMenu != MoreOptionsMenu::CLOSED) { + gui.set_z_index(gui.get_z_index() + 10, [&] { + gui.element("more options popup", moreButton->get_bb().value().top_right(), [&] { + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_FIT(200), .height = CLAY_SIZING_FIT(0)}, + .layoutDirection = CLAY_TOP_TO_BOTTOM + }, + .backgroundColor = convert_vec4(gui.io.theme->backColor1), + .cornerRadius = CLAY_CORNER_RADIUS(4) + }) { + if(moreOptionsMenu == MoreOptionsMenu::MAIN) { + text_transparent_option_button("Edit", "Edit", [&] { + moreOptionsMenu = MoreOptionsMenu::CLOSED; + start_edit_mode(); + }); + text_transparent_option_button("View", "View", [&] { + moreOptionsMenu = MoreOptionsMenu::VIEW; + }); + } + else if(moreOptionsMenu == MoreOptionsMenu::VIEW) { + text_transparent_option_button("Large Grid", "Large Grid", [&] { + fileViewType = FileViewType::LARGE_GRID; + moreOptionsMenu = MoreOptionsMenu::CLOSED; + }); + text_transparent_option_button("Medium Grid", "Medium Grid", [&] { + fileViewType = FileViewType::MEDIUM_GRID; + moreOptionsMenu = MoreOptionsMenu::CLOSED; + }); + text_transparent_option_button("Small Grid", "Small Grid", [&] { + fileViewType = FileViewType::SMALL_GRID; + moreOptionsMenu = MoreOptionsMenu::CLOSED; + }); + text_transparent_option_button("List", "List", [&] { + fileViewType = FileViewType::LIST; + moreOptionsMenu = MoreOptionsMenu::CLOSED; + }); + } + } + }, LayoutElement::Callbacks{ + .mouseButton = [&](LayoutElement* l, const InputManager::MouseButtonCallbackArgs& m) { + if(!l->mouseHovering && m.down) { + moreOptionsMenu = MoreOptionsMenu::CLOSED; + main.g.gui.set_to_layout(); + } + } + }); + }); + } } } - } + }); } void FileSelectScreen::text_transparent_option_button(const char* id, const char* text, const std::function& onClick) { @@ -490,32 +508,37 @@ 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("main menu popup", [&] (LayoutElement*, const Clay_ElementId& lId) { - CLAY(lId, { - .layout = { - .sizing = {.width = CLAY_SIZING_FIXED(300.0f * mainMenuOpenAnim->get_val()), .height = CLAY_SIZING_GROW(0)}, - .padding = CLAY_PADDING_ALL(gui.io.theme->padding1), - .childGap = 0, - .layoutDirection = CLAY_TOP_TO_BOTTOM, - }, - }) { - if(mainMenuOpenAnim->is_at_end()) { - icon_text_transparent_option_selected_button("Files", "data/icons/folder.svg", "Files", selectedMenu == SelectedMenu::FILES, [&] { - selectedMenu = SelectedMenu::FILES; - update_file_list(fileList, savePath, false); - mainMenuOpenAnim->animation_trigger_reverse(); - }); - icon_text_transparent_option_selected_button("Trash", "data/icons/trash.svg", "Trash", selectedMenu == SelectedMenu::TRASH, [&] { - selectedMenu = SelectedMenu::TRASH; - update_file_list(fileList, trashPath, true); - mainMenuOpenAnim->animation_trigger_reverse(); - }); - icon_text_transparent_option_selected_button("Settings", "data/icons/RemixIcon/settings-3-line.svg", "Settings", selectedMenu == SelectedMenu::SETTINGS, [&] { - selectedMenu = SelectedMenu::SETTINGS; - mainMenuOpenAnim->animation_trigger_reverse(); - }); + window_fill_side_bar(gui, "main menu popup", { + .dir = WindowFillSideBarConfig::Direction::LEFT, + .backgroundColor = gui.io.theme->backColor0 + }, [&] { + gui.element("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)}, + .padding = CLAY_PADDING_ALL(gui.io.theme->padding1), + .childGap = 0, + .layoutDirection = CLAY_TOP_TO_BOTTOM, + }, + }) { + if(mainMenuOpenAnim->is_at_end()) { + icon_text_transparent_option_selected_button("Files", "data/icons/folder.svg", "Files", selectedMenu == SelectedMenu::FILES, [&] { + selectedMenu = SelectedMenu::FILES; + update_file_list(fileList, savePath, false); + mainMenuOpenAnim->animation_trigger_reverse(); + }); + icon_text_transparent_option_selected_button("Trash", "data/icons/trash.svg", "Trash", selectedMenu == SelectedMenu::TRASH, [&] { + selectedMenu = SelectedMenu::TRASH; + update_file_list(fileList, trashPath, true); + mainMenuOpenAnim->animation_trigger_reverse(); + }); + icon_text_transparent_option_selected_button("Settings", "data/icons/RemixIcon/settings-3-line.svg", "Settings", selectedMenu == SelectedMenu::SETTINGS, [&] { + selectedMenu = SelectedMenu::SETTINGS; + mainMenuOpenAnim->animation_trigger_reverse(); + }); + } } - } + }); }); } } diff --git a/src/main.cpp b/src/main.cpp index 98ca7fc..dcbc1d8 100755 --- a/src/main.cpp +++ b/src/main.cpp @@ -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(*mS.m); + mS.m->screen = std::make_unique(*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) {