From 0da5cc573e60d068794b6861dc61e44fbbb49a0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Asger=20Juul=20Brunsh=C3=B8j?= Date: Tue, 4 Mar 2025 23:49:04 +0100 Subject: [PATCH] gradient --- crates/ascend/src/components/button.rs | 36 ++++--- crates/ascend/src/components/checkbox.rs | 50 +++++++++ crates/ascend/src/components/icons.rs | 2 + crates/ascend/src/components/outlined_box.rs | 17 ++++ crates/ascend/src/gradient.rs | 32 ++++++ crates/ascend/src/lib.rs | 4 + crates/ascend/src/models.rs | 5 +- crates/ascend/src/pages/wall.rs | 101 ++++--------------- flake.nix | 1 + todo.md | 1 + 10 files changed, 151 insertions(+), 98 deletions(-) create mode 100644 crates/ascend/src/components/checkbox.rs create mode 100644 crates/ascend/src/components/outlined_box.rs create mode 100644 crates/ascend/src/gradient.rs diff --git a/crates/ascend/src/components/button.rs b/crates/ascend/src/components/button.rs index cec9eb1..e69ffc2 100644 --- a/crates/ascend/src/components/button.rs +++ b/crates/ascend/src/components/button.rs @@ -1,26 +1,37 @@ use super::icons::Icon; +use crate::components::outlined_box::OutlinedBox; +use crate::gradient::Gradient; use leptos::prelude::*; use web_sys::MouseEvent; #[component] pub fn Button( - #[prop(optional)] - #[prop(into)] - icon: MaybeProp, + #[prop(into, optional)] icon: MaybeProp, #[prop(into)] text: Signal, + #[prop(optional)] color: Gradient, + onclick: impl FnMut(MouseEvent) + 'static, ) -> impl IntoView { let icon_view = icon.get().map(|i| { let icon_view = i.into_view(); - view! {
{icon_view}
} + let mut classes = "self-center mx-5 my-2.5 text-pink-500 rounded-sm".to_string(); + classes.push(' '); + classes.push_str(color.class_text()); + + view! {
{icon_view}
} }); - let separator = icon - .get() - .is_some() - .then(|| view! {
}); + let separator = icon.get().is_some().then(|| { + let mut classes = "w-0.5 bg-gradient-to-br min-w-0.5".to_string(); + classes.push(' '); + classes.push_str(color.class_from()); + classes.push(' '); + classes.push_str(color.class_to()); + + view! {
} + }); let text_view = view! {
{text.get()}
}; @@ -28,12 +39,11 @@ pub fn Button( } } diff --git a/crates/ascend/src/components/checkbox.rs b/crates/ascend/src/components/checkbox.rs new file mode 100644 index 0000000..44a2f66 --- /dev/null +++ b/crates/ascend/src/components/checkbox.rs @@ -0,0 +1,50 @@ +use crate::components::icons; +use crate::components::outlined_box::OutlinedBox; +use crate::gradient::Gradient; +use leptos::prelude::*; + +#[component] +pub fn Checkbox(checked: RwSignal, #[prop(into)] text: Signal, #[prop(optional)] color: Gradient) -> impl IntoView { + let unique_id = Oco::from(format!("checkbox-{}", uuid::Uuid::new_v4())); + + let checkbox_view = view! { +
+ + + +
+ }; + + let separator = { + let mut classes = "w-0.5 bg-gradient-to-br min-w-0.5".to_string(); + classes.push(' '); + classes.push_str(color.class_from()); + classes.push(' '); + classes.push_str(color.class_to()); + view! {
} + }; + + let text_view = view! { +
+ {move || text.get()} +
+ }; + + view! { +
+ + +
+ } +} diff --git a/crates/ascend/src/components/icons.rs b/crates/ascend/src/components/icons.rs index 91c425e..698bb9b 100644 --- a/crates/ascend/src/components/icons.rs +++ b/crates/ascend/src/components/icons.rs @@ -104,6 +104,8 @@ pub fn Check() -> impl IntoView { > diff --git a/crates/ascend/src/components/outlined_box.rs b/crates/ascend/src/components/outlined_box.rs new file mode 100644 index 0000000..e6602c0 --- /dev/null +++ b/crates/ascend/src/components/outlined_box.rs @@ -0,0 +1,17 @@ +use crate::gradient::Gradient; +use leptos::prelude::*; + +#[component] +pub fn OutlinedBox(children: Children, color: Gradient) -> impl IntoView { + let mut classes = "p-0.5 bg-gradient-to-br rounded-lg".to_string(); + classes.push(' '); + classes.push_str(color.class_from()); + classes.push(' '); + classes.push_str(color.class_to()); + + view! { +
+
{children()}
+
+ } +} diff --git a/crates/ascend/src/gradient.rs b/crates/ascend/src/gradient.rs new file mode 100644 index 0000000..f9139a9 --- /dev/null +++ b/crates/ascend/src/gradient.rs @@ -0,0 +1,32 @@ +#[derive(Debug, Copy, Clone, Default)] +pub enum Gradient { + #[default] + PinkOrange, + CyanBlue, + TealLime, +} +impl Gradient { + pub fn class_from(&self) -> &str { + match self { + Gradient::PinkOrange => "from-pink-500", + Gradient::CyanBlue => "from-cyan-500", + Gradient::TealLime => "from-teal-300", + } + } + + pub fn class_to(&self) -> &str { + match self { + Gradient::PinkOrange => "to-orange-400", + Gradient::CyanBlue => "to-blue-500", + Gradient::TealLime => "to-lime-300", + } + } + + pub fn class_text(&self) -> &str { + match self { + Gradient::PinkOrange => "text-pink-500", + Gradient::CyanBlue => "text-cyan-500", + Gradient::TealLime => "text-teal-300", + } + } +} diff --git a/crates/ascend/src/lib.rs b/crates/ascend/src/lib.rs index 3a3a553..e0a7d37 100644 --- a/crates/ascend/src/lib.rs +++ b/crates/ascend/src/lib.rs @@ -14,12 +14,16 @@ pub mod components { pub mod attempt; pub mod button; + pub mod checkbox; pub mod header; pub mod icons; + pub mod outlined_box; pub mod problem; pub mod problem_info; } +pub mod gradient; + pub mod resources; pub mod codec; diff --git a/crates/ascend/src/models.rs b/crates/ascend/src/models.rs index 16f2673..9973c4e 100644 --- a/crates/ascend/src/models.rs +++ b/crates/ascend/src/models.rs @@ -19,7 +19,6 @@ pub use v3::UserInteraction; pub mod v3 { use super::v2; - use chrono::NaiveDate; use serde::Deserialize; use serde::Serialize; use std::collections::BTreeMap; @@ -31,7 +30,7 @@ pub mod v3 { pub problem_uid: v2::ProblemUid, /// Dates on which this problem was attempted, and how it went - pub attempted_on: BTreeMap, + pub attempted_on: BTreeMap, Attempt>, /// Is among favorite problems pub is_favorite: bool, @@ -50,7 +49,7 @@ pub mod v3 { } } - pub fn best_attempt(&self) -> Option<(NaiveDate, Attempt)> { + pub fn best_attempt(&self) -> Option<(chrono::DateTime, Attempt)> { self.attempted_on .iter() .max_by_key(|(_date, attempt)| *attempt) diff --git a/crates/ascend/src/pages/wall.rs b/crates/ascend/src/pages/wall.rs index 3b949d9..67e027b 100644 --- a/crates/ascend/src/pages/wall.rs +++ b/crates/ascend/src/pages/wall.rs @@ -7,11 +7,11 @@ // | | // | | // +--------------------------------------+ -// + // +---------------------------+ // | Next Problem | // +---------------------------+ -// + // +--------------- Problem --------------+ // | Name: ... | // | Method: ... | @@ -24,7 +24,7 @@ // + ------- + + ------ -+ +---------+ // | Flash | | Top | | Attempt | // + ------- + + ------ -+ +---------+ -// + // +---------- ----------+ // | Today: | // | 14 days ago: | @@ -33,11 +33,12 @@ use crate::components::ProblemInfo; use crate::components::attempt::Attempt; use crate::components::button::Button; +use crate::components::checkbox::Checkbox; use crate::components::header::HeaderItem; use crate::components::header::HeaderItems; use crate::components::header::StyledHeader; -use crate::components::icons; use crate::components::icons::Icon; +use crate::gradient::Gradient; use crate::models; use crate::models::HoldRole; use leptos::Params; @@ -161,6 +162,20 @@ pub fn Wall() -> impl IntoView {
{grid}
+
+ + + +
+