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

15
frontend/src/components/calendar_list_item.rs
View File

@@ -9,6 +9,7 @@ pub struct CalendarListItemProps {
pub on_color_change: Callback<(String, String)>, // (calendar_path, color)
pub on_color_picker_toggle: Callback<String>, // calendar_path
pub available_colors: Vec<String>,
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<String>, // 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! {
<div class={class_name}
style={format!("background-color: {}", color)}
onclick={on_color_select}>
onclick={on_color_select}
oncontextmenu={on_color_right_click}>
</div>
}
}).collect::<Html>()

153
frontend/src/components/color_editor_modal.rs Normal file
View File

@@ -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::<HtmlInputElement>() {
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::<web_sys::Element>() {
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! {
<div class="color-editor-backdrop" onclick={on_backdrop_click}>
<div class="color-editor-modal">
<div class="color-editor-header">
<h3>{"Edit Color"}</h3>
<button class="close-button" onclick={Callback::from({
let on_close = props.on_close.clone();
move |_| on_close.emit(())
})}>
{"×"}
</button>
</div>
<div class="color-editor-content">
<div class="current-color-preview">
<div
class="color-preview-large"
style={format!("background-color: {}", *selected_color)}
></div>
<span class="color-value">{&*selected_color}</span>
</div>
<div class="color-input-section">
<label for="color-picker">{"Custom Color:"}</label>
<div class="color-input-group">
<input
type="color"
id="color-picker"
value={(*selected_color).clone()}
oninput={on_color_input.clone()}
/>
<input
type="text"
class="color-text-input"
value={(*selected_color).clone()}
oninput={on_color_input}
placeholder="#000000"
/>
</div>
</div>
<div class="suggested-colors-section">
<label>{"Suggested Colors:"}</label>
<div class="suggested-colors-grid">
{
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! {
<div
class="suggested-color"
style={format!("background-color: {}", color)}
onclick={onclick}
title={color.clone()}
></div>
}
}).collect::<Html>()
}
</div>
</div>
</div>
<div class="color-editor-footer">
<button class="cancel-button" onclick={Callback::from({
let on_close = props.on_close.clone();
move |_| on_close.emit(())
})}>
{"Cancel"}
</button>
<button class="save-button" onclick={on_save_click}>
{"Save"}
</button>
</div>
</div>
</div>
}
}

2
frontend/src/components/mod.rs
View File

@@ -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

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

@@ -99,6 +99,7 @@ pub struct SidebarProps {
pub on_color_change: Callback<(String, String)>,
pub on_color_picker_toggle: Callback<String>,
pub available_colors: Vec<String>,
pub on_color_editor_open: Callback<(usize, String)>, // (index, current_color)
pub refreshing_calendar_id: Option<i32>,
pub on_calendar_context_menu: Callback<(MouseEvent, String)>,
pub on_calendar_visibility_toggle: Callback<String>,
@@ -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::<Html>()

204
frontend/styles.css
View File

@@ -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;
}