diff --git a/package.json b/package.json index e19aafb..f4902dc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "my-weekly-todo-list", - "version": "1.108.2", + "version": "1.108.3", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "main": "index.js", "scripts": { diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx index d76e0b3..a4d9ef7 100644 --- a/src/components/WeeklyView.tsx +++ b/src/components/WeeklyView.tsx @@ -723,6 +723,7 @@ export default function WeeklyView() { const [menuOpenListId, setMenuOpenListId] = useState(null); // Punkt 7+8: per-list color/icon edit popover, and per-tab settings popover const [editingListVisualsId, setEditingListVisualsId] = useState(null); + const [editingListVisualsRect, setEditingListVisualsRect] = useState(null); const [editingTabVisualsName, setEditingTabVisualsName] = useState(null); const [editingTabVisualsRect, setEditingTabVisualsRect] = useState(null); const [activeSomedayTab, setActiveSomedayTab] = useState(null); @@ -8468,7 +8469,7 @@ export default function WeeklyView() { {/* Edit style */} - @@ -8513,6 +8514,7 @@ export default function WeeklyView() { language={profile.language} onChange={(updates) => updateListVisuals(list.id, updates)} onClose={() => setEditingListVisualsId(null)} + anchorRect={editingListVisualsRect} /> )} @@ -10917,31 +10919,37 @@ function ListVisualsPopover({ language, onChange, onClose, + anchorRect, }: { list: { id: string; title: string; color?: string | null; icon?: string | null }; darkMode: boolean; language: string; + anchorRect?: DOMRect | null; onChange: (updates: { color?: string | null; icon?: string | null }) => void; onClose: () => void; }) { const [iconPickerOpen, setIconPickerOpen] = useState(false); const containerRef = useRef(null); + const onCloseRef = useRef(onClose); + useEffect(() => { onCloseRef.current = onClose; }, [onClose]); useEffect(() => { const onDoc = (e: MouseEvent) => { - if (containerRef.current && !containerRef.current.contains(e.target as Node)) onClose(); + if (containerRef.current && !containerRef.current.contains(e.target as Node)) onCloseRef.current(); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); - }, [onClose]); + }, []); const de = language === "de"; + const top = anchorRect ? anchorRect.top + 32 : -9999; + const left = anchorRect ? anchorRect.left + 4 : -9999; return (
{iconPickerOpen && ( -
+
{ onChange({ icon: name }); setIconPickerOpen(false); }}