Add comments to taffy example

linebender · Nov 22, 2023 · ac3d105 · ac3d105
1 parent 53cb9a9
commit ac3d105
Showing 1 changed file with 20 additions and 7 deletions.
diff --git a/examples/taffy.rs b/examples/taffy.rs
@@ -24,7 +24,7 @@ impl AppState {
 }
 
 fn app_logic(state: &mut AppState) -> impl View<AppState> {
-    // here's some logic, deriving state for the view from our state
+    // Some logic, deriving state for the view from our app state
     let label = if state.count == 1 {
         "Square count: 1".to_string()
     } else {
@@ -33,12 +33,17 @@ fn app_logic(state: &mut AppState) -> impl View<AppState> {
 
     // The actual UI Code starts here
     flex_column((
+
+        // Header
         div(String::from("Xilem Example"))
             .with_background_color(Color::RED)
             .with_style(|s| s.padding = length(20.0)),
+
+        // Body (scrollable)
         scroll_view(
             flex_column((
 
+                // Counter control buttons
                 flex_row((
                     label,
                     button("increase", |state: &mut AppState| {
@@ -64,27 +69,35 @@ fn app_logic(state: &mut AppState) -> impl View<AppState> {
                     s.align_items = Some(AlignItems::Center);
                 }),
 
+                // Description text
                 div(String::from("The number of squares below is controlled by the counter above.\n\nTry clicking \"increase\" until the square count increases enough that the view becomes scrollable."))
                     .with_background_color(Color::RED)
                     .with_style(|s| s.padding = length(20.0)),
 
+                // Lorem Ipsum text
                 div(String::from("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))
                     .with_background_color(Color::RED)
                     .with_style(|s| s.padding = length(20.0)),
 
-                flex_row((0..state.count).map(|i| {
-                    div(()).with_background_color(COLORS[(i % 4) as usize]).with_style(|s| {
-                        s.size.width = length(200.0);
-                        s.size.height = length(200.0);
-                    })
-                }).collect::<Vec<_>>())
+                // Wrapping container (number of children controlled by counter)
+                flex_row(
+                    (0..state.count).map(|i| {
+                        div(())
+                            .with_background_color(COLORS[(i % 4) as usize])
+                            .with_style(|s| {
+                                s.size.width = length(200.0);
+                                s.size.height = length(200.0);
+                            })
+                    }).collect::<Vec<_>>()
+                )
                     .with_background_color(Color::FOREST_GREEN)
                     .with_style(|s| {
                         s.flex_grow = 1.0;
                         s.flex_wrap = FlexWrap::Wrap;
                         s.gap = length(20.0);
                         s.padding = length(20.0);
                     }),
+
             ))
             .with_style(|s| {
                 s.gap.height = length(20.0);