From 4aca6c7fae5a69ec99d7496ce308c7a4a55f3572 Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Fri, 19 Sep 2025 11:56:16 -0400 Subject: [PATCH] Implement right-click color editor modal for customizable calendar colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- frontend/src/app.rs | 160 +++++++++++--- frontend/src/components/calendar_list_item.rs | 15 +- frontend/src/components/color_editor_modal.rs | 153 +++++++++++++ frontend/src/components/mod.rs | 2 + frontend/src/components/sidebar.rs | 14 ++ frontend/styles.css | 204 ++++++++++++++++++ 6 files changed, 512 insertions(+), 36 deletions(-) create mode 100644 frontend/src/components/color_editor_modal.rs diff --git a/frontend/src/app.rs b/frontend/src/app.rs index a1d2406..847cd7c 100644 --- a/frontend/src/app.rs +++ b/frontend/src/app.rs @@ -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 { - 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 { + 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 { + // 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::(&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 = 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) -> 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 { 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 { 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} />
Html { is_open={*mobile_warning_open} on_close={on_mobile_warning_close} /> + + // Color editor modal + // Hidden print copy that gets shown only during printing diff --git a/frontend/src/components/calendar_list_item.rs b/frontend/src/components/calendar_list_item.rs index db5066f..6f6af54 100644 --- a/frontend/src/components/calendar_list_item.rs +++ b/frontend/src/components/calendar_list_item.rs @@ -9,6 +9,7 @@ pub struct CalendarListItemProps { pub on_color_change: Callback<(String, String)>, // (calendar_path, color) pub on_color_picker_toggle: Callback, // calendar_path pub available_colors: Vec, + pub on_color_editor_open: Callback<(usize, String)>, // (index, current_color) pub on_context_menu: Callback<(MouseEvent, String)>, // (event, calendar_path) pub on_visibility_toggle: Callback, // calendar_path } @@ -66,13 +67,25 @@ pub fn calendar_list_item(props: &CalendarListItemProps) -> Html { on_color_change.emit((cal_path.clone(), color_str.clone())); }); + let on_color_right_click = { + let on_color_editor_open = props.on_color_editor_open.clone(); + let color_index = props.available_colors.iter().position(|c| c == color).unwrap_or(0); + let color_str = color.clone(); + Callback::from(move |e: MouseEvent| { + e.prevent_default(); + e.stop_propagation(); + on_color_editor_open.emit((color_index, color_str.clone())); + }) + }; + let is_selected = props.calendar.color == *color; let class_name = if is_selected { "color-option selected" } else { "color-option" }; html! {
+ onclick={on_color_select} + oncontextmenu={on_color_right_click}>
} }).collect::() diff --git a/frontend/src/components/color_editor_modal.rs b/frontend/src/components/color_editor_modal.rs new file mode 100644 index 0000000..8114472 --- /dev/null +++ b/frontend/src/components/color_editor_modal.rs @@ -0,0 +1,153 @@ +use yew::prelude::*; +use web_sys::HtmlInputElement; +use wasm_bindgen::JsCast; + +#[derive(Properties, PartialEq)] +pub struct ColorEditorModalProps { + pub is_open: bool, + pub current_color: String, + pub color_index: usize, + pub on_close: Callback<()>, + pub on_save: Callback<(usize, String)>, // (index, new_color) +} + +#[function_component(ColorEditorModal)] +pub fn color_editor_modal(props: &ColorEditorModalProps) -> Html { + let selected_color = use_state(|| props.current_color.clone()); + + // Reset selected color when modal opens with new color + { + let selected_color = selected_color.clone(); + use_effect_with(props.current_color.clone(), move |current_color| { + selected_color.set(current_color.clone()); + }); + } + + let on_color_input = { + let selected_color = selected_color.clone(); + Callback::from(move |e: InputEvent| { + if let Some(input) = e.target_dyn_into::() { + selected_color.set(input.value()); + } + }) + }; + + let on_save_click = { + let selected_color = selected_color.clone(); + let on_save = props.on_save.clone(); + let color_index = props.color_index; + Callback::from(move |_| { + on_save.emit((color_index, (*selected_color).clone())); + }) + }; + + let on_backdrop_click = { + let on_close = props.on_close.clone(); + Callback::from(move |e: MouseEvent| { + // Only close if clicking the backdrop, not the modal content + if let Some(target) = e.target() { + if let Some(element) = target.dyn_ref::() { + if element.class_list().contains("color-editor-backdrop") { + on_close.emit(()); + } + } + } + }) + }; + + if !props.is_open { + return html! {}; + } + + // Predefined color suggestions + let suggested_colors = vec![ + "#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", + "#84CC16", "#F97316", "#EC4899", "#6366F1", "#14B8A6", "#F3B806", + "#8B5A2B", "#6B7280", "#DC2626", "#7C3AED", "#F87171", "#34D399", + "#FBBF24", "#A78BFA", "#60A5FA", "#2DD4BF", "#FB7185", "#FDBA74", + ]; + + html! { +
+
+
+

{"Edit Color"}

+ +
+ +
+
+
+ {&*selected_color} +
+ +
+ +
+ + +
+
+ +
+ +
+ { + suggested_colors.iter().map(|color| { + let color = color.to_string(); + let selected_color = selected_color.clone(); + let onclick = { + let color = color.clone(); + Callback::from(move |_| { + selected_color.set(color.clone()); + }) + }; + + html! { +
+ } + }).collect::() + } +
+
+
+ +
+ + +
+
+
+ } +} \ No newline at end of file diff --git a/frontend/src/components/mod.rs b/frontend/src/components/mod.rs index f0078e3..d979f07 100644 --- a/frontend/src/components/mod.rs +++ b/frontend/src/components/mod.rs @@ -3,6 +3,7 @@ pub mod calendar_context_menu; pub mod calendar_management_modal; pub mod calendar_header; pub mod calendar_list_item; +pub mod color_editor_modal; pub mod context_menu; pub mod create_calendar_modal; pub mod create_event_modal; @@ -24,6 +25,7 @@ pub use calendar_context_menu::CalendarContextMenu; pub use calendar_management_modal::CalendarManagementModal; pub use calendar_header::CalendarHeader; pub use calendar_list_item::CalendarListItem; +pub use color_editor_modal::ColorEditorModal; pub use context_menu::ContextMenu; pub use create_event_modal::CreateEventModal; // Re-export event form types for backwards compatibility diff --git a/frontend/src/components/sidebar.rs b/frontend/src/components/sidebar.rs index 5d36b30..825dc14 100644 --- a/frontend/src/components/sidebar.rs +++ b/frontend/src/components/sidebar.rs @@ -99,6 +99,7 @@ pub struct SidebarProps { pub on_color_change: Callback<(String, String)>, pub on_color_picker_toggle: Callback, pub available_colors: Vec, + pub on_color_editor_open: Callback<(usize, String)>, // (index, current_color) pub refreshing_calendar_id: Option, pub on_calendar_context_menu: Callback<(MouseEvent, String)>, pub on_calendar_visibility_toggle: Callback, @@ -209,6 +210,7 @@ pub fn sidebar(props: &SidebarProps) -> Html { on_color_change={props.on_color_change.clone()} on_color_picker_toggle={props.on_color_picker_toggle.clone()} available_colors={props.available_colors.clone()} + on_color_editor_open={props.on_color_editor_open.clone()} on_context_menu={props.on_calendar_context_menu.clone()} on_visibility_toggle={props.on_calendar_visibility_toggle.clone()} /> @@ -289,6 +291,17 @@ pub fn sidebar(props: &SidebarProps) -> Html { let on_color_select = Callback::from(move |_: MouseEvent| { on_color_change.emit((external_id.clone(), color_str.clone())); }); + + let on_color_right_click = { + let on_color_editor_open = props.on_color_editor_open.clone(); + let color_index = props.available_colors.iter().position(|c| c == color).unwrap_or(0); + let color_str = color.clone(); + Callback::from(move |e: MouseEvent| { + e.prevent_default(); + e.stop_propagation(); + on_color_editor_open.emit((color_index, color_str.clone())); + }) + }; let is_selected = cal.color == *color; @@ -298,6 +311,7 @@ pub fn sidebar(props: &SidebarProps) -> Html { class={if is_selected { "color-option selected" } else { "color-option" }} style={format!("background-color: {}", color)} onclick={on_color_select} + oncontextmenu={on_color_right_click} /> } }).collect::() diff --git a/frontend/styles.css b/frontend/styles.css index 17dae3e..e245a20 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -4186,3 +4186,207 @@ body { z-index: 1; } +/* Color Editor Modal */ +.color-editor-backdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.color-editor-modal { + background: var(--modal-background); + color: var(--modal-text); + border-radius: var(--border-radius-medium); + box-shadow: var(--shadow-lg); + max-width: 400px; + width: 95%; + max-height: 80vh; + overflow-y: auto; + position: relative; + animation: modalAppear 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +.color-editor-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-md); + border-bottom: 1px solid var(--modal-header-border); + background: var(--modal-header-background); + border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; +} + +.color-editor-header h3 { + margin: 0; + font-size: 1.1rem; + font-weight: 600; + color: var(--text-primary); +} + +.close-button { + background: none; + border: none; + font-size: 1.5rem; + color: var(--text-secondary); + cursor: pointer; + padding: var(--spacing-xs); + line-height: 1; + border-radius: var(--border-radius-small); + transition: var(--transition-fast); +} + +.close-button:hover { + background: var(--background-tertiary); + color: var(--text-primary); +} + +.color-editor-content { + padding: var(--spacing-md); +} + +.current-color-preview { + display: flex; + align-items: center; + gap: var(--spacing-md); + margin-bottom: var(--spacing-md); + padding: var(--spacing-md); + background: var(--background-tertiary); + border-radius: var(--border-radius-medium); +} + +.color-preview-large { + width: 48px; + height: 48px; + border-radius: var(--border-radius-medium); + border: 2px solid var(--border-secondary); + flex-shrink: 0; +} + +.color-value { + font-family: monospace; + font-size: 0.9rem; + color: var(--text-secondary); + font-weight: 500; +} + +.color-input-section { + margin-bottom: var(--spacing-lg); +} + +.color-input-section label { + display: block; + margin-bottom: var(--spacing-sm); + font-weight: 500; + color: var(--text-primary); +} + +.color-input-group { + display: flex; + gap: var(--spacing-sm); + align-items: center; +} + +.color-input-group input[type="color"] { + width: 48px; + height: 40px; + border: 1px solid var(--border-secondary); + border-radius: var(--border-radius-small); + cursor: pointer; + background: none; + padding: 0; +} + +.color-text-input { + flex: 1; + padding: var(--spacing-sm) var(--spacing-md); + border: 1px solid var(--border-secondary); + border-radius: var(--border-radius-small); + font-family: monospace; + font-size: 0.9rem; + background: var(--background-secondary); + color: var(--text-primary); + transition: var(--transition-fast); +} + +.color-text-input:focus { + outline: none; + border-color: var(--info-color); + box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.2); +} + +.suggested-colors-section label { + display: block; + margin-bottom: var(--spacing-sm); + font-weight: 500; + color: var(--text-primary); +} + +.suggested-colors-grid { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: var(--spacing-sm); +} + +.suggested-color { + width: 32px; + height: 32px; + border-radius: var(--border-radius-small); + border: 2px solid var(--border-secondary); + cursor: pointer; + transition: var(--transition-fast); +} + +.suggested-color:hover { + transform: scale(1.1); + border-color: var(--text-primary); +} + +.color-editor-footer { + display: flex; + justify-content: flex-end; + gap: var(--spacing-sm); + padding: var(--spacing-md); + border-top: 1px solid var(--modal-header-border); + background: var(--background-tertiary); + border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); +} + +.cancel-button, .save-button { + padding: var(--spacing-sm) var(--spacing-md); + border: 1px solid var(--border-secondary); + border-radius: var(--border-radius-small); + cursor: pointer; + font-size: 0.9rem; + font-weight: 500; + transition: var(--transition-fast); +} + +.cancel-button { + background: var(--background-secondary); + color: var(--text-secondary); +} + +.cancel-button:hover { + background: var(--background-tertiary); + color: var(--text-primary); +} + +.save-button { + background: var(--info-color); + color: white; + border-color: var(--info-color); +} + +.save-button:hover { + background: #138496; + border-color: #138496; +} +