From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <pdm-devel-bounces@lists.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9])
	by lore.proxmox.com (Postfix) with ESMTPS id CE4A21FF16F
	for <inbox@lore.proxmox.com>; Thu, 30 Jan 2025 12:07:45 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
	by firstgate.proxmox.com (Proxmox) with ESMTP id F0B5CF0C9;
	Thu, 30 Jan 2025 12:07:43 +0100 (CET)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pdm-devel@lists.proxmox.com
Date: Thu, 30 Jan 2025 12:07:40 +0100
Message-Id: <20250130110740.669191-1-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.39.5
MIME-Version: 1.0
X-SPAM-LEVEL: Spam detection results:  0
 AWL 0.021 Adjusted score from AWL reputation of From: address
 BAYES_00                 -1.9 Bayes spam probability is 0 to 1%
 DMARC_MISSING             0.1 Missing DMARC policy
 KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
 SPF_HELO_NONE           0.001 SPF: HELO does not publish an SPF Record
 SPF_PASS               -0.001 SPF: sender matches SPF record
Subject: [pdm-devel] [PATCH datacenter-manager v2] ui: pve tree: ellipsize
 overly long resource name to avoid overflow
X-BeenThere: pdm-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Proxmox Datacenter Manager development discussion
 <pdm-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pdm-devel>, 
 <mailto:pdm-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pdm-devel/>
List-Post: <mailto:pdm-devel@lists.proxmox.com>
List-Help: <mailto:pdm-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel>, 
 <mailto:pdm-devel-request@lists.proxmox.com?subject=subscribe>
Reply-To: Proxmox Datacenter Manager development discussion
 <pdm-devel@lists.proxmox.com>
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Errors-To: pdm-devel-bounces@lists.proxmox.com
Sender: "pdm-devel" <pdm-devel-bounces@lists.proxmox.com>

due to how the html/css layout is constructed, we have to manually take
care of the (text)overflow here to have properly ellipsized text when the
column gets too small.

To do this for all resources types, rework the markup generation here a
bit, so that it's more consistent (e.g. same gap, align-items,etc).

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* reworked the whole column since this is relevant for all types of
  resources not only lxc. Thanks for @Thomas to notice that!
  (I did and tested with containers and forgot to do it for the rest,
  oops...)

 ui/src/pve/tree.rs | 55 +++++++++++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
index 50a5ae4..e74b187 100644
--- a/ui/src/pve/tree.rs
+++ b/ui/src/pve/tree.rs
@@ -532,35 +532,36 @@ fn columns(
             .flex(1)
             .tree_column(store)
             .render(move |entry: &PveTreeNode| {
-                let el = match entry {
-                    PveTreeNode::Root if loading => Row::new()
-                        .class(AlignItems::Center)
-                        .gap(4)
-                        .with_child(Container::from_tag("i").class("pwt-loading-icon"))
-                        .with_child(tr!("Querying Remote...")),
-                    PveTreeNode::Root => Row::new()
-                        .class(AlignItems::Baseline)
-                        .gap(2)
-                        .with_child(Fa::new("server"))
-                        .with_child(tr!("Remote")),
-                    PveTreeNode::Node(r) => Row::new()
-                        .class(AlignItems::Baseline)
-                        .gap(4)
-                        .with_child(utils::render_node_status_icon(r))
-                        .with_child(&r.node),
-                    PveTreeNode::Qemu(r) => Row::new()
-                        .class(AlignItems::Baseline)
-                        .gap(2)
-                        .with_child(utils::render_qemu_status_icon(r))
-                        .with_child(render_qemu_name(r, true)),
-                    PveTreeNode::Lxc(r) => Row::new()
-                        .class(AlignItems::Baseline)
-                        .gap(2)
-                        .with_child(utils::render_lxc_status_icon(r))
-                        .with_child(render_lxc_name(r, true)),
+                let (icon, text) = match entry {
+                    PveTreeNode::Root if loading => (
+                        Container::from_tag("i").class("pwt-loading-icon"),
+                        tr!("Querying Remote..."),
+                    ),
+                    PveTreeNode::Root => (
+                        Container::new().with_child(Fa::new("server")),
+                        tr!("Remote"),
+                    ),
+                    PveTreeNode::Node(r) => (utils::render_node_status_icon(r), r.node.to_string()),
+                    PveTreeNode::Qemu(r) => {
+                        (utils::render_qemu_status_icon(r), render_qemu_name(r, true))
+                    }
+                    PveTreeNode::Lxc(r) => {
+                        (utils::render_lxc_status_icon(r), render_lxc_name(r, true))
+                    }
                 };
 
-                Container::new().with_child(el).into()
+                Row::new()
+                    .min_width(0)
+                    .class(AlignItems::Center)
+                    .gap(2)
+                    .with_child(icon)
+                    .with_child(
+                        Container::new()
+                            .with_child(text)
+                            .style("text-overflow", "ellipsis")
+                            .style("overflow", "hidden"),
+                    )
+                    .into()
             })
             .into(),
         DataTableColumn::new(tr!("Tags"))
-- 
2.39.5



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