fix: header readability, icon consistency, settings menu position toggle, account tab
- Remove hover blur/opacity on header center section when left rail is active (group-hover:opacity-20 blur only applies in top-toolbar mode) - Add min-height to desktop header so it doesn't collapse when both left/right sections are hidden in left-rail mode - User icon in left rail now opens Settings on the Account tab directly - Add Menu Position toggle (Left/Top) to Settings > General tab so users can find and change toolbar layout from the settings menu - Replace FolderPlus with Briefcase icon for Projects in left rail to match the Settings sidebar's Projects tab icon v1.106.4
This commit is contained in:
parent
9ef2b9fe5f
commit
2f29355bb9
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "my-weekly-todo-list",
|
||||
"version": "1.106.3",
|
||||
"version": "1.106.4",
|
||||
"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": {
|
||||
|
||||
@ -1013,6 +1013,39 @@ function SettingsSidebar({
|
||||
>
|
||||
{/* ── General settings (not view-specific) ── */}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "12px", paddingBottom: "16px", borderBottom: "1px solid var(--weekly-border, #e5e7eb)" }}>
|
||||
{/* Menu Position */}
|
||||
<div>
|
||||
<label style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--weekly-settings-label)" }}>
|
||||
{profile.language === "de" ? "Menüposition" : "Menu Position"}
|
||||
</label>
|
||||
<div className="mt-1 flex gap-2">
|
||||
{[
|
||||
{ value: "left", label: profile.language === "de" ? "Links (Seitenleiste)" : "Left (Sidebar)" },
|
||||
{ value: "top", label: profile.language === "de" ? "Oben (Kopfleiste)" : "Top (Header)" },
|
||||
].map(({ value, label }) => (
|
||||
<button
|
||||
key={value}
|
||||
onClick={() => {
|
||||
setProfile((p: any) => ({ ...p, menuPosition: value }));
|
||||
saveSetting("menuPosition", value);
|
||||
}}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: "6px 10px",
|
||||
fontSize: "0.8rem",
|
||||
borderRadius: "6px",
|
||||
border: "1px solid var(--weekly-border, #e5e7eb)",
|
||||
cursor: "pointer",
|
||||
fontWeight: (profile.menuPosition || "left") === value ? 700 : 400,
|
||||
background: (profile.menuPosition || "left") === value ? "var(--weekly-text, #333)" : "transparent",
|
||||
color: (profile.menuPosition || "left") === value ? "#fff" : "var(--weekly-settings-label)",
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Header Display */}
|
||||
<div>
|
||||
<label style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--weekly-settings-label)" }}>
|
||||
|
||||
@ -93,6 +93,7 @@ import {
|
||||
Printer,
|
||||
Star,
|
||||
LogOut,
|
||||
Briefcase,
|
||||
} from "lucide-react";
|
||||
|
||||
const stripHtml = (html: string) => html.replace(/<[^>]*>/g, '').trim();
|
||||
@ -5917,7 +5918,7 @@ export default function WeeklyView() {
|
||||
<button onClick={() => setIsSearchOpen(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Suche" : "Search"}><Search size={15} /></button>
|
||||
<button onClick={() => setShowDatePicker(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Datum wählen" : "Jump to date"}><CalendarDays size={15} /></button>
|
||||
<button onClick={() => { const now = new Date(); setCalendarEventModal({ isOpen: true, event: undefined, initialDate: now, initialStartTime: `${String(now.getHours()).padStart(2, "0")}:00` }); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Kalendereintrag" : "Calendar Event"}><Plus size={15} /></button>
|
||||
<button onClick={() => setShowProjectsSidebar(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Projekte" : "Projects"}><FolderPlus size={15} /></button>
|
||||
<button onClick={() => setShowProjectsSidebar(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Projekte" : "Projects"}><Briefcase size={15} /></button>
|
||||
<button onClick={() => setIsRecurringTasksOpen(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Wiederkehrend" : "Recurring"}><Repeat size={15} /></button>
|
||||
<button onClick={() => { const nv = !profile.showNextTask; setShowNextTask(nv); saveSetting("showNextTask", nv); }} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Ziel" : "Goal"}>{profile.showNextTask ? <Play size={15} /> : <Target size={15} />}</button>
|
||||
<button onClick={() => setShowFocusMode(true)} style={{ ...railIconBtnStyle }} title={profile.language === "de" ? "Fokus" : "Focus"}><Zap size={15} /></button>
|
||||
@ -5947,7 +5948,7 @@ export default function WeeklyView() {
|
||||
<p style={{ fontSize: "0.8rem", fontWeight: 600, color: darkMode ? "#e5e7eb" : "#374151", margin: 0 }}>{profile.language === "de" ? "Angemeldet als" : "Signed in as"}</p>
|
||||
<p style={{ fontSize: "0.75rem", color: darkMode ? "#9ca3af" : "#6b7280", margin: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{session?.user?.email || "User"}</p>
|
||||
</div>
|
||||
<button onClick={() => { setShowSettings(true); setShowRailUserMenu(false); }} style={{ width: "100%", textAlign: "left", padding: "8px 14px", fontSize: "0.85rem", color: darkMode ? "#e5e7eb" : "#374151", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: "8px" }}
|
||||
<button onClick={() => { setActiveTab("account"); setShowSettings(true); setShowRailUserMenu(false); }} style={{ width: "100%", textAlign: "left", padding: "8px 14px", fontSize: "0.85rem", color: darkMode ? "#e5e7eb" : "#374151", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: "8px" }}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = darkMode ? "#374151" : "#f3f4f6")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = "none")}>
|
||||
<Settings size={15} style={{ opacity: 0.5 }} />
|
||||
@ -6107,7 +6108,7 @@ export default function WeeklyView() {
|
||||
)}
|
||||
|
||||
{/* Desktop Header: Left, Center, Right */}
|
||||
<header className="group relative flex items-center justify-between w-full px-4 py-1.5 border-b bg-white dark:bg-gray-900 dark:text-white transition-colors duration-200" style={isMobile ? { display: "none" } : { borderBottomColor: 'var(--line)' }}>
|
||||
<header className="group relative flex items-center justify-between w-full px-4 py-1.5 border-b bg-white dark:bg-gray-900 dark:text-white transition-colors duration-200" style={isMobile ? { display: "none" } : { borderBottomColor: 'var(--line)', minHeight: useLeftRail ? "44px" : undefined }}>
|
||||
{/* LEFT SECTION: View Switcher, Days, Hours, Slot Duration — only shown in top-toolbar mode */}
|
||||
<div className="weekly-header-controls flex items-center gap-4" style={{ zIndex: 1, display: useLeftRail ? "none" : undefined, ...(showIntroHints ? { opacity: 1 } : {}) }}>
|
||||
{/* Quick-settings button (top mode only) */}
|
||||
@ -6206,7 +6207,7 @@ export default function WeeklyView() {
|
||||
</div>
|
||||
|
||||
{/* CENTER SECTION: Week/Year, Goal, Focus Mode - Reveal on Hover */}
|
||||
<div className="flex items-center justify-center gap-6 absolute left-1/2 transform -translate-x-1/2 z-0 transition-all duration-300 group-hover:opacity-20 group-hover:blur-[2px]">
|
||||
<div className={`flex items-center justify-center gap-6 absolute left-1/2 transform -translate-x-1/2 z-0 transition-all duration-300 ${useLeftRail ? "" : "group-hover:opacity-20 group-hover:blur-[2px]"}`}>
|
||||
{/* Week & Year */}
|
||||
<div className="whitespace-nowrap flex items-center gap-2">
|
||||
{/* Clickable Week & Year */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user