Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-03 03:46:37 +01:00
Code Issues Packages Projects Releases Activity

chore(react/collections): add date navigation buttons to calendar touchbar

Browse Source
This commit is contained in:
Elian Doran
2025-09-06 15:20:22 +03:00
parent 1917c04baf
commit 5966b9ff23
3 changed files with 65 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/client/src/widgets/react/TouchBar.tsx
View File

@@ -29,7 +29,9 @@ interface ButtonProps {
interface SegmentedControlProps {
mode: "single" | "buttons";
segments: {
label: string;
label?: string;
icon?: string;
onClick?: () => void;
}[];
selectedIndex?: number;
onChange?: (selectedIndex: number, isSelected: boolean) => void;
@@ -38,6 +40,7 @@ interface SegmentedControlProps {
interface TouchBarContextApi {
addItem(item: TouchBarItem): void;
TouchBar: typeof Electron.TouchBar;
nativeImage: typeof Electron.nativeImage;
}
const TouchBarContext = createContext<TouchBarContextApi | null>(null);
@@ -50,6 +53,7 @@ export default function TouchBar({ children }: TouchBarProps) {
const api: TouchBarContextApi = {
TouchBar: remote.TouchBar,
nativeImage: remote.nativeImage,
addItem: (item) => {
items.push(item);
}
@@ -133,14 +137,51 @@ export function TouchBarButton({ label, click, enabled }: ButtonProps) {
export function TouchBarSegmentedControl({ mode, segments, selectedIndex, onChange }: SegmentedControlProps) {
const api = useContext(TouchBarContext);
const processedSegments = segments.map((segment) => {
if (segment.icon) {
if (!api) return undefined;
return {
...segment,
icon: buildIcon(api?.nativeImage, segment.icon)
}
} else {
return segment;
}
});
if (api) {
const item = new api.TouchBar.TouchBarSegmentedControl({
mode, segments, selectedIndex,
change: onChange
mode, selectedIndex,
segments: processedSegments,
change: (selectedIndex, isSelected) => {
if (segments[selectedIndex].onClick) {
segments[selectedIndex].onClick();
} else if (onChange) {
onChange(selectedIndex, isSelected);
}
}
});
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();
const newImage = nativeImage.createEmpty();
newImage.addRepresentation({
scaleFactor: 1,
width: width / 2,
height: height / 2,
buffer: sourceImage.resize({ height: height / 2 }).toBitmap()
});
newImage.addRepresentation({
scaleFactor: 2,
width: width,
height: height,
buffer: sourceImage.toBitmap()
});
return newImage;
}