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

Implement right-click color editor modal for customizable calendar colors

Browse Source 
- Add ColorEditorModal component with full color picker interface
- Replace theme-dependent colors with unified color palette
- Store custom colors in database via preferences API for cross-device sync
- Add right-click handlers on color dots to open editor modal
- Fix event bubbling to prevent calendar context menu conflicts
- Add comprehensive CSS styling for modal with proper positioning

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-19 11:56:16 -04:00
parent fd80624429
commit 4aca6c7fae
6 changed files with 512 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
frontend/src/app.rs
View File

@@ -1,5 +1,5 @@
use crate::components::{
CalendarContextMenu, CalendarManagementModal, ContextMenu, CreateEventModal, DeleteAction,
CalendarContextMenu, CalendarManagementModal, ColorEditorModal, ContextMenu, CreateEventModal, DeleteAction,
EditAction, EventContextMenu, EventModal, EventCreationData,
MobileWarningModal, RouteHandler, Sidebar, Theme, ViewMode,
};
@@ -15,43 +15,68 @@ use web_sys::MouseEvent;
use yew::prelude::*;
use yew_router::prelude::*;
fn get_theme_event_colors() -> Vec<String> {
if let Some(window) = web_sys::window() {
if let Some(document) = window.document() {
if let Some(root) = document.document_element() {
if let Ok(Some(computed_style)) = window.get_computed_style(&root) {
if let Ok(colors_string) = computed_style.get_property_value("--event-colors") {
if !colors_string.is_empty() {
return colors_string
.split(',')
.map(|color| color.trim().to_string())
.filter(|color| !color.is_empty())
.collect();
fn get_default_event_colors() -> Vec<String> {
vec![
"#3B82F6".to_string(), // Blue
"#10B981".to_string(), // Emerald
"#F59E0B".to_string(), // Amber
"#EF4444".to_string(), // Red
"#8B5CF6".to_string(), // Violet
"#06B6D4".to_string(), // Cyan
"#84CC16".to_string(), // Lime
"#F97316".to_string(), // Orange
"#EC4899".to_string(), // Pink
"#6366F1".to_string(), // Indigo
"#14B8A6".to_string(), // Teal
"#F3B806".to_string(), // Yellow
"#8B5A2B".to_string(), // Brown
"#6B7280".to_string(), // Gray
"#DC2626".to_string(), // Dark Red
"#7C3AED".to_string(), // Purple
]
}
fn get_event_colors_from_preferences() -> Vec<String> {
// Try to load custom colors from user preferences
if let Some(prefs) = crate::services::preferences::PreferencesService::load_cached() {
if let Some(colors_json) = prefs.calendar_colors {
// Try to parse the JSON structure
if let Ok(colors_data) = serde_json::from_str::<serde_json::Value>(&colors_json) {
// Check if it has a custom_palette field
if let Some(custom_palette) = colors_data.get("custom_palette") {
if let Some(colors_array) = custom_palette.as_array() {
let custom_colors: Vec<String> = colors_array
.iter()
.filter_map(|v| v.as_str().map(|s| s.to_string()))
.collect();
// Only use custom colors if we have a reasonable number
if custom_colors.len() >= 8 {
return custom_colors;
}
}
}
}
}
}
// Fall back to default colors
get_default_event_colors()
}
vec![
"#3B82F6".to_string(),
"#10B981".to_string(),
"#F59E0B".to_string(),
"#EF4444".to_string(),
"#8B5CF6".to_string(),
"#06B6D4".to_string(),
"#84CC16".to_string(),
"#F97316".to_string(),
"#EC4899".to_string(),
"#6366F1".to_string(),
"#14B8A6".to_string(),
"#F3B806".to_string(),
"#8B5A2B".to_string(),
"#6B7280".to_string(),
"#DC2626".to_string(),
"#7C3AED".to_string(),
]
async fn save_custom_colors_to_preferences(colors: Vec<String>) -> Result<(), String> {
// Create the JSON structure for storing custom colors
let colors_json = serde_json::json!({
"custom_palette": colors
});
// Convert to string for preferences storage
let colors_string = serde_json::to_string(&colors_json)
.map_err(|e| format!("Failed to serialize colors: {}", e))?;
// Update preferences via the preferences service
let preferences_service = crate::services::preferences::PreferencesService::new();
preferences_service.update_preference("calendar_colors", serde_json::Value::String(colors_string)).await
}
#[function_component]
@@ -96,6 +121,8 @@ pub fn App() -> Html {
let color_picker_open = use_state(|| -> Option<String> { None });
let calendar_management_modal_open = use_state(|| false);
let context_menu_open = use_state(|| false);
let color_editor_open = use_state(|| false);
let color_editor_data = use_state(|| -> Option<(usize, String)> { None }); // (index, current_color)
let context_menu_pos = use_state(|| (0i32, 0i32));
let context_menu_calendar_path = use_state(|| -> Option<String> { None });
let event_context_menu_open = use_state(|| false);
@@ -155,7 +182,15 @@ pub fn App() -> Html {
}
});
let available_colors = use_state(|| get_theme_event_colors());
let available_colors = use_state(|| get_event_colors_from_preferences());
// Refresh colors when preferences might have changed
let refresh_colors = {
let available_colors = available_colors.clone();
Callback::from(move |_| {
available_colors.set(get_event_colors_from_preferences());
})
};
// Function to refresh calendar data without full page reload
let refresh_calendar_data = {
@@ -163,12 +198,14 @@ pub fn App() -> Html {
let auth_token = auth_token.clone();
let external_calendars = external_calendars.clone();
let external_calendar_events = external_calendar_events.clone();
let refresh_colors = refresh_colors.clone();
Callback::from(move |_| {
let user_info = user_info.clone();
let auth_token = auth_token.clone();
let external_calendars = external_calendars.clone();
let external_calendar_events = external_calendar_events.clone();
let refresh_colors = refresh_colors.clone();
wasm_bindgen_futures::spawn_local(async move {
// Refresh main calendar data if authenticated
@@ -211,6 +248,8 @@ pub fn App() -> Html {
// Add timestamp to force re-render
info.last_updated = (js_sys::Date::now() / 1000.0) as u64;
user_info.set(Some(info));
// Refresh colors after loading user preferences
refresh_colors.emit(());
}
Err(err) => {
web_sys::console::log_1(
@@ -283,6 +322,49 @@ pub fn App() -> Html {
})
};
let on_color_editor_open = {
let color_editor_open = color_editor_open.clone();
let color_editor_data = color_editor_data.clone();
Callback::from(move |(index, color): (usize, String)| {
color_editor_data.set(Some((index, color)));
color_editor_open.set(true);
})
};
let on_color_editor_close = {
let color_editor_open = color_editor_open.clone();
Callback::from(move |_| {
color_editor_open.set(false);
})
};
let on_color_editor_save = {
let available_colors = available_colors.clone();
let color_editor_open = color_editor_open.clone();
let refresh_colors = refresh_colors.clone();
Callback::from(move |(index, new_color): (usize, String)| {
// Update the colors array
let mut colors = (*available_colors).clone();
if index < colors.len() {
colors[index] = new_color;
available_colors.set(colors.clone());
// Save to preferences asynchronously
let colors_for_save = colors.clone();
let refresh_colors = refresh_colors.clone();
wasm_bindgen_futures::spawn_local(async move {
if let Err(e) = save_custom_colors_to_preferences(colors_for_save).await {
web_sys::console::log_1(&format!("Failed to save custom colors: {}", e).into());
} else {
// Refresh colors to ensure UI is in sync
refresh_colors.emit(());
}
});
}
color_editor_open.set(false);
})
};
let on_view_change = {
let current_view = current_view.clone();
Callback::from(move |new_view: ViewMode| {
@@ -300,7 +382,6 @@ pub fn App() -> Html {
let on_theme_change = {
let current_theme = current_theme.clone();
let available_colors = available_colors.clone();
Callback::from(move |new_theme: Theme| {
// Save theme to localStorage
let _ = LocalStorage::set("calendar_theme", new_theme.value());
@@ -315,8 +396,7 @@ pub fn App() -> Html {
// Update state
current_theme.set(new_theme);
// Update available colors after theme change
available_colors.set(get_theme_event_colors());
// Colors are now unified and don't change with themes
})
};
@@ -1386,6 +1466,7 @@ pub fn App() -> Html {
on_theme_change={on_theme_change}
current_style={(*current_style).clone()}
on_style_change={on_style_change}
on_color_editor_open={on_color_editor_open}
/>
<main class="app-main">
<RouteHandler
@@ -1714,6 +1795,15 @@ pub fn App() -> Html {
is_open={*mobile_warning_open}
on_close={on_mobile_warning_close}
/>
// Color editor modal
<ColorEditorModal
is_open={*color_editor_open}
current_color={color_editor_data.as_ref().map(|(_, color)| color.clone()).unwrap_or_default()}
color_index={color_editor_data.as_ref().map(|(index, _)| *index).unwrap_or(0)}
on_close={on_color_editor_close}
on_save={on_color_editor_save}
/>
</div>
// Hidden print copy that gets shown only during printing