public inbox for pdm-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Dominik Csapak <d.csapak@proxmox.com>
To: pdm-devel@lists.proxmox.com
Subject: [pdm-devel] [PATCH datacenter-manager] ui: pve tree: add tooltips for inline actions
Date: Fri, 25 Apr 2025 14:12:50 +0200	[thread overview]
Message-ID: <20250425121250.3632516-1-d.csapak@proxmox.com> (raw)

So users get a textual feedback on the actions too.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pve/tree.rs | 94 ++++++++++++++++++++++++++--------------------
 1 file changed, 54 insertions(+), 40 deletions(-)

diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
index e74b187..b6f03d7 100644
--- a/ui/src/pve/tree.rs
+++ b/ui/src/pve/tree.rs
@@ -16,7 +16,8 @@ use pwt::state::{KeyedSlabTree, NavigationContext, NavigationContextExt, Selecti
 use pwt::widget::{
     data_table::{DataTable, DataTableColumn, DataTableHeader},
     form::Field,
-    ActionIcon, Column, Container, Fa, MessageBox, MessageBoxButtons, Row, Toolbar, Trigger,
+    ActionIcon, Column, Container, Fa, MessageBox, MessageBoxButtons, Row, Toolbar, Tooltip,
+    Trigger,
 };
 use pwt::{prelude::*, widget::Button};
 
@@ -609,54 +610,67 @@ fn columns(
                     .class(JustifyContent::FlexEnd)
                     .with_optional_child(guest_info.map(|(_, status)| {
                         let disabled = status != "running";
-                        ActionIcon::new("fa fa-fw fa-power-off")
-                            .disabled(disabled)
-                            .on_activate({
-                                let id = id.to_string();
-                                let link = link.clone();
-                                move |_| {
-                                    link.change_view(Some(ViewState::Confirm(
-                                        Action::Shutdown,
-                                        id.to_string(),
-                                    )))
-                                }
-                            })
-                            .class((!disabled).then_some(ColorScheme::Error))
+                        Tooltip::new(
+                            ActionIcon::new("fa fa-fw fa-power-off")
+                                .disabled(disabled)
+                                .on_activate({
+                                    let id = id.to_string();
+                                    let link = link.clone();
+                                    move |_| {
+                                        link.change_view(Some(ViewState::Confirm(
+                                            Action::Shutdown,
+                                            id.to_string(),
+                                        )))
+                                    }
+                                })
+                                .class((!disabled).then_some(ColorScheme::Error)),
+                        )
+                        .tip(tr!("Shutdown"))
                     }))
                     .with_optional_child(guest_info.map(|(_, status)| {
                         let disabled = status == "running";
-                        ActionIcon::new("fa fa-fw fa-play")
-                            .disabled(disabled)
-                            .on_activate({
-                                let id = id.to_string();
-                                let link = link.clone();
-                                move |_| {
-                                    link.change_view(Some(ViewState::Confirm(
-                                        Action::Start,
-                                        id.to_string(),
-                                    )));
-                                }
-                            })
-                            .class((!disabled).then_some(ColorScheme::Success))
+                        Tooltip::new(
+                            ActionIcon::new("fa fa-fw fa-play")
+                                .disabled(disabled)
+                                .on_activate({
+                                    let id = id.to_string();
+                                    let link = link.clone();
+                                    move |_| {
+                                        link.change_view(Some(ViewState::Confirm(
+                                            Action::Start,
+                                            id.to_string(),
+                                        )));
+                                    }
+                                })
+                                .class((!disabled).then_some(ColorScheme::Success)),
+                        )
+                        .tip(tr!("Start"))
                     }))
                     .with_optional_child(guest_info.map(|(guest_info, _)| {
-                        ActionIcon::new("fa fa-fw fa-paper-plane-o").on_activate({
+                        Tooltip::new(ActionIcon::new("fa fa-fw fa-paper-plane-o").on_activate({
                             let link = link.clone();
                             move |_| link.change_view(Some(ViewState::MigrateWindow(guest_info)))
-                        })
+                        }))
+                        .tip(tr!("Migrate"))
                     }))
-                    .with_child(ActionIcon::new("fa fa-external-link").on_activate({
-                        let link = link.clone();
-                        let remote = remote.clone();
-                        move |()| {
-                            // there must be a remote with a connections config if were already here
-                            if let Some(url) =
-                                get_deep_url(link.yew_link(), &remote, node.as_deref(), &local_id)
-                            {
-                                let _ = window().open_with_url(&url.href());
+                    .with_child(
+                        Tooltip::new(ActionIcon::new("fa fa-external-link").on_activate({
+                            let link = link.clone();
+                            let remote = remote.clone();
+                            move |()| {
+                                // there must be a remote with a connections config if were already here
+                                if let Some(url) = get_deep_url(
+                                    link.yew_link(),
+                                    &remote,
+                                    node.as_deref(),
+                                    &local_id,
+                                ) {
+                                    let _ = window().open_with_url(&url.href());
+                                }
                             }
-                        }
-                    }))
+                        }))
+                        .tip(tr!("Open in PVE UI")),
+                    )
                     .into()
             })
             .into(),
-- 
2.39.5



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


             reply	other threads:[~2025-04-25 12:13 UTC|newest]

Thread overview: 2+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2025-04-25 12:12 Dominik Csapak [this message]
2025-04-28  8:45 ` [pdm-devel] applied: " Dietmar Maurer

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20250425121250.3632516-1-d.csapak@proxmox.com \
    --to=d.csapak@proxmox.com \
    --cc=pdm-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal