gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-03 20:34:24 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

chore(calendar): improve layout on mobile

Browse Source
This commit is contained in:
Elian Doran 2026-01-31 12:13:05 +02:00
parent 83e585ed35
commit c1002ed52a
No known key found for this signature in database
3 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/collections/calendar/index.css
View File

@ -90,8 +90,6 @@
}
.center-container {
order: 100;
.title {
flex-grow: 1;
}

71
apps/client/src/widgets/collections/calendar/index.tsx
View File

@ -13,7 +13,7 @@ import date_notes from "../../../services/date_notes";
import dialog from "../../../services/dialog";
import froca from "../../../services/froca";
import { t } from "../../../services/i18n";
import { isMobile } from "../../../services/utils";
import { isDesktop, isMobile, isMobile } from "../../../services/utils";
import CollectionProperties from "../../note_bars/CollectionProperties";
import ActionButton from "../../react/ActionButton";
import Button, { ButtonGroup } from "../../react/Button";
@ -147,11 +147,7 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
return (plugins &&
<div className="calendar-view" ref={containerRef} tabIndex={100}>
<CollectionProperties
note={note}
centerChildren={<CalendarHeaderCenter calendarRef={calendarRef} />}
rightChildren={<CalendarHeaderRight calendarRef={calendarRef} />}
/>
<CalendarCollectionProperties note={note} calendarRef={calendarRef} />
<Calendar
events={eventBuilder}
calendarRef={calendarRef}
@ -180,19 +176,51 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
);
}
function CalendarHeaderCenter({ calendarRef }: { calendarRef: RefObject<FullCalendar> }) {
function CalendarCollectionProperties({ note, calendarRef }: {
note: FNote;
calendarRef: RefObject<FullCalendar>;
}) {
const { title, viewType: currentViewType } = useOnDatesSet(calendarRef);
const currentViewData = CALENDAR_VIEWS.find(v => calendarRef.current && v.type === currentViewType);
const isMobileLocal = isMobile();
return <>
<ActionButton icon="bx bx-chevron-left" text={currentViewData?.previousText ?? ""} onClick={() => calendarRef.current?.prev()} />
<span className="title">{title}</span>
<ActionButton icon="bx bx-chevron-right" text={currentViewData?.nextText ?? ""} onClick={() => calendarRef.current?.next()} />
<Button text={t("calendar.today")} onClick={() => calendarRef.current?.today()} />
</>;
return (
<CollectionProperties
note={note}
centerChildren={<>
<ActionButton icon="bx bx-chevron-left" text={currentViewData?.previousText ?? ""} onClick={() => calendarRef.current?.prev()} />
<span className="title">{title}</span>
<ActionButton icon="bx bx-chevron-right" text={currentViewData?.nextText ?? ""} onClick={() => calendarRef.current?.next()} />
<Button text={t("calendar.today")} onClick={() => calendarRef.current?.today()} />
{isMobileLocal && <MobileCalendarViewSwitcher calendarRef={calendarRef} />}
</>}
rightChildren={<>
{!isMobileLocal && <DesktopCalendarViewSwitcher calendarRef={calendarRef} />}
</>}
/>
);
}
function CalendarHeaderRight({ calendarRef }: { calendarRef: RefObject<FullCalendar> }) {
function DesktopCalendarViewSwitcher({ calendarRef }: { calendarRef: RefObject<FullCalendar> }) {
const { viewType: currentViewType } = useOnDatesSet(calendarRef);
return (
<>
<ButtonGroup>
{CALENDAR_VIEWS.map(viewData => (
<Button
key={viewData.type}
text={viewData.name}
className={currentViewType === viewData.type ? "active" : ""}
onClick={() => calendarRef.current?.changeView(viewData.type)}
/>
))}
</ButtonGroup>
</>
);
}
function MobileCalendarViewSwitcher({ calendarRef }: { calendarRef: RefObject<FullCalendar> }) {
const { viewType: currentViewType } = useOnDatesSet(calendarRef);
const currentViewTypeData = CALENDAR_VIEWS.find(view => view.type === currentViewType);
@ -212,21 +240,6 @@ function CalendarHeaderRight({ calendarRef }: { calendarRef: RefObject<FullCalen
</Dropdown>
);
}
return (
<>
<ButtonGroup>
{CALENDAR_VIEWS.map(viewData => (
<Button
key={viewData.type}
text={viewData.name}
className={currentViewType === viewData.type ? "active" : ""}
onClick={() => calendarRef.current?.changeView(viewData.type)}
/>
))}
</ButtonGroup>
</>
);
}
function usePlugins(isEditable: boolean, isCalendarRoot: boolean) {

2
apps/client/src/widgets/note_bars/CollectionProperties.css
View File

@ -21,6 +21,7 @@
.center-container {
flex-grow: 1;
gap: 0.5em;
}
button.btn {
@ -33,7 +34,6 @@
>div {
flex-grow: 1;
justify-content: center;
}
}
}