From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id D75011FF1CD for ; Fri, 27 Jun 2025 14:08:29 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 4DA0813680; Fri, 27 Jun 2025 14:09:06 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Date: Fri, 27 Jun 2025 14:08:49 +0200 Message-Id: <20250627120859.3723554-8-d.csapak@proxmox.com> X-Mailer: git-send-email 2.39.5 In-Reply-To: <20250627120859.3723554-1-d.csapak@proxmox.com> References: <20250627120859.3723554-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: [yew-devel] [PATCH yew-widget-toolkit 01/11] widget: implement Image widget 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" It's a thin wrapper around the tag, but provide convenience properties for switching the image in dark mode, like we want to use for our logo for example. Signed-off-by: Dominik Csapak --- src/widget/image.rs | 76 +++++++++++++++++++++++++++++++++++++++++++++ src/widget/mod.rs | 3 ++ 2 files changed, 79 insertions(+) create mode 100644 src/widget/image.rs diff --git a/src/widget/image.rs b/src/widget/image.rs new file mode 100644 index 0000000..002e879 --- /dev/null +++ b/src/widget/image.rs @@ -0,0 +1,76 @@ +use yew::html::IntoPropValue; +use yew::prelude::*; +use yew::AttrValue; + +use crate::props::{EventSubscriber, WidgetBuilder}; +use crate::state::Theme; +use crate::state::ThemeObserver; +use crate::widget::Container; + +use pwt_macros::{builder, widget}; + +/// Image +/// +/// An image element. Has convenience options to change the image in dark mode. +#[widget(pwt=crate, comp=PwtImage, @element)] +#[derive(Properties, PartialEq, Clone)] +#[builder] +pub struct Image { + /// The source url for the image. + pub src: AttrValue, + + /// An alternative source url for the image used in dark mode. + #[prop_or_default] + #[builder(IntoPropValue, into_prop_value)] + pub dark_mode_src: Option, +} + +impl Image { + /// Create a new [Image] with a src image url. + pub fn new(src: impl Into) -> Self { + yew::props!(Self { src: src.into() }) + } +} + +pub enum Msg { + ThemeChanged((Theme, bool)), +} + +#[doc(hidden)] +pub struct PwtImage { + dark_mode: bool, + _theme_observer: ThemeObserver, +} + +impl Component for PwtImage { + type Message = Msg; + type Properties = Image; + + fn create(_ctx: &Context) -> Self { + let _theme_observer = ThemeObserver::new(_ctx.link().callback(Msg::ThemeChanged)); + Self { + dark_mode: _theme_observer.dark_mode(), + _theme_observer, + } + } + + fn update(&mut self, _ctx: &Context, msg: Self::Message) -> bool { + match msg { + Msg::ThemeChanged((_theme, dark_mode)) => self.dark_mode = dark_mode, + } + true + } + + fn view(&self, ctx: &Context) -> Html { + let props = ctx.props(); + let src = match (self.dark_mode, &props.dark_mode_src) { + (true, Some(src)) => src.clone(), + _ => props.src.clone(), + }; + Container::from_tag("img") + .with_std_props(&props.std_props) + .listeners(&props.listeners) + .attribute("src", src) + .into() + } +} diff --git a/src/widget/mod.rs b/src/widget/mod.rs index 18c52ad..2385bb7 100644 --- a/src/widget/mod.rs +++ b/src/widget/mod.rs @@ -65,6 +65,9 @@ pub use field_label::FieldLabel; #[doc(hidden)] pub use field_label::PwtFieldLabel; +mod image; +pub use image::Image; + mod input; pub use input::Input; -- 2.39.5 _______________________________________________ yew-devel mailing list yew-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel