connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement comprehensive style system with Google Calendar theme

Browse Source 
This commit adds a complete style system alongside the existing theme system, allowing users to switch between different UI styles while maintaining theme color variations.

**Core Features:**
- Style enum (Default, Google Calendar) separate from Theme enum
- Hot-swappable stylesheets with dynamic loading
- Style preference persistence (localStorage + database)
- Style picker UI in sidebar below theme picker

**Frontend Implementation:**
- Add Style enum to sidebar.rs with value/display methods
- Implement dynamic stylesheet loading in app.rs
- Add style picker dropdown with proper styling
- Handle style state management and persistence
- Add web-sys features for HtmlLinkElement support

**Backend Integration:**
- Add calendar_style column to user_preferences table
- Update all database operations (insert/update/select)
- Extend API models for style preference
- Add migration for existing users

**Google Calendar Style:**
- Clean Material Design-inspired interface
- White sidebar with proper contrast
- Enhanced calendar grid with subtle shadows
- Improved event styling with hover effects
- Google Sans typography throughout
- Professional color scheme and spacing

**Technical Details:**
- Trunk asset management for stylesheet copying
- High CSS specificity to override theme styles
- Modular CSS architecture for easy extensibility
- Comprehensive text contrast fixes
- Enhanced calendar cells and navigation

Users can now choose between the original gradient design (Default) and a clean Google Calendar-inspired interface (Google Calendar), with full preference persistence across sessions.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-01 20:08:05 -04:00
parent 0587762bbb
commit 73567c185c
17 changed files with 8012 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/app.rs
View File

@@ -3,10 +3,12 @@ use crate::components::{
EditAction, EventClass, EventContextMenu, EventCreationData, EventStatus, RecurrenceType,
ReminderType, RouteHandler, Sidebar, Theme, ViewMode,
};
use crate::components::sidebar::{Style};
use crate::models::ical::VEvent;
use crate::services::{calendar_service::UserInfo, CalendarService};
use chrono::NaiveDate;
use gloo_storage::{LocalStorage, Storage};
use wasm_bindgen::JsCast;
use web_sys::MouseEvent;
use yew::prelude::*;
use yew_router::prelude::*;
@@ -96,6 +98,16 @@ pub fn App() -> Html {
}
});
// Style state - load from localStorage if available
let current_style = use_state(|| {
// Try to load saved style from localStorage
if let Ok(saved_style) = LocalStorage::get::<String>("calendar_style") {
Style::from_value(&saved_style)
} else {
Style::Default // Default style
}
});
let available_colors = use_state(|| get_theme_event_colors());
let on_login = {
@@ -152,6 +164,42 @@ pub fn App() -> Html {
})
};
let on_style_change = {
let current_style = current_style.clone();
Callback::from(move |new_style: Style| {
// Save style to localStorage
let _ = LocalStorage::set("calendar_style", new_style.value());
// Hot-swap stylesheet
if let Some(window) = web_sys::window() {
if let Some(document) = window.document() {
// Remove existing style link if it exists
if let Some(existing_link) = document.get_element_by_id("dynamic-style") {
existing_link.remove();
}
// Create and append new stylesheet link only if style has a path
if let Some(stylesheet_path) = new_style.stylesheet_path() {
if let Ok(link) = document.create_element("link") {
let link = link.dyn_into::<web_sys::HtmlLinkElement>().unwrap();
link.set_id("dynamic-style");
link.set_rel("stylesheet");
link.set_href(stylesheet_path);
if let Some(head) = document.head() {
let _ = head.append_child(&link);
}
}
}
// If stylesheet_path is None (Default style), just removing the dynamic link is enough
}
}
// Update state
current_style.set(new_style);
})
};
// Apply initial theme on mount
{
let current_theme = current_theme.clone();
@@ -165,6 +213,32 @@ pub fn App() -> Html {
});
}
// Apply initial style on mount
{
let current_style = current_style.clone();
use_effect_with((), move |_| {
let style = (*current_style).clone();
if let Some(window) = web_sys::window() {
if let Some(document) = window.document() {
// Create and append stylesheet link for initial style only if it has a path
if let Some(stylesheet_path) = style.stylesheet_path() {
if let Ok(link) = document.create_element("link") {
let link = link.dyn_into::<web_sys::HtmlLinkElement>().unwrap();
link.set_id("dynamic-style");
link.set_rel("stylesheet");
link.set_href(stylesheet_path);
if let Some(head) = document.head() {
let _ = head.append_child(&link);
}
}
}
// If initial style is Default (None), no additional stylesheet needed
}
}
});
}
// Fetch user info when token is available
{
let user_info = user_info.clone();
@@ -718,6 +792,8 @@ pub fn App() -> Html {
on_view_change={on_view_change}
current_theme={(*current_theme).clone()}
on_theme_change={on_theme_change}
current_style={(*current_style).clone()}
on_style_change={on_style_change}
/>
<main class="app-main">
<RouteHandler

59
frontend/src/components/sidebar.rs
View File

@@ -32,6 +32,12 @@ pub enum Theme {
Mint,
}
#[derive(Clone, PartialEq)]
pub enum Style {
Default,
Google,
}
impl Theme {
pub fn value(&self) -> &'static str {
match self {
@@ -60,6 +66,36 @@ impl Theme {
}
}
impl Style {
pub fn value(&self) -> &'static str {
match self {
Style::Default => "default",
Style::Google => "google",
}
}
pub fn from_value(value: &str) -> Self {
match value {
"google" => Style::Google,
_ => Style::Default,
}
}
pub fn display_name(&self) -> &'static str {
match self {
Style::Default => "Default",
Style::Google => "Google Calendar",
}
}
pub fn stylesheet_path(&self) -> Option<&'static str> {
match self {
Style::Default => None, // No additional stylesheet needed - uses base styles.css
Style::Google => Some("google.css"), // Trunk copies to root level
}
}
}
impl Default for ViewMode {
fn default() -> Self {
ViewMode::Month
@@ -80,6 +116,8 @@ pub struct SidebarProps {
pub on_view_change: Callback<ViewMode>,
pub current_theme: Theme,
pub on_theme_change: Callback<Theme>,
pub current_style: Style,
pub on_style_change: Callback<Style>,
}
#[function_component(Sidebar)]
@@ -111,6 +149,18 @@ pub fn sidebar(props: &SidebarProps) -> Html {
})
};
let on_style_change = {
let on_style_change = props.on_style_change.clone();
Callback::from(move |e: Event| {
let target = e.target_dyn_into::<HtmlSelectElement>();
if let Some(select) = target {
let value = select.value();
let new_style = Style::from_value(&value);
on_style_change.emit(new_style);
}
})
};
html! {
<aside class="app-sidebar">
<div class="sidebar-header">
@@ -175,6 +225,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
</div>
<div class="theme-selector">
<label>{"Theme:"}</label>
<select class="theme-selector-dropdown" onchange={on_theme_change}>
<option value="default" selected={matches!(props.current_theme, Theme::Default)}>{"Default"}</option>
<option value="ocean" selected={matches!(props.current_theme, Theme::Ocean)}>{"Ocean"}</option>
@@ -187,6 +238,14 @@ pub fn sidebar(props: &SidebarProps) -> Html {
</select>
</div>
<div class="style-selector">
<label>{"Style:"}</label>
<select class="style-selector-dropdown" onchange={on_style_change}>
<option value="default" selected={matches!(props.current_style, Style::Default)}>{"Default"}</option>
<option value="google" selected={matches!(props.current_style, Style::Google)}>{"Google Calendar"}</option>
</select>
</div>
<button onclick={props.on_logout.reform(|_| ())} class="logout-button">{"Logout"}</button>
</div>
</aside>