From 823120f3e52110f10654ac5e7a693fc4e56db337 Mon Sep 17 00:00:00 2001 From: A1029384756 Date: Mon, 7 Jul 2025 21:24:32 -0400 Subject: [PATCH] [bindings/odin] updated example site to use new default params --- .../clay-official-website.odin | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/bindings/odin/examples/clay-official-website/clay-official-website.odin b/bindings/odin/examples/clay-official-website/clay-official-website.odin index 5173d74..4414241 100644 --- a/bindings/odin/examples/clay-official-website/clay-official-website.odin +++ b/bindings/odin/examples/clay-official-website/clay-official-website.odin @@ -82,11 +82,11 @@ LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Colo LandingPageDesktop :: proc() { if clay.UI()({ id = clay.ID("LandingPage1Desktop"), - layout = { sizing = { width = clay.SizingGrow({ }), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } }, + layout = { sizing = { width = clay.SizingGrow(), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } }, }) { if clay.UI()({ id = clay.ID("LandingPage1"), - layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 }, + layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 }, border = { COLOR_RED, { left = 2, right = 2 } }, }) { if clay.UI()({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TopToBottom, childGap = 8 } }) { @@ -119,13 +119,13 @@ LandingPageMobile :: proc() { id = clay.ID("LandingPage1Mobile"), layout = { layoutDirection = .TopToBottom, - sizing = { width = clay.SizingGrow({ }), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, + sizing = { width = clay.SizingGrow(), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, childAlignment = { x = .Center, y = .Center }, padding = { 16, 16, 32, 32 }, childGap = 32, }, }) { - if clay.UI()({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingGrow({ }) }, layoutDirection = .TopToBottom, childGap = 8 } }) { + if clay.UI()({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingGrow() }, layoutDirection = .TopToBottom, childGap = 8 } }) { clay.Text( "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.", clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}), @@ -138,7 +138,7 @@ LandingPageMobile :: proc() { } if clay.UI()({ id = clay.ID("HeroImageOuter"), - layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow({ }) }, childAlignment = { x = .Center }, childGap = 16 }, + layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow() }, childAlignment = { x = .Center }, childGap = 16 }, }) { LandingPageBlob(1, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_5, "High performance", &checkImage5) LandingPageBlob(2, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4) @@ -175,7 +175,7 @@ FeatureBlocksDesktop :: proc() { if clay.UI()({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) { if clay.UI()({ id = clay.ID("FeatureBlocksInner"), - layout = { sizing = { width = clay.SizingGrow({ }) }, childAlignment = { y = .Center } }, + layout = { sizing = { width = clay.SizingGrow() }, childAlignment = { y = .Center } }, border = { width = { betweenChildren = 2}, color = COLOR_RED }, }) { FeatureBlocks(clay.SizingPercent(0.5), 50) @@ -186,7 +186,7 @@ FeatureBlocksDesktop :: proc() { FeatureBlocksMobile :: proc() { if clay.UI()({ id = clay.ID("FeatureBlocksInner"), - layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow({ }) } }, + layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow() } }, border = { width = { betweenChildren = 2}, color = COLOR_RED }, }) { FeatureBlocks(clay.SizingGrow({}), 16) @@ -223,11 +223,11 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi DeclarativeSyntaxPageDesktop :: proc() { if clay.UI()({ id = clay.ID("SyntaxPageDesktop"), - layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } }, + layout = { sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } }, }) { if clay.UI()({ id = clay.ID("SyntaxPage"), - layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 }, + layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 }, border = border2pxRed, }) { DeclarativeSyntaxPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5)) @@ -240,7 +240,7 @@ DeclarativeSyntaxPageMobile :: proc() { id = clay.ID("SyntaxPageMobile"), layout = { layoutDirection = .TopToBottom, - sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, + sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { x = .Center, y = .Center }, padding = { 16, 16, 32, 32 }, childGap = 16, @@ -276,19 +276,19 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon if clay.UI()({ id = clay.ID("PerformanceRightImageOuter"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) { if clay.UI()({ id = clay.ID("PerformanceRightBorder"), - layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(400) } }, + layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(400) } }, border = { COLOR_LIGHT, {2, 2, 2, 2, 2} }, }) { if clay.UI()({ id = clay.ID("AnimationDemoContainerLeft"), - layout = { sizing = { clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) }, + layout = { sizing = { clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) }, backgroundColor = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue), }) { clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT})) } if clay.UI()({ id = clay.ID("AnimationDemoContainerRight"), - layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) }, + layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) }, backgroundColor = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue), }) { clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT})) @@ -300,7 +300,7 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon HighPerformancePageDesktop :: proc(lerpValue: f32) { if clay.UI()({ id = clay.ID("PerformanceDesktop"), - layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { 82, 82, 32, 32 }, childGap = 64 }, + layout = { sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { 82, 82, 32, 32 }, childGap = 64 }, backgroundColor = COLOR_RED, }) { HighPerformancePage(lerpValue, {fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingPercent(0.5)) @@ -312,7 +312,7 @@ HighPerformancePageMobile :: proc(lerpValue: f32) { id = clay.ID("PerformanceMobile"), layout = { layoutDirection = .TopToBottom, - sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, + sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { x = .Center, y = .Center }, padding = { 16, 16, 32, 32 }, childGap = 32, @@ -376,11 +376,11 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay. RendererPageDesktop :: proc() { if clay.UI()({ id = clay.ID("RendererPageDesktop"), - layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } }, + layout = { sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } }, }) { if clay.UI()({ id = clay.ID("RendererPage"), - layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 }, + layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 }, border = { COLOR_RED, { left = 2, right = 2 } }, }) { RendererPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5)) @@ -393,7 +393,7 @@ RendererPageMobile :: proc() { id = clay.ID("RendererMobile"), layout = { layoutDirection = .TopToBottom, - sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, + sizing = { clay.SizingGrow(), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { x = .Center, y = .Center }, padding = { 16, 16, 32, 32 }, childGap = 32, @@ -418,15 +418,15 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) { clay.BeginLayout() if clay.UI()({ id = clay.ID("OuterContainer"), - layout = { layoutDirection = .TopToBottom, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } }, + layout = { layoutDirection = .TopToBottom, sizing = { clay.SizingGrow(), clay.SizingGrow() } }, backgroundColor = COLOR_LIGHT, }) { if clay.UI()({ id = clay.ID("Header"), - layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(50) }, childAlignment = { y = .Center }, childGap = 24, padding = { left = 32, right = 32 } }, + layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(50) }, childAlignment = { y = .Center }, childGap = 24, padding = { left = 32, right = 32 } }, }) { clay.Text("Clay", &headerTextConfig) - if clay.UI()({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {} + if clay.UI()({ layout = { sizing = { width = clay.SizingGrow() } } }) {} if (!mobileScreen) { if clay.UI()({ id = clay.ID("LinkExamplesOuter"), backgroundColor = {0, 0, 0, 0} }) { @@ -446,15 +446,15 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) { clay.Text("Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}})) } } - if clay.UI()({ id = clay.ID("TopBorder1"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_5 } ) {} - if clay.UI()({ id = clay.ID("TopBorder2"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_4 } ) {} - if clay.UI()({ id = clay.ID("TopBorder3"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_3 } ) {} - if clay.UI()({ id = clay.ID("TopBorder4"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_2 } ) {} - if clay.UI()({ id = clay.ID("TopBorder5"), layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_1 } ) {} + if clay.UI()({ id = clay.ID("TopBorder1"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_5 } ) {} + if clay.UI()({ id = clay.ID("TopBorder2"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_4 } ) {} + if clay.UI()({ id = clay.ID("TopBorder3"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_3 } ) {} + if clay.UI()({ id = clay.ID("TopBorder4"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_2 } ) {} + if clay.UI()({ id = clay.ID("TopBorder5"), layout = { sizing = { clay.SizingGrow(), clay.SizingFixed(4) } }, backgroundColor = COLOR_TOP_BORDER_1 } ) {} if clay.UI()({ id = clay.ID("ScrollContainerBackgroundRectangle"), clip = { vertical = true, childOffset = clay.GetScrollOffset() }, - layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TopToBottom }, + layout = { sizing = { clay.SizingGrow(), clay.SizingGrow() }, layoutDirection = clay.LayoutDirection.TopToBottom }, backgroundColor = COLOR_LIGHT, border = { COLOR_RED, { betweenChildren = 2} }, }) {