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 581FB1FF16B for ; Tue, 1 Jul 2025 08:56:49 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 9C01237ED9; Tue, 1 Jul 2025 08:57:28 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Date: Tue, 1 Jul 2025 08:57:25 +0200 Message-Id: <20250701065725.281896-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.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: [yew-devel] [PATCH yew-widget-toolkit] touch: fab menu: intoduce sheet variant X-BeenThere: yew-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Yew framework devel list at Proxmox List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Yew framework devel list at Proxmox Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: yew-devel-bounces@lists.proxmox.com Sender: "yew-devel" which is also the new default. Exposing the items via a sheet (bottom SideDialog) make them more readable and accessible in more situations. Keep the old style via the `Material3` variant. Signed-off-by: Dominik Csapak --- src/touch/fab_menu.rs | 125 +++++++++++++++++++++++++++++------------- 1 file changed, 87 insertions(+), 38 deletions(-) diff --git a/src/touch/fab_menu.rs b/src/touch/fab_menu.rs index 6a4f3f7..db97539 100644 --- a/src/touch/fab_menu.rs +++ b/src/touch/fab_menu.rs @@ -1,14 +1,24 @@ use yew::prelude::*; -use crate::css::ColorScheme; -use crate::props::{ContainerBuilder, EventSubscriber, WidgetBuilder}; -use crate::widget::{Button, Container}; +use crate::css::{self, ColorScheme}; +use crate::props::{ContainerBuilder, CssPaddingBuilder, EventSubscriber, WidgetBuilder}; +use crate::touch::{SideDialog, SideDialogController}; +use crate::tr; +use crate::widget::{Button, Column, Container}; use pwt_macros::{builder, widget}; use super::fab::FabSize; use super::Fab; +/// [FabMenu] variant +#[derive(Copy, Clone, PartialEq, Debug, Default)] +pub enum FabMenuVariant { + #[default] + Sheet, + Material3, +} + /// [FabMenu] direction. #[derive(Copy, Clone, PartialEq)] pub enum FabMenuDirection { @@ -90,6 +100,11 @@ pub struct FabMenu { #[builder] pub align: FabMenuAlign, + /// Menu variant + #[prop_or_default] + #[builder] + pub variant: FabMenuVariant, + /// Child buttons, which popup when main button is pressed. /// /// We currently support up to 5 children. @@ -193,51 +208,85 @@ impl Component for PwtFabMenu { FabMenuColor::Tertiary => (ColorScheme::Tertiary, ColorScheme::TertiaryContainer), }; + let (fab_size, fab_classes) = match (props.variant, self.show_items) { + (FabMenuVariant::Material3, true) => (FabSize::Small, classes!(close_color, "rounded")), + (_, false) | (FabMenuVariant::Sheet, true) => (props.size, classes!()), + }; + let main_button = Fab::new(main_icon_class) - .size(if self.show_items { - FabSize::Small - } else { - props.size - }) + .size(fab_size) .class(props.main_button_class.clone()) - .class(if self.show_items { close_color } else { color }) - .class(self.show_items.then_some("rounded")) + .class(fab_classes) .on_activate(ctx.link().callback(|_| Msg::Toggle)); - let mut container = Container::new() - .with_std_props(&props.std_props) - .listeners(&props.listeners) - .class("pwt-fab-menu-container") - .class(self.show_items.then_some("active")) - .onkeydown({ - let link = ctx.link().clone(); - move |event: KeyboardEvent| { - if event.key() == "Escape" { - link.send_message(Msg::Close) - } - } - }); - - for (i, child) in props.children.iter().enumerate() { + let btn_class = match props.variant { + FabMenuVariant::Sheet => classes!("pwt-button-text"), + FabMenuVariant::Material3 => classes!(color, "pwt-fab-menu-item", "medium"), + }; + + let children = props.children.iter().enumerate().filter_map(|(i, child)| { if i >= 5 { log::error!("FabMenu only supports 5 child buttons."); - break; + return None; } let on_activate = child.on_activate.clone(); let link = ctx.link().clone(); - let child = Button::new(child.text.clone()) - .icon_class(child.icon.clone()) - .class("medium") - .class(color) - .class("pwt-fab-menu-item") - .on_activate(move |event| { - link.send_message(Msg::Toggle); - on_activate.emit(event); - }); - container.add_child(child); - } + Some( + Button::new(child.text.clone()) + .icon_class(child.icon.clone()) + .class(btn_class.clone()) + .on_activate(move |event| { + link.send_message(Msg::Toggle); + on_activate.emit(event); + }) + .into(), + ) + }); + + let container: Option = match props.variant { + FabMenuVariant::Sheet => { + let controller = SideDialogController::new(); + self.show_items.then_some( + SideDialog::new() + .controller(controller.clone()) + .location(crate::touch::SideDialogLocation::Bottom) + .on_close(ctx.link().callback(|_| Msg::Toggle)) + .with_child( + Column::new() + .class(css::FlexFit) + .padding(2) + .gap(1) + .children(children) + .with_child(html!(
)) + .with_child( + Button::new(tr!("Cancel")) + .class("pwt-button-text") + .on_activate(move |_| controller.close_dialog()), + ), + ) + .into(), + ) + } + FabMenuVariant::Material3 => Some( + Container::new() + .with_std_props(&props.std_props) + .listeners(&props.listeners) + .class("pwt-fab-menu-container") + .class(self.show_items.then_some("active")) + .onkeydown({ + let link = ctx.link().clone(); + move |event: KeyboardEvent| { + if event.key() == "Escape" { + link.send_message(Msg::Close) + } + } + }) + .children(children) + .into(), + ), + }; Container::new() .with_std_props(&props.std_props) @@ -261,7 +310,7 @@ impl Component for PwtFabMenu { }) .with_child(main_button), ) - .with_child(container) + .with_optional_child(container) .into() } } -- 2.39.5 _______________________________________________ yew-devel mailing list yew-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel