feat: tune NG Label and Button (#48)

noviga · Aug 2, 2023 · 9801e30 · 9801e30
1 parent 3604ae9
commit 9801e30
Show file tree

Hide file tree

Showing 14 changed files with 168 additions and 111 deletions.
diff --git a/examples/ng_blur.rs b/examples/ng_blur.rs
@@ -8,7 +8,9 @@ pub fn Blur(cx: Scope) -> impl IntoView {
 
     view! { cx,
         <Slide blur=blur.into() background_color=Color::MistyRose>
-            <Button text=|_| "Blur ON/OFF" on_click=on_click/>
+            <Button on_click=on_click>
+                "Blur " {move || if blur.get() { "ON" } else { "OFF" }}
+            </Button>
         </Slide>
     }
 }

diff --git a/examples/ng_buttons.rs b/examples/ng_buttons.rs
@@ -12,18 +12,18 @@ pub fn Buttons(cx: Scope) -> impl IntoView {
     view! { cx,
         <Slide>
             <Grid cols=3 rows=3>
-                <Button text=|_| "Alice" on_click=on_click/>
-                <Button text=|_| "Bob" width=300 height=300 radius=150 on_click=on_click/>
-                <Button text=|_| "Charlie" font_size=72 text_color=Color::DarkCyan on_click=on_click/>
-                <Button text=move |_| view! { cx,
+                <Button on_click=on_click>"Alice"</Button>
+                <Button width=300 height=300 radius=150 on_click=on_click>"Bob"</Button>
+                <Button font_size=72 text_color=Color::DarkCyan on_click=on_click>"Charlie"</Button>
+                <Button on_click=on_click>
                     <tspan font-size="96" fill="red" alignment-baseline="central">"Da"</tspan>
                     <tspan font-size="80" alignment-baseline="central">"ve"</tspan>
-                } on_click=on_click/>
-                <Label text=move |_| counter.get()/>
-                <Button text=|_| "Eve" text_bold=true align=Align::Right on_click=on_click/>
-                <Button text=|_| "Ferdie" align=Align::Right valign=VAlign::Bottom on_click=on_click/>
-                <Button text=|_| "George" color=Color::Honeydew border_color=Color::ForestGreen on_click=on_click/>
-                <Button text=|_| "Harry" align=Align::Fill valign=VAlign::Fill on_click=on_click/>
+                </Button>
+                <Label>{counter}</Label>
+                <Button text_bold=true align=Align::Right on_click=on_click>"Eve"</Button>
+                <Button align=Align::Right valign=VAlign::Bottom on_click=on_click>"Ferdie"</Button>
+                <Button color=Color::Honeydew border_color=Color::ForestGreen on_click=on_click>"George"</Button>
+                <Button align=Align::Fill valign=VAlign::Fill on_click=on_click>"Harry"</Button>
             </Grid>
         </Slide>
     }

diff --git a/examples/ng_grid.rs b/examples/ng_grid.rs
@@ -6,45 +6,41 @@ pub fn GridExample(cx: Scope) -> impl IntoView {
     view! { cx,
         <Slide>
             <Grid cols=3 rows=3 border_width=4 padding=20>
-                <Label text=move |_| {
-                    view! { cx,
-                        <>
-                            <tspan>"00"</tspan>
-                            <tspan font-size=96>"1"</tspan>
-                        </>
-                    }
-                }/>
-                <Label text=|_| "2"/>
-                <Label text=move |_| {
-                    view! { cx,
-                        <tspan>"00"</tspan>
-                        <tspan fill="red">"3"</tspan>
-                    }
-                }/>
-                <Label text=|_| "4" font_size=96 color=Color::Blue/>
+                <Label>
+                    <tspan>"00"</tspan>
+                    <tspan font-size=96>"1"</tspan>
+                </Label>
+                <Label>2</Label>
+                <Label>
+                    <tspan>"00"</tspan>
+                    <tspan fill="red">"3"</tspan>
+                </Label>
+                <Label font_size=96 color=Color::Blue>"4"</Label>
                 <Button
-                    text=|_| "5"
                     align=Align::Fill
                     valign=VAlign::Fill
                     on_click=move |_| log!("5: Clicked")
-                />
-                <Label text=|_| "6" align=Align::Right/>
-                <Label text=|_| "7" align=Align::Left/>
-                <Label text=|_| "8"/>
+                >
+                    "5"
+                </Button>
+                <Label align=Align::Right>"6"</Label>
+                <Label align=Align::Left>"7"</Label>
+                <Label>8</Label>
                 <Grid cols=4 rows=2 border_width=4 spacing=20>
-                    <Label text=|_| "9" valign=VAlign::Top/>
-                    <Label text=|_| "10" valign=VAlign::Bottom/>
-                    <Label text=|_| "11"/>
+                    <Label valign=VAlign::Top>"9"</Label>
+                    <Label valign=VAlign::Bottom>"10"</Label>
+                    <Label>11</Label>
                     <Button
-                        text=|_| "12"
                         align=Align::Fill
                         valign=VAlign::Fill
                         on_click=move |_| log!("12: Clicked")
-                    />
-                    <Label text=|_| "13"/>
-                    <Label text=|_| "14" align=Align::Left valign=VAlign::Top/>
-                    <Label text=|_| "15"/>
-                    <Label text=|_| "16" align=Align::Right valign=VAlign::Bottom/>
+                    >
+                        "12"
+                    </Button>
+                    <Label>"13"</Label>
+                    <Label align=Align::Left valign=VAlign::Top>"14"</Label>
+                    <Label>"15"</Label>
+                    <Label align=Align::Right valign=VAlign::Bottom>"16"</Label>
                 </Grid>
             </Grid>
         </Slide>

diff --git a/examples/ng_hello_world.rs b/examples/ng_hello_world.rs
@@ -6,10 +6,10 @@ pub fn HelloWorld(cx: Scope) -> impl IntoView {
     view! { cx,
         <SlideShow>
             <Slide background_color=Color::MistyRose>
-                <Label text=|_| "Hello →"/>
+                <Label>"Hello →"</Label>
             </Slide>
             <Slide background_color=Color::PaleGreen>
-                <Label text=|_| "← World!"/>
+                <Label>"← World!"</Label>
             </Slide>
         </SlideShow>
     }

diff --git a/examples/ng_pointer.rs b/examples/ng_pointer.rs
@@ -8,7 +8,9 @@ pub fn Pointer(cx: Scope) -> impl IntoView {
 
     view! { cx,
         <Slide pointer=pointer.into()>
-            <Button text=|_| "Pointer ON/OFF" on_click=on_click/>
+            <Button on_click=on_click>
+                "Pointer " {move || if pointer.get() { "ON" } else { "OFF" }}
+            </Button>
         </Slide>
     }
 }

diff --git a/examples/ng_rows_cols.rs b/examples/ng_rows_cols.rs
@@ -6,16 +6,16 @@ pub fn RowsCols(cx: Scope) -> impl IntoView {
     view! { cx,
         <Slide>
             <Row border_width=4 stretch=vec![1, 1, 4, 1, 1] padding=20>
-                <Label text=|_| "1"/>
-                <Button text=|_| "2" align=Align::Fill valign=VAlign::Fill on_click=|_| ()/>
-                <Label text=|_| "3" bold=true/>
+                <Label>"1"</Label>
+                <Button align=Align::Fill valign=VAlign::Fill on_click=|_| ()>"2"</Button>
+                <Label bold=true>"3"</Label>
                 <Column border_width=4 stretch=vec![1, 2, 3, 4] spacing=20>
-                    <Label text=|_| "4"/>
-                    <Label text=|_| "5"/>
-                    <Button text=|_| "6" align=Align::Fill valign=VAlign::Fill on_click=|_| ()/>
-                    <Label text=|_| "7"/>
+                    <Label>"4"</Label>
+                    <Label>"5"</Label>
+                    <Button align=Align::Fill valign=VAlign::Fill on_click=|_| ()>"6"</Button>
+                    <Label>"7"</Label>
                 </Column>
-                <Label text=|_| "8"/>
+                <Label>"8"</Label>
             </Row>
         </Slide>
     }

diff --git a/src/ng/button.rs b/src/ng/button.rs
@@ -7,9 +7,8 @@ const WIDTH: i32 = 400;
 const HEIGHT: i32 = 150;
 
 #[component]
-pub fn Button<F, IV, CB>(
+pub fn Button<CB>(
     cx: Scope,
-    text: F,
     on_click: CB,
     #[prop(optional)] text_bold: bool,
     #[prop(default = WIDTH)] width: i32,
@@ -23,10 +22,9 @@ pub fn Button<F, IV, CB>(
     #[prop(default = Color::RoyalBlue)] border_color: Color,
     #[prop(default = Align::Center)] align: Align,
     #[prop(default = VAlign::Middle)] valign: VAlign,
+    children: Children,
 ) -> impl IntoView
 where
-    F: Fn(Scope) -> IV + 'static,
-    IV: IntoView,
     CB: FnMut(MouseEvent) + 'static,
 {
     let f = use_frame(cx);
@@ -67,22 +65,24 @@ where
     let on_mouseup = move |_| set_border.set(border_width);
 
     view! { cx,
-            <rect
-                on:click=on_click
-                on:mousedown=on_mousedown
-                on:mouseup=on_mouseup
-                on:mouseleave=on_mouseup
-                x=x
-                y=y
-                width=width
-                height=height
-                rx=radius
-                ry=radius
-                fill=color
-                stroke=border_color
-                stroke-width=move || border.get()
-                style="cursor: pointer;"
-            />
-            <Label text=text bold=text_bold color=text_color font=font font_size=font_size/>
+        <rect
+            on:click=on_click
+            on:mousedown=on_mousedown
+            on:mouseup=on_mouseup
+            on:mouseleave=on_mouseup
+            x=x
+            y=y
+            width=width
+            height=height
+            rx=radius
+            ry=radius
+            fill=color
+            stroke=border_color
+            stroke-width=move || border.get()
+            style="cursor: pointer;"
+        ></rect>
+        <Label bold=text_bold color=text_color font=font font_size=font_size>
+            {children(cx)}
+        </Label>
     }
 }
diff --git a/src/ng/column.rs b/src/ng/column.rs
@@ -67,11 +67,30 @@ pub fn Column(
         }
     }
 
-    children(cx).nodes.into_iter().take(rows).enumerate().map(|(i, child)| {
-        let Frame {x, y, width, height } = cells[i];
-        view! { cx,
-            <rect x=x y=y width=width height=height fill="none" stroke=border_color stroke-width=border_width/>
-            {child}
-        }
-    }).collect_view(cx)
+    children(cx)
+        .nodes
+        .into_iter()
+        .take(rows)
+        .enumerate()
+        .map(|(i, child)| {
+            let Frame {
+                x,
+                y,
+                width,
+                height,
+            } = cells[i];
+            view! { cx,
+                <rect
+                    x=x
+                    y=y
+                    width=width
+                    height=height
+                    fill="none"
+                    stroke=border_color
+                    stroke-width=border_width
+                ></rect>
+                {child}
+            }
+        })
+        .collect_view(cx)
 }
diff --git a/src/ng/grid.rs b/src/ng/grid.rs
@@ -41,12 +41,26 @@ pub fn Grid(
         }
     }
 
-    children(cx).nodes.into_iter().take(max).enumerate().map(|(i, child)| {
-        let x = f.x + border_width / 2 + (width + spacing)  * (i as i32 % cols);
-        let y = f.y + border_width / 2 + (height + spacing) * (i as i32 / cols);
-        view! { cx,
-            <rect x=x y=y width=width height=height fill="none" stroke=border_color stroke-width=border_width/>
-            {child}
-        }
-    }).collect_view(cx)
+    children(cx)
+        .nodes
+        .into_iter()
+        .take(max)
+        .enumerate()
+        .map(|(i, child)| {
+            let x = f.x + border_width / 2 + (width + spacing) * (i as i32 % cols);
+            let y = f.y + border_width / 2 + (height + spacing) * (i as i32 / cols);
+            view! { cx,
+                <rect
+                    x=x
+                    y=y
+                    width=width
+                    height=height
+                    fill="none"
+                    stroke=border_color
+                    stroke-width=border_width
+                ></rect>
+                {child}
+            }
+        })
+        .collect_view(cx)
 }
diff --git a/src/ng/label.rs b/src/ng/label.rs
@@ -3,20 +3,16 @@ use leptos::*;
 use crate::ng::{use_frame, Align, Color, VAlign};
 
 #[component]
-pub fn Label<F, IV>(
+pub fn Label(
     cx: Scope,
-    text: F,
     #[prop(optional)] bold: bool,
     #[prop(optional)] font: String,
     #[prop(default = 48)] font_size: i32,
     #[prop(default = Align::Center)] align: Align,
     #[prop(default = VAlign::Middle)] valign: VAlign,
     #[prop(default = Color::Black)] color: Color,
-) -> impl IntoView
-where
-    F: Fn(Scope) -> IV + 'static,
-    IV: IntoView,
-{
+    children: Children,
+) -> impl IntoView {
     let f = use_frame(cx);
 
     let (x, anchor) = match align {
@@ -43,7 +39,7 @@ where
             pointer-events="none"
             style="user-select: none; -webkit-user-select: none;"
         >
-            {move || text(cx)}
+            {children(cx)}
         </text>
     }
 }
diff --git a/src/ng/row.rs b/src/ng/row.rs
@@ -67,11 +67,30 @@ pub fn Row(
         }
     }
 
-    children(cx).nodes.into_iter().take(cols).enumerate().map(|(i, child)| {
-        let Frame {x, y, width, height } = cells[i];
-        view! { cx,
-            <rect x=x y=y width=width height=height fill="none" stroke=border_color stroke-width=border_width/>
-            {child}
-        }
-    }).collect_view(cx)
+    children(cx)
+        .nodes
+        .into_iter()
+        .take(cols)
+        .enumerate()
+        .map(|(i, child)| {
+            let Frame {
+                x,
+                y,
+                width,
+                height,
+            } = cells[i];
+            view! { cx,
+                <rect
+                    x=x
+                    y=y
+                    width=width
+                    height=height
+                    fill="none"
+                    stroke=border_color
+                    stroke-width=border_width
+                ></rect>
+                {child}
+            }
+        })
+        .collect_view(cx)
 }