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

chore(react/touchbar): add slider

Browse Source
This commit is contained in:
Elian Doran 2025-09-06 14:18:32 +03:00
parent 785f72ecd6
commit 3e7f0ad0a8
No known key found for this signature in database
2 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/client/src/widgets/collections/geomap/index.tsx
View File

@ -17,7 +17,7 @@ import toast from "../../../services/toast";
import { t } from "../../../services/i18n"; import { t } from "../../../services/i18n";
import server from "../../../services/server"; import server from "../../../services/server";
import branches from "../../../services/branches"; import branches from "../../../services/branches";
import TouchBar, { TouchBarLabel } from "../../react/TouchBar"; import TouchBar, { TouchBarLabel, TouchBarSlider } from "../../react/TouchBar";
const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659]; const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
const DEFAULT_ZOOM = 2; const DEFAULT_ZOOM = 2;
@ -48,8 +48,6 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
}, 5000); }, 5000);
const [ currentZoom, setCurrentZoom ] = useState<number>(); const [ currentZoom, setCurrentZoom ] = useState<number>();
console.log("Got new notes IDs ", noteIds);
console.log("Got notes ", notes);
useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]); useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]);
// Note creation. // Note creation.
@ -133,7 +131,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
> >
{notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)} {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
</Map> </Map>
<GeoMapTouchBar zoom={currentZoom} /> <GeoMapTouchBar zoom={currentZoom} map={apiRef.current} />
</div> </div>
); );
} }
@ -247,10 +245,16 @@ function buildIcon(bxIconClass: string, colorClass?: string, title?: string, not
}); });
} }
function GeoMapTouchBar({ zoom }: { zoom: number | undefined }) { function GeoMapTouchBar({ zoom, map }: { zoom: number | undefined, map: L.Map | null | undefined }) {
return ( return map && (
<TouchBar> <TouchBar>
<TouchBarLabel label={String(zoom)} /> <TouchBarSlider
label="Zoom"
value={zoom ?? map.getZoom()}
minValue={map.getMinZoom()}
maxValue={map.getMaxZoom()}
onChange={(newValue) => map.setZoom(newValue)}
/>
</TouchBar> </TouchBar>
) )
} }

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

@ -73,3 +73,26 @@ export function TouchBarLabel({ label }: { label: string }) {
return <></>; return <></>;
} }
interface SliderProps {
label: string;
value: number;
minValue: number;
maxValue: number;
onChange: (newValue: number) => void;
}
export function TouchBarSlider({ label, value, minValue, maxValue, onChange }: SliderProps) {
const api = useContext(TouchBarContext);
if (api) {
const item = new api.TouchBar.TouchBarSlider({
label,
value, minValue, maxValue,
change: onChange
});
api.addItem(item);
}
return <></>;
}