Themeing fixed, fonts and themes are now customizable by user and CSS updates appropriately.
This commit is contained in:
parent
9cb902978b
commit
5490393678
2
public/styles/tailwind.min.css
vendored
2
public/styles/tailwind.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,13 +1,14 @@
|
|||||||
use crate::utils::prop_structs::{ButtonProps, ContentChildren};
|
use super::super::utils::{prop_structs::{ButtonProps, ContentChildren}, user_prefs::{UserPrefs, ThemedComponent}};
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
#[cfg(target_family = "wasm")]
|
#[cfg(target_family = "wasm")]
|
||||||
use dioxus_router::Link;
|
use dioxus_router::Link;
|
||||||
|
|
||||||
pub fn BackToHomePage(cx: Scope) -> Element {
|
pub fn BackToHomePage(cx: Scope<UserPrefs>) -> Element {
|
||||||
|
let (user_theme, user_font)= cx.props.clone().get_pref_classes(ThemedComponent::Button);
|
||||||
#[cfg(any(target_family = "windows", target_family = "unix"))]
|
#[cfg(any(target_family = "windows", target_family = "unix"))]
|
||||||
return cx.render(rsx!{
|
return cx.render(rsx!{
|
||||||
a { class: "flex justify-center p-4 text-xl text-center ring-2",
|
a { class: "flex justify-center p-4 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
|
||||||
href: "/",
|
href: "/",
|
||||||
p {
|
p {
|
||||||
"Back to the homepage"
|
"Back to the homepage"
|
||||||
@ -16,7 +17,7 @@ pub fn BackToHomePage(cx: Scope) -> Element {
|
|||||||
});
|
});
|
||||||
#[cfg(target_family = "wasm")]
|
#[cfg(target_family = "wasm")]
|
||||||
return cx.render(rsx!{
|
return cx.render(rsx!{
|
||||||
Link { class: "flex justify-center p-4 text-xl text-center ring-2",
|
Link { class: "flex justify-center p-4 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
|
||||||
to: "/",
|
to: "/",
|
||||||
p {
|
p {
|
||||||
"Back to the homepage"
|
"Back to the homepage"
|
||||||
@ -26,20 +27,21 @@ pub fn BackToHomePage(cx: Scope) -> Element {
|
|||||||
}
|
}
|
||||||
|
|
||||||
pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
|
pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
|
||||||
|
let (user_theme, user_font)= cx.props.user_prefs.clone().get_pref_classes(ThemedComponent::Button);
|
||||||
let title = cx.props.title.clone();
|
let title = cx.props.title.clone();
|
||||||
let title_ref = title.as_str();
|
let title_ref = title.as_str();
|
||||||
let slug = cx.props.slug.clone();
|
let slug = cx.props.slug.clone();
|
||||||
let slug_ref = slug.as_str();
|
let slug_ref = slug.as_str();
|
||||||
#[cfg(any(target_family = "windows", target_family = "unix"))]
|
#[cfg(any(target_family = "windows", target_family = "unix"))]
|
||||||
return cx.render(rsx!{
|
return cx.render(rsx!{
|
||||||
a { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2",
|
a { class: "flex basis-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
|
||||||
href: "{slug_ref}",
|
href: "{slug_ref}",
|
||||||
"{title_ref}"
|
"{title_ref}"
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
#[cfg(target_family = "wasm")]
|
#[cfg(target_family = "wasm")]
|
||||||
return cx.render(rsx!{
|
return cx.render(rsx!{
|
||||||
Link { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2",
|
Link { class: "flex basis-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
|
||||||
to: "{slug_ref}",
|
to: "{slug_ref}",
|
||||||
div {
|
div {
|
||||||
dangerous_inner_html: "{title_ref}",
|
dangerous_inner_html: "{title_ref}",
|
||||||
@ -50,7 +52,7 @@ pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
|
|||||||
|
|
||||||
pub fn ButtonGroup<'a>(cx: Scope<'a, ContentChildren<'a>>) -> Element {
|
pub fn ButtonGroup<'a>(cx: Scope<'a, ContentChildren<'a>>) -> Element {
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
div { class: "grid md:grid-flow-col grid-flow-row gap-y-4",
|
div { class: "flex md:flex-row md:space-y-0 flex-col space-y-4",
|
||||||
&cx.props.children
|
&cx.props.children
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -1,12 +1,14 @@
|
|||||||
// Might wanna move stuff form `void_poem.rs` into here...
|
// Might wanna move stuff form `void_poem.rs` into here...
|
||||||
use crate::utils::prop_structs::{ContentProps};
|
use crate::utils::prop_structs::{ContentProps};
|
||||||
|
use super::super::utils::user_prefs::ThemedComponent;
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
pub fn RenderContent(cx: Scope<ContentProps>) -> Element {
|
pub fn RenderContent(cx: Scope<ContentProps>) -> Element {
|
||||||
|
let (user_theme, user_font) = cx.props.user_prefs.get_pref_classes(ThemedComponent::Card);
|
||||||
let content = &cx.props.content;
|
let content = &cx.props.content;
|
||||||
#[cfg(any(target_family = "windows", target_family = "unix"))]
|
#[cfg(any(target_family = "windows", target_family = "unix"))]
|
||||||
return cx.render(rsx!{
|
return cx.render(rsx!{
|
||||||
div { class: "flex p-4 md:pl-8 md:pr-8 ml-2 mr-2 text-lg text-center ring-4",
|
div { class: "flex p-4 md:pl-8 md:pr-8 ml-2 mr-2 text-lg text-center ring-4 {user_theme} {user_font}",
|
||||||
"{content}",
|
"{content}",
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,16 +1,19 @@
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
use crate::components::void_buttons::NavigationButton;
|
use crate::{components::void_buttons::NavigationButton, utils::user_prefs::{UserPrefs, ThemedComponent}};
|
||||||
|
|
||||||
pub fn Footer(cx: Scope) -> Element {
|
pub fn Footer(cx: Scope<UserPrefs>) -> Element {
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
MutantStandardFooter {}
|
MutantStandardFooter { theme: cx.props.clone().get_theme(), font: cx.props.clone().get_font() }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
fn MutantStandardFooter(cx: Scope) -> Element {
|
fn MutantStandardFooter(cx: Scope<UserPrefs>) -> Element {
|
||||||
|
let user_prefs = UserPrefs::new(cx.props.clone().get_theme(), cx.props.clone().get_font());
|
||||||
|
let user_theme = cx.props.get_theme_classes(ThemedComponent::Card);
|
||||||
|
let user_font = cx.props.get_font_class();
|
||||||
cx.render(rsx!{
|
cx.render(rsx!{
|
||||||
div { class: "p-4 flex flex-col space-y-4 mx-auto max-w-full justify-center ring-4",
|
div { class: "p-4 flex flex-col space-y-4 mx-auto max-w-full justify-center ring-4 {user_theme} {user_font}",
|
||||||
NavigationButton { title: "⚙️".to_string(), slug: "/settings".to_string() }
|
NavigationButton { title: "⚙️ Settings".to_string(), slug: "/settings".to_string(), user_prefs: user_prefs }
|
||||||
div { class: "flex mx-auto max-w-full justify-center text-md text-center",
|
div { class: "flex mx-auto max-w-full justify-center text-md text-center",
|
||||||
"This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
|
"This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,6 @@ use dioxus::prelude::*;
|
|||||||
|
|
||||||
pub fn PageBase<'a>(cx: Scope<'a, PageChildren<'a>>) -> Element {
|
pub fn PageBase<'a>(cx: Scope<'a, PageChildren<'a>>) -> Element {
|
||||||
cx.render(rsx!{
|
cx.render(rsx!{
|
||||||
// div { class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light let button_classes hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue hover:animate-yip transition", hidden: true }
|
|
||||||
div { class: "min-h-screen",
|
div { class: "min-h-screen",
|
||||||
div { class: "container space-y-4 mx-auto p-4",
|
div { class: "container space-y-4 mx-auto p-4",
|
||||||
&cx.props.children
|
&cx.props.children
|
||||||
|
@ -1,18 +1,17 @@
|
|||||||
use crate::components::void_buttons::*;
|
use crate::components::void_buttons::*;
|
||||||
use crate::components::void_title::*;
|
use crate::components::void_title::*;
|
||||||
use crate::utils::helpers;
|
use crate::utils::{helpers, prop_structs::{PoemChildren, PoemData}, user_prefs::{UserPrefs, ThemedComponent} };
|
||||||
use crate::utils::prop_structs::{PoemChildren, PoemData};
|
|
||||||
use super::super::utils::user_prefs::*;
|
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
pub fn PoemList(cx: Scope) -> Element {
|
pub fn PoemList(cx: Scope<UserPrefs>) -> Element {
|
||||||
let poem_list = helpers::get_poem_list();
|
let poem_list = helpers::get_poem_list();
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
ul { class: "flex flex-col space-y-4",
|
ul { class: "flex flex-col space-y-4",
|
||||||
poem_list.into_iter().map(|p| {
|
poem_list.into_iter().map(|p| {
|
||||||
|
let user_prefs = cx.props.clone();
|
||||||
let slug = format!("/poems/{}", p.1);
|
let slug = format!("/poems/{}", p.1);
|
||||||
rsx!{
|
rsx!{
|
||||||
NavigationButton { title: p.0, slug: slug }
|
NavigationButton { title: p.0, slug: slug, user_prefs: user_prefs.clone() }
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -31,14 +30,15 @@ pub fn GetPoem(cx: Scope<PoemData>) -> Element {
|
|||||||
let slug = String::from(cx.props.slug.clone().expect("No slug specified."));
|
let slug = String::from(cx.props.slug.clone().expect("No slug specified."));
|
||||||
let (title, content, creation_date) = helpers::get_poem(slug.clone());
|
let (title, content, creation_date) = helpers::get_poem(slug.clone());
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
Title { title: title, is_html: true, user_prefs: UserPrefs::new(ThemePref::Auto, FontPref::OpenDyslexic)}
|
Title { title: title, is_html: true, user_prefs: cx.props.user_prefs.clone() }
|
||||||
MakePoem{
|
MakePoem{
|
||||||
PoemContent { content: content, creation_date: creation_date }
|
PoemContent { content: content, creation_date: creation_date, user_prefs: cx.props.user_prefs.clone() }
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn PoemContent(cx: Scope<PoemData>) -> Element {
|
pub fn PoemContent(cx: Scope<PoemData>) -> Element {
|
||||||
|
let (user_theme, user_font) = cx.props.user_prefs.get_pref_classes(ThemedComponent::Card);
|
||||||
let content = cx.props.content.clone().expect("No content specified.");
|
let content = cx.props.content.clone().expect("No content specified.");
|
||||||
let creation_date = cx
|
let creation_date = cx
|
||||||
.props
|
.props
|
||||||
@ -48,10 +48,10 @@ pub fn PoemContent(cx: Scope<PoemData>) -> Element {
|
|||||||
#[cfg(any(target_family = "unix", target_family = "windows"))]
|
#[cfg(any(target_family = "unix", target_family = "windows"))]
|
||||||
return cx.render(rsx! {
|
return cx.render(rsx! {
|
||||||
div { class: "flex p-2 mx-auto max-w-full justify-center",
|
div { class: "flex p-2 mx-auto max-w-full justify-center",
|
||||||
details { class: "group p-4 max-w-fit space-y-4 ring-4",
|
details { class: "group p-4 max-w-fit space-y-4 ring-4 {user_theme} {user_font}",
|
||||||
summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 ring-2",
|
summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 hover:animate-yip transition ring-2 {user_theme} {user_font}",
|
||||||
}
|
}
|
||||||
div { class: "font-nerd flex flex-col space-y-4 py-4", "{content}{creation_date}"
|
div { class: "flex flex-col space-y-4 py-4", "{content}{creation_date}"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -59,10 +59,10 @@ pub fn PoemContent(cx: Scope<PoemData>) -> Element {
|
|||||||
#[cfg(target_family = "wasm")]
|
#[cfg(target_family = "wasm")]
|
||||||
return cx.render(rsx! {
|
return cx.render(rsx! {
|
||||||
div { class: "flex p-2 mx-auto max-w-full justify-center",
|
div { class: "flex p-2 mx-auto max-w-full justify-center",
|
||||||
details { class: "group p-4 max-w-fit space-y-4",
|
details { class: "group p-4 max-w-fit space-y-4 ring-4 {user_theme} {user_font}",
|
||||||
summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 ring-2",
|
summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 hover:animate-yip transition ring-2 {user_theme} {user_font}",
|
||||||
}
|
}
|
||||||
div { class: "font-nerd flex flex-col space-y-4 py-4",
|
div { class: "flex flex-col space-y-4 py-4",
|
||||||
dangerous_inner_html: "{content}{creation_date}",
|
dangerous_inner_html: "{content}{creation_date}",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -64,30 +64,19 @@ pub mod void_app {
|
|||||||
/// Renders the app and returns the rendered Element.
|
/// Renders the app and returns the rendered Element.
|
||||||
pub fn HomePage(cx: Scope<UserPrefs>) -> Element {
|
pub fn HomePage(cx: Scope<UserPrefs>) -> Element {
|
||||||
let user_prefs = cx.props.clone();
|
let user_prefs = cx.props.clone();
|
||||||
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
|
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
|
||||||
let title = "A Letter to the Void".to_string();
|
let title = "A Letter to the Void".to_string();
|
||||||
cx.render(rsx!{
|
cx.render(rsx!{
|
||||||
// class: "bg-alice-werefox-grey-light dark:bg-alice-werefox-grey"
|
|
||||||
// class: "bg-alice-werefox-grey"
|
|
||||||
// class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
|
|
||||||
// class: "dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light"
|
|
||||||
// class: "bg-alice-werefox-grey-dark ring-alice-werefox-red text-alice-werefox-grey-light"
|
|
||||||
// class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
|
|
||||||
// class: "hover:text-alice-werefox-blue-dark"
|
|
||||||
// class: "hover:ring-alice-werefox-blue dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red"
|
|
||||||
// class: "bg-alice-werefox-grey-dark ring-alice-werefox-red"
|
|
||||||
// class: "dark:text-alice-werefox-grey-light dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue"
|
|
||||||
// class: "text-alice-werefox-grey-light hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue"
|
|
||||||
div { class: "{user_theme} {user_font}",
|
div { class: "{user_theme} {user_font}",
|
||||||
PageBase {
|
PageBase {
|
||||||
Title { title: title, is_html: false, user_prefs: user_prefs }
|
Title { title: title, is_html: false, user_prefs: user_prefs.clone() }
|
||||||
RenderContent { content: helpers::get_homepage_paragraph() }
|
RenderContent { content: helpers::get_homepage_paragraph(), user_prefs: user_prefs.clone() }
|
||||||
ButtonGroup {
|
ButtonGroup {
|
||||||
NavigationButton { title: "See Latest Entry".to_string(), slug: helpers::get_latest_entry("".to_string()) }
|
NavigationButton { title: "See Latest Entry".to_string(), slug: helpers::get_latest_entry("".to_string()), user_prefs: user_prefs.clone() }
|
||||||
NavigationButton { title: "See Oldest Entry".to_string(), slug: helpers::get_oldest_entry("".to_string()) }
|
NavigationButton { title: "See Oldest Entry".to_string(), slug: helpers::get_oldest_entry("".to_string()), user_prefs: user_prefs.clone() }
|
||||||
NavigationButton { title: "See All Entries".to_string(), slug: "/poems".to_string() }
|
NavigationButton { title: "See All Entries".to_string(), slug: "/poems".to_string(), user_prefs: user_prefs.clone() }
|
||||||
}
|
}
|
||||||
Footer {}
|
Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -96,15 +85,15 @@ pub mod void_app {
|
|||||||
/// Renders the app and returns the rendered Element.
|
/// Renders the app and returns the rendered Element.
|
||||||
pub fn PoemListPage(cx: Scope<UserPrefs>) -> Element {
|
pub fn PoemListPage(cx: Scope<UserPrefs>) -> Element {
|
||||||
let user_prefs = cx.props.clone();
|
let user_prefs = cx.props.clone();
|
||||||
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
|
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
div { class: "{user_theme} {user_font}",
|
div { class: "{user_theme} {user_font}",
|
||||||
PageBase {
|
PageBase {
|
||||||
Title { title: "A Letter to the Void".to_string(), is_html: false, user_prefs: user_prefs }
|
Title { title: "A Letter to the Void".to_string(), is_html: false, user_prefs: user_prefs.clone() }
|
||||||
BackToHomePage {}
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
||||||
PoemList {}
|
PoemList { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
||||||
BackToHomePage {}
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
||||||
Footer {}
|
Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -112,7 +101,7 @@ pub mod void_app {
|
|||||||
|
|
||||||
pub fn PoemPage(cx: Scope<PoemRequest>) -> Element {
|
pub fn PoemPage(cx: Scope<PoemRequest>) -> Element {
|
||||||
let user_prefs = cx.props.user_prefs.clone();
|
let user_prefs = cx.props.user_prefs.clone();
|
||||||
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
|
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
|
||||||
#[cfg(any(target_family = "unix", target_family = "windows"))]
|
#[cfg(any(target_family = "unix", target_family = "windows"))]
|
||||||
let slug = cx.props.slug.clone();
|
let slug = cx.props.slug.clone();
|
||||||
#[cfg(target_family = "wasm")]
|
#[cfg(target_family = "wasm")]
|
||||||
@ -124,16 +113,16 @@ pub mod void_app {
|
|||||||
cx.render(rsx!{
|
cx.render(rsx!{
|
||||||
div { class: "{user_theme} {user_font}",
|
div { class: "{user_theme} {user_font}",
|
||||||
PageBase {
|
PageBase {
|
||||||
BackToHomePage {}
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
||||||
GetPoem { slug: slug.clone() }
|
GetPoem { slug: slug.clone(), user_prefs: user_prefs.clone() }
|
||||||
ButtonGroup {
|
ButtonGroup {
|
||||||
NavigationButton { title: "Oldest".to_string(), slug: helpers::get_oldest_entry(slug.clone()) }
|
NavigationButton { title: "Oldest".to_string(), slug: helpers::get_oldest_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
||||||
NavigationButton { title: "Previous".to_string(), slug: helpers::get_previous_entry(slug.clone()) }
|
NavigationButton { title: "Previous".to_string(), slug: helpers::get_previous_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
||||||
NavigationButton { title: "Next".to_string(), slug: helpers::get_next_entry(slug.clone()) }
|
NavigationButton { title: "Next".to_string(), slug: helpers::get_next_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
||||||
NavigationButton { title: "Latest".to_string(), slug: helpers::get_latest_entry(slug.clone()) }
|
NavigationButton { title: "Latest".to_string(), slug: helpers::get_latest_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
||||||
}
|
}
|
||||||
BackToHomePage {}
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
||||||
Footer {}
|
Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -141,28 +130,40 @@ pub mod void_app {
|
|||||||
|
|
||||||
pub fn SettingsPage(cx: Scope<UserPrefs>) -> Element {
|
pub fn SettingsPage(cx: Scope<UserPrefs>) -> Element {
|
||||||
let user_prefs = cx.props.clone();
|
let user_prefs = cx.props.clone();
|
||||||
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
|
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
|
||||||
|
// Get rid of this and create a general card component with children.
|
||||||
|
let (user_theme_card, user_font_card) = user_prefs.get_pref_classes(ThemedComponent::Card);
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
div { class: "{user_theme} {user_font}",
|
div { class: "{user_theme} {user_font}",
|
||||||
PageBase {
|
PageBase {
|
||||||
Title { title: "Settings".to_string(), is_html: false, user_prefs: user_prefs }
|
Title { title: "Settings".to_string(), is_html: false, user_prefs: user_prefs.clone() }
|
||||||
BackToHomePage {}
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
||||||
div { class: "grid grid-flow-row space-y-4",
|
div { class: "p-4 flex flex-col space-y-4 mx-auto max-w-full justify-center",
|
||||||
ButtonGroup {
|
div { class: "p-4 flex flex-col space-y-4 text-xl text-center ring-4 {user_theme_card} {user_font_card}",
|
||||||
NavigationButton { title: "Light".to_string(), slug: "/settings/?theme=light".to_string() }
|
p {
|
||||||
NavigationButton { title: "Dark".to_string(), slug: "/settings/?theme=dark".to_string() }
|
"Theme"
|
||||||
NavigationButton { title: "Auto".to_string(), slug: "/settings/?theme=auto".to_string() }
|
|
||||||
}
|
}
|
||||||
ButtonGroup {
|
ButtonGroup {
|
||||||
span { class: "font-nerd",
|
NavigationButton { title: "Light".to_string(), slug: "/settings/?theme=light".to_string(), user_prefs: user_prefs.clone() }
|
||||||
NavigationButton { title: "Nerd Font".to_string(), slug: "/settings/?font=nerd".to_string() }
|
NavigationButton { title: "Dark".to_string(), slug: "/settings/?theme=dark".to_string(), user_prefs: user_prefs.clone() }
|
||||||
|
NavigationButton { title: "Auto".to_string(), slug: "/settings/?theme=auto".to_string(), user_prefs: user_prefs.clone() }
|
||||||
}
|
}
|
||||||
span { class: "font-open",
|
}
|
||||||
NavigationButton { title: "Open Dyslexic".to_string(), slug: "/settings/?font=open".to_string() }
|
div { class: "p-4 flex flex-col space-y-4 text-xl text-center ring-4 {user_theme_card} {user_font_card}",
|
||||||
|
p {
|
||||||
|
"Font"
|
||||||
|
}
|
||||||
|
ButtonGroup {
|
||||||
|
span { class: "font-nerd flex basis-full",
|
||||||
|
NavigationButton { title: "Nerd Font".to_string(), slug: "/settings/?font=nerd".to_string(), user_prefs: user_prefs.clone() }
|
||||||
|
}
|
||||||
|
span { class: "font-open flex basis-full",
|
||||||
|
NavigationButton { title: "Open Dyslexic".to_string(), slug: "/settings/?font=open".to_string(), user_prefs: user_prefs.clone() }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
BackToHomePage {}
|
}
|
||||||
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -18,12 +18,14 @@ pub struct TitleProps {
|
|||||||
#[derive(PartialEq, Props)]
|
#[derive(PartialEq, Props)]
|
||||||
pub struct ContentProps {
|
pub struct ContentProps {
|
||||||
pub content: String,
|
pub content: String,
|
||||||
|
pub user_prefs: UserPrefs,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(PartialEq, Props)]
|
#[derive(PartialEq, Props)]
|
||||||
pub struct ButtonProps {
|
pub struct ButtonProps {
|
||||||
pub title: String,
|
pub title: String,
|
||||||
pub slug: String,
|
pub slug: String,
|
||||||
|
pub user_prefs: UserPrefs,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(PartialEq, Props)]
|
#[derive(PartialEq, Props)]
|
||||||
@ -32,7 +34,7 @@ pub struct PoemData {
|
|||||||
pub content: Option<String>,
|
pub content: Option<String>,
|
||||||
pub creation_date: Option<String>,
|
pub creation_date: Option<String>,
|
||||||
pub slug: Option<String>,
|
pub slug: Option<String>,
|
||||||
pub dark_mode: Option<bool>,
|
pub user_prefs: UserPrefs,
|
||||||
}
|
}
|
||||||
|
|
||||||
// These next three should all just be one prop.
|
// These next three should all just be one prop.
|
||||||
|
@ -58,6 +58,12 @@ impl UserPrefs {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub fn get_pref_classes(&self, component: ThemedComponent) -> (String, String) {
|
||||||
|
let theme = self.get_theme_classes(component).clone();
|
||||||
|
let font = self.get_font_class().clone();
|
||||||
|
(theme, font)
|
||||||
|
}
|
||||||
|
|
||||||
pub fn get_theme_classes(&self, component: ThemedComponent) -> String {
|
pub fn get_theme_classes(&self, component: ThemedComponent) -> String {
|
||||||
match &self.theme {
|
match &self.theme {
|
||||||
ThemePref::Light => match component {
|
ThemePref::Light => match component {
|
||||||
@ -111,29 +117,38 @@ impl UserPrefs {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn set_theme(mut self, theme: ThemePref) {
|
pub fn get_font_class(&self) -> String {
|
||||||
self.theme = theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn get_font(&self) -> String {
|
|
||||||
match &self.font {
|
match &self.font {
|
||||||
FontPref::OpenDyslexic => "font-open".to_string(),
|
FontPref::OpenDyslexic => "font-open".to_string(),
|
||||||
FontPref::NerdFont => "font-nerd".to_string(),
|
FontPref::NerdFont => "font-nerd".to_string(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn set_font(mut self, font: FontPref) {
|
|
||||||
self.font = font;
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn get_prefs(&self, component: ThemedComponent) -> (String, String) {
|
|
||||||
let theme = self.get_theme_classes(component).clone();
|
|
||||||
let font = self.get_font().clone();
|
|
||||||
(theme, font)
|
|
||||||
}
|
|
||||||
|
|
||||||
pub fn set_prefs(mut self, prefs: UserPrefs) {
|
pub fn set_prefs(mut self, prefs: UserPrefs) {
|
||||||
self.theme = prefs.theme;
|
self.theme = prefs.theme;
|
||||||
self.font = prefs.font;
|
self.font = prefs.font;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub fn set_theme(mut self, theme: ThemePref) {
|
||||||
|
self.theme = theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn set_font(mut self, font: FontPref) {
|
||||||
|
self.font = font;
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn get_prefs(self) -> (ThemePref, FontPref) {
|
||||||
|
let prefs = self.clone();
|
||||||
|
(prefs.theme, prefs.font)
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn get_theme(self) -> ThemePref {
|
||||||
|
let prefs = self.clone();
|
||||||
|
prefs.theme.clone()
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn get_font(self) -> FontPref {
|
||||||
|
let prefs = self.clone();
|
||||||
|
prefs.font.clone()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user