ca1ca0c3b1
- Add comprehensive CSS custom properties for all theme colors - Include modal, button, input, text, and background color variables - Enhance dark theme with complete variable overrides for proper contrast - Replace hardcoded colors in print-preview.css with theme variables - Add FontAwesome CDN integration and replace emoji icons - Create minimalistic glass-effect checkbox styling with transparency - Fix white-on-white text issue in dark theme across all modals 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
82 lines
2.6 KiB
Rust
82 lines
2.6 KiB
Rust
use crate::components::ViewMode;
|
||
use chrono::{Datelike, NaiveDate};
|
||
use web_sys::MouseEvent;
|
||
use yew::prelude::*;
|
||
|
||
#[derive(Properties, PartialEq)]
|
||
pub struct CalendarHeaderProps {
|
||
pub current_date: NaiveDate,
|
||
pub view_mode: ViewMode,
|
||
pub on_prev: Callback<MouseEvent>,
|
||
pub on_next: Callback<MouseEvent>,
|
||
pub on_today: Callback<MouseEvent>,
|
||
#[prop_or_default]
|
||
pub time_increment: Option<u32>,
|
||
#[prop_or_default]
|
||
pub on_time_increment_toggle: Option<Callback<MouseEvent>>,
|
||
#[prop_or_default]
|
||
pub on_print: Option<Callback<MouseEvent>>,
|
||
}
|
||
|
||
#[function_component(CalendarHeader)]
|
||
pub fn calendar_header(props: &CalendarHeaderProps) -> Html {
|
||
let title = format!(
|
||
"{} {}",
|
||
get_month_name(props.current_date.month()),
|
||
props.current_date.year()
|
||
);
|
||
|
||
html! {
|
||
<div class="calendar-header">
|
||
<div class="header-left">
|
||
<button class="nav-button" onclick={props.on_prev.clone()}>{"‹"}</button>
|
||
{
|
||
if let (Some(increment), Some(callback)) = (props.time_increment, &props.on_time_increment_toggle) {
|
||
html! {
|
||
<button class="time-increment-button" onclick={callback.clone()}>
|
||
{format!("{}", increment)}
|
||
</button>
|
||
}
|
||
} else {
|
||
html! {}
|
||
}
|
||
}
|
||
{
|
||
if let Some(print_callback) = &props.on_print {
|
||
html! {
|
||
<button class="print-button" onclick={print_callback.clone()} title="Print Calendar">
|
||
<i class="fas fa-print"></i>
|
||
</button>
|
||
}
|
||
} else {
|
||
html! {}
|
||
}
|
||
}
|
||
</div>
|
||
<h2 class="month-year">{title}</h2>
|
||
<div class="header-right">
|
||
<button class="today-button" onclick={props.on_today.clone()}>{"Today"}</button>
|
||
<button class="nav-button" onclick={props.on_next.clone()}>{"›"}</button>
|
||
</div>
|
||
</div>
|
||
}
|
||
}
|
||
|
||
fn get_month_name(month: u32) -> &'static str {
|
||
match month {
|
||
1 => "January",
|
||
2 => "February",
|
||
3 => "March",
|
||
4 => "April",
|
||
5 => "May",
|
||
6 => "June",
|
||
7 => "July",
|
||
8 => "August",
|
||
9 => "September",
|
||
10 => "October",
|
||
11 => "November",
|
||
12 => "December",
|
||
_ => "Invalid",
|
||
}
|
||
}
|