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

Make bottom bar items easier to tap

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-29 06:37:04 -06:00
parent 8c610bea49
commit 5b8eb9691f
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/menu/AccountSettings.tsx
View File

@ -6,12 +6,15 @@ import {
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { VscAccount } from "react-icons/vsc"; import { VscAccount } from "react-icons/vsc";
export default function AccountSettings() { type AccountSettingsProps = {
className?: string;
};
export default function AccountSettings({ className }: AccountSettingsProps) {
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`} className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"} ${className ?? ""}`}
> >
<VscAccount className="size-5 md:m-[6px]" /> <VscAccount className="size-5 md:m-[6px]" />
</div> </div>

4
web/src/components/menu/GeneralSettings.tsx
View File

@ -66,10 +66,10 @@ import {
DialogTrigger, DialogTrigger,
} from "../ui/dialog"; } from "../ui/dialog";
type GeneralSettings = { type GeneralSettingsProps = {
className?: string; className?: string;
}; };
export default function GeneralSettings({ className }: GeneralSettings) { export default function GeneralSettings({ className }: GeneralSettingsProps) {
const { theme, colorScheme, setTheme, setColorScheme } = useTheme(); const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
const [restartDialogOpen, setRestartDialogOpen] = useState(false); const [restartDialogOpen, setRestartDialogOpen] = useState(false);
const [restartingSheetOpen, setRestartingSheetOpen] = useState(false); const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);

17
web/src/components/navigation/Bottombar.tsx
View File

@ -20,16 +20,19 @@ function Bottombar() {
return ( return (
<div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between"> <div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
{navItems.map((item) => ( {navItems.map((item) => (
<NavItem key={item.id} item={item} Icon={item.icon} /> <NavItem key={item.id} className="p-2" item={item} Icon={item.icon} />
))} ))}
<GeneralSettings /> <GeneralSettings className="p-2" />
<AccountSettings /> <AccountSettings className="p-2" />
<StatusAlertNav /> <StatusAlertNav className="p-2" />
</div> </div>
); );
} }
function StatusAlertNav() { type StatusAlertNavProps = {
className?: string;
};
function StatusAlertNav({ className }: StatusAlertNavProps) {
const { data: initialStats } = useSWR<FrigateStats>("stats", { const { data: initialStats } = useSWR<FrigateStats>("stats", {
revalidateOnFocus: false, revalidateOnFocus: false,
}); });
@ -64,7 +67,9 @@ function StatusAlertNav() {
<DrawerTrigger> <DrawerTrigger>
<IoIosWarning className="size-5 text-danger" /> <IoIosWarning className="size-5 text-danger" />
</DrawerTrigger> </DrawerTrigger>
<DrawerContent className="max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden"> <DrawerContent
className={`}max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden ${className ?? ""}`}
>
<div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2"> <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
{Object.entries(messages).map(([key, messageArray]) => ( {Object.entries(messages).map(([key, messageArray]) => (
<div key={key} className="w-full flex items-center gap-2"> <div key={key} className="w-full flex items-center gap-2">