diff --git a/src/GUIStuff/ElementHelpers/ColorPickerItemsHelpers.hpp b/src/GUIStuff/ElementHelpers/ColorPickerItemsHelpers.hpp index d4bf6fb..70d8ff0 100644 --- a/src/GUIStuff/ElementHelpers/ColorPickerItemsHelpers.hpp +++ b/src/GUIStuff/ElementHelpers/ColorPickerItemsHelpers.hpp @@ -18,7 +18,14 @@ template void color_picker_items(GUIManager& gui, const char* id, T if(oE) oE(); gui.set_to_layout(); }; - gui.element>("c", val, options.hasAlpha, ColorPickerData{ .onChange = fullOnEdit, .onHold = options.onSelect, .onRelease = options.onDeselect }); + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)} + }, + .aspectRatio = {1.0f} + }) { + gui.element>("c", val, options.hasAlpha, ColorPickerData{ .onChange = fullOnEdit, .onHold = options.onSelect, .onRelease = options.onDeselect }); + } left_to_right_line_layout(gui, [&]() { text_label(gui, "R"); input_color_component_255(gui, "r", &(*val)[0], { .onEdit = fullOnEdit, .onSelect = options.onSelect, .onDeselect = options.onDeselect }); diff --git a/src/GUIStuff/Elements/ColorPicker.impl.hpp b/src/GUIStuff/Elements/ColorPicker.impl.hpp index b8686c0..8957237 100644 --- a/src/GUIStuff/Elements/ColorPicker.impl.hpp +++ b/src/GUIStuff/Elements/ColorPicker.impl.hpp @@ -49,7 +49,7 @@ template void ColorPicker::layout(const Clay_ElementId& id, T* d }); CLAY_AUTO_ID({ .layout = { - .sizing = {.width = CLAY_SIZING_FIT(BAR_WIDTH), .height = CLAY_SIZING_GROW(0)} + .sizing = {.width = CLAY_SIZING_GROW(0, BAR_WIDTH), .height = CLAY_SIZING_GROW(0)} }, }) { gui.element("hue slider", HueVerticalSliderData{ @@ -62,7 +62,7 @@ template void ColorPicker::layout(const Clay_ElementId& id, T* d } CLAY_AUTO_ID({ .layout = { - .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(BAR_WIDTH)} + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0, BAR_WIDTH)} }, }) { gui.element("alpha slider", AlphaSliderData{ diff --git a/src/Screens/PhoneDrawingProgramScreen.cpp b/src/Screens/PhoneDrawingProgramScreen.cpp index 6b013c4..0838eb1 100644 --- a/src/Screens/PhoneDrawingProgramScreen.cpp +++ b/src/Screens/PhoneDrawingProgramScreen.cpp @@ -108,24 +108,29 @@ void PhoneDrawingProgramScreen::bottom_toolbar() { .layoutDirection = CLAY_LEFT_TO_RIGHT } }) { - CLAY_AUTO_ID({ - .layout = { - .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) }, - } - }) {} switch(settingsMenuPopup) { case SettingsMenuPopup::NONE: reset_color_picker_popup_data(); break; case SettingsMenuPopup::SETTINGS: + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) }, + } + }) {} reset_color_picker_popup_data(); tool_settings_popup(); break; case SettingsMenuPopup::FG_COLOR: - color_settings_popup(&main.toolConfig.globalConf.foregroundColor); - break; case SettingsMenuPopup::BG_COLOR: - color_settings_popup(&main.toolConfig.globalConf.backgroundColor); + if(!colorPickerPopupData.extraSettingsOpen) { + CLAY_AUTO_ID({ + .layout = { + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) }, + } + }) {} + } + color_settings_popup(settingsMenuPopup == SettingsMenuPopup::FG_COLOR ? &main.toolConfig.globalConf.foregroundColor : &main.toolConfig.globalConf.backgroundColor); break; } } @@ -249,12 +254,13 @@ void PhoneDrawingProgramScreen::color_settings_popup(Vector4f* color) { auto& gui = main.g.gui; auto& palette = main.conf.palettes[colorPickerPopupData.selectedPalette]; + bool extraColorButtons = colorPickerPopupData.extraSettingsOpen && colorPickerPopupData.selectedPalette != 0; auto paletteColorPickerGrid = [&] { gui.element("color selector grid", GridScrollArea::Options{ .entryWidth = BIG_BUTTON_SIZE, .childAlignmentX = CLAY_ALIGN_X_CENTER, .entryHeight = BIG_BUTTON_SIZE, - .entryCount = palette.colors.size() + 1, + .entryCount = palette.colors.size() + (extraColorButtons ? 3 : 1), .scrollbar = ScrollArea::ScrollbarType::NORMAL, .elementContent = [&](size_t i) { if(i < palette.colors.size()) { @@ -271,13 +277,43 @@ void PhoneDrawingProgramScreen::color_settings_popup(Vector4f* color) { }); } else { - svg_icon_button(gui, "extra color settings", "data/icons/RemixIcon/more-fill.svg", { - .drawType = SelectableButton::DrawType::TRANSPARENT_ALL, - .isSelected = colorPickerPopupData.extraSettingsOpen, - .onClick = [&] { - colorPickerPopupData.extraSettingsOpen = !colorPickerPopupData.extraSettingsOpen; + if(extraColorButtons) { + switch(i - palette.colors.size()) { + case 0: + svg_icon_button(gui, "addcolor", "data/icons/plus.svg", { + .onClick = [&, color] { + std::erase(palette.colors, Vector3f{color->x(), color->y(), color->z()}); + palette.colors.emplace_back(color->x(), color->y(), color->z()); + } + }); + break; + case 1: + svg_icon_button(gui, "deletecolor", "data/icons/close.svg", { + .onClick = [&, color] { + std::erase(palette.colors, Vector3f{color->x(), color->y(), color->z()}); + } + }); + break; + case 2: + svg_icon_button(gui, "extra color settings", "data/icons/RemixIcon/more-fill.svg", { + .drawType = SelectableButton::DrawType::TRANSPARENT_ALL, + .isSelected = colorPickerPopupData.extraSettingsOpen, + .onClick = [&] { + colorPickerPopupData.extraSettingsOpen = !colorPickerPopupData.extraSettingsOpen; + } + }); + break; } - }); + } + else { + svg_icon_button(gui, "extra color settings", "data/icons/RemixIcon/more-fill.svg", { + .drawType = SelectableButton::DrawType::TRANSPARENT_ALL, + .isSelected = colorPickerPopupData.extraSettingsOpen, + .onClick = [&] { + colorPickerPopupData.extraSettingsOpen = !colorPickerPopupData.extraSettingsOpen; + } + }); + } } } }); @@ -286,10 +322,11 @@ void PhoneDrawingProgramScreen::color_settings_popup(Vector4f* color) { auto paletteColorPickerExtras = [&] { CLAY_AUTO_ID({ .layout = { - .sizing = {.width = CLAY_SIZING_FIT(200), .height = CLAY_SIZING_FIT(200)}, + .sizing = {.width = CLAY_SIZING_FIT(200), .height = CLAY_SIZING_GROW(0)}, .childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER}, .layoutDirection = CLAY_LEFT_TO_RIGHT - } + }, + .aspectRatio = {1.0f} }) { gui.element>("color picker element", color, true); } @@ -331,28 +368,6 @@ void PhoneDrawingProgramScreen::color_settings_popup(Vector4f* color) { } }); } - if(colorPickerPopupData.selectedPalette != 0) { - 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_CENTER, .y = CLAY_ALIGN_Y_CENTER}, - .layoutDirection = CLAY_LEFT_TO_RIGHT - } - }) { - svg_icon_button(gui, "addcolor", "data/icons/plus.svg", { - .onClick = [&, color] { - std::erase(palette.colors, Vector3f{color->x(), color->y(), color->z()}); - palette.colors.emplace_back(color->x(), color->y(), color->z()); - } - }); - svg_icon_button(gui, "deletecolor", "data/icons/close.svg", { - .onClick = [&, color] { - std::erase(palette.colors, Vector3f{color->x(), color->y(), color->z()}); - } - }); - } - } }; gui.element("color settings popup", [&] (LayoutElement* l, const Clay_ElementId& lId) { @@ -369,7 +384,7 @@ void PhoneDrawingProgramScreen::color_settings_popup(Vector4f* color) { if(colorPickerPopupData.extraSettingsOpen) { CLAY_AUTO_ID({ .layout = { - .sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIT(0)}, + .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}, .childGap = gui.io.theme->childGap1, .layoutDirection = CLAY_TOP_TO_BOTTOM }, diff --git a/src/Toolbar.cpp b/src/Toolbar.cpp index 29d398d..5d1449f 100644 --- a/src/Toolbar.cpp +++ b/src/Toolbar.cpp @@ -1196,7 +1196,7 @@ void Toolbar::color_picker_window(const char* id, Vector4f** color, GUIStuff::El .sizing = {.width = CLAY_SIZING_FIT(300), .height = CLAY_SIZING_FIT(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}, + .childAlignment = { .x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_TOP}, .layoutDirection = CLAY_TOP_TO_BOTTOM }, .backgroundColor = convert_vec4(gui.io.theme->backColor1),