fix(rail): collapse left rail icons to fit screens < 960px height
- Nav arrows (5 icons) → single ArrowLeftRight flyout with prev/next week/day + today - Undo/Redo/Refresh/Print (4 icons) → single Undo2 history flyout - Removed duplicate standalone dark mode toggle (already in Appearance flyout) - Same flyout sections added to mobile icon rail - Nav flyout also added to mobile rail v1.110.6
This commit is contained in:
parent
73a657ebff
commit
75bb3301f9
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "my-weekly-todo-list",
|
||||
"version": "1.110.5",
|
||||
"version": "1.110.6",
|
||||
"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": {
|
||||
|
||||
@ -5906,12 +5906,8 @@ export default function WeeklyView() {
|
||||
{/* Expand toggle */}
|
||||
<button onClick={() => setLeftRailExpanded(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Erweitern" : "Expand"}><PanelLeftOpen size={16} /></button>
|
||||
{railSep}
|
||||
{/* Navigation */}
|
||||
<button onClick={goToPrevWeek} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorherige Woche" : "Previous Week"}><ChevronsLeft size={15} /></button>
|
||||
<button onClick={goToPrevDay} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Vorheriger Tag" : "Previous Day"}><ChevronLeft size={15} /></button>
|
||||
<button onClick={goToToday} style={{ ...railIconBtnStyle, fontSize: "0.55rem", fontWeight: 800, letterSpacing: "0.05em" }} title="Today">{profile.language === "de" ? "HEUTE" : "TODAY"}</button>
|
||||
<button onClick={goToNextDay} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächster Tag" : "Next Day"}><ChevronRight size={15} /></button>
|
||||
<button onClick={goToNextWeek} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Nächste Woche" : "Next Week"}><ChevronsRight size={15} /></button>
|
||||
{/* Navigation flyout */}
|
||||
<button style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Navigation" : "Navigation"} onMouseEnter={(e) => openFlyout("nav", e)} onMouseLeave={closeFlyoutDelayed}><ArrowLeftRight size={15} /></button>
|
||||
{railSep}
|
||||
{/* View flyout */}
|
||||
<button style={{ ...railIconBtnStyle, color: "var(--accent)" }} title={profile.language === "de" ? "Ansicht" : "View"} onMouseEnter={(e) => openFlyout("view", e)} onMouseLeave={closeFlyoutDelayed}>
|
||||
@ -5936,12 +5932,8 @@ export default function WeeklyView() {
|
||||
{/* Appearance flyout */}
|
||||
<button style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Darstellung" : "Appearance"} onMouseEnter={(e) => openFlyout("display", e)} onMouseLeave={closeFlyoutDelayed}>{darkMode ? <Moon size={15} /> : <Sun size={15} />}</button>
|
||||
{railSep}
|
||||
{/* History & Utilities */}
|
||||
<button onClick={handleUndo} disabled={undoCount === 0} style={{ ...railIconBtnStyle, opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={15} /></button>
|
||||
<button onClick={handleRedo} disabled={redoCount === 0} style={{ ...railIconBtnStyle, opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={15} /></button>
|
||||
<button onClick={() => { fetchCalendarEvents(true); fetchTasks(); }} style={{ ...railIconBtnStyle }} title="Refresh"><RefreshCcw size={15} /></button>
|
||||
<button onClick={() => setShowWeekPrintModal(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Drucken" : "Print"}><Printer size={15} /></button>
|
||||
<button onClick={() => setDarkMode(!darkMode)} style={{ ...railIconBtnStyle }} title={darkMode ? "Light Mode" : "Dark Mode"}>{darkMode ? <Sun size={15} /> : <Moon size={15} />}</button>
|
||||
{/* History & Utilities flyout */}
|
||||
<button style={{ ...railIconBtnStyle, opacity: undoCount === 0 && redoCount === 0 ? 0.5 : 1 }} title={profile.language === "de" ? "Verlauf" : "History"} onMouseEnter={(e) => openFlyout("history", e)} onMouseLeave={closeFlyoutDelayed}><Undo2 size={15} /></button>
|
||||
<div style={{ flex: 1 }} />
|
||||
{railSep}
|
||||
{/* Settings (cogwheel) + User menu at bottom */}
|
||||
@ -5980,6 +5972,29 @@ export default function WeeklyView() {
|
||||
{/* Flyout panels — rendered outside the rail so they can overflow */}
|
||||
{!leftRailExpanded && flyoutSection && (
|
||||
<div style={{ ...flyoutPanelStyle }} onMouseEnter={keepFlyoutOpen} onMouseLeave={closeFlyoutDelayed}>
|
||||
{flyoutSection === "nav" && (
|
||||
<>
|
||||
<div style={flyoutLabelStyle}>{profile.language === "de" ? "Navigation" : "Navigation"}</div>
|
||||
<div style={{ display: "flex", gap: "4px" }}>
|
||||
<button onClick={() => { goToPrevWeek(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Vorherige Woche" : "Prev Week"}><ChevronsLeft size={14} /></button>
|
||||
<button onClick={() => { goToPrevDay(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Vorheriger Tag" : "Prev Day"}><ChevronLeft size={14} /></button>
|
||||
<button onClick={() => { goToToday(); setFlyoutSection(null); }} style={{ flex: 2, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#374151" : "var(--ink)", color: "#fff", fontSize: "0.55rem", fontWeight: 800, letterSpacing: "0.05em" }} title="Today">{profile.language === "de" ? "HEUTE" : "TODAY"}</button>
|
||||
<button onClick={() => { goToNextDay(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Nächster Tag" : "Next Day"}><ChevronRight size={14} /></button>
|
||||
<button onClick={() => { goToNextWeek(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Nächste Woche" : "Next Week"}><ChevronsRight size={14} /></button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{flyoutSection === "history" && (
|
||||
<>
|
||||
<div style={flyoutLabelStyle}>{profile.language === "de" ? "Verlauf" : "History"}</div>
|
||||
<div style={{ display: "flex", gap: "4px" }}>
|
||||
<button onClick={handleUndo} disabled={undoCount === 0} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: undoCount === 0 ? "default" : "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center", opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={14} /></button>
|
||||
<button onClick={handleRedo} disabled={redoCount === 0} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: redoCount === 0 ? "default" : "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center", opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={14} /></button>
|
||||
<button onClick={() => { fetchCalendarEvents(true); fetchTasks(); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title="Refresh"><RefreshCcw size={14} /></button>
|
||||
<button onClick={() => { setShowWeekPrintModal(true); setFlyoutSection(null); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Drucken" : "Print"}><Printer size={14} /></button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{flyoutSection === "view" && (
|
||||
<>
|
||||
<div style={flyoutLabelStyle}>{profile.language === "de" ? "Ansicht" : "View"}</div>
|
||||
@ -6134,6 +6149,9 @@ export default function WeeklyView() {
|
||||
{/* Collapse — same icon as header toggle */}
|
||||
<button className="mobile-rail-btn" onClick={() => { setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Close"><PanelLeftOpen size={16} /></button>
|
||||
{railSep}
|
||||
{/* Navigation flyout */}
|
||||
<button className="mobile-rail-btn" style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Navigation" : "Navigation"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "nav" ? null : "nav"); }}><ArrowLeftRight size={15} /></button>
|
||||
{railSep}
|
||||
{/* View flyout */}
|
||||
<button className="mobile-rail-btn" style={{ ...railIconBtnStyle, color: "var(--accent)" }} title={profile.language === "de" ? "Ansicht" : "View"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "view" ? null : "view"); }}>
|
||||
{profile.viewStyle === "simple" ? <Calendar size={15} /> : profile.viewStyle === "calendar" ? <CalendarDays size={15} /> : profile.viewStyle === "list" ? <ListTodo size={15} /> : profile.viewStyle === "kanban" ? <Kanban size={15} /> : <Target size={15} />}
|
||||
@ -6157,10 +6175,8 @@ export default function WeeklyView() {
|
||||
{/* Appearance flyout */}
|
||||
<button className="mobile-rail-btn" style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Darstellung" : "Appearance"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "display" ? null : "display"); }}>{darkMode ? <Moon size={15} /> : <Sun size={15} />}</button>
|
||||
{railSep}
|
||||
{/* History & Utilities */}
|
||||
<button className="mobile-rail-btn" onClick={handleUndo} disabled={undoCount === 0} style={{ ...railIconBtnStyle, opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={15} /></button>
|
||||
<button className="mobile-rail-btn" onClick={handleRedo} disabled={redoCount === 0} style={{ ...railIconBtnStyle, opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={15} /></button>
|
||||
<button className="mobile-rail-btn" onClick={() => { fetchCalendarEvents(true); fetchTasks(); setShowMobileRail(false); setFlyoutSection(null); }} style={{ ...railIconBtnStyle }} title="Refresh"><RefreshCcw size={15} /></button>
|
||||
{/* History & Utilities flyout */}
|
||||
<button className="mobile-rail-btn" style={{ ...railIconBtnStyle, opacity: undoCount === 0 && redoCount === 0 ? 0.5 : 1 }} title={profile.language === "de" ? "Verlauf" : "History"} onClick={(e) => { const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); setFlyoutY(rect.top); setFlyoutSection(flyoutSection === "history" ? null : "history"); }}><Undo2 size={15} /></button>
|
||||
<button className="mobile-rail-btn" onClick={() => setDarkMode(!darkMode)} style={{ ...railIconBtnStyle }} title={darkMode ? "Light Mode" : "Dark Mode"}>{darkMode ? <Sun size={15} /> : <Moon size={15} />}</button>
|
||||
<div style={{ flex: 1 }} />
|
||||
{railSep}
|
||||
@ -6174,6 +6190,29 @@ export default function WeeklyView() {
|
||||
<>
|
||||
<div onClick={() => setFlyoutSection(null)} style={{ position: "fixed", inset: 0, zIndex: 202 }} />
|
||||
<div style={{ ...flyoutPanelStyle, left: "68px", zIndex: 203 }} onClick={(e) => e.stopPropagation()}>
|
||||
{flyoutSection === "nav" && (
|
||||
<>
|
||||
<div style={flyoutLabelStyle}>{profile.language === "de" ? "Navigation" : "Navigation"}</div>
|
||||
<div style={{ display: "flex", gap: "4px" }}>
|
||||
<button onClick={() => { goToPrevWeek(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Vorherige Woche" : "Prev Week"}><ChevronsLeft size={14} /></button>
|
||||
<button onClick={() => { goToPrevDay(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Vorheriger Tag" : "Prev Day"}><ChevronLeft size={14} /></button>
|
||||
<button onClick={() => { goToToday(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 2, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#374151" : "var(--ink)", color: "#fff", fontSize: "0.55rem", fontWeight: 800, letterSpacing: "0.05em" }} title="Today">{profile.language === "de" ? "HEUTE" : "TODAY"}</button>
|
||||
<button onClick={() => { goToNextDay(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Nächster Tag" : "Next Day"}><ChevronRight size={14} /></button>
|
||||
<button onClick={() => { goToNextWeek(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Nächste Woche" : "Next Week"}><ChevronsRight size={14} /></button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{flyoutSection === "history" && (
|
||||
<>
|
||||
<div style={flyoutLabelStyle}>{profile.language === "de" ? "Verlauf" : "History"}</div>
|
||||
<div style={{ display: "flex", gap: "4px" }}>
|
||||
<button onClick={handleUndo} disabled={undoCount === 0} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: undoCount === 0 ? "default" : "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center", opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={14} /></button>
|
||||
<button onClick={handleRedo} disabled={redoCount === 0} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: redoCount === 0 ? "default" : "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center", opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={14} /></button>
|
||||
<button onClick={() => { fetchCalendarEvents(true); fetchTasks(); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title="Refresh"><RefreshCcw size={14} /></button>
|
||||
<button onClick={() => { setShowWeekPrintModal(true); setFlyoutSection(null); setShowMobileRail(false); }} style={{ flex: 1, padding: "6px 0", borderRadius: "6px", border: "none", cursor: "pointer", background: darkMode ? "#1f2937" : "#e5e7eb", color: darkMode ? "#9ca3af" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center" }} title={profile.language === "de" ? "Drucken" : "Print"}><Printer size={14} /></button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{flyoutSection === "view" && (
|
||||
<>
|
||||
<div style={flyoutLabelStyle}>{profile.language === "de" ? "Ansicht" : "View"}</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user