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 498571FF146 for ; Tue, 09 Jun 2026 15:38:16 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 1FDE214027; Tue, 9 Jun 2026 15:38:16 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css Date: Tue, 9 Jun 2026 15:37:08 +0200 Message-ID: <20260609133742.3249328-1-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.049 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 Message-ID-Hash: 3A3NZYE745JVLOAOOGEL4QH7ARJAUEVD X-Message-ID-Hash: 3A3NZYE745JVLOAOOGEL4QH7ARJAUEVD X-MailFrom: d.csapak@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Yew framework devel list at Proxmox List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: instead of constructing one big 'style' attribute, use the proper builder methods, such as '.class()', '.width()', and so on. Signed-off-by: Dominik Csapak --- src/touch/slidable/mod.rs | 71 ++++++++++++++++++--------------------- 1 file changed, 32 insertions(+), 39 deletions(-) diff --git a/src/touch/slidable/mod.rs b/src/touch/slidable/mod.rs index ae45e29..0b0a513 100644 --- a/src/touch/slidable/mod.rs +++ b/src/touch/slidable/mod.rs @@ -12,6 +12,7 @@ use yew::html::{IntoEventCallback, IntoPropValue}; use yew::prelude::*; use yew::virtual_dom::VNode; +use crate::css; use crate::dom::DomSizeObserver; use crate::prelude::*; use crate::props::CssLength; @@ -362,7 +363,7 @@ impl Component for PwtSlidable { // no animation during drag let transition = if self.drag_pos.is_none() { - "transition: width 0.1s ease-out;" + "width 0.1s ease-out" } else { "" }; @@ -370,10 +371,10 @@ impl Component for PwtSlidable { let upper = GestureDetector::new( Container::new() .class("pwt-slidable-slider") - .attribute( - "style", - "touch-action:none;width:100%;flex:0 0 auto;overflow:hidden;", - ) + .class(css::Overflow::Hidden) + .flex(0.0) + .width(CssLength::Fraction(1.0)) + .style("touch-action", "none") .with_child(props.content.clone()) .into_html_with_ref(self.content_ref.clone()), ) @@ -382,47 +383,39 @@ impl Component for PwtSlidable { .on_swipe(ctx.link().callback(Msg::Swipe)); let left_container = Container::new() - .attribute( - "style", - format!( - "width:{left}px;flex: 0 0 auto;{};overflow:hidden;", - transition - ), - ) + .width(CssLength::Px(left)) + .flex(0.0) + .class(css::Overflow::Hidden) + .style("transition", transition) .with_child(self.left_container(ctx)); let right_container = Container::new() - .attribute( - "style", - format!( - "width:{right}px;flex: 0 0 auto;{};overflow:hidden;", - transition - ), - ) + .width(CssLength::Px(right)) + .flex(0.0) + .class(css::Overflow::Hidden) + .style("transition", transition) .with_child(self.right_container(ctx)); let row = Row::new() - .attribute( - "style", - format!( - "width:{};overflow:hidden;justify-content:{};transition:height 0.2s ease-out;{}", - if self.start_pos == 0f64 && self.drag_pos.is_none() && !self.switch_back { - String::from("100%") - } else { - format!("{}px", self.content_width) - }, - if self.last_action_left { - "left" - } else { - "right" - }, - match self.view_state { - ViewState::Normal => String::new(), - ViewState::DismissStart => format!("height:{}px;", self.content_height), - ViewState::DismissTransition | ViewState::Dismissed => String::from("height:0px;"), - } - ), + .width( + if self.start_pos == 0f64 && self.drag_pos.is_none() && !self.switch_back { + CssLength::Fraction(1.0) + } else { + CssLength::Px(self.content_width) + }, ) + .class(css::Overflow::Hidden) + .class(if self.last_action_left { + css::JustifyContent::Left + } else { + css::JustifyContent::Right + }) + .style("transition", "height 0.2s ease-out") + .height(match self.view_state { + ViewState::Normal => CssLength::None, + ViewState::DismissStart => CssLength::Px(self.content_height), + ViewState::DismissTransition | ViewState::Dismissed => CssLength::Px(0.0), + }) .with_child(left_container) .with_child(upper) .with_child(right_container) -- 2.47.3