gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-05 06:54:23 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

chore(react/launch_bar): fix style for month selector
Some checks are pending
Checks / main (push) Waiting to run
Details

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

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

@ -62,26 +62,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
} }
}); });
// Year navigation
this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]');
this.$yearSelect.on("input", (e) => {
const target = e.target as HTMLInputElement;
this.date = this.date.year(parseInt(target.value));
this.createMonth();
});
this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]');
this.$nextYear.on("click", () => {
this.date = this.date.add(1, 'year');
this.createMonth();
});
this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');
this.$previousYear.on("click", () => {
this.date = this.date.subtract(1, 'year');
this.createMonth();
});
// Date click // Date click
this.$dropdownContent.on("click", ".calendar-date", async (ev) => { this.$dropdownContent.on("click", ".calendar-date", async (ev) => {
const date = $(ev.target).closest(".calendar-date").attr("data-calendar-date"); const date = $(ev.target).closest(".calendar-date").attr("data-calendar-date");

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

@ -6,7 +6,6 @@ import appContext from "../../components/app_context";
import "./CalendarWidget.css"; import "./CalendarWidget.css";
import Calendar from "./Calendar"; import Calendar from "./Calendar";
import ActionButton from "../react/ActionButton"; import ActionButton from "../react/ActionButton";
import Dropdown from "../react/Dropdown";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import FormDropdownList from "../react/FormDropdownList"; import FormDropdownList from "../react/FormDropdownList";
import FormTextBox from "../react/FormTextBox"; import FormTextBox from "../react/FormTextBox";
@ -82,6 +81,7 @@ function CalendarMonthSelector({ date, setDate }: CalendarHeaderProps) {
onChange={value => { onChange={value => {
}} }}
buttonProps={{ "data-calendar-input": "month" }}
/> />
<AdjustDateButton date={date} setDate={setDate} direction="next" unit="month" /> <AdjustDateButton date={date} setDate={setDate} direction="next" unit="month" />
</div> </div>

10
apps/client/src/widgets/react/Dropdown.tsx
View File

@ -1,11 +1,16 @@
import { Dropdown as BootstrapDropdown } from "bootstrap"; import { Dropdown as BootstrapDropdown } from "bootstrap";
import { ComponentChildren } from "preact"; import { ComponentChildren, HTMLAttributes } from "preact";
import { CSSProperties, HTMLProps } from "preact/compat"; import { CSSProperties, HTMLProps } from "preact/compat";
import { useCallback, useEffect, useRef, useState } from "preact/hooks"; import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import { useUniqueName } from "./hooks"; import { useUniqueName } from "./hooks";
type DataAttributes = {
[key: `data-${string}`]: string | number | boolean | undefined;
};
export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "className"> { export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "className"> {
buttonClassName?: string; buttonClassName?: string;
buttonProps?: Partial<HTMLAttributes<HTMLButtonElement> & DataAttributes>;
isStatic?: boolean; isStatic?: boolean;
children: ComponentChildren; children: ComponentChildren;
title?: string; title?: string;
@ -24,7 +29,7 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
dropdownOptions?: Partial<BootstrapDropdown.Options>; dropdownOptions?: Partial<BootstrapDropdown.Options>;
} }
export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions }: DropdownProps) { export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps }: DropdownProps) {
const dropdownRef = useRef<HTMLDivElement | null>(null); const dropdownRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null); const triggerRef = useRef<HTMLButtonElement | null>(null);
@ -80,6 +85,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
title={title} title={title}
id={id ?? ariaId} id={id ?? ariaId}
disabled={disabled} disabled={disabled}
{...buttonProps}
> >
{text} {text}
<span className="caret"></span> <span className="caret"></span>