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

Fix calendar management modal color picker issues

Browse Source 
- Fix z-index issue by creating separate CSS classes for inline vs dropdown color pickers
- Unify CalDAV and external calendar color pickers to use same grid interface
- Improve color picker styling with 4x4 grid layout for 16 colors
- Enhance color option appearance with proper border centering and sizing
- Replace native HTML color input with consistent predefined color grid
- Add visual improvements: larger swatches, better hover effects, checkmark selection

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-05 11:58:35 -04:00
parent aa7a15e6fa
commit 0de2eee626
3 changed files with 75 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,7 +55,7 @@ pub fn calendar_list_item(props: &CalendarListItemProps) -> Html {
{
if props.color_picker_open {
html! {
<div class="color-picker">
<div class="color-picker-dropdown">
{
props.available_colors.iter().map(|color| {
let color_str = color.clone();

47
frontend/src/components/calendar_management_modal.rs
View File

@@ -32,7 +32,7 @@ pub fn calendar_management_modal(props: &CalendarManagementModalProps) -> Html {
// External Calendar state
let external_name_ref = use_node_ref();
let external_url_ref = use_node_ref();
let external_color_ref = use_node_ref();
let external_selected_color = use_state(|| Some("#4285f4".to_string()));
let external_is_loading = use_state(|| false);
let external_error_message = use_state(|| None::<String>);
@@ -45,6 +45,7 @@ pub fn calendar_management_modal(props: &CalendarManagementModalProps) -> Html {
let is_creating = is_creating.clone();
let external_is_loading = external_is_loading.clone();
let external_error_message = external_error_message.clone();
let external_selected_color = external_selected_color.clone();
let active_tab = active_tab.clone();
move |is_open| {
@@ -57,6 +58,7 @@ pub fn calendar_management_modal(props: &CalendarManagementModalProps) -> Html {
is_creating.set(false);
external_is_loading.set(false);
external_error_message.set(None);
external_selected_color.set(Some("#4285f4".to_string()));
active_tab.set(CalendarTab::Create);
}
}
@@ -105,6 +107,13 @@ pub fn calendar_management_modal(props: &CalendarManagementModalProps) -> Html {
})
};
let on_external_color_select = {
let external_selected_color = external_selected_color.clone();
Callback::from(move |color: String| {
external_selected_color.set(Some(color));
})
};
let on_create_submit = {
let calendar_name = calendar_name.clone();
let description = description.clone();
@@ -139,7 +148,7 @@ pub fn calendar_management_modal(props: &CalendarManagementModalProps) -> Html {
let on_external_submit = {
let external_name_ref = external_name_ref.clone();
let external_url_ref = external_url_ref.clone();
let external_color_ref = external_color_ref.clone();
let external_selected_color = external_selected_color.clone();
let external_is_loading = external_is_loading.clone();
let external_error_message = external_error_message.clone();
let on_close = props.on_close.clone();
@@ -162,10 +171,7 @@ pub fn calendar_management_modal(props: &CalendarManagementModalProps) -> Html {
.trim()
.to_string();
let color = external_color_ref
.cast::<HtmlInputElement>()
.map(|input| input.value())
.unwrap_or_else(|| "#4285f4".to_string());
let color = (*external_selected_color).clone().unwrap_or_else(|| "#4285f4".to_string());
if name.is_empty() || url.is_empty() {
external_error_message.set(Some("Name and URL are required".to_string()));
@@ -348,14 +354,27 @@ pub fn calendar_management_modal(props: &CalendarManagementModalProps) -> Html {
</div>
<div class="form-group">
<label for="external-color">{"Calendar Color"}</label>
<input
type="color"
id="external-color"
ref={external_color_ref.clone()}
value="#4285f4"
disabled={*external_is_loading}
/>
<label>{"Calendar Color"}</label>
<div class="color-picker">
{
props.available_colors.iter().map(|color| {
let is_selected = external_selected_color.as_ref() == Some(color);
let color_clone = color.clone();
let on_external_color_select = on_external_color_select.clone();
html! {
<div
key={color.clone()}
class={if is_selected { "color-option selected" } else { "color-option" }}
style={format!("background-color: {}", color)}
onclick={Callback::from(move |_: MouseEvent| {
on_external_color_select.emit(color_clone.clone());
})}
/>
}
}).collect::<Html>()
}
</div>
</div>
{