feat: separated panel and list container styles

This commit is contained in:
Sara 2025-09-19 14:12:26 +02:00
parent e5591a18d8
commit 9cf17fe2b9
2 changed files with 12 additions and 12 deletions

View file

@ -36,10 +36,6 @@ void AddDieButton(enum Dice_Die die) {
.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER }, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
}, },
.image = { GetDiceImage(die, Clay_Hovered()) }, .image = { GetDiceImage(die, Clay_Hovered()) },
.border = {
PanelBorder(0),
CLAY_BORDER_ALL(1),
}
}) { }) {
Clay_OnHover(&HandleAddDieButtonInteraction, die); Clay_OnHover(&HandleAddDieButtonInteraction, die);
CLAY_TEXT(Dice_ToString(die), CLAY_TEXT_CONFIG({ CLAY_TEXT(Dice_ToString(die), CLAY_TEXT_CONFIG({
@ -53,22 +49,22 @@ void AddDieButton(enum Dice_Die die) {
static inline static inline
void DiceSelectorContainer() { void DiceSelectorContainer() {
CLAY(CLAY_ID("DiceSelector"), { CLAY(CLAY_ID("DiceSelector"), {
.PANEL(0),
.layout = { .layout = {
.sizing = { CLAY_SIZING_FIT(), CLAY_SIZING_GROW() }, .sizing = { CLAY_SIZING_FIT(), CLAY_SIZING_GROW() },
.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
}, },
.PANEL(0),
}) { }) {
CLAY(CLAY_ID("DiceSelectorInner"), { CLAY_AUTO_ID({
.layout = { .layout = {
.layoutDirection = CLAY_TOP_TO_BOTTOM, .layoutDirection = CLAY_TOP_TO_BOTTOM,
.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER }, .sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
.sizing = { CLAY_SIZING_FIT(), CLAY_SIZING_FIT() },
.padding = { 2, 2, 5, 5 }, .padding = { 2, 2, 5, 5 },
.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_TOP },
}, },
.clip = { .clip = {
true, true, Clay_GetScrollOffset(), false, true, Clay_GetScrollOffset(),
}, },
.LISTCONTAINER(0),
}) { }) {
AddDieButton(D4); AddDieButton(D4);
AddDieButton(D6); AddDieButton(D6);
@ -118,9 +114,9 @@ static inline
void ActiveDiceContainer() { void ActiveDiceContainer() {
CLAY(CLAY_ID("ActiveDice"), { CLAY(CLAY_ID("ActiveDice"), {
.layout = { .layout = {
.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
.layoutDirection = CLAY_TOP_TO_BOTTOM, .layoutDirection = CLAY_TOP_TO_BOTTOM,
.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER }, .childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
}, },
.PANEL(0), .PANEL(0),
}) { }) {

View file

@ -36,9 +36,13 @@ constexpr Clay_Padding panelPadding = {
24, 24, 24, 24,
}; };
#define LISTCONTAINER(depth_)\
border = { PanelBorder(depth_), CLAY_BORDER_ALL(2) },\
.cornerRadius = defaultRadiusAll
#define PANEL(depth_)\ #define PANEL(depth_)\
backgroundColor = PanelBackground(depth_),\ backgroundColor = PanelBackground(depth_),\
.border = { PanelBackground(depth_), CLAY_BORDER_ALL(2) },\ .border = { PanelBorder(depth_), CLAY_BORDER_OUTSIDE(2) },\
.cornerRadius = defaultRadiusAll .cornerRadius = defaultRadiusAll
//////////////////////////////////// ////////////////////////////////////