feat: move jump-to-date icon left of nav pill, picker opens below
- 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:
parent
3cb59583ff
commit
4f140baa38
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "my-weekly-todo-list",
|
"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",
|
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -1261,6 +1261,8 @@ export default function WeeklyView() {
|
|||||||
const [isRecurringTasksOpen, setIsRecurringTasksOpen] = useState(false);
|
const [isRecurringTasksOpen, setIsRecurringTasksOpen] = useState(false);
|
||||||
const [showDatePicker, setShowDatePicker] = useState(false);
|
const [showDatePicker, setShowDatePicker] = useState(false);
|
||||||
const datePickerBtnRef = useRef<HTMLDivElement>(null);
|
const datePickerBtnRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [showNavDatePicker, setShowNavDatePicker] = useState(false);
|
||||||
|
const navDatePickerBtnRef = useRef<HTMLButtonElement>(null);
|
||||||
const [showQuickSettings, setShowQuickSettings] = useState(false);
|
const [showQuickSettings, setShowQuickSettings] = useState(false);
|
||||||
const [leftRailExpanded, setLeftRailExpanded] = useState(false);
|
const [leftRailExpanded, setLeftRailExpanded] = useState(false);
|
||||||
const [flyoutSection, setFlyoutSection] = useState<string | null>(null);
|
const [flyoutSection, setFlyoutSection] = useState<string | null>(null);
|
||||||
@ -6567,6 +6569,27 @@ export default function WeeklyView() {
|
|||||||
</div>
|
</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 */}
|
{/* Navigation Controls — always visible */}
|
||||||
<div className="flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5">
|
<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>
|
<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="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={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>
|
<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>
|
</div>
|
||||||
|
|
||||||
{/* Always visible: Search, Settings, User */}
|
{/* Always visible: Search, Settings, User */}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user