diff --git a/src/app/globals.css b/src/app/globals.css index 6ab3dc5..cc51ad6 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -683,14 +683,20 @@ h3 { padding-top: 2px; /* Align with icons */ } -/* Task Actions Visibility */ -.weekly-task-item .task-actions { +/* Task Actions Visibility - Unified for Weekly and Time Grid */ +.weekly-task-item .task-actions, +.time-slot-task .task-actions { opacity: 0; - transition: opacity 0.2s ease; + pointer-events: none; + transition: opacity 0.2s ease, visibility 0.2s; + visibility: hidden; } -.weekly-task-item:hover .task-actions { +.weekly-task-item:hover .task-actions, +.time-slot-task:hover .task-actions { opacity: 1; + pointer-events: auto; + visibility: visible; } .weekly-task-text.completed { @@ -784,6 +790,13 @@ h3 { display: flex; align-items: center; gap: 2px; + position: absolute; + right: 0; + top: 0; + bottom: 0; + z-index: 10; + padding-left: 8px; + padding-right: 4px; } .task-action-btn { @@ -791,19 +804,24 @@ h3 { border: none; cursor: pointer; padding: 2px; - width: 20px; - height: 20px; + width: 22px; + height: 22px; color: var(--weekly-text-light); border-radius: 4px; display: flex; align-items: center; justify-content: center; - transition: all 0.15s; + transition: all 0.2s ease; } .task-action-btn:hover { + background-color: rgba(0,0,0,0.05); color: var(--weekly-text); - background: rgba(0,0,0,0.08); +} + +.dark .task-action-btn:hover { + background-color: rgba(255,255,255,0.1); + color: white; } /* Specific button styles */ @@ -2061,29 +2079,7 @@ h3 { animation: slideInFromLeft 0.5s ease-out forwards; } -/* Fix 2: Task Hover Actions */ -.weekly-task-item, -.time-slot-task { - /* Ensure positioning context for absolute actions if needed, though flex is used */ - position: relative; -} - -.weekly-task-item .task-actions, -.time-slot-task .task-actions { - display: flex; - align-items: center; - gap: 2px; - opacity: 0; - transition: opacity 0.2s ease; - margin-left: auto; - /* Push to far right */ - padding-left: 8px; -} - -.weekly-task-item:hover .task-actions, -.time-slot-task:hover .task-actions { - opacity: 1; -} +/* Consolidate Task Hover Actions - Removed redundant entries */ .task-action-btn { background: none; diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx index 0a0fb7f..dbc8a9e 100644 --- a/src/components/WeeklyView.tsx +++ b/src/components/WeeklyView.tsx @@ -85,6 +85,8 @@ const AVAILABLE_FONTS = [ { name: 'Playfair Display', value: 'Playfair Display' }, { name: 'Merriweather', value: 'Merriweather' }, { name: 'Nunito', value: 'Nunito' }, + { name: 'Dancing Script', value: 'Dancing Script' }, + { name: 'Pacifico', value: 'Pacifico' }, ]; const FONT_WEIGHTS = [ @@ -94,6 +96,29 @@ const FONT_WEIGHTS = [ { name: 'Bold', value: '700' }, ]; +// Helper to load Google Fonts +const useGoogleFonts = (fonts: string[]) => { + useEffect(() => { + if (typeof window === 'undefined') return; + const fontsToLoad = fonts.filter(f => f && f !== 'Inter'); + if (fontsToLoad.length === 0) return; + + const linkId = 'google-fonts-link'; + let link = document.getElementById(linkId) as HTMLLinkElement; + + const fontQuery = fontsToLoad.map(f => f.replace(' ', '+')).join('|'); + const href = `https://fonts.googleapis.com/css2?family=${fontsToLoad.map(f => `${f.replace(' ', '+')}:wght@300;400;500;700`).join('&family=')}&display=swap`; + + if (!link) { + link = document.createElement('link'); + link.id = linkId; + link.rel = 'stylesheet'; + document.head.appendChild(link); + } + link.href = href; + }, [fonts]); +}; + // Translations const translations: Record = { en: { @@ -323,7 +348,8 @@ export default function WeeklyView() { const [somedayLists, setSomedayLists] = useState([]); const [editingTaskId, setEditingTaskId] = useState(null); const [showSettings, setShowSettings] = useState(false); - const [showDatePicker, setShowDatePicker] = useState(false); + const [showSummary, setShowSummary] = useState(false); + const [isAddingSomedayList, setIsAddingSomedayList] = useState(false); const [newSomedayListName, setNewSomedayListName] = useState(''); const [language, setLanguage] = useState('de'); @@ -365,30 +391,10 @@ export default function WeeklyView() { const [bodyFont, setBodyFont] = useState('Inter'); const [fontWeight, setFontWeight] = useState('400'); - // Load Google Fonts - useEffect(() => { - const fontsToLoad = new Set([headlineFont, bodyFont]); - fontsToLoad.delete('Inter'); // Inter is likely already loaded or default + // Load fonts + useGoogleFonts([headlineFont, bodyFont, 'Dancing Script', 'Pacifico']); - if (fontsToLoad.size === 0) return; - - const linkId = 'google-fonts-dynamic'; - let link = document.getElementById(linkId) as HTMLLinkElement; - - if (!link) { - link = document.createElement('link'); - link.id = linkId; - link.rel = 'stylesheet'; - document.head.appendChild(link); - } - - // Simplification: Load all needed weights for selected fonts - const families = Array.from(fontsToLoad).map(font => - `${font.replace(/\s+/g, '+')}:wght@300;400;500;700` - ).join('&'); - - link.href = `https://fonts.googleapis.com/css2?family=${families}&display=swap`; - }, [headlineFont, bodyFont]); + // Dynamic font loading is handled by useGoogleFonts hook call above // Calendar Event Modal State const [calendarEventModal, setCalendarEventModal] = useState<{ @@ -3021,7 +3027,7 @@ function TaskItem({ task, isEditing, onToggle, onEdit, onUpdate, onDelete, onNot {task.title} -
+
{/* Edit */}
@@ -3861,10 +3870,10 @@ function SettingsSidebar({ value={profile.bodyFont || 'Inter'} onChange={(e) => setProfile({ ...profile, bodyFont: e.target.value })} className="weekly-input" - style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }} + style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px', fontFamily: profile.bodyFont || 'Inter' }} > {AVAILABLE_FONTS.map(font => ( - + ))}