[yew-devel] [PATCH yew-widget-toolkit 1/2] widget: list: expose `row-gap` and 'column-gap' property for grid layout

[yew-devel] [PATCH yew-widget-toolkit 1/2] widget: list: expose `row-gap` and 'column-gap' property for grid layout

[Dominik Csapak]

this is useful to format the grid with gaps between columns and rows.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/list/mod.rs | 60 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/src/widget/list/mod.rs b/src/widget/list/mod.rs
index a5bce14..fe29314 100644
--- a/src/widget/list/mod.rs
+++ b/src/widget/list/mod.rs
@@ -3,7 +3,7 @@ use html::IntoPropValue;
 
 use crate::prelude::*;
 
-use crate::props::{EventSubscriber, WidgetBuilder};
+use crate::props::{EventSubscriber, PwtSpace, WidgetBuilder};
 
 use crate::widget::Container;
 
@@ -74,6 +74,50 @@ pub struct List {
     #[builder(IntoPropValue, into_prop_value)]
     pub grid_template_columns: AttrValue,
 
+    /// The list uses a html grid layout, and you can set the 'column-gap' property.
+    ///
+    ///  ```
+    /// # use pwt::prelude::*;
+    /// # use pwt::widget::{List, ListTile};
+    /// # fn create_list_tile() -> List {
+    ///     List::new(100, |pos| {
+    ///         ListTile::new()
+    ///             .with_child(html!{<span>{format!("{pos}")}</span>})
+    ///             .with_child(html!{<span>{"A simple list tile"}</span>})
+    ///     })
+    ///     // Use a two column layout.
+    ///     .grid_template_columns("auto 1fr")
+    ///     .column_gap(1)
+    /// # }
+    /// ```
+    ///
+    /// see: <https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap>
+    #[prop_or(PwtSpace::None)]
+    #[builder(Into, into)]
+    pub column_gap: PwtSpace,
+
+    /// The list uses a html grid layout, and you can set the 'row-gap' property.
+    ///
+    ///  ```
+    /// # use pwt::prelude::*;
+    /// # use pwt::widget::{List, ListTile};
+    /// # fn create_list_tile() -> List {
+    ///     List::new(100, |pos| {
+    ///         ListTile::new()
+    ///             .with_child(html!{<span>{format!("{pos}")}</span>})
+    ///             .with_child(html!{<span>{"A simple list tile"}</span>})
+    ///     })
+    ///     // Use a two column layout.
+    ///     .grid_template_columns("auto 1fr")
+    ///     .row_gap(1)
+    /// # }
+    /// ```
+    ///
+    /// see: <https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap>
+    #[prop_or(PwtSpace::None)]
+    #[builder(Into, into)]
+    pub row_gap: PwtSpace,
+
     /// Virtual Scroll
     ///
     /// Virtual scroll is enabled by default for lists with more than 30 rows.
@@ -270,6 +314,20 @@ impl PwtList {
             .attribute("data-list-offset", self.scroll_info.offset.to_string())
             .style("display", "grid")
             .style("grid-template-columns", &props.grid_template_columns)
+            .style(
+                "column-gap",
+                match props.column_gap {
+                    PwtSpace::None => None,
+                    other => Some(AttrValue::from(other)),
+                },
+            )
+            .style(
+                "row-gap",
+                match props.row_gap {
+                    PwtSpace::None => None,
+                    other => Some(AttrValue::from(other)),
+                },
+            )
             .style("--pwt-list-tile-min-height", min_height)
             .style("position", "relative")
             .style("top", format!("{}px", self.scroll_info.offset));
-- 
2.47.2



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

[yew-devel] [PATCH yew-widget-toolkit 2/2] ui: list tile: implement on_activate callback

[Dominik Csapak]

sometimes it's useful to click a full list tile, so implement the `on_activate`
callback like we do for e.g. buttons, triggers, etc.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/list/list_tile.rs | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/widget/list/list_tile.rs b/src/widget/list/list_tile.rs
index 2613fb1..3c373c3 100644
--- a/src/widget/list/list_tile.rs
+++ b/src/widget/list/list_tile.rs
@@ -1,10 +1,11 @@
 use std::borrow::Cow;
 
-use yew::html::IntoPropValue;
+use wasm_bindgen::JsCast;
+use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::prelude::*;
 use yew::virtual_dom::VTag;
 
-use crate::props::{ListenersWrapper, WidgetStdProps};
+use crate::props::{EventSubscriber, ListenersWrapper, WidgetBuilder, WidgetStdProps};
 
 use pwt_macros::{builder, widget};
 
@@ -43,6 +44,11 @@ pub struct ListTile {
     #[prop_or_default]
     #[builder(IntoPropValue, into_prop_value)]
     force_height: Option<u32>,
+
+    /// Activate callback (click, enter, space)
+    #[builder_cb(IntoEventCallback, into_event_callback, Event)]
+    #[prop_or_default]
+    on_activate: Option<Callback<Event>>,
 }
 
 impl ListTile {
@@ -61,12 +67,36 @@ impl ListTile {
 }
 
 impl From<ListTile> for VTag {
-    fn from(val: ListTile) -> Self {
+    fn from(mut val: ListTile) -> Self {
         let classes = classes!(
             "pwt-list-tile",
             val.interactive.then_some("pwt-interactive"),
             val.disabled.then_some("disabled")
         );
+
+        if !val.disabled {
+            if let Some(on_activate) = val.on_activate.clone() {
+                val.set_tabindex(0);
+                val.add_onclick({
+                    let on_activate = on_activate.clone();
+                    move |event: MouseEvent| {
+                        event.stop_propagation();
+                        on_activate.emit(event.unchecked_into());
+                    }
+                });
+                val.add_onkeydown({
+                    let on_activate = on_activate.clone();
+                    move |event: KeyboardEvent| match event.key().as_str() {
+                        "Enter" | " " => {
+                            event.stop_propagation();
+                            on_activate.emit(event.unchecked_into());
+                        }
+                        _ => {}
+                    }
+                });
+            }
+        }
+
         val.std_props.into_vtag(
             Cow::Borrowed("div"),
             Some(classes),
-- 
2.47.2



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel