widget: dialog: use CssStyles for style and implement WidgetStyleBuilder

so we can easily use the 'style'/'width'/etc. builder methods for it
adapt the call sites of dialog to use the new builder methods since
the old 'style' method does not work anymore.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/src/widget/dialog.rs b/src/widget/dialog.rs
index 1ef6419310be4e55fe15234e976d005446695138..262b20d72ccfc8a5fbb5350d022cf00b0b42fa7a 100644 (file)
--- a/src/widget/dialog.rs
+++ b/src/widget/dialog.rs
@@ -13,6 +13,7 @@ use yew::virtual_dom::{Key, VComp, VNode};
 
 use crate::dom::IntoHtmlElement;
 use crate::prelude::*;
+use crate::props::{AsCssStylesMut, CssStyles, WidgetStyleBuilder};
 use crate::widget::align::{align_to_viewport, align_to_xy, Point};
 use crate::widget::{ActionIcon, Panel};
 
@@ -48,10 +49,9 @@ pub struct Dialog {
     #[prop_or_default]
     pub children: Vec<VNode>,
 
-    /// CSS style for the dialog window.
-    #[builder(IntoPropValue, into_prop_value)]
+    /// CSS style for the dialog window
     #[prop_or_default]
-    pub style: Option<AttrValue>,
+    pub styles: CssStyles,
 
     /// Determines if the dialog can be moved
     ///
@@ -82,6 +82,14 @@ impl ContainerBuilder for Dialog {
     }
 }
 
+impl AsCssStylesMut for Dialog {
+    fn as_css_styles_mut(&mut self) -> &mut CssStyles {
+        &mut self.styles
+    }
+}
+
+impl WidgetStyleBuilder for Dialog {}
+
 impl Dialog {
     pub fn new(title: impl Into<AttrValue>) -> Self {
         yew::props!(Self {
@@ -492,9 +500,11 @@ impl Component for PwtDialog {
         let is_dragging = !matches!(self.dragging_state, DragState::Idle);
         let classes = classes!("pwt-dialog", is_dragging.then_some("pwt-user-select-none"));
 
+        let style = props.styles.compile_style_attribute(None);
+
         html! {
             <dialog class={"pwt-outer-dialog"} {onpointerdown} aria-label={props.title.clone()} ref={props.node_ref.clone()} {oncancel} {onclose} >
-                <div class={classes} style={props.style.clone()} ref={self.inner_ref.clone()}>
+                <div class={classes} {style} ref={self.inner_ref.clone()}>
                 {panel}
                 if resizable {
                     <div onpointerdown={west_down} class="dialog-resize-handle west"></div>

diff --git a/src/widget/message_box.rs b/src/widget/message_box.rs
index 617d0b2149228824bc4b876640be214df42ee989..cd6ef7fc69436941eb0267bb945416b424d09828 100644 (file)
--- a/src/widget/message_box.rs
+++ b/src/widget/message_box.rs
@@ -6,6 +6,7 @@ use yew::prelude::*;
 use yew::virtual_dom::{VComp, VNode};
 
 use crate::prelude::*;
+use crate::props::WidgetStyleBuilder;
 use crate::widget::{Button, Dialog, Row, Toolbar};
 
 /// Message Box - Modal window to display various messages.
@@ -134,7 +135,8 @@ pub fn pwt_message_box(props: &MessageBox) -> Html {
     bbar.add_flex_spacer();
 
     Dialog::new(props.title.clone())
-        .style("min-width: 300px; max-width:600px;")
+        .min_width(300)
+        .max_width(600)
         .draggable(props.draggable)
         .on_close(on_close)
         .with_child(message(props.message.clone(), props.icon_class.clone()))