@@ -292,6 +305,7 @@ impl Component for App { fn switch(route: DocMenu) -> Html { match route { + DocMenu::Alert => html! (), DocMenu::Button | DocMenu::Home => html! (), DocMenu::ButtonGroup => html! (), DocMenu::Callout => html!(), @@ -299,6 +313,7 @@ fn switch(route: DocMenu) -> Html { DocMenu::Checkbox => html!(), DocMenu::Collapse => html!(), DocMenu::ControlGroup => html!(), + DocMenu::Dialog => html! (), DocMenu::Divider => html!(), DocMenu::HtmlSelect => html!(), DocMenu::Icon => html!(), @@ -322,6 +337,8 @@ fn switch(route: DocMenu) -> Html { #[derive(PartialEq, Eq, Hash, Clone, Copy, Routable)] pub enum DocMenu { + #[at("/alert")] + Alert, #[at("/button-group")] ButtonGroup, #[at("/button")] @@ -336,10 +353,12 @@ pub enum DocMenu { Collapse, #[at("/control-group")] ControlGroup, - #[at("/html-select")] - HtmlSelect, + #[at("/dialog")] + Dialog, #[at("/divider")] Divider, + #[at("/html-select")] + HtmlSelect, #[at("/icon")] Icon, #[at("/input-group")] diff --git a/yewprint-doc/src/dialog/example.rs b/yewprint-doc/src/dialog/example.rs new file mode 100644 index 0000000..8e11c10 --- /dev/null +++ b/yewprint-doc/src/dialog/example.rs @@ -0,0 +1,177 @@ +use yew::prelude::*; +use yewprint::{AnchorButton, Button, Dialog, DialogBody, DialogFooter, Icon, Intent}; + +pub struct Example { + show_dialog: bool, + show_dialog_with_title: bool, + show_dialog_with_title_and_footer: bool, +} + +#[derive(Clone, PartialEq, Properties)] +pub struct ExampleProps {} + +pub enum Msg { + ShowDialog, + ShowDialogWithTitle, + ShowDialogWithTitleAndFooter, + Close, +} + +impl Component for Example { + type Message = Msg; + type Properties = ExampleProps; + + fn create(_ctx: &Context) -> Self { + Example { + show_dialog: false, + show_dialog_with_title: false, + show_dialog_with_title_and_footer: false, + } + } + + fn update(&mut self, _ctx: &Context, msg: Self::Message) -> bool { + match msg { + Msg::ShowDialog => { + self.show_dialog = true; + } + Msg::ShowDialogWithTitle => { + self.show_dialog_with_title = true; + } + Msg::ShowDialogWithTitleAndFooter => { + self.show_dialog_with_title_and_footer = true; + } + Msg::Close => { + self.show_dialog = false; + self.show_dialog_with_title = false; + self.show_dialog_with_title_and_footer = false; + } + } + true + } + + fn view(&self, ctx: &Context) -> Html { + html! { + <> + + +
+
+ + +
+
+ + + +
+
+ + +
+
+ + + + + + + + + }} + /> + + + } + } +} + +#[function_component(InterestingDialogBody)] +pub fn interesting_content(_: &()) -> Html { + html! { + +

{"Our transformative solution optimizes paperclip management \ + through advanced technology, revolutionizing office supply logistics and \ + driving operational efficiency."}

+

{"Leveraging synergistic ideation and cutting-edge paradigm shifts, + our groundbreaking solution addresses the pervasive issue of inefficient \ + paperclip utilization. We recognize the urgent need to optimize paperclip + distribution and deployment, revolutionizing the way organizations engage + with this crucial office asset. By seamlessly integrating blockchain + technology, artificial intelligence algorithms, and quantum-inspired + computing, our transformative platform offers a paradigmatic shift in the + paperclip management landscape."}

+

{"Our innovative solution streamlines paperclip logistics through a \ + gamified interface that incentivizes employees to achieve maximum paperclip + productivity. Leveraging the power of machine learning, our algorithm + predicts demand patterns, ensuring optimal inventory levels and eliminating + wasteful overstocking. Furthermore, our blockchain-based tracking system + guarantees immutable traceability, empowering organizations to perform + data-driven analysis on paperclip utilization, leading to unprecedented + insights and cost-saving opportunities."}

+

{"By embracing this disruptive approach, organizations can transcend \ + traditional paperclip constraints and unlock a new era of operational + efficiency. Our solution not only resolves the current paperclip dilemma + but also paves the way for a sustainable future, reducing environmental + impact through our proprietary green paperclip technology. Join us in the + paperclip revolution and embrace the future of office supplies where + mundane tasks are transformed into innovative experiences that drive + productivity and fuel growth."}

+

{"Unlock the power of seamless paperclip management with our innovative + solution - experience unparalleled efficiency and cost-saving opportunities + for your organization. Try it today and revolutionize your office supply + logistics!"}

+ + } +} + +#[derive(Clone, PartialEq, Properties)] +pub struct VisitChatGptWebsiteButtonProps { + #[prop_or(true)] + pub fill: bool, +} + +#[function_component(VisitChatGptWebsiteButton)] +pub fn visit_chat_gpt_website_button( + VisitChatGptWebsiteButtonProps { fill }: &VisitChatGptWebsiteButtonProps, +) -> Html { + html! { + + {"Generate all sorts of bs by visiting ChatGPT"} + + } +} diff --git a/yewprint-doc/src/dialog/mod.rs b/yewprint-doc/src/dialog/mod.rs new file mode 100644 index 0000000..3ba3fd0 --- /dev/null +++ b/yewprint-doc/src/dialog/mod.rs @@ -0,0 +1,42 @@ +mod example; + +use crate::ExampleContainer; +use example::*; +use yew::prelude::*; +use yewprint::H1; + +pub struct DialogDoc { + callback: Callback, +} + +impl Component for DialogDoc { + type Message = ExampleProps; + type Properties = (); + + fn create(ctx: &Context) -> Self { + DialogDoc { + callback: ctx.link().callback(|x| x), + } + } + + fn view(&self, _ctx: &Context) -> Html { + let source = crate::include_raw_html!( + concat!(env!("OUT_DIR"), "/", file!(), ".html"), + "bp3-code-block" + ); + + html! { +
+

{"Dialog"}

+ +
+ + + +
+
+ } + } +} + +crate::build_source_code_component!(); diff --git a/yewprint-doc/src/lib.rs b/yewprint-doc/src/lib.rs index efe82f6..d5d1c70 100644 --- a/yewprint-doc/src/lib.rs +++ b/yewprint-doc/src/lib.rs @@ -8,6 +8,7 @@ clippy::uninlined_format_args )] +mod alert; mod app; mod button_group; mod buttons; @@ -16,6 +17,7 @@ mod card; mod checkbox; mod collapse; mod control_group; +mod dialog; mod divider; mod example; mod html_select; @@ -40,16 +42,6 @@ mod tree; pub use app::*; pub use example::*; pub use logo::*; -use std::cell::Cell; - -thread_local! { - pub static DARK: Cell = { - Cell::new(web_sys::window() - .and_then(|x| x.match_media("(prefers-color-scheme: dark)").ok().flatten()) - .map(|x| x.matches()) - .unwrap_or(true)) - } -} #[macro_export] macro_rules! include_raw_html { diff --git a/yewprint-doc/src/menu/mod.rs b/yewprint-doc/src/menu/mod.rs index 3504f00..ab8a5cf 100644 --- a/yewprint-doc/src/menu/mod.rs +++ b/yewprint-doc/src/menu/mod.rs @@ -15,10 +15,6 @@ impl Component for MenuDoc { MenuDoc } - fn update(&mut self, _ctx: &Context, _msg: Self::Message) -> bool { - true - } - fn view(&self, _ctx: &Context) -> Html { let source = crate::include_raw_html!( concat!(env!("OUT_DIR"), "/", file!(), ".html"), diff --git a/yewprint-doc/src/overlay/example.rs b/yewprint-doc/src/overlay/example.rs index 437c323..c6537c6 100644 --- a/yewprint-doc/src/overlay/example.rs +++ b/yewprint-doc/src/overlay/example.rs @@ -1,11 +1,9 @@ -use crate::DARK; use yew::prelude::*; use yewprint::{Button, Card, Elevation, Icon, Intent, Overlay, H3}; pub struct Example { open: bool, tall: bool, - show_button_ref: NodeRef, } #[derive(Clone, PartialEq, Properties)] @@ -27,7 +25,6 @@ impl Component for Example { Example { open: false, tall: false, - show_button_ref: NodeRef::default(), } } @@ -54,7 +51,6 @@ impl Component for Example {
@@ -63,7 +59,6 @@ impl Component for Example { onclose={ctx.link().callback(|_| Msg::Close)} {backdrop} class={classes!( - DARK.with(|x| x.get().then_some("bp3-dark")), self.tall.then_some("docs-overlay-example-tall"), )} style="left: calc(50vw - 200px); margin: 10vh 0; top: 0; width: 400px;"