chore(react/collections): add spacer for calendar touch bar

This commit is contained in:
Elian Doran 2025-09-06 15:40:47 +03:00
parent 05299952a9
commit 8dcef5ea9f
No known key found for this signature in database
2 changed files with 23 additions and 2 deletions

View File

@ -19,7 +19,7 @@ import FNote from "../../../entities/fnote";
import Button, { ButtonGroup } from "../../react/Button";
import ActionButton from "../../react/ActionButton";
import { RefObject } from "preact";
import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSegmentedControl } from "../../react/TouchBar";
import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSegmentedControl, TouchBarSpacer } from "../../react/TouchBar";
interface CalendarViewData {
@ -327,7 +327,6 @@ function CalendarTouchBar({ calendarRef }: { calendarRef: RefObject<FullCalendar
return ready && (
<TouchBar>
<TouchBarLabel label={calendarRef.current?.view.title ?? ""} />
<TouchBarSegmentedControl
mode="single"
segments={CALENDAR_VIEWS.map(({ name }) => ({
@ -336,6 +335,11 @@ function CalendarTouchBar({ calendarRef }: { calendarRef: RefObject<FullCalendar
selectedIndex={CALENDAR_VIEWS.findIndex(v => v.type === viewType) ?? 0}
onChange={(selectedIndex) => calendarRef.current?.changeView(CALENDAR_VIEWS[selectedIndex].type)}
/>
<TouchBarSpacer size="flexible" />
<TouchBarLabel label={calendarRef.current?.view.title ?? ""} />
<TouchBarSpacer size="flexible" />
<TouchBarButton
label={t("calendar.today")}
click={() => calendarRef.current?.today()}

View File

@ -27,6 +27,10 @@ interface ButtonProps {
enabled?: boolean;
}
interface SpacerProps {
size: "flexible" | "large" | "small";
}
interface SegmentedControlProps {
mode: "single" | "buttons";
segments: {
@ -169,6 +173,19 @@ export function TouchBarSegmentedControl({ mode, segments, selectedIndex, onChan
return <></>;
}
export function TouchBarSpacer({ size }: SpacerProps) {
const api = useContext(TouchBarContext);
if (api) {
const item = new api.TouchBar.TouchBarSpacer({
size
});
api.addItem(item);
}
return <></>;
}
function buildIcon(nativeImage: typeof Electron.nativeImage, name: string) {
const sourceImage = nativeImage.createFromNamedImage(name, [-1, 0, 1]);
const { width, height } = sourceImage.getSize();