From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id DEEE91FF16B for ; Tue, 26 Aug 2025 14:33:39 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 3AA8E320CE; Tue, 26 Aug 2025 14:33:42 +0200 (CEST) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Date: Tue, 26 Aug 2025 14:31:24 +0200 Message-ID: <20250826123336.3970108-9-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.2 In-Reply-To: <20250826123336.3970108-1-d.csapak@proxmox.com> References: <20250826123336.3970108-1-d.csapak@proxmox.com> MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.022 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 v3 8/9] ui: search box: add clear trigger X-BeenThere: pdm-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox Datacenter Manager development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pdm-devel-bounces@lists.proxmox.com Sender: "pdm-devel" that removes the search term on click. We also need to set the flex-basis for now, as otherwise the field 'wobbles' when showing or hiding the trigger. Signed-off-by: Dominik Csapak --- ui/src/widget/search_box.rs | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/ui/src/widget/search_box.rs b/ui/src/widget/search_box.rs index 6b2478f..52bb156 100644 --- a/ui/src/widget/search_box.rs +++ b/ui/src/widget/search_box.rs @@ -13,7 +13,7 @@ use pwt::{ prelude::*, props::CssLength, state::{SharedState, SharedStateObserver}, - widget::{form::Field, Container}, + widget::{form::Field, Container, Trigger}, }; use crate::search_provider::get_search_provider; @@ -128,16 +128,28 @@ impl Component for PdmSearchBox { .height(400) .class("pwt-shadow2"); + let clear_trigger_icon = if self.search_term.is_empty() { + "" + } else { + "fa fa-times" + }; + Container::new() .onfocusin(self.focus_tracker.get_focus_callback(true)) .onfocusout(self.focus_tracker.get_focus_callback(false)) .flex(2.0) + .style("flex-basis", "230px") // to avoid changing size with trigger .min_width(230) // placeholder text .with_child( Field::new() .placeholder(tr!("Search (Ctrl+Space / Ctrl+Shift+F)")) .node_ref(self.search_field_ref.clone()) .value(self.force_value.then_some(self.search_term.clone())) + .with_trigger( + Trigger::new(clear_trigger_icon) + .onclick(ctx.link().callback(|_| Msg::ChangeTerm("".into(), true))), + true, + ) .on_input(ctx.link().callback(|term| Msg::ChangeTerm(term, false))), ) .with_child(search_result) -- 2.47.2 _______________________________________________ pdm-devel mailing list pdm-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel