mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move jump-to-date icon left of nav pill, picker opens below

Browse Source 
- Calendar icon is now a standalone button to the left of the << < Today > >> cluster
- Uses its own ref (navDatePickerBtnRef) so SimpleDatePicker anchors and
  opens directly below the icon instead of at the center date display
- Removed separator inside nav pill (no longer needed)

v1.112.1
This commit is contained in:
mARTin-B78 2026-05-29 12:14:34 +02:00
parent 3cb59583ff
commit 4f140baa38
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "my-weekly-todo-list",
"version": "1.112.0",
"version": "1.112.1",
"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": {

25
src/components/WeeklyView.tsx
View File

@ -1261,6 +1261,8 @@ export default function WeeklyView() {
const [isRecurringTasksOpen, setIsRecurringTasksOpen] = useState(false);
const [showDatePicker, setShowDatePicker] = useState(false);
const datePickerBtnRef = useRef<HTMLDivElement>(null);
const [showNavDatePicker, setShowNavDatePicker] = useState(false);
const navDatePickerBtnRef = useRef<HTMLButtonElement>(null);
const [showQuickSettings, setShowQuickSettings] = useState(false);
const [leftRailExpanded, setLeftRailExpanded] = useState(false);
const [flyoutSection, setFlyoutSection] = useState<string | null>(null);
@ -6567,6 +6569,27 @@ export default function WeeklyView() {
</div>
)}
{/* Jump to Date — left of nav, picker opens below */}
<div style={{ position: "relative" }}>
<button
ref={navDatePickerBtnRef}
className="weekly-btn-icon"
onClick={() => setShowNavDatePicker(v => !v)}
title={profile.language === "de" ? "Datum wählen" : "Jump to date"}
>
<Calendar size={17} />
</button>
{showNavDatePicker && !isMobile && (
<SimpleDatePicker
selected={currentWeekStart}
onSelect={(date) => { setCurrentWeekStart(getStartOfWeek(date)); setShowNavDatePicker(false); }}
onClose={() => setShowNavDatePicker(false)}
language={profile.language}
anchorRef={navDatePickerBtnRef}
/>
)}
</div>
{/* Navigation Controls — always visible */}
<div className="flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5">
<button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToPrevWeek} title="Previous Week"><ChevronsLeft size={15} /></button>
@ -6574,8 +6597,6 @@ export default function WeeklyView() {
<button className="px-2 py-1 text-xs font-bold text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded transition-all" onClick={goToToday} title="Go to Today">Today</button>
<button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToNextDay} title="Next Day"><ChevronLeft size={15} className="rotate-180" /></button>
<button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToNextWeek} title="Next Week"><ChevronsLeft size={15} className="rotate-180" /></button>
<div style={{ width: 1, height: 14, background: "var(--line, #e5e7eb)", margin: "0 2px", flexShrink: 0 }} />
<button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={() => setShowDatePicker(true)} title={profile.language === "de" ? "Datum wählen" : "Jump to date"}><Calendar size={15} /></button>
</div>
{/* Always visible: Search, Settings, User */}