diff --git a/src/app.rs b/src/app.rs index b082efc..0076f02 100644 --- a/src/app.rs +++ b/src/app.rs @@ -11,7 +11,6 @@ use crate::theme::ThemeContext; use crate::theme::ThemeMsg; use crate::theme::ThemeProvider; use crate::component::actionbar::{Actionbar, ActionbarOption}; -use crate::util::log; #[function_component] @@ -38,6 +37,7 @@ fn ThemedApp() -> Html { Page::Home => Icon::Home, Page::Projects => Icon::Code, Page::Socials => Icon::SocialMedia, + Page::Gallery => Icon::Camera, Page::Contact => Icon::Envelope, }, Callback::from(move |_| { @@ -62,11 +62,15 @@ fn ThemedApp() -> Html { html! { <> +
+ +
{vec![ page_option(¤t_page, Page::Home, navigator.clone(), page_state.clone()), page_option(¤t_page, Page::Projects, navigator.clone(), page_state.clone()), page_option(¤t_page, Page::Socials, navigator.clone(), page_state.clone()), + page_option(¤t_page, Page::Gallery, navigator.clone(), page_state.clone()), page_option(¤t_page, Page::Contact, navigator, page_state), ActionbarOption::new_opt( None, @@ -78,9 +82,6 @@ fn ThemedApp() -> Html { ) ]} -
- -
} } \ No newline at end of file diff --git a/src/component/image_viewer.rs b/src/component/image_viewer.rs index 9e03384..ddd1bb2 100644 --- a/src/component/image_viewer.rs +++ b/src/component/image_viewer.rs @@ -1,10 +1,11 @@ +use web_sys::MouseEvent; use yew::{function_component, Html, html, Callback, Properties, use_state}; use yewprint::{Overlay, Icon, IconSize, Intent}; const CHEVRON_SIZE: f64 = 40.0; const CHEVRON_TYPE: Intent = Intent::Danger; -#[derive(PartialEq)] +#[derive(PartialEq, Clone)] pub struct ImageDescription { link: String, description: Option<&'static str> @@ -27,67 +28,115 @@ impl ImageDescription { } #[derive(Properties, PartialEq)] -pub struct ImageViewerProps { +pub struct DefaultImageViewerProps { pub images: Vec, pub open: bool, - pub onclose: Callback<()> + #[prop_or_default] + pub infinite: bool, + pub onclose: Callback<()>, +} + +#[function_component] +pub fn DefaultImageViewer(props: &DefaultImageViewerProps) -> Html { + let selected_image = use_state(|| 0); + let (select_next, select_prev) = (selected_image.clone(), selected_image.clone()); + + let (has_next, has_prev) = (props.infinite || *selected_image < props.images.len() - 1, props.infinite || *selected_image > 0); + let next = (*select_next + props.images.len() + 1) % props.images.len(); + let prev = (*select_prev + props.images.len() - 1) % props.images.len(); + + html! { + + } +} + +#[derive(Properties, PartialEq)] +pub struct ImageViewerProps { + pub image: Option, + pub open: bool, + #[prop_or_default] + pub has_prev: bool, + #[prop_or_default] + pub has_next: bool, + pub onclose: Callback<()>, + pub onnext: Callback, + pub onprev: Callback, } #[function_component] pub fn ImageViewer(props: &ImageViewerProps) -> Html { - let selected_image = use_state(|| 0); - let (select_next, select_prev) = (selected_image.clone(), selected_image.clone()); + let onclose = props.onclose.clone(); html! { - - { - if let Some(image_desc) = props.images.get(*selected_image) { - Some(html! { - <> - - { - if let Some(description) = &image_desc.description { - Some(html! { -
{description}
- }) - } else { None } - } + <> + + <> +
+ { + if let Some(image_desc) = props.image.as_ref() { + let onclose = props.onclose.clone(); + Some(html! { + <> +
+ + { + if let Some(description) = &image_desc.description { + Some(html! { +
{description}
+ }) + } else { None } + } +
- { - // Controls: Next - if *selected_image < props.images.len() - 1 { - Some(html! { - - }) - } else { None } - } + { + // Controls: Next + if props.has_next { + Some(html! { + + }) + } else { None } + } - { - // Controls: Prev - if *selected_image > 0 { - Some(html! { - - }) - } else { None } - } - - }) - } else { None } - } - + { + // Controls: Prev + if props.has_prev { + Some(html! { + + }) + } else { None } + } + + }) + } else { None } + } + + + } } \ No newline at end of file diff --git a/src/page/gallery.rs b/src/page/gallery.rs new file mode 100644 index 0000000..1651104 --- /dev/null +++ b/src/page/gallery.rs @@ -0,0 +1,63 @@ +use web_sys::MouseEvent; +use yew::{function_component, html, Html, use_state, Callback}; + +use crate::{component::image_viewer::{ImageDescription, ImageViewer}}; + +const GALLERY: [&str; 13] = [ + "gallery-1.jpg", + "gallery-2.jpg", + "gallery-3.jpg", + "gallery-4.jpg", + "gallery-5.jpg", + "gallery-6.jpg", + "gallery-7.jpg", + "gallery-8.jpg", + "gallery-9.png", + "gallery-10.jpg", + "gallery-11.jpg", + "gallery-12.jpg", + "gallery-13.jpg", +]; + +fn gallery_entry(link: &&str, onclick: Callback) -> Html { + html! { +
+ } +} + +#[function_component] +pub fn Gallery() -> Html { + let images = GALLERY.iter().map(|it| ImageDescription::new_blank(it.to_string())).collect::>(); + let is_open = use_state(|| false); + let selected_image = use_state(|| 0); + let select_next = selected_image.clone(); + let select_prev = selected_image.clone(); + let next = (*select_next + images.len() + 1) % images.len(); + let prev = (*select_prev + images.len() - 1) % images.len(); + + html! { + <> +
+ { + GALLERY.iter().enumerate().map(|(index, img_str)| { + let select = selected_image.clone(); + let open = is_open.clone(); + gallery_entry(img_str, Callback::from(move |_| { + select.set(index); + open.set(true); + })) + }).collect::() + } +
+ + + } +} \ No newline at end of file diff --git a/src/page/home.rs b/src/page/home.rs index 943be81..5a5a3e9 100644 --- a/src/page/home.rs +++ b/src/page/home.rs @@ -5,7 +5,7 @@ use serde::Deserialize; use yew::{function_component, html, Html, UseStateHandle, use_state, use_effect_with_deps, Properties, Children, use_context, Callback}; use yewprint::{Divider, Elevation, Card, Tag, Intent, Icon}; -use crate::{util::log, theme::{ThemeContext, ThemeState}, component::image_viewer::{ImageDescription, ImageViewer}}; +use crate::{util::log, theme::{ThemeContext, ThemeState}, component::image_viewer::{ImageDescription, DefaultImageViewer}}; #[derive(Debug)] enum TagType { @@ -216,12 +216,8 @@ fn HomeCard(props: &HomeCardProps) -> Html { if image.image.clickable { if let ImageSource::Link(link) = &image.image.source { html! { - } diff --git a/src/page/mod.rs b/src/page/mod.rs index 0ad104e..c8a989c 100644 --- a/src/page/mod.rs +++ b/src/page/mod.rs @@ -5,6 +5,7 @@ mod home; mod projects; mod contact; mod socials; +mod gallery; #[derive(PartialEq, Copy, Clone, Routable)] pub enum Page { @@ -14,19 +15,23 @@ pub enum Page { #[at("/projects")] Projects, + #[at("/socials")] + Socials, + + #[at("/photos")] + Gallery, + #[at("/contacts")] Contact, - - #[at("/socials")] - Socials } fn switch(page: Page) -> Html { match page { Page::Home => html!{}, - Page::Contact => html!{}, - Page::Socials => html!{}, Page::Projects => html!{}, + Page::Socials => html!{}, + Page::Gallery => html!{}, + Page::Contact => html!{}, } } @@ -57,6 +62,7 @@ impl Page { Page::Home => "Home", Page::Projects => "Projects", Page::Socials => "Social Media", + Page::Gallery => "Gallery", Page::Contact => "Contact" } } diff --git a/static/index.html b/static/index.html index b4eb34f..e252c7f 100644 --- a/static/index.html +++ b/static/index.html @@ -1,6 +1,7 @@ + Gabriel Tofvesson