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

GUI style changed to make it take less space

Browse source
This commit is contained in:
Yousef Khadadeh 2025-11-01 16:07:19 +03:00
parent ab2d2ca415
commit 49d72e384c
18 changed files with 210 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/GUIStuff/Elements/CheckBox.cpp
View file

@ -7,7 +7,7 @@ namespace GUIStuff {
void CheckBox::update(UpdateInputData& io, bool newIsTicked, const std::function<void()>& elemUpdate) {
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_FIXED(20), .height = CLAY_SIZING_FIXED(20)}
.sizing = {.width = CLAY_SIZING_FIXED(15), .height = CLAY_SIZING_FIXED(15)}
},
.custom = { .customData = this }
}) {
@ -38,7 +38,7 @@ void CheckBox::clay_draw(SkCanvas* canvas, UpdateInputData& io, Clay_RenderComma
}
else {
SkRect checkBox = SkRect::MakeLTRB(-0.45f, -0.45f, 0.45f, 0.45f);
p.setColor4f(convert_vec4<SkColor4f>(selection.hovered ? io.theme->fillColor1 : io.theme->backColor3));
p.setColor4f(convert_vec4<SkColor4f>(selection.hovered ? io.theme->fillColor1 : io.theme->fillColor2));
p.setStyle(SkPaint::kStroke_Style);
p.setStrokeWidth(0.15f);
canvas->drawRoundRect(checkBox, 0.25f, 0.25f, p);
@ -47,7 +47,7 @@ void CheckBox::clay_draw(SkCanvas* canvas, UpdateInputData& io, Clay_RenderComma
if(isTicked) {
SkPaint checkP;
checkP.setColor4f(io.theme->backColor2);
checkP.setColor4f(io.theme->backColor1);
checkP.setStyle(SkPaint::kFill_Style);
checkP.setStrokeWidth(0.12);
checkP.setStrokeCap(SkPaint::kRound_Cap);

14
src/GUIStuff/Elements/Element.cpp
View file

@ -22,15 +22,11 @@ namespace GUIStuff {
std::shared_ptr<Theme> get_default_dark_mode() {
std::shared_ptr<Theme> theme(std::make_shared<Theme>());
theme->fillColor1 = {0.25f, 0.5f, 0.85f, 1.0f};
theme->fillColor2 = {0.5f, 0.58f, 0.93f, 1.0f};
theme->fillColor3 = {1.0f, 0.0f, 0.0f, 1.0f};
theme->fillColor4 = {1.0f, 1.0f, 0.0f, 1.0f};
theme->fillColor5 = {0.76f, 0.76f, 1.0f, 1.0f};
theme->backColor1 = {0.0f, 0.0f, 0.0f, 0.9f};
theme->backColor2 = {0.15f, 0.15f, 0.15f, 1.0f};
theme->backColor3 = {0.22f, 0.22f, 0.22f, 1.0f};
theme->frontColor1 = {1.0f, 1.0f, 1.0f, 1.0f};
theme->fillColor1 = {0.65f, 0.64f, 1.0f, 1.0f};
theme->fillColor2 = {0.31f, 0.31f, 0.48f, 1.0f};
theme->backColor1 = {0.156f, 0.156f, 0.18f, 1.0f};
theme->backColor2 = {0.24f, 0.24f, 0.29f, 1.0f};
theme->frontColor1 = {0.9f, 0.9f, 0.9f, 1.0f};
theme->frontColor2 = {0.8f, 0.8f, 0.8f, 1.0f};
return theme;
}

31
src/GUIStuff/Elements/Element.hpp
View file

@ -48,24 +48,23 @@ typedef StringArena<4000000> DefaultStringArena;
SkFont get_setup_skfont();
struct Theme {
SkColor4f fillColor1 = {0.5f, 0.6f, 1.0f, 1.0f};
SkColor4f fillColor2 = {0.4f, 0.5f, 0.9f, 1.0f};
SkColor4f fillColor3 = {1.0f, 0.0f, 0.0f, 1.0f};
SkColor4f fillColor4 = {1.0f, 1.0f, 0.0f, 1.0f};
SkColor4f fillColor5 = {0.7f, 0.7f, 1.0f, 1.0f};
SkColor4f backColor1 = {1.0f, 1.0f, 1.0f, 0.9f};
SkColor4f backColor2 = {0.95f, 0.95f, 0.95f, 1.0f};
SkColor4f backColor3 = {0.9f, 0.9f, 0.9f, 1.0f};
SkColor4f frontColor1 = {0.0f, 0.0f, 0.0f, 1.0f};
SkColor4f frontColor2 = {0.1f, 0.1f, 0.1f, 1.0f};
SkColor4f fillColor1 = {0.8f, 0.785f, 1.0f, 1.0f};
SkColor4f fillColor2 = {0.3f, 0.3f, 0.477f, 1.0f};
SkColor4f backColor1 = {0.0f, 0.0f, 0.0f, 1.0f};
SkColor4f backColor2 = {1.0f, 1.0f, 1.0f, 1.0f};
SkColor4f frontColor1 = {1.0f, 1.0f, 1.0f, 1.0f};
SkColor4f frontColor2 = {0.9f, 0.9f, 0.9f, 1.0f};
SkColor4f errorColor = {1.0f, 0.0f, 0.0f, 1.0f};
SkColor4f warningColor = {1.0f, 1.0f, 0.0f, 1.0f};
float hoverExpandTime = 0.1f;
uint16_t childGap1 = 10;
uint16_t padding1 = 10;
float windowCorners1 = 10;
uint16_t windowBorders1 = 2;
uint16_t childGap1 = 8;
uint16_t padding1 = 8;
float windowCorners1 = 8;
uint16_t windowBorders1 = 0;
NLOHMANN_DEFINE_TYPE_INTRUSIVE_WITH_DEFAULT(Theme, fillColor1, fillColor2, fillColor3, fillColor4, fillColor5, backColor1, backColor2, backColor3, frontColor1, frontColor2, hoverExpandTime, childGap1, padding1, windowCorners1, windowBorders1)
NLOHMANN_DEFINE_TYPE_INTRUSIVE_WITH_DEFAULT(Theme, fillColor1, fillColor2, backColor1, backColor2, frontColor1, frontColor2, hoverExpandTime, childGap1, padding1, windowCorners1, windowBorders1)
};
std::shared_ptr<Theme> get_default_dark_mode();
@ -109,7 +108,7 @@ struct UpdateInputData {
SkFont get_font(float fSize) const;
uint16_t fontSize = 20;
uint16_t fontSize = 14;
sk_sp<SkTypeface> textTypeface;
sk_sp<skia::textlayout::FontCollection> fontCollection;

14
src/GUIStuff/Elements/MovableTabList.cpp
View file

@ -15,9 +15,9 @@ void MovableTabList::update(UpdateInputData& io, const std::vector<std::pair<std
}
CLAY({.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(45)},
.padding = CLAY_PADDING_ALL(2),
.childGap = 8,
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(35)},
.padding = CLAY_PADDING_ALL(0),
.childGap = 4,
.childAlignment = { .x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_CENTER },
.layoutDirection = CLAY_LEFT_TO_RIGHT
},
@ -31,11 +31,11 @@ void MovableTabList::update(UpdateInputData& io, const std::vector<std::pair<std
.sizing = {.width = CLAY_SIZING_FIT(250), .height = CLAY_SIZING_GROW(0)},
}
}) {
buttons[i].update(io, true, true, [&](SelectionHelper& s, bool iS) {
buttons[i].update(io, SelectableButton::DrawType::FILLED, [&](SelectionHelper& s, bool iS) {
CLAY({.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.padding = CLAY_PADDING_ALL(4),
.childGap = 4,
.padding = CLAY_PADDING_ALL(0),
.childGap = 0,
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER },
.layoutDirection = CLAY_LEFT_TO_RIGHT
}
@ -60,7 +60,7 @@ void MovableTabList::update(UpdateInputData& io, const std::vector<std::pair<std
.layoutDirection = CLAY_LEFT_TO_RIGHT
}
}) {
closeButtons[i].update(io, false, false, [&](SelectionHelper& s, bool iS) {
closeButtons[i].update(io, SelectableButton::DrawType::TRANSPARENT, [&](SelectionHelper& s, bool iS) {
if(s.clicked)
closedTab = i;
closeIcons[i].update(io, "data/icons/close.svg", s.held || s.hovered, nullptr);

2
src/GUIStuff/Elements/NumberSlider.hpp
View file

@ -12,7 +12,7 @@ template <typename T> class NumberSlider : public Element {
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(100), .height = CLAY_SIZING_FIXED(15)}
.sizing = {.width = CLAY_SIZING_GROW(100), .height = CLAY_SIZING_FIXED(10)}
},
.custom = { .customData = this }
}) {

4
src/GUIStuff/Elements/PaintCircleMenu.cpp
View file

@ -99,7 +99,7 @@ void PaintCircleMenu::draw_rotate_bar(SkCanvas* canvas, UpdateInputData& io) {
if(rotateBarSelect.held)
rotateBarHolderFill.setColor4f(io.theme->fillColor1);
else if(rotateBarSelect.hovered)
rotateBarHolderFill.setColor4f(io.theme->fillColor2);
rotateBarHolderFill.setColor4f(io.theme->fillColor1);
else
rotateBarHolderFill.setColor4f(io.theme->frontColor2);
float rotateBarHolderRadius = (CIRCLE_END - ROTATE_START) / 2.0f;
@ -155,7 +155,7 @@ void PaintCircleMenu::draw_palette_bar(SkCanvas* canvas, UpdateInputData& io) {
double angleEnd = (colorSelectionIndex + 1) * colorDistribution;
Vector2f lineDir1{std::cos(angleStart), std::sin(angleStart)};
Vector2f lineDir2{std::cos(angleEnd), std::sin(angleEnd)};
SkPaint lineP(io.theme->fillColor2);
SkPaint lineP(io.theme->fillColor1);
lineP.setStrokeWidth(5.0f);
lineP.setStroke(true);
lineP.setStrokeJoin(SkPaint::kRound_Join);

2
src/GUIStuff/Elements/RadioButton.cpp
View file

@ -45,7 +45,7 @@ void RadioButton::clay_draw(SkCanvas* canvas, UpdateInputData& io, Clay_RenderCo
}
else {
SkPaint p;
p.setColor4f(convert_vec4<SkColor4f>(selection.hovered ? io.theme->fillColor1 : io.theme->backColor3));
p.setColor4f(convert_vec4<SkColor4f>(selection.hovered ? io.theme->fillColor1 : io.theme->backColor2));
p.setStyle(SkPaint::kStroke_Style);
p.setStrokeWidth(0.15f);
canvas->drawCircle(0.0f, 0.0f, 0.5f, p);

2
src/GUIStuff/Elements/RotateWheel.cpp
View file

@ -84,7 +84,7 @@ void RotateWheel::draw_rotate_wheel(SkCanvas* canvas, UpdateInputData& io) {
if(selection.held)
rotateBarHolderFill.setColor4f(io.theme->fillColor1);
else if(selection.hovered)
rotateBarHolderFill.setColor4f(io.theme->fillColor2);
rotateBarHolderFill.setColor4f(io.theme->fillColor1);
else
rotateBarHolderFill.setColor4f(io.theme->frontColor2);
float rotateBarHolderRadius = (wheelEnd - wheelStart) / 2.0f;

67
src/GUIStuff/Elements/SelectableButton.cpp
View file

@ -3,50 +3,51 @@
namespace GUIStuff {
void SelectableButton::update(UpdateInputData& io, bool hasBorders, bool hasBorderPadding, const std::function<void(SelectionHelper&, bool)>& elemUpdate, bool isSelected) {
if(hasBorders) {
SkColor4f borderColor;
if(selection.held)
borderColor = io.theme->fillColor1;
else if(isSelected)
borderColor = io.theme->fillColor2;
else if(selection.hovered)
borderColor = io.theme->fillColor2;
else
borderColor = io.theme->backColor3;
void SelectableButton::update(UpdateInputData& io, DrawType drawType, const std::function<void(SelectionHelper&, bool)>& elemUpdate, bool isSelected) {
bool hasBorders = selection.held || ((isSelected || selection.hovered) && drawType == DrawType::TRANSPARENT_BORDER);
SkColor4f backgroundColor;
if(selection.held)
backgroundColor = io.theme->backColor3;
else if(isSelected)
backgroundColor = io.theme->backColor2;
else if(selection.hovered)
backgroundColor = io.theme->backColor2;
else
backgroundColor = io.theme->backColor1;
SkColor4f borderColor = hasBorders ? io.theme->fillColor1 : SkColor4f{0.0f, 0.0f, 0.0f, 0.0f};
SkColor4f backgroundColorHighlight;
SkColor4f backgroundColor;
if(isSelected)
backgroundColorHighlight = color_mul_alpha(io.theme->fillColor1, 0.4f);
else if(selection.hovered || selection.held)
backgroundColorHighlight = color_mul_alpha(io.theme->fillColor1, 0.2f);
else
backgroundColorHighlight = {0.0f, 0.0f, 0.0f, 0.0f};
if(drawType == DrawType::TRANSPARENT || drawType == DrawType::TRANSPARENT_BORDER)
backgroundColor = {0.0f, 0.0f, 0.0f, 0.0f};
else if(drawType == DrawType::FILLED)
backgroundColor = io.theme->backColor2;
else
backgroundColor = io.theme->fillColor2;
CLAY({.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.childGap = 0,
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER }
},
.backgroundColor = convert_vec4<Clay_Color>(backgroundColor),
.cornerRadius = CLAY_CORNER_RADIUS(4),
.border = {
.color = convert_vec4<Clay_Color>(borderColor),
.width = CLAY_BORDER_OUTSIDE(1)
}
}) {
CLAY({.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.padding = hasBorderPadding ? CLAY_PADDING_ALL(4) : CLAY_PADDING_ALL(0),
.childGap = 4,
.padding = (drawType == DrawType::TRANSPARENT_BORDER) ? CLAY_PADDING_ALL(0) : CLAY_PADDING_ALL(4),
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER },
.layoutDirection = CLAY_TOP_TO_BOTTOM
},
.backgroundColor = convert_vec4<Clay_Color>(backgroundColor),
.cornerRadius = CLAY_CORNER_RADIUS(4),
.border = {
.color = convert_vec4<Clay_Color>(borderColor),
.width = CLAY_BORDER_OUTSIDE(4)
}
.backgroundColor = convert_vec4<Clay_Color>(backgroundColorHighlight),
.cornerRadius = CLAY_CORNER_RADIUS(4)
}) {
selection.update(Clay_Hovered(), io.mouse.leftClick, io.mouse.leftHeld);
elemUpdate(selection, isSelected);
}
}
else {
selection.update(Clay_Hovered(), io.mouse.leftClick, io.mouse.leftHeld);
elemUpdate(selection, isSelected);
}
}
void SelectableButton::clay_draw(SkCanvas* canvas, UpdateInputData& io, Clay_RenderCommand* command) {

9
src/GUIStuff/Elements/SelectableButton.hpp
View file

@ -5,7 +5,14 @@ namespace GUIStuff {
class SelectableButton : public Element {
public:
void update(UpdateInputData& io, bool hasBorders, bool hasBorderPadding, const std::function<void(SelectionHelper&, bool)>& elemUpdate, bool isSelected);
enum class DrawType {
TRANSPARENT,
FILLED,
FILLED_INVERSE,
TRANSPARENT_BORDER
};
void update(UpdateInputData& io, DrawType drawType, const std::function<void(SelectionHelper&, bool)>& elemUpdate, bool isSelected);
virtual void clay_draw(SkCanvas* canvas, UpdateInputData& io, Clay_RenderCommand* command) override;
SelectionHelper selection;
};

2
src/GUIStuff/Elements/TextBox.hpp
View file

@ -52,7 +52,7 @@ template <typename T> class TextBox : public Element {
SkRect r = SkRect::MakeXYWH(bb.min.x(), bb.min.y(), bb.width(), bb.height());
canvas->drawRect(r, SkPaint(io.theme->backColor2));
SkPaint outline(selection.selected ? io.theme->fillColor1 : io.theme->backColor3);
SkPaint outline(selection.selected ? io.theme->fillColor1 : io.theme->backColor2);
outline.setStroke(true);
outline.setStrokeWidth(2.0f);
canvas->drawRoundRect(r, 2.0f, 2.0f, outline);