@@ -308,6 +305,7 @@ fn switch(route: DocMenu) -> Html { DocMenu::InputGroup => html!(), DocMenu::Menu => html!(), DocMenu::NumericInput => html!(), + DocMenu::Overlay => html!(), DocMenu::PanelStack => html!(), DocMenu::ProgressBar => html!(), DocMenu::Radio => html!(), @@ -350,6 +348,8 @@ pub enum DocMenu { Menu, #[at("/numeric-input")] NumericInput, + #[at("/overlay")] + Overlay, #[at("/panel-stack")] PanelStack, #[at("/progress-bar")] diff --git a/yewprint-doc/src/lib.rs b/yewprint-doc/src/lib.rs index e4e5936..b537e51 100644 --- a/yewprint-doc/src/lib.rs +++ b/yewprint-doc/src/lib.rs @@ -23,6 +23,7 @@ mod input_group; mod logo; mod menu; mod numeric_input; +mod overlay; mod panel_stack; mod progress_bar; mod radio; @@ -38,6 +39,16 @@ mod tree; pub use app::*; pub use example::*; pub use logo::*; +use std::cell::RefCell; + +thread_local! { + pub static DARK: RefCell = { + RefCell::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 { @@ -67,7 +78,7 @@ macro_rules! build_source_code_component { pub fn generate_url() -> String { use std::path::Path; - let component_name = Path::new(file!()) + let component = Path::new(file!()) .parent() .unwrap() .file_name() @@ -75,10 +86,13 @@ macro_rules! build_source_code_component { .to_str() .unwrap(); - format!( - "https://github.com/yewprint/yewprint/blob/HEAD/src/{}.rs", - component_name, - ) + if let (Some(actor), Some(branch)) = + (option_env!("GITHUB_ACTOR"), option_env!("GITHUB_HEAD_REF")) + { + format!("https://github.com/{actor}/yewprint/blob/{branch}/src/{component}.rs") + } else { + format!("https://github.com/yewprint/yewprint/blob/HEAD/src/{component}.rs") + } } } diff --git a/yewprint-doc/src/overlay/example.rs b/yewprint-doc/src/overlay/example.rs new file mode 100644 index 0000000..2011e22 --- /dev/null +++ b/yewprint-doc/src/overlay/example.rs @@ -0,0 +1,100 @@ +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)] +pub struct ExampleProps { + pub backdrop: bool, +} + +pub enum Msg { + Open, + Close, + ToggleTall, +} + +impl Component for Example { + type Message = Msg; + type Properties = ExampleProps; + + fn create(_ctx: &Context) -> Self { + Example { + open: false, + tall: false, + show_button_ref: NodeRef::default(), + } + } + + fn update(&mut self, _ctx: &Context, msg: Self::Message) -> bool { + match msg { + Msg::Open => { + self.open = true; + } + Msg::Close => { + self.open = false; + } + Msg::ToggleTall => { + self.tall ^= true; + } + } + true + } + + fn view(&self, ctx: &Context) -> Html { + let Self::Properties { backdrop } = &ctx.props(); + + html! { +
+
+ + + +

{"I'm an Overlay!"}

+

{"This is a simple container with some inline styles to position \ + it on the screen."}

+

{"Click the \"Make me scroll\" button below to make this overlay's \ + content really tall, which will make the overlay's container \ + (but not the page) scrollable"}

+
+ + +
+ + +
+
+ } + } +} diff --git a/yewprint-doc/src/overlay/mod.rs b/yewprint-doc/src/overlay/mod.rs new file mode 100644 index 0000000..d6a8eee --- /dev/null +++ b/yewprint-doc/src/overlay/mod.rs @@ -0,0 +1,79 @@ +mod example; + +use crate::ExampleContainer; +use example::*; +use yew::prelude::*; +use yewprint::{Switch, H1, H5}; + +pub struct OverlayDoc { + callback: Callback, + state: ExampleProps, +} + +impl Component for OverlayDoc { + type Message = ExampleProps; + type Properties = (); + + fn create(ctx: &Context) -> Self { + OverlayDoc { + callback: ctx.link().callback(|x| x), + state: ExampleProps { backdrop: true }, + } + } + + fn update(&mut self, _ctx: &Context, msg: Self::Message) -> bool { + self.state = msg; + true + } + + fn view(&self, _ctx: &Context) -> Html { + let example_props = self.state.clone(); + let source = crate::include_raw_html!( + concat!(env!("OUT_DIR"), "/", file!(), ".html"), + "bp3-code-block" + ); + + let props_component = html! { + + }; + + html! { +
+

{"Overlay"}

+ +
+ + + +
+
+ } + } +} + +crate::build_example_prop_component! { + OverlayProps for ExampleProps => + fn view(&self, ctx: &Context) -> Html { + html! { +
+
{"Props"}
+ +
+ } + } +} + +crate::build_source_code_component!(); diff --git a/yewprint-doc/static/index.html b/yewprint-doc/static/index.html index 2e25b93..681d50c 100644 --- a/yewprint-doc/static/index.html +++ b/yewprint-doc/static/index.html @@ -120,23 +120,27 @@ padding-top: 2px; } - .docs-icon-search { - padding-bottom: 20px; - } + .docs-icon-search { + padding-bottom: 20px; + } - .docs-icon-list { - display: grid; - grid-template-columns: auto auto auto auto; - row-gap: 40px; - column-gap: 20px; - } + .docs-icon-list { + display: grid; + grid-template-columns: auto auto auto auto; + row-gap: 40px; + column-gap: 20px; + } - .docs-icon-list-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 3px; - } + .docs-icon-list-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 3px; + } + + .docs-overlay-example-tall { + height: 200%; + }