TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 03:53:37 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

chore(react/launch_bar): reintroduce year selector

Browse Source
This commit is contained in:
Elian Doran 2025-12-04 21:24:25 +02:00
parent 2dbbf7f350
commit a65d2a1bba
No known key found for this signature in database
3 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,32 +10,6 @@ import type { EventData } from "../../components/app_context.js";
import { dayjs, type Dayjs } from "@triliumnext/commons";
import type { AttributeRow, OptionDefinitions } from "@triliumnext/commons";
const DROPDOWN_TPL = `
<div class="calendar-dropdown-widget">
<div class="calendar-header">
<div class="calendar-month-selector">
<button class="btn dropdown-toggle select-button" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="true"
aria-expanded="false"
data-calendar-input="month"></button>
<button class="calendar-btn tn-tool-button bx bx-chevron-right" data-calendar-toggle="next"></button>
</div>
<div class="calendar-year-selector">
<button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previousYear"></button>
<input type="number" min="1900" max="2999" step="1" data-calendar-input="year" />
<button class="calendar-btn tn-tool-button bx bx-chevron-right" data-calendar-toggle="nextYear"></button>
</div>
</div>
</div>`;
interface WeekCalculationOptions {
firstWeekType: number;
minDaysInFirstWeek: number;

4
apps/client/src/widgets/launch_bar/CalendarWidget.css
View File

@ -174,4 +174,8 @@
background-color: var(--hover-item-background-color);
color: var(--hover-item-text-color);
text-decoration: underline;
}
.calendar-dropdown-widget .form-control {
padding: 0;
}

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

@ -9,6 +9,7 @@ import ActionButton from "../react/ActionButton";
import Dropdown from "../react/Dropdown";
import { t } from "../../services/i18n";
import FormDropdownList from "../react/FormDropdownList";
import FormTextBox from "../react/FormTextBox";
const MONTHS = [
t("calendar.january"),
@ -60,6 +61,7 @@ function CalendarHeader(props: CalendarHeaderProps) {
return (
<div className="calendar-header">
<CalendarMonthSelector {...props} />
<CalendarYearSelector {...props} />
</div>
)
}
@ -70,7 +72,6 @@ function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
index: index.toString(), text
})))
), []);
console.log("Got months ", months);
return (
<div className="calendar-month-selector">
@ -87,9 +88,30 @@ function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
);
}
function CalendarYearSelector({ date, setDate }: CalendarHeaderProps) {
return (
<div className="calendar-year-selector">
<AdjustDateButton date={date} setDate={setDate} direction="prev" unit="year" />
<FormTextBox
type="number"
min="1900" max="2999" step="1"
currentValue={date.year().toString()}
onChange={(newValue) => {
const year = parseInt(newValue, 10);
if (!Number.isNaN(year)) {
setDate(date.set("year", year));
}
}}
data-calendar-input="year"
/>
<AdjustDateButton date={date} setDate={setDate} direction="next" unit="year" />
</div>
)
}
function AdjustDateButton({ date, setDate, unit, direction }: CalendarHeaderProps & {
direction: "prev" | "next",
unit: "month"
unit: "month" | "year"
}) {
return (
<ActionButton