Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-24 00:59:55 +01:00
Code Issues Packages Projects Releases Activity

chore(react/launch_bar): reintroduce day highlighting

Browse Source
This commit is contained in:
Elian Doran
2025-12-05 08:56:35 +02:00
parent 4571b95683
commit 18f9ebbc4f
3 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/widgets/buttons/calendar.ts
View File

@@ -147,9 +147,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
$newDay.addClass("calendar-date-exists").attr("data-href", `#root/${dateNoteId}`);
}
if (this.date.isSame(this.activeDate, 'day')) $newDay.addClass("calendar-date-active");
if (this.date.isSame(this.todaysDate, 'day')) $newDay.addClass("calendar-date-today");
$newDay.append($date);
return $newDay;
}

34
apps/client/src/widgets/launch_bar/Calendar.tsx
View File

@@ -25,10 +25,17 @@ interface DateRangeInfo {
dates: Dayjs[];
}
export default function Calendar({ date }: { date: Dayjs }) {
export interface CalendarArgs {
date: Dayjs;
todaysDate: Dayjs;
activeDate: Dayjs | null;
}
export default function Calendar(args: CalendarArgs) {
const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
const date = args.date;
const month = date.format('YYYY-MM');
const firstDay = date.startOf('month');
const firstDayISO = firstDay.isoWeekday();
@@ -38,9 +45,9 @@ export default function Calendar({ date }: { date: Dayjs }) {
<>
<CalendarWeekHeader rawFirstDayOfWeek={rawFirstDayOfWeek} />
<div className="calendar-body" data-calendar-area="month">
{firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
<CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
<NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
{firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays info={monthInfo.prevMonth} {...args} />}
<CurrentMonthDays firstDayOfWeekISO={firstDayOfWeekISO} {...args} />
<NextMonthDays dates={monthInfo.nextMonth.dates} {...args} />
</div>
</>
)
@@ -58,7 +65,7 @@ function CalendarWeekHeader({ rawFirstDayOfWeek }: { rawFirstDayOfWeek: number }
)
}
function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs, info: DateRangeInfo }) {
function PreviousMonthDays({ date, info: { dates, weekNumbers }, ...args }: { date: Dayjs, info: DateRangeInfo } & CalendarArgs) {
const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
@@ -69,12 +76,12 @@ function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs
return (
<>
<CalendarWeek weekNumber={weekNumbers[0]} />
{dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />)}
{dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" {...args} />)}
</>
)
}
function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
function CurrentMonthDays({ date, firstDayOfWeekISO, ...args }: { date: Dayjs, firstDayOfWeekISO: number } & CalendarArgs) {
let dateCursor = date;
const currentMonth = date.month();
const items: VNode[] = [];
@@ -84,14 +91,14 @@ function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOf
items.push(<CalendarWeek weekNumber={weekNumber} />)
}
items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} />)
items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} {...args} />)
dateCursor = dateCursor.add(1, "day");
}
return items;
}
function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
function NextMonthDays({ date, dates, ...args }: { date: Dayjs, dates: Dayjs[] } & CalendarArgs) {
const nextMonth = date.add(1, 'month').format('YYYY-MM');
const [ dateNotesForNextMonth, setDateNotesForNextMonth ] = useState<DateNotesForMonth>();
@@ -100,14 +107,17 @@ function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
}, [ date ]);
return dates.map(date => (
<CalendarDay date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" />
<CalendarDay date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" {...args} />
));
}
function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string }) {
function CalendarDay({ date, dateNotesForMonth, className, activeDate, todaysDate }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string } & CalendarArgs) {
return (
<a
className={clsx("calendar-date", className)}
className={clsx("calendar-date", className,
date.isSame(activeDate, "day") && "calendar-date-active",
date.isSame(todaysDate, "day") && "calendar-date-today"
)}
data-calendar-date={date.local().format("YYYY-MM-DD")}
>
<span>

16
apps/client/src/widgets/launch_bar/CalendarWidget.tsx
View File

@@ -4,7 +4,7 @@ import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_w
import { Dayjs, dayjs } from "@triliumnext/commons";
import appContext from "../../components/app_context";
import "./CalendarWidget.css";
import Calendar from "./Calendar";
import Calendar, { CalendarArgs } from "./Calendar";
import ActionButton from "../react/ActionButton";
import { t } from "../../services/i18n";
import FormDropdownList from "../react/FormDropdownList";
@@ -27,6 +27,7 @@ const MONTHS = [
export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
const { title, icon } = useLauncherIconAndTitle(launcherNote);
const [ calendarArgs, setCalendarArgs ] = useState<Omit<CalendarArgs, "date">>();
const [ date, setDate ] = useState<Dayjs>();
return (
@@ -34,18 +35,21 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
icon={icon} title={title}
onShown={() => {
const dateNote = appContext.tabManager.getActiveContextNote()?.getOwnedLabelValue("dateNote");
const activeDate = dateNote ? dayjs(`${dateNote}T12:00:00`) : null;
const activeDate = dateNote ? dayjs(`${dateNote}T12:00:00`) : null
const todaysDate = dayjs();
const date = dayjs(activeDate || todaysDate).startOf('month');
setDate(date);
setCalendarArgs({
activeDate,
todaysDate,
});
setDate(dayjs(activeDate || todaysDate).startOf('month'));
}}
dropdownOptions={{
autoClose: "outside"
}}
>
{date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
{calendarArgs && date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
<CalendarHeader date={date} setDate={setDate} />
<Calendar date={date} />
<Calendar date={date} {...calendarArgs} />
</div>}
</LaunchBarDropdownButton>
)