gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-06 15:34:26 +01:00
Code Issues Actions 33 Packages Projects Releases Wiki Activity

chore(react/launch_bar): add back icons for previous/next month

Browse Source
This commit is contained in:
Elian Doran 2025-12-04 19:56:34 +02:00
parent e0aed26f63
commit e1cce220b3
No known key found for this signature in database
2 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,8 +29,6 @@ const DROPDOWN_TPL = `
<div class="calendar-dropdown-widget">
<div class="calendar-header">
<div class="calendar-month-selector">
<button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previous"></button>
<button class="btn dropdown-toggle select-button" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="true"
aria-expanded="false"
@ -108,17 +106,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
}
});
this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
this.$next.on("click", () => {
this.date = this.date.add(1, 'month');
this.createMonth();
});
this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
this.$previous.on("click", () => {
this.date = this.date.subtract(1, 'month');
this.createMonth();
});
// Year navigation
this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]');
this.$yearSelect.on("input", (e) => {

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

@ -1,10 +1,11 @@
import { useEffect, useState } from "preact/hooks";
import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
import FNote from "../../entities/fnote";
import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
import { Dayjs, dayjs } from "@triliumnext/commons";
import appContext from "../../components/app_context";
import "./CalendarWidget.css";
import Calendar from "./Calendar";
import ActionButton from "../react/ActionButton";
export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
const { title, icon } = useLauncherIconAndTitle(launcherNote);
@ -22,10 +23,50 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
}}
>
{date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
<CalendarHeader date={date} setDate={setDate} />
<Calendar date={date} />
</div>}
</LaunchBarDropdownButton>
)
}
interface CalendarHeaderProps {
date: Dayjs;
setDate: Dispatch<StateUpdater<Dayjs | undefined>>;
}
function CalendarHeader(props: CalendarHeaderProps) {
return (
<div className="calendar-header">
<CalendarMonthSelector {...props} />
</div>
)
}
function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
return (
<div className="calendar-month-selector">
<AdjustDateButton date={date} setDate={setDate} direction="prev" unit="month" />
<AdjustDateButton date={date} setDate={setDate} direction="next" unit="month" />
</div>
);
}
function AdjustDateButton({ date, setDate, unit, direction }: CalendarHeaderProps & {
direction: "prev" | "next",
unit: "month"
}) {
return (
<ActionButton
icon={direction === "prev" ? "bx bx-chevron-left" : "bx bx-chevron-right" }
className="calendar-btn tn-tool-button"
noIconActionClass
text=""
onClick={(e) => {
e.stopPropagation();
const newDate = direction === "prev" ? date.subtract(1, unit) : date.add(1, unit);
setDate(newDate);
}}
/>
)
}