make default gap style one arg (#477)

* make default gap style one arg * clippy and examples * fix test
lapce · May 30, 2024 · 5b6916a · 5b6916a
1 parent b741cd4
commit 5b6916a
Show file tree

Hide file tree

Showing 21 changed files with 71 additions and 40 deletions.
diff --git a/examples/context/src/main.rs b/examples/context/src/main.rs
@@ -22,7 +22,7 @@ fn context_container<V: IntoView + 'static>(
         s.padding(10)
             .border(1)
             .border_color(color)
-            .gap(0, 5)
+            .gap_height(5)
             .items_center()
     })
 }
@@ -43,7 +43,7 @@ fn app_view() -> impl IntoView {
             .height_full()
             .items_center()
             .justify_center()
-            .gap(0, 5)
+            .gap_height(5)
     });
 
     let id = view.id();

diff --git a/examples/dyn-container/src/main.rs b/examples/dyn-container/src/main.rs
@@ -21,7 +21,7 @@ fn view_two(view: RwSignal<ViewSwitcher>) -> impl IntoView {
             view.set(ViewSwitcher::One);
         }),
     ))
-    .style(|s| s.gap(0.0, 10.0))
+    .style(|s| s.gap_height(10.0))
 }
 
 fn app_view() -> impl IntoView {
@@ -54,7 +54,7 @@ fn app_view() -> impl IntoView {
             .height_full()
             .items_center()
             .justify_center()
-            .gap(10, 0)
+            .gap_width(10)
     })
 }
 

diff --git a/examples/files/src/main.rs b/examples/files/src/main.rs
@@ -79,7 +79,7 @@ fn app_view() -> impl IntoView {
         }),
     ))
     .style(|s| {
-        s.gap(5, 0)
+        s.gap_width(5)
             .width_full()
             .height_full()
             .items_center()

diff --git a/examples/flight_booker/src/main.rs b/examples/flight_booker/src/main.rs
@@ -102,7 +102,7 @@ pub fn app_view() -> impl IntoView {
         book_button,
         success_message,
     ))
-    .style(|s| s.gap(0, 5))
+    .style(|s| s.gap_height(5))
     .style(|s| {
         s.size(100.pct(), 100.pct())
             .flex_col()

diff --git a/examples/layout/src/main.rs b/examples/layout/src/main.rs
@@ -94,7 +94,7 @@ fn app_view() -> impl IntoView {
             .width_full()
             .height_full()
             .padding(10.0)
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     });
 
     let id = view.id();

diff --git a/examples/layout/src/tab_navigation.rs b/examples/layout/src/tab_navigation.rs
@@ -78,7 +78,7 @@ pub fn tab_navigation_view() -> impl IntoView {
         s.flex_row()
             .width_full()
             .height(TABBAR_HEIGHT)
-            .gap(5, 0)
+            .gap_width(5)
             .padding(CONTENT_PADDING)
             .border_bottom(1)
             .border_color(Color::rgb8(205, 205, 205))

diff --git a/examples/stacks/src/dyn_stack.rs b/examples/stacks/src/dyn_stack.rs
@@ -25,5 +25,5 @@ pub fn dyn_stack_view() -> impl IntoView {
         )
         .style(|s| s.width(100).height(200).border(1)),
     )
-        .style(|s| s.flex_col().gap(0, 5).margin_top(10))
+        .style(|s| s.flex_col().gap_height(5).margin_top(10))
 }
diff --git a/examples/stacks/src/main.rs b/examples/stacks/src/main.rs
@@ -18,33 +18,33 @@ fn app_view() -> impl IntoView {
             "Renders off-screen: true",
             stack::stack_view(),
         )
-            .style(|s| s.flex_col().gap(0, 5).width_pct(25.0)),
+            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
         (
             "stack_from_iter".style(|s| s.font_size(16.0)),
             "From signal: false",
             "From iter: true",
             "Renders off-screen: true",
             stack_from_iter::stack_from_iter_view(),
         )
-            .style(|s| s.flex_col().gap(0, 5).width_pct(25.0)),
+            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
         (
             "dyn_stack".style(|s| s.font_size(16.0)),
             "From signal: true",
             "From iter: true",
             "Renders off-screen: true",
             dyn_stack::dyn_stack_view(),
         )
-            .style(|s| s.flex_col().gap(0, 5).width_pct(25.0)),
+            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
         (
             "virtual_stack".style(|s| s.font_size(16.0)),
             "From signal: true",
             "From iter: true",
             "Renders off-screen: false",
             virtual_stack::virtual_stack_view(),
         )
-            .style(|s| s.flex_col().gap(0, 5).width_pct(25.0)),
+            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
     )
-        .style(|s| s.flex().margin(20).width_full().height_full().gap(10, 0))
+        .style(|s| s.flex().margin(20).width_full().height_full().gap_width(10))
         .into_view();
 
     let id = view.id();

diff --git a/examples/stacks/src/stack.rs b/examples/stacks/src/stack.rs
@@ -16,14 +16,14 @@ pub fn stack_view() -> impl IntoView {
         stack((
             "Item 3",
             "Item 4",
-        )).style(|s| s.flex_col().gap(0, 5)),
+        )).style(|s| s.flex_col().gap_height(5)),
 
         // The vertical stack view which has flex_col() built in
         v_stack((
             "Item 5",
             "Item 6",
-        )).style(|s| s.gap(0, 5)),
+        )).style(|s| s.gap_height(5)),
 
     )
-    .style(|s| s.flex_col().gap(0, 5).margin_top(10))
+    .style(|s| s.flex_col().gap( 5).margin_top(10))
 }
diff --git a/examples/stacks/src/stack_from_iter.rs b/examples/stacks/src/stack_from_iter.rs
@@ -10,5 +10,5 @@ pub fn stack_from_iter_view() -> impl IntoView {
     let collection: Vec<usize> = (0..10).collect();
 
     stack_from_iter(collection.iter().map(|val| format!("Item {}", val)))
-        .style(|s| s.flex_col().gap(0, 5).margin_top(10))
+        .style(|s| s.flex_col().gap_height(5).margin_top(10))
 }
diff --git a/examples/stacks/src/virtual_stack.rs b/examples/stacks/src/virtual_stack.rs
@@ -27,5 +27,5 @@ pub fn virtual_stack_view() -> impl IntoView {
         )
         .style(|s| s.width(100).height(200).border(1)),
     )
-        .style(|s| s.flex_col().gap(0, 5).margin_top(10))
+        .style(|s| s.flex_col().gap_height(5).margin_top(10))
 }
diff --git a/examples/timer/src/main.rs b/examples/timer/src/main.rs
@@ -57,7 +57,7 @@ fn app_view() -> impl IntoView {
         stack((text("Duration: "), duration_slider)).style(|s| s.justify_between()),
         reset_button,
     ))
-    .style(|s| s.gap(5, 5));
+    .style(|s| s.gap(5));
 
     container(view).style(|s| {
         s.size(100.pct(), 100.pct())

diff --git a/examples/widget-gallery/src/main.rs b/examples/widget-gallery/src/main.rs
@@ -144,7 +144,7 @@ fn app_view() -> impl IntoView {
         })
         .style(|s| s);
 
-    let left = v_stack((list, inspector)).style(|s| s.height_full().gap(0.0, 5.0));
+    let left = v_stack((list, inspector)).style(|s| s.height_full().gap_height(5.0));
 
     let tab = tab(
         move || active_tab.get(),
@@ -171,7 +171,7 @@ fn app_view() -> impl IntoView {
     let tab = scroll(tab).style(|s| s.flex_basis(0).min_width(0).flex_grow(1.0));
 
     let view = h_stack((left, tab))
-        .style(|s| s.padding(5.0).width_full().height_full().gap(5.0, 0.0))
+        .style(|s| s.padding(5.0).width_full().height_full().gap_width(5.0))
         .window_title(|| "Widget Gallery".to_owned());
 
     let id = view.id();

diff --git a/examples/widget-gallery/src/radio_buttons.rs b/examples/widget-gallery/src/radio_buttons.rs
@@ -47,7 +47,7 @@ pub fn radio_buttons_view() -> impl IntoView {
                         },
                     ),
                 ))
-                .style(|s| s.gap(0.0, 10.0).margin_left(5.0))
+                .style(|s| s.gap_height(10.0).margin_left(5.0))
             }),
             form_item("Disabled Radio Buttons:".to_string(), width, move || {
                 v_stack((
@@ -67,7 +67,7 @@ pub fn radio_buttons_view() -> impl IntoView {
                         })
                         .disabled(|| true),
                 ))
-                .style(|s| s.gap(0.0, 10.0).margin_left(5.0))
+                .style(|s| s.gap_height(10.0).margin_left(5.0))
             }),
             form_item("Labelled Radio Buttons:".to_string(), width, move || {
                 v_stack((

diff --git a/examples/widget-gallery/src/slider.rs b/examples/widget-gallery/src/slider.rs
@@ -25,7 +25,7 @@ pub fn slider_view() -> impl IntoView {
                         .on_change_pct(move |val| set_slider.set(val)),
                     label(move || format!("{:.1}%", set_slider.get())),
                 ))
-                .style(|s| s.gap(10., 10))
+                .style(|s| s.gap(10))
             }),
             form_item("Unaligned Slider:".to_string(), 120.0, move || {
                 stack((
@@ -39,7 +39,7 @@ pub fn slider_view() -> impl IntoView {
                         .on_change_pct(move |val| set_slider.set(val)),
                     label(move || format!("{:.1}%", set_slider.get())),
                 ))
-                .style(|s| s.gap(10., 10))
+                .style(|s| s.gap(10))
             }),
             form_item("Progress bar:".to_string(), 120.0, move || {
                 stack((
@@ -51,7 +51,7 @@ pub fn slider_view() -> impl IntoView {
                         .on_change_pct(move |val| set_slider.set(val)),
                     label(move || format!("{:.1}%", set_slider.get())),
                 ))
-                .style(|s| s.gap(10., 10))
+                .style(|s| s.gap(10))
             }),
         )
     })

diff --git a/examples/window-icon/src/main.rs b/examples/window-icon/src/main.rs
@@ -24,7 +24,7 @@ fn sub_window_view(id: WindowId) -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     })
 }
 
@@ -51,7 +51,7 @@ fn app_view() -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     });
 
     let id = view.id();

diff --git a/examples/window-size/src/main.rs b/examples/window-size/src/main.rs
@@ -20,7 +20,7 @@ fn sub_window_view(id: WindowId) -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     })
 }
 
@@ -44,7 +44,7 @@ fn app_view() -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap(0.0, 10.0)
+            .gap_height(10.0)
     });
 
     let id = view.id();

diff --git a/src/inspector.rs b/src/inspector.rs
@@ -655,7 +655,7 @@ fn selected_view(capture: &Rc<Capture>, selected: RwSignal<Option<ViewId>>) -> i
                     style_header,
                     style_list,
                     class_header,
-                    v_stack_from_iter(class_list.iter().map(text)).style(|s| s.gap(10, 10)),
+                    v_stack_from_iter(class_list.iter().map(text)).style(|s| s.gap(10)),
                 ))
                 .style(|s| s.width_full())
                 .into_any()

diff --git a/src/style.rs b/src/style.rs
@@ -1352,14 +1352,45 @@ impl Style {
         self.height(height.pct())
     }
 
-    pub fn gap(self, width: impl Into<PxPct>, height: impl Into<PxPct>) -> Self {
-        let width: PxPct = width.into();
-        let height: PxPct = height.into();
+    pub fn gap_width(self, width: impl Into<PxPct>) -> Self {
+        let gap_height = self.get(Gap).height;
         self.set(
             Gap,
             Size {
-                width: width.into(),
-                height: height.into(),
+                width: width.into().into(),
+                height: gap_height,
+            },
+        )
+    }
+
+    pub fn gap_height(self, height: impl Into<PxPct>) -> Self {
+        let gap_width = self.get(Gap).width;
+        self.set(
+            Gap,
+            Size {
+                width: gap_width,
+                height: height.into().into(),
+            },
+        )
+    }
+
+    pub fn gap_width_height(self, width: impl Into<PxPct>, height: impl Into<PxPct>) -> Self {
+        self.set(
+            Gap,
+            Size {
+                width: width.into().into(),
+                height: height.into().into(),
+            },
+        )
+    }
+
+    pub fn gap(self, gap: impl Into<PxPct>) -> Self {
+        let gap = gap.into();
+        self.set(
+            Gap,
+            Size {
+                width: gap.into(),
+                height: gap.into(),
             },
         )
     }

diff --git a/src/theme.rs b/src/theme.rs
@@ -91,7 +91,7 @@ pub(crate) fn default_theme() -> Theme {
         });
 
     let labeled_checkbox_style = Style::new()
-        .gap(padding, 0.0)
+        .gap_width(padding)
         .hover(|s| s.background(hover_bg_color))
         .padding(padding)
         .transition(Background, Transition::linear(0.04))
@@ -140,7 +140,7 @@ pub(crate) fn default_theme() -> Theme {
         });
 
     let labeled_radio_button_style = Style::new()
-        .gap(padding, 0.0)
+        .gap_width(padding)
         .hover(|s| s.background(hover_bg_color))
         .padding(padding)
         .transition(Background, Transition::linear(0.04))

diff --git a/src/views/dyn_container.rs b/src/views/dyn_container.rs
@@ -56,7 +56,7 @@ pub struct DynamicContainer<T: 'static> {
 ///             .height_full()
 ///             .items_center()
 ///             .justify_center()
-///             .gap(10, 0)
+///             .gap_width(10)
 ///     })
 /// }
 ///