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 4DF961FF13B for ; Wed, 03 Jun 2026 14:51:49 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 302D6B52F; Wed, 3 Jun 2026 14:51:49 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit v2 2/2] touch: fab menu: allow infinite children with the Sheet variant Date: Wed, 3 Jun 2026 14:49:06 +0200 Message-ID: <20260603125144.3065467-2-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260603125144.3065467-1-d.csapak@proxmox.com> References: <20260603125144.3065467-1-d.csapak@proxmox.com> 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: 5RT7VANYZW2SKY3NMEITADVFEH4CYNCG X-Message-ID-Hash: 5RT7VANYZW2SKY3NMEITADVFEH4CYNCG 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: Since the SideDialog now has proper protection against it's child scrolling, we can now lift the 6 element limit for the Sheet variant. We keep it for the Material3 variant, since that cannot be scrolled sensibly. To properly show the child list, put them into their own container, so the 'Cancel' button is always visible, and limit the height of the SideDialog to 90% of the dynamic viewport height. To prevent triggering the refresh logic of mobile browsers, add 'overscroll-behavior: contain' to the scrollable list. Signed-off-by: Dominik Csapak --- src/touch/fab_menu.rs | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/touch/fab_menu.rs b/src/touch/fab_menu.rs index a834f2d..161fee0 100644 --- a/src/touch/fab_menu.rs +++ b/src/touch/fab_menu.rs @@ -1,7 +1,9 @@ use yew::prelude::*; use crate::css::{self, ColorScheme}; -use crate::props::{ContainerBuilder, CssPaddingBuilder, EventSubscriber, WidgetBuilder}; +use crate::props::{ + ContainerBuilder, CssPaddingBuilder, EventSubscriber, WidgetBuilder, WidgetStyleBuilder, +}; use crate::touch::{SideDialog, SideDialogController}; use crate::tr; use crate::widget::{Button, Column, Container}; @@ -219,15 +221,18 @@ impl Component for PwtFabMenu { .class(fab_classes) .on_activate(ctx.link().callback(|_| Msg::Toggle)); - let btn_class = match props.variant { - FabMenuVariant::Sheet => classes!("pwt-button-text"), - FabMenuVariant::Material3 => classes!(color, "pwt-fab-menu-item", "medium"), + let (btn_class, btn_limit) = match props.variant { + FabMenuVariant::Sheet => (classes!("pwt-button-text"), None), + FabMenuVariant::Material3 => (classes!(color, "pwt-fab-menu-item", "medium"), Some(6)), }; let children = props.children.iter().enumerate().filter_map(|(i, child)| { - if i >= 6 { - log::error!("FabMenu only supports 6 child buttons."); - return None; + match btn_limit { + Some(limit) if i >= limit => { + log::error!("FabMenu only supports '{limit}' child buttons."); + return None; + } + _ => {} } let on_activate = child.on_activate.clone(); @@ -253,12 +258,14 @@ impl Component for PwtFabMenu { .controller(controller.clone()) .location(crate::touch::SideDialogLocation::Bottom) .on_close(ctx.link().callback(|_| Msg::Toggle)) + .style("max-height", "90dvh") .with_child( Column::new() .class(css::FlexFit) + .style("overscroll-behavior", "contain") .padding(2) .gap(1) - .children(children) + .with_child(Column::new().class(css::FlexFit).children(children)) .with_child(html!(
)) .with_child( Button::new(tr!("Cancel")) -- 2.47.3