[pdm-devel] [PATCH yew-comp 2/8] status row: add option to add the icon on the right side

Tue Sep 23 11:51:05 CEST 2025

This is sometimes better than showing it always on the left side.

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 src/status_row.rs | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/status_row.rs b/src/status_row.rs
index fe64127..8eda9b7 100644
--- a/src/status_row.rs
+++ b/src/status_row.rs
@@ -15,6 +15,9 @@ pub struct StatusRow {
 
     #[prop_or_default]
     pub status: Option<Html>,
+
+    #[prop_or_default]
+    pub icon_right: bool,
 }
 
 impl StatusRow {
@@ -41,6 +44,17 @@ impl StatusRow {
         self.status = Some(status.into());
         self
     }
+
+    /// Method to control which side the icon should go on.
+    pub fn set_icon_right(&mut self, icon_right: impl Into<bool>) {
+        self.icon_right = icon_right.into();
+    }
+
+    /// Builder style method to control which side the icon should go on.
+    pub fn icon_right(mut self, icon_right: impl Into<bool>) -> Self {
+        self.set_icon_right(icon_right);
+        self
+    }
 }
 
 #[doc(hidden)]
@@ -57,11 +71,17 @@ impl Component for ProxmoxStatusRow {
     fn view(&self, ctx: &Context<Self>) -> Html {
         let props = ctx.props();
 
-        let icon = props.icon_class.as_ref().map(|icon_class| {
-            Container::from_tag("i")
-                .class(icon_class.clone())
-                .padding_end(2)
-        });
+        let (left_icon, right_icon) = match &props.icon_class {
+            Some(icon_class) => {
+                let icon = Container::from_tag("i").class(icon_class.clone());
+                if props.icon_right {
+                    (None, Some(icon))
+                } else {
+                    (Some(icon), None)
+                }
+            }
+            None => (None, None),
+        };
 
         let status = match &props.status {
             Some(text) => text.clone(),
@@ -73,11 +93,11 @@ impl Component for ProxmoxStatusRow {
             .class(Display::Flex) // we need to set this again
             .listeners(&props.listeners)
             .gap(2)
-            .with_child(
-                html! {<div class="pwt-white-space-nowrap">{icon}{props.title.clone()}</div>},
-            )
+            .with_optional_child(left_icon)
+            .with_child(html! {<div class="pwt-white-space-nowrap">{props.title.clone()}</div>})
             .with_flex_spacer()
             .with_child(html! {<div class="pwt-white-space-nowrap">{status}</div>})
+            .with_optional_child(right_icon)
             .into()
     }
 }
-- 
2.47.3



