diff --git a/src/GUIStuff/ElementHelpers/ScrollAreaHelpers.cpp b/src/GUIStuff/ElementHelpers/ScrollAreaHelpers.cpp index 36a0c75..cd18949 100644 --- a/src/GUIStuff/ElementHelpers/ScrollAreaHelpers.cpp +++ b/src/GUIStuff/ElementHelpers/ScrollAreaHelpers.cpp @@ -1,5 +1,6 @@ #include "ScrollAreaHelpers.hpp" #include "../GUIManager.hpp" +#include "Helpers/ConvertVec.hpp" namespace GUIStuff { namespace ElementHelpers { @@ -9,6 +10,8 @@ ScrollArea* scroll_area_many_entries(GUIManager& gui, const char* id, const Scro .clipHorizontal = options.clipHorizontal, .clipVertical = true, .showScrollbarY = true, + .xAlign = options.xAlign, + .yAlign = CLAY_ALIGN_Y_TOP, .innerContent = [&](const ScrollArea::InnerContentParameters& params) { if(options.innerContentExtraCallback) options.innerContentExtraCallback(params); @@ -47,7 +50,7 @@ ScrollArea* scroll_area_many_entries(GUIManager& gui, const char* id, const Scro for(size_t i = startPoint; i < endPoint; i++) { gui.new_id(i - startPoint, [&] { CLAY_AUTO_ID({ - .layout = { .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(options.entryHeight)}} + .layout = { .sizing = {.width = options.xElementSize, .height = CLAY_SIZING_FIXED(options.entryHeight)}} }) { options.elementContent(i); } diff --git a/src/GUIStuff/ElementHelpers/ScrollAreaHelpers.hpp b/src/GUIStuff/ElementHelpers/ScrollAreaHelpers.hpp index 9dd9e03..3389931 100644 --- a/src/GUIStuff/ElementHelpers/ScrollAreaHelpers.hpp +++ b/src/GUIStuff/ElementHelpers/ScrollAreaHelpers.hpp @@ -1,5 +1,6 @@ #pragma once #include "../Elements/ScrollArea.hpp" +#include "Helpers/ConvertVec.hpp" namespace GUIStuff { namespace ElementHelpers { @@ -8,6 +9,8 @@ struct ScrollBarManyEntriesOptions { size_t entryCount; bool clipHorizontal = false; bool growing = false; // If set to false, this element has a fixed size. Otherwise, is a growing element. + Clay_LayoutAlignmentX xAlign = CLAY_ALIGN_X_LEFT; + Clay_SizingAxis xElementSize = CLAY_SIZING_GROW(0); std::function elementContent; std::function innerContentExtraCallback; }; diff --git a/src/GUIStuff/Elements/GridScrollArea.cpp b/src/GUIStuff/Elements/GridScrollArea.cpp index 34e8ded..72690bb 100644 --- a/src/GUIStuff/Elements/GridScrollArea.cpp +++ b/src/GUIStuff/Elements/GridScrollArea.cpp @@ -19,15 +19,20 @@ void GridScrollArea::layout(const Clay_ElementId& id, const Options& o) { rowWidth = std::fabs(contParams.containerDimensions.x()); if(extraCallback) extraCallback(contParams); }; - size_t entriesPerRow = static_cast(rowWidth / options.entryMaximumWidth) + 1; + size_t entriesPerRow = std::max(rowWidth / options.entryWidth, 1); size_t rowCount = (options.entryCount + entriesPerRow - 1) / entriesPerRow; - float entryWidth = rowWidth == 0.0f ? 100.0f : (rowWidth / entriesPerRow); opts.entryCount = rowCount; + uint16_t xPadding = 0; + if(rowCount > 1 || (rowCount == 1 && ((options.entryCount + entriesPerRow) / entriesPerRow) > 1)) // More than 1 row or 1st row is full + xPadding = static_cast(std::max(rowWidth - (entriesPerRow * options.entryWidth), 0) / (entriesPerRow * 2)); + opts.elementContent = [&] (size_t rowIndex) { gui.new_id("grid row", [&] { CLAY_AUTO_ID({ .layout = { - .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(options.entryHeight)}, + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}, + .padding = {.left = xPadding, .right = xPadding}, + .childGap = xPadding, .childAlignment = { .x = options.childAlignmentX} } }) { @@ -36,7 +41,9 @@ void GridScrollArea::layout(const Clay_ElementId& id, const Options& o) { for(size_t i = startIndex; i < endIndex; i++) { gui.new_id(static_cast(i - startIndex), [&] { CLAY_AUTO_ID({ - .layout = {.sizing = {.width = CLAY_SIZING_FIXED(entryWidth), .height = CLAY_SIZING_FIXED(options.entryHeight)}} + .layout = { + .sizing = {.width = CLAY_SIZING_FIXED(options.entryWidth), .height = CLAY_SIZING_FIXED(options.entryHeight)}, + } }) { options.elementContent(i); } @@ -46,7 +53,9 @@ void GridScrollArea::layout(const Clay_ElementId& id, const Options& o) { }); }; CLAY(id, { - .layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}} + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)} + } }) { scroll_area_many_entries(gui, "scroll many area", opts); } diff --git a/src/GUIStuff/Elements/GridScrollArea.hpp b/src/GUIStuff/Elements/GridScrollArea.hpp index 2d9a9f4..975f348 100644 --- a/src/GUIStuff/Elements/GridScrollArea.hpp +++ b/src/GUIStuff/Elements/GridScrollArea.hpp @@ -10,7 +10,7 @@ class GridScrollArea : public Element { GridScrollArea(GUIManager& gui); struct Options { - float entryMaximumWidth; + float entryWidth; Clay_LayoutAlignmentX childAlignmentX = CLAY_ALIGN_X_LEFT; float entryHeight; size_t entryCount; diff --git a/src/GUIStuff/Elements/ScrollArea.cpp b/src/GUIStuff/Elements/ScrollArea.cpp index 8d5db9a..3f6fea2 100644 --- a/src/GUIStuff/Elements/ScrollArea.cpp +++ b/src/GUIStuff/Elements/ScrollArea.cpp @@ -31,7 +31,7 @@ void ScrollArea::layout(const Clay_ElementId& id, const Options& options) { CLAY(localID, { .layout = { .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}, - .childAlignment = {.x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_TOP}, + .childAlignment = {.x = opts.xAlign, .y = opts.yAlign}, .layoutDirection = opts.layoutDirection }, .clip = {.horizontal = opts.clipHorizontal, .vertical = opts.clipVertical, .childOffset = {.x = scrollOffset.x(), .y = scrollOffset.y()}} diff --git a/src/GUIStuff/Elements/ScrollArea.hpp b/src/GUIStuff/Elements/ScrollArea.hpp index 1c4cfaa..7747152 100644 --- a/src/GUIStuff/Elements/ScrollArea.hpp +++ b/src/GUIStuff/Elements/ScrollArea.hpp @@ -22,6 +22,8 @@ class ScrollArea : public Element { bool showScrollbarX = false; bool showScrollbarY = false; Clay_LayoutDirection layoutDirection = CLAY_TOP_TO_BOTTOM; + Clay_LayoutAlignmentX xAlign = CLAY_ALIGN_X_LEFT; + Clay_LayoutAlignmentY yAlign = CLAY_ALIGN_Y_TOP; std::function innerContent; }; diff --git a/src/Screens/FileSelectScreen.cpp b/src/Screens/FileSelectScreen.cpp index 395eb24..73b5a91 100644 --- a/src/Screens/FileSelectScreen.cpp +++ b/src/Screens/FileSelectScreen.cpp @@ -2,6 +2,7 @@ #include "../MainProgram.hpp" #include "../GUIHolder.hpp" #include "../GUIStuff/ElementHelpers/TextLabelHelpers.hpp" +#include "../GUIStuff/ElementHelpers/ButtonHelpers.hpp" #include "Helpers/ConvertVec.hpp" #include "../GUIStuff/Elements/GridScrollArea.hpp" #include "../GUIStuff/Elements/ImageDisplay.hpp" @@ -18,17 +19,30 @@ void FileSelectScreen::gui_layout_run() { CLAY_AUTO_ID({ .layout = { - .sizing = {.width = CLAY_SIZING_FIXED(gui.io.windowSize.x()), .height = CLAY_SIZING_FIXED(gui.io.windowSize.y())}, - .padding = {.top = 15}, - .childGap = 15, + .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, }, }) { - text_label(gui, "File selector"); + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(40)}, + .padding = CLAY_PADDING_ALL(gui.io.theme->padding1), + .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 + }); + text_label(gui, "File selector"); + } auto& fileList = get_file_list(); gui.element("File selector grid", GridScrollArea::Options{ - .entryMaximumWidth = 200.0f, + .entryWidth = 200.0f, .childAlignmentX = CLAY_ALIGN_X_LEFT, .entryHeight = 220.0f, .entryCount = fileList.size(), @@ -43,7 +57,7 @@ void FileSelectScreen::gui_layout_run() { } }) { CLAY_AUTO_ID({ - .layout = { .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0) }}, + .layout = { .sizing = {.width = CLAY_SIZING_FIXED(150), .height = CLAY_SIZING_GROW(0) }}, .aspectRatio = { .aspectRatio = 1.0f } }) { gui.element("ico", ImageDisplay::Data{