administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

tab scrolling behavior

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-19 12:11:19 -05:00
parent 3eedbb8807
commit f184bcbbd9
1 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/pages/Settings.tsx
View File

@ -86,39 +86,40 @@ export default function Settings() {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useEffect(() => {
if (tabsRef.current) {
const element = tabsRef.current.querySelector(
`[data-nav-item="${pageToggle}"]`,
);
if (element instanceof HTMLElement) {
scrollIntoView(element, {
behavior: "smooth",
inline: "start",
});
}
}
}, [tabsRef, pageToggle]);
return ( return (
<div className="size-full p-2 flex flex-col"> <div className="size-full p-2 flex flex-col">
<div className="w-full h-11 relative flex justify-between items-center"> <div className="w-full h-11 relative flex justify-between items-center">
<ScrollArea className="w-full whitespace-nowrap"> <ScrollArea className="w-full whitespace-nowrap">
<div ref={tabsRef} className="flex flex-row scroll-mx-20"> <div ref={tabsRef} className="flex flex-row">
<ToggleGroup <ToggleGroup
className="*:px-3 *:py-4 *:rounded-md shrink-0" className="*:px-3 *:py-4 *:rounded-md"
type="single" type="single"
size="sm" size="sm"
value={pageToggle} value={pageToggle}
onValueChange={(value: SettingsType) => { onValueChange={(value: SettingsType) => {
if (value) { if (value) {
setPageToggle(value); setPageToggle(value);
if (tabsRef.current) {
const element = tabsRef.current.querySelector(
`[data-nav-item="${value}"]`,
);
if (element instanceof HTMLElement) {
scrollIntoView(element, {
behavior: "smooth",
block: "center",
inline: "center",
});
}
}
} }
}} }}
> >
{Object.values(settingsViews).map((item) => ( {Object.values(settingsViews).map((item) => (
<ToggleGroupItem <ToggleGroupItem
key={item} key={item}
className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`} className={`flex items-center justify-between gap-2 scroll-mx-10 ${page == "general" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
value={item} value={item}
data-nav-item={item} data-nav-item={item}
aria-label={`Select ${item}`} aria-label={`Select ${item}`}