changing layout api yet again
This commit is contained in:
johan0A
parent
a0fc7c7157
commit
3e4ce58fbc
4 changed files with 145 additions and 153 deletions
|
|
@ -56,22 +56,22 @@ var window_width: isize = 0;
|
|||
var mobile_screen: bool = false;
|
||||
|
||||
fn landingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, image_size: f32, max_width: f32, text: []const u8, image: *rl.Texture2D) void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.IDI("HeroBlob", index),
|
||||
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .CENTER } }),
|
||||
.border(.outside(color, 2, 10)),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.IDI("CheckImage", index),
|
||||
.layout(.{ .sizing = .{ .w = .fixed(image_size) } }),
|
||||
.image(.{ .image_data = image, .source_dimensions = .{ .w = 128, .h = 128 } }),
|
||||
})({});
|
||||
cl.text(text, .text(.{ .font_size = font_size, .font_id = font_id, .color = color }));
|
||||
cl.text(text, .{ .font_size = font_size, .font_id = font_id, .color = color });
|
||||
});
|
||||
}
|
||||
|
||||
fn landingPageDesktop() void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("LandingPage1Desktop"),
|
||||
.layout(.{
|
||||
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
|
||||
|
|
@ -80,7 +80,7 @@ fn landingPageDesktop() void {
|
|||
.child_gap = 16,
|
||||
}),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("LandingPage1"),
|
||||
.layout(.{
|
||||
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
|
||||
|
|
@ -93,7 +93,7 @@ fn landingPageDesktop() void {
|
|||
})({
|
||||
landingPageBlob(0, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6);
|
||||
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("ClayPresentation"),
|
||||
.layout(.{
|
||||
.sizing = .grow,
|
||||
|
|
@ -101,22 +101,22 @@ fn landingPageDesktop() void {
|
|||
.child_gap = 16,
|
||||
}),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("LeftText"),
|
||||
.layout(.{ .sizing = .{ .w = .percent(0.55) }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }),
|
||||
})({
|
||||
cl.text(
|
||||
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
|
||||
.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
|
||||
.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED },
|
||||
);
|
||||
cl.UI(&.{ .ID("ClayPresentation_Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) })({});
|
||||
cl.UI()(&.{.layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } })})({});
|
||||
cl.text(
|
||||
"Clay is laying out this webpage right now!",
|
||||
.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
|
||||
.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE },
|
||||
);
|
||||
});
|
||||
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("HeroImageOuter"),
|
||||
.layout(.{ .sizing = .{ .w = .percent(0.45) }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }),
|
||||
})({
|
||||
|
|
@ -132,7 +132,7 @@ fn landingPageDesktop() void {
|
|||
}
|
||||
|
||||
fn landingPageMobile() void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("LandingPage1Mobile"),
|
||||
.layout(.{
|
||||
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
|
||||
|
|
@ -143,22 +143,22 @@ fn landingPageMobile() void {
|
|||
}),
|
||||
})({
|
||||
landingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6);
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("LeftText"),
|
||||
.layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }),
|
||||
})({
|
||||
cl.text(
|
||||
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
|
||||
.text(.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED }),
|
||||
.{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED },
|
||||
);
|
||||
cl.UI(&.{ .ID("LeftText_Spacer"), .layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } }) })({});
|
||||
cl.UI()(&.{.layout(.{ .sizing = .{ .w = .grow, .h = .fixed(32) } })})({});
|
||||
cl.text(
|
||||
"Clay is laying out this webpage .right now!",
|
||||
.text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }),
|
||||
.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE },
|
||||
);
|
||||
});
|
||||
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("HeroImageOuter"),
|
||||
.layout(.{ .sizing = .{ .w = .grow }, .direction = .TOP_TO_BOTTOM, .child_alignment = .{ .x = .CENTER }, .child_gap = 16 }),
|
||||
})({
|
||||
|
|
@ -172,8 +172,8 @@ fn landingPageMobile() void {
|
|||
}
|
||||
|
||||
fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
|
||||
const text_config = cl.Config.text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_RED });
|
||||
cl.UI(&.{
|
||||
const text_config = cl.TextElementConfig{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_RED };
|
||||
cl.UI()(&.{
|
||||
.ID("HFileBoxOuter"),
|
||||
.layout(.{
|
||||
.direction = .TOP_TO_BOTTOM,
|
||||
|
|
@ -183,17 +183,17 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
|
|||
.child_gap = 8,
|
||||
}),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("HFileIncludeOuter"),
|
||||
.layout(.{ .padding = .{ .x = 8, .y = 4 } }),
|
||||
.rectangle(.{ .color = COLOR_RED, .corner_radius = .all(8) }),
|
||||
})({
|
||||
cl.text("#include cl.h", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_LIGHT }));
|
||||
cl.text("#include cl.h", .{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_LIGHT });
|
||||
});
|
||||
cl.text("~2000 lines of C99.", text_config);
|
||||
cl.text("Zero dependencies, including no C standard library", text_config);
|
||||
});
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("BringYourOwnRendererOuter"),
|
||||
.layout(.{
|
||||
.direction = .TOP_TO_BOTTOM,
|
||||
|
|
@ -203,14 +203,14 @@ fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
|
|||
.child_gap = 8,
|
||||
}),
|
||||
})({
|
||||
cl.text("Renderer agnostic.", .text(.{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_ORANGE }));
|
||||
cl.text("Renderer agnostic.", .{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_ORANGE });
|
||||
cl.text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", text_config);
|
||||
cl.text("Flexible output for easy compositing in your custom engine or environment.", text_config);
|
||||
});
|
||||
}
|
||||
|
||||
fn featureBlocksDesktop() void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("FeatureBlocksOuter"),
|
||||
.layout(.{
|
||||
.sizing = .{ .w = .grow },
|
||||
|
|
@ -223,7 +223,7 @@ fn featureBlocksDesktop() void {
|
|||
}
|
||||
|
||||
fn featureBlocksMobile() void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("FeatureBlocksOuter"),
|
||||
.layout(.{
|
||||
.sizing = .{ .w = .grow },
|
||||
|
|
@ -236,19 +236,18 @@ fn featureBlocksMobile() void {
|
|||
}
|
||||
|
||||
fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
|
||||
cl.UI(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
|
||||
cl.text("Declarative Syntax", .text(title_text_config));
|
||||
cl.UI(&.{
|
||||
.ID("SyntaxSpacer"),
|
||||
cl.UI()(&.{ .ID("SyntaxPageLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
|
||||
cl.text("Declarative Syntax", title_text_config);
|
||||
cl.UI()(&.{
|
||||
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }),
|
||||
})({});
|
||||
const text_conf = cl.Config.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED });
|
||||
const text_conf = cl.TextElementConfig{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED };
|
||||
cl.text("Flexible and readable declarative syntax with nested UI element hierarchies.", text_conf);
|
||||
cl.text("Mix elements with standard C code like loops, conditionals and functions.", text_conf);
|
||||
cl.text("Create your own library of re-usable components from UI primitives like text, images and rectangles.", text_conf);
|
||||
});
|
||||
cl.UI(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{ .ID("SyntaxPageRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
|
||||
cl.UI()(&.{
|
||||
.ID("SyntaxPageRightImage"),
|
||||
.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 568 }) } }),
|
||||
.image(.{ .image_data = &syntaxImage, .source_dimensions = .{ .h = 1136, .w = 1194 } }),
|
||||
|
|
@ -257,11 +256,11 @@ fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing:
|
|||
}
|
||||
|
||||
fn declarativeSyntaxPageDesktop() void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("SyntaxPageDesktop"),
|
||||
.layout(.{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .child_alignment = .{ .y = .CENTER }, .padding = .{ .x = 50 } }),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("SyntaxPage"),
|
||||
.layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }),
|
||||
.border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }),
|
||||
|
|
@ -272,7 +271,7 @@ fn declarativeSyntaxPageDesktop() void {
|
|||
}
|
||||
|
||||
fn declarativeSyntaxPageMobile() void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("SyntaxPageMobile"),
|
||||
.layout(.{
|
||||
.direction = .TOP_TO_BOTTOM,
|
||||
|
|
@ -293,48 +292,48 @@ fn colorLerp(a: cl.Color, b: cl.Color, amount: f32) cl.Color {
|
|||
const LOREM_IPSUM_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
|
||||
|
||||
fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
|
||||
cl.UI(&.{ .ID("PerformanceLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
|
||||
cl.text("High Performance", .text(title_text_tonfig));
|
||||
cl.UI(&.{ .ID("PerformanceSyntaxSpacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) })({});
|
||||
cl.UI()(&.{ .ID("PerformanceLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
|
||||
cl.text("High Performance", title_text_tonfig);
|
||||
cl.UI()(&.{.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } })})({});
|
||||
cl.text(
|
||||
"Fast enough to recompute your entire UI every frame.",
|
||||
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }),
|
||||
.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT },
|
||||
);
|
||||
cl.text(
|
||||
"Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free.",
|
||||
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }),
|
||||
.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT },
|
||||
);
|
||||
cl.text(
|
||||
"Simplify animations and reactive UI design by avoiding the standard performance hacks.",
|
||||
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT }),
|
||||
.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT },
|
||||
);
|
||||
});
|
||||
cl.UI(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{ .ID("PerformanceRightImageOuter"), .layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER } }) })({
|
||||
cl.UI()(&.{
|
||||
.ID("PerformanceRightBorder"),
|
||||
.layout(.{ .sizing = .{ .w = .grow, .h = .fixed(400) } }),
|
||||
.border(.all(COLOR_LIGHT, 2, 0)),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("AnimationDemoContainerLeft"),
|
||||
.layout(.{ .sizing = .{ .w = .percent(0.35 + 0.3 * lerp_value), .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }),
|
||||
.rectangle(.{ .color = colorLerp(COLOR_RED, COLOR_ORANGE, lerp_value) }),
|
||||
})({
|
||||
cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT }));
|
||||
cl.text(LOREM_IPSUM_TEXT, .{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT });
|
||||
});
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("AnimationDemoContainerRight"),
|
||||
.layout(.{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .CENTER }, .padding = .all(16) }),
|
||||
.rectangle(.{ .color = colorLerp(COLOR_ORANGE, COLOR_RED, lerp_value) }),
|
||||
})({
|
||||
cl.text(LOREM_IPSUM_TEXT, .text(.{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT }));
|
||||
cl.text(LOREM_IPSUM_TEXT, .{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT });
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
fn highPerformancePageDesktop(lerp_value: f32) void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("PerformanceDesktop"),
|
||||
.layout(.{
|
||||
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
|
||||
|
|
@ -349,7 +348,7 @@ fn highPerformancePageDesktop(lerp_value: f32) void {
|
|||
}
|
||||
|
||||
fn highPerformancePageMobile(lerp_value: f32) void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("PerformanceMobile"),
|
||||
.layout(
|
||||
.{
|
||||
|
|
@ -367,55 +366,55 @@ fn highPerformancePageMobile(lerp_value: f32) void {
|
|||
}
|
||||
|
||||
fn rendererButtonActive(text: []const u8) void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }),
|
||||
.rectangle(.{ .color = COLOR_RED, .corner_radius = .all(10) }),
|
||||
})({
|
||||
cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_LIGHT }));
|
||||
cl.text(text, .{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_LIGHT });
|
||||
});
|
||||
}
|
||||
|
||||
fn rendererButtonInactive(index: u32, text: []const u8) void {
|
||||
cl.UI(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{ .layout(.{}), .outside(.{ 2, COLOR_RED }, 10) })({
|
||||
cl.UI()(&.{
|
||||
.ID("RendererButtonInactiveInner", index),
|
||||
.layout(.{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) }),
|
||||
.rectangle(.{ .color = COLOR_LIGHT, .corner_radius = .all(10) }),
|
||||
})({
|
||||
cl.text(text, .text(.{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED }));
|
||||
cl.text(text, .{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
fn rendererPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
|
||||
cl.UI(&.{ .ID("RendererLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
|
||||
cl.text("Renderer & Platform Agnostic", .text(title_text_config));
|
||||
cl.UI(&.{ .ID("RendererLeftText_Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } }) })({});
|
||||
cl.UI()(&.{ .ID("RendererLeftText"), .layout(.{ .sizing = .{ .w = width_sizing }, .direction = .TOP_TO_BOTTOM, .child_gap = 8 }) })({
|
||||
cl.text("Renderer & Platform Agnostic", title_text_config);
|
||||
cl.UI()(&.{.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } })})({});
|
||||
cl.text(
|
||||
"Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.",
|
||||
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
|
||||
.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED },
|
||||
);
|
||||
cl.text(
|
||||
"Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more.",
|
||||
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
|
||||
.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED },
|
||||
);
|
||||
cl.text(
|
||||
"There's even an HTML renderer - you're looking at it right now!",
|
||||
.text(.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED }),
|
||||
.{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED },
|
||||
);
|
||||
});
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("RendererRightText"),
|
||||
.layout(.{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .CENTER }, .direction = .TOP_TO_BOTTOM, .child_gap = 16 }),
|
||||
})({
|
||||
cl.text("Try changing renderer!", .text(.{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE }));
|
||||
cl.UI(&.{ .ID("Spacer"), .layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } }) })({});
|
||||
cl.text("Try changing renderer!", .{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE });
|
||||
cl.UI()(&.{.layout(.{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } })})({});
|
||||
rendererButtonActive("Raylib Renderer");
|
||||
});
|
||||
}
|
||||
|
||||
fn rendererPageDesktop() void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("RendererPageDesktop"),
|
||||
.layout(.{
|
||||
.sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
|
||||
|
|
@ -423,7 +422,7 @@ fn rendererPageDesktop() void {
|
|||
.padding = .{ .x = 50 },
|
||||
}),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("RendererPage"),
|
||||
.layout(.{ .sizing = .grow, .child_alignment = .{ .y = .CENTER }, .padding = .all(32), .child_gap = 32 }),
|
||||
.border(.{ .left = .{ .width = 2, .color = COLOR_RED }, .right = .{ .width = 2, .color = COLOR_RED } }),
|
||||
|
|
@ -434,7 +433,7 @@ fn rendererPageDesktop() void {
|
|||
}
|
||||
|
||||
fn rendererPageMobile() void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("RendererMobile"),
|
||||
.layout(
|
||||
.{
|
||||
|
|
@ -453,13 +452,12 @@ fn rendererPageMobile() void {
|
|||
|
||||
fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
|
||||
cl.beginLayout();
|
||||
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("OuterContainer"),
|
||||
.layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }),
|
||||
.rectangle(.{ .color = COLOR_LIGHT }),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("Header"),
|
||||
.layout(.{
|
||||
.sizing = .{ .h = .fixed(50), .w = .grow },
|
||||
|
|
@ -468,46 +466,45 @@ fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
|
|||
.child_gap = 24,
|
||||
}),
|
||||
})({
|
||||
cl.text("Clay", .text(.{
|
||||
cl.text("Clay", .{
|
||||
.font_id = FONT_ID_BODY_24,
|
||||
.font_size = 24,
|
||||
.color = .{ 61, 26, 5, 255 },
|
||||
}));
|
||||
cl.UI(&.{ .ID("HeaderSpacer"), .layout(.{ .sizing = .{ .w = .grow } }) })({});
|
||||
});
|
||||
cl.UI()(&.{.layout(.{ .sizing = .{ .w = .grow } })})({});
|
||||
|
||||
if (!mobile_screen) {
|
||||
cl.UI(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({
|
||||
cl.text("Examples", .text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
|
||||
cl.UI()(&.{ .ID("LinkExamplesInner"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({
|
||||
cl.text("Examples", .{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } });
|
||||
});
|
||||
cl.UI(&.{ .ID("LinkDocsOuter"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({
|
||||
cl.text("Docs", .text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }));
|
||||
cl.UI()(&.{ .ID("LinkDocsOuter"), .layout(.{}), .rectangle(.{ .color = .{ 0, 0, 0, 0 } }) })({
|
||||
cl.text("Docs", .{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } });
|
||||
});
|
||||
}
|
||||
|
||||
cl.UI(&.{
|
||||
.ID("LinkGithubOuter"),
|
||||
cl.UI()(&.{
|
||||
.layout(.{ .padding = .{ .x = 32, .y = 6 } }),
|
||||
.border(.outside(COLOR_RED, 2, 10)),
|
||||
.rectangle(.{
|
||||
.corner_radius = .all(10),
|
||||
.color = if (cl.pointerOver(cl.getElementId("LinkGithubOuter"))) COLOR_LIGHT_HOVER else COLOR_LIGHT,
|
||||
.color = if (cl.hovered()) COLOR_LIGHT_HOVER else COLOR_LIGHT,
|
||||
}),
|
||||
})({
|
||||
cl.text(
|
||||
"Github",
|
||||
.text(.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } }),
|
||||
.{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } },
|
||||
);
|
||||
});
|
||||
});
|
||||
inline for (COLORS_TOP_BORDER, 0..) |color, i| {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("TopBorder" ++ .{i}),
|
||||
.layout(.{ .sizing = .{ .h = .fixed(4), .w = .grow } }),
|
||||
.rectangle(.{ .color = color }),
|
||||
})({});
|
||||
}
|
||||
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("ScrollContainerBackgroundRectangle"),
|
||||
.scroll(.{ .vertical = true }),
|
||||
.layout(.{ .sizing = .grow, .direction = .TOP_TO_BOTTOM }),
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const sidebar_item_layout: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .f
|
|||
|
||||
// Re-useable components are just normal functions
|
||||
fn sidebarItemComponent(index: usize) void {
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.IDI("SidebarBlob", @intCast(index)),
|
||||
.layout(sidebar_item_layout),
|
||||
.rectangle(.{ .color = orange }),
|
||||
|
|
@ -22,12 +22,12 @@ fn sidebarItemComponent(index: usize) void {
|
|||
// An example function to begin the "root" of your layout tree
|
||||
fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderCommand) {
|
||||
cl.beginLayout();
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("OuterContainer"),
|
||||
.layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .child_gap = 16 }),
|
||||
.rectangle(.{ .color = white }),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("SideBar"),
|
||||
.layout(.{
|
||||
.direction = .TOP_TO_BOTTOM,
|
||||
|
|
@ -38,23 +38,23 @@ fn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderComm
|
|||
}),
|
||||
.rectangle(.{ .color = light_grey }),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("ProfilePictureOuter"),
|
||||
.layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }),
|
||||
.rectangle(.{ .color = red }),
|
||||
})({
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("ProfilePicture"),
|
||||
.layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }),
|
||||
.image(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) }),
|
||||
})({});
|
||||
cl.text("Clay - UI Library", .text(.{ .font_size = 24, .color = light_grey }));
|
||||
cl.text("Clay - UI Library", .{ .font_size = 24, .color = light_grey });
|
||||
});
|
||||
|
||||
for (0..5) |i| sidebarItemComponent(i);
|
||||
});
|
||||
|
||||
cl.UI(&.{
|
||||
cl.UI()(&.{
|
||||
.ID("MainContent"),
|
||||
.layout(.{ .sizing = .grow }),
|
||||
.rectangle(.{ .color = light_grey }),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue