ada/void-werefox-cafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated implementation of theme configuration from user preferences, applied to title.

Browse Source
This commit is contained in:
Ada Werefox 2023-04-17 12:34:20 -05:00
parent b78e2c2d57
commit 9cb902978b
9 changed files with 117 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/styles/tailwind.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
void-fe/src/components/void_buttons.rs
View File

@ -7,7 +7,8 @@ use dioxus_router::Link;
pub fn BackToHomePage(cx: Scope) -> Element {
#[cfg(any(target_family = "windows", target_family = "unix"))]
return cx.render(rsx!{
a {href: "/",
a { class: "flex justify-center p-4 text-xl text-center ring-2",
href: "/",
p {
"Back to the homepage"
}
@ -15,7 +16,8 @@ pub fn BackToHomePage(cx: Scope) -> Element {
});
#[cfg(target_family = "wasm")]
return cx.render(rsx!{
Link { to: "/",
Link { class: "flex justify-center p-4 text-xl text-center ring-2",
to: "/",
p {
"Back to the homepage"
}
@ -30,13 +32,15 @@ pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
let slug_ref = slug.as_str();
#[cfg(any(target_family = "windows", target_family = "unix"))]
return cx.render(rsx!{
a { href: "{slug_ref}",
a { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2",
href: "{slug_ref}",
"{title_ref}"
}
});
#[cfg(target_family = "wasm")]
return cx.render(rsx!{
Link { to: "{slug_ref}",
Link { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2",
to: "{slug_ref}",
div {
dangerous_inner_html: "{title_ref}",
}

2
void-fe/src/components/void_content.rs
View File

@ -6,7 +6,7 @@ pub fn RenderContent(cx: Scope<ContentProps>) -> Element {
let content = &cx.props.content;
#[cfg(any(target_family = "windows", target_family = "unix"))]
return cx.render(rsx!{
div { class: "flex p-4 ml-2 mr-2 ring-4",
div { class: "flex p-4 md:pl-8 md:pr-8 ml-2 mr-2 text-lg text-center ring-4",
"{content}",
}
});

4
void-fe/src/components/void_footer.rs
View File

@ -9,9 +9,9 @@ pub fn Footer(cx: Scope) -> Element {
fn MutantStandardFooter(cx: Scope) -> Element {
cx.render(rsx!{
div {
div { class: "p-4 flex flex-col space-y-4 mx-auto max-w-full justify-center ring-4",
NavigationButton { title: "⚙️".to_string(), slug: "/settings".to_string() }
div {
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"
}
}

2
void-fe/src/components/void_page.rs
View File

@ -4,7 +4,7 @@ use dioxus::prelude::*;
pub fn PageBase<'a>(cx: Scope<'a, PageChildren<'a>>) -> Element {
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 {
div { class: "min-h-screen",
div { class: "container space-y-4 mx-auto p-4",
&cx.props.children
}

2
void-fe/src/components/void_poem.rs
View File

@ -48,7 +48,7 @@ pub fn PoemContent(cx: Scope<PoemData>) -> Element {
#[cfg(any(target_family = "unix", target_family = "windows"))]
return cx.render(rsx! {
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",
summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 ring-2",
}
div { class: "font-nerd flex flex-col space-y-4 py-4", "{content}{creation_date}"

4
void-fe/src/components/void_title.rs
View File

@ -1,12 +1,14 @@
use crate::utils::prop_structs::TitleProps;
use super::super::utils::user_prefs::ThemedComponent;
use dioxus::prelude::*;
pub fn Title(cx: Scope<TitleProps>) -> Element {
let user_prefs = cx.props.user_prefs.clone();
let title_classes = user_prefs.get_theme_classes(ThemedComponent::Card);
let title = cx.props.title.clone();
let is_html = cx.props.is_html;
cx.render(rsx!{
div { class: "p-4 ring-4",
div { class: "p-4 ring-4 {title_classes}",
span { class: "flex flex-row mx-auto max-w-full justify-center text-xl text-center",
TitleHtml { title: title, is_html: is_html, user_prefs: user_prefs }
}

20
void-fe/src/lib.rs
View File

@ -64,10 +64,20 @@ pub mod void_app {
/// Renders the app and returns the rendered Element.
pub fn HomePage(cx: Scope<UserPrefs>) -> Element {
let user_prefs = cx.props.clone();
let (user_theme, user_font) = user_prefs.get_prefs(false);
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
let title = "A Letter to the Void".to_string();
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 }
// 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}",
PageBase {
Title { title: title, is_html: false, user_prefs: user_prefs }
@ -86,7 +96,7 @@ pub mod void_app {
/// Renders the app and returns the rendered Element.
pub fn PoemListPage(cx: Scope<UserPrefs>) -> Element {
let user_prefs = cx.props.clone();
let (user_theme, user_font) = user_prefs.get_prefs(false);
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
cx.render(rsx! {
div { class: "{user_theme} {user_font}",
PageBase {
@ -102,7 +112,7 @@ pub mod void_app {
pub fn PoemPage(cx: Scope<PoemRequest>) -> Element {
let user_prefs = cx.props.user_prefs.clone();
let (user_theme, user_font) = user_prefs.get_prefs(false);
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
#[cfg(any(target_family = "unix", target_family = "windows"))]
let slug = cx.props.slug.clone();
#[cfg(target_family = "wasm")]
@ -131,7 +141,7 @@ pub mod void_app {
pub fn SettingsPage(cx: Scope<UserPrefs>) -> Element {
let user_prefs = cx.props.clone();
let (user_theme, user_font) = user_prefs.get_prefs(false);
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
cx.render(rsx! {
div { class: "{user_theme} {user_font}",
PageBase {

127
void-fe/src/utils/user_prefs.rs
View File

@ -19,19 +19,95 @@ pub enum FontPref {
OpenDyslexic,
}
pub enum ThemedComponent {
Page,
Card,
Button,
}
impl UserPrefs {
// TailwindCSS has a difficult time determining which classes we'll need for our site,
// the easiest way to fix this is to simply list all of them our in commented out class
// attributes, so all of these we *will* use, and TailwindCSS will know to compile them.
// 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"
const PAGE_CLASSES: &str = "bg-alice-werefox-grey-light dark:bg-alice-werefox-grey";
const CARD_CLASSES: &str = "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";
const BUTTON_CLASSES: &str = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue";
pub fn new(theme: ThemePref, font: FontPref) -> UserPrefs {
UserPrefs {
theme,
font,
UserPrefs { theme, font }
}
// I'm really about to write a ceil() function because I refuse to force devs to use Nightly
fn ceil(n: usize) -> usize {
if n.rem_euclid(2) == 0 {
n / 2
} else {
n - 1 / 2
}
}
pub fn get_theme(&self, is_button: bool) -> String {
pub fn get_theme_classes(&self, component: ThemedComponent) -> String {
match &self.theme {
ThemePref::Light => Self::light_theme_classes(is_button),
ThemePref::Dark => Self::dark_theme_classes(is_button),
ThemePref::Auto => Self::auto_theme_classes(is_button),
ThemePref::Light => match component {
ThemedComponent::Page => Self::PAGE_CLASSES
.split_at(Self::ceil(Self::PAGE_CLASSES.len() / 2))
.0
.to_string(),
ThemedComponent::Card => Self::CARD_CLASSES
.split_at(Self::ceil(Self::CARD_CLASSES.len() / 2))
.0
.to_string(),
ThemedComponent::Button => Self::BUTTON_CLASSES
.split_at(Self::ceil(Self::BUTTON_CLASSES.len() / 2))
.0
.to_string(),
},
ThemePref::Dark => match component {
ThemedComponent::Page => {
let remove_dark_tags = Self::PAGE_CLASSES.split("dark:").collect::<String>();
let split_whitespace = remove_dark_tags.as_str().split(" ");
let split_whitespace_length = split_whitespace.clone().count();
split_whitespace
.skip(Self::ceil(split_whitespace_length / 2))
.map(|e| format!("{e} "))
.collect::<String>()
}
ThemedComponent::Card => {
let remove_dark_tags = Self::CARD_CLASSES.split("dark:").collect::<String>();
let split_whitespace = remove_dark_tags.as_str().split(" ");
let split_whitespace_length = split_whitespace.clone().count();
split_whitespace
.skip(Self::ceil(split_whitespace_length / 2))
.map(|e| format!("{e} "))
.collect::<String>()
}
ThemedComponent::Button => {
let remove_dark_tags = Self::BUTTON_CLASSES.split("dark:").collect::<String>();
let split_whitespace = remove_dark_tags.as_str().split(" ");
let split_whitespace_length = split_whitespace.clone().count();
split_whitespace
.skip(Self::ceil(split_whitespace_length / 2))
.map(|e| format!("{e} "))
.collect::<String>()
}
},
ThemePref::Auto => match component {
ThemedComponent::Page => Self::PAGE_CLASSES.to_string(),
ThemedComponent::Card => Self::CARD_CLASSES.to_string(),
ThemedComponent::Button => Self::BUTTON_CLASSES.to_string(),
},
}
}
@ -50,8 +126,8 @@ impl UserPrefs {
self.font = font;
}
pub fn get_prefs(&self, is_button: bool) -> (String, String) {
let theme = self.get_theme(is_button).clone();
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)
}
@ -60,37 +136,4 @@ impl UserPrefs {
self.theme = prefs.theme;
self.font = prefs.font;
}
fn light_theme_classes(is_button: bool) -> String {
let base_classes = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
.to_string();
let button_classes = "hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue hover:animate-yip transition".to_string();
if is_button {
return format!("{base_classes} {button_classes}");
}
base_classes
}
fn dark_theme_classes(is_button: bool) -> String {
let base_classes =
"bg-alice-werefox-grey-dark ring-alice-werefox-red text-alice-werefox-grey-light"
.to_string();
let button_classes = "hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue hover:animate-yip transition".to_string();
if is_button {
return format!("{base_classes} {button_classes}");
}
base_classes
}
fn auto_theme_classes(is_button: bool) -> String {
format!(
"{} {}",
Self::light_theme_classes(is_button)
.split(" ")
.map(|c| if c == "transition" { "".to_string() } else { format!("{c} ") })
.collect::<String>(),
Self::dark_theme_classes(is_button)
.split(" ")
.map(|c| format!(" dark:{c}"))
.collect::<String>()
)
}
}