chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Theme scrollbars with tailwind-scrollbar (#11723)

Browse Source
This commit is contained in:
Josh Hawkins
2024-06-03 13:43:30 -05:00
committed by GitHub
parent 9808ff64e7
commit e6d1ad0ac5
29 changed files with 55 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/filter/CameraGroupSelector.tsx
View File

@@ -310,7 +310,7 @@ function NewGroupDialog({
<Content
className={`min-w-0 ${isMobile ? "max-h-[90%] w-full rounded-t-2xl p-3" : "max-h-dvh w-6/12 overflow-y-hidden"}`}
>
<div className="my-4 flex flex-col overflow-y-auto">
<div className="scrollbar-container my-4 flex flex-col overflow-y-auto">
{editState === "none" && (
<>
<div className="flex flex-row items-center justify-between py-2">
@@ -400,7 +400,7 @@ export function EditGroupDialog({
<DialogContent
className={`min-w-0 ${isMobile ? "max-h-[90%] w-full rounded-t-2xl p-3" : "max-h-dvh w-6/12 overflow-y-hidden"}`}
>
<div className="my-4 flex flex-col overflow-y-auto">
<div className="scrollbar-container my-4 flex flex-col overflow-y-auto">
<div className="mb-3 flex flex-row items-center justify-between">
<DialogTitle>Edit Camera Group</DialogTitle>
</div>
@@ -651,7 +651,7 @@ export function CameraGroupEdit({
/>
<Separator className="my-2 flex bg-secondary" />
<div className="max-h-[25dvh] overflow-y-auto md:max-h-[40dvh]">
<div className="scrollbar-container max-h-[25dvh] overflow-y-auto md:max-h-[40dvh]">
<FormField
control={form.control}
name="cameras"

2
web/src/components/filter/LogLevelFilter.tsx
View File

@@ -58,7 +58,7 @@ export function GeneralFilterContent({
}: GeneralFilterContentProps) {
return (
<>
<div className="h-auto overflow-y-auto overflow-x-hidden">
<div className="scrollbar-container h-auto overflow-y-auto overflow-x-hidden">
<div className="my-2.5 flex items-center justify-between">
<Label
className="mx-2 cursor-pointer text-primary"

4
web/src/components/filter/ReviewFilterGroup.tsx
View File

@@ -263,7 +263,7 @@ export function CamerasFilterButton({
<DropdownMenuSeparator />
</>
)}
<div className="h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden p-4">
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden p-4">
<FilterSwitch
isChecked={currentCameras == undefined}
label="All Cameras"
@@ -602,7 +602,7 @@ export function GeneralFilterContent({
}: GeneralFilterContentProps) {
return (
<>
<div className="h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
{currentSeverity && setShowAll && (
<div className="my-2.5 flex flex-col gap-2.5">
<FilterSwitch

2
web/src/components/icons/IconPicker.tsx
View File

@@ -115,7 +115,7 @@ export default function IconPicker({
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<div className="flex h-full flex-col overflow-y-auto">
<div className="scrollbar-container flex h-full flex-col overflow-y-auto">
<div className="grid grid-cols-6 gap-2 pr-1">
{icons.map(([name, Icon]) => (
<div

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

@@ -62,7 +62,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
}
>
<div className="w-full flex-col overflow-y-auto overflow-x-hidden">
<div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
<DropdownMenuLabel>
Current User: {profile?.username || "anonymous"}
</DropdownMenuLabel>

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

@@ -142,7 +142,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
}
>
<div className="w-full flex-col overflow-y-auto overflow-x-hidden">
<div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
<DropdownMenuLabel>System</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>

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

@@ -93,7 +93,7 @@ function StatusAlertNav({ className }: StatusAlertNavProps) {
className,
)}
>
<div className="flex h-auto w-full flex-col items-center gap-2 overflow-y-auto overflow-x-hidden py-4">
<div className="scrollbar-container flex h-auto w-full flex-col items-center gap-2 overflow-y-auto overflow-x-hidden py-4">
{Object.entries(messages).map(([key, messageArray]) => (
<div key={key} className="flex w-full items-center gap-2">
{messageArray.map(({ id, text, color, link }: StatusMessage) => {

2
web/src/components/navigation/Sidebar.tsx
View File

@@ -12,7 +12,7 @@ function Sidebar() {
const navbarLinks = useNavigation();
return (
<aside className="left-o scrollbar-hidden absolute inset-y-0 z-10 flex w-[52px] flex-col justify-between overflow-y-auto border-r border-secondary-highlight bg-background_alt py-4">
<aside className="scrollbar-container scrollbar-hidden absolute inset-y-0 left-0 z-10 flex w-[52px] flex-col justify-between overflow-y-auto border-r border-secondary-highlight bg-background_alt py-4">
<span tabIndex={0} className="sr-only" />
<div className="flex w-full flex-col items-center gap-0">
<Logo className="mb-6 h-8 w-8" />

2
web/src/components/overlay/MobileCameraDrawer.tsx
View File

@@ -28,7 +28,7 @@ export default function MobileCameraDrawer({
</Button>
</DrawerTrigger>
<DrawerContent className="mx-1 max-h-[75dvh] overflow-hidden rounded-t-2xl px-4">
<div className="flex h-auto w-full flex-col items-center gap-2 overflow-y-auto overflow-x-hidden py-4">
<div className="scrollbar-container flex h-auto w-full flex-col items-center gap-2 overflow-y-auto overflow-x-hidden py-4">
{allCameras.map((cam) => (
<div
key={cam}

2
web/src/components/overlay/MobileReviewSettingsDrawer.tsx
View File

@@ -222,7 +222,7 @@ export default function MobileReviewSettingsDrawer({
);
} else if (drawerMode == "filter") {
content = (
<div className="flex h-auto w-full flex-col overflow-y-auto">
<div className="scrollbar-container flex h-auto w-full flex-col overflow-y-auto">
<div className="relative mb-2 h-8 w-full">
<div
className="absolute left-0 text-selected"

2
web/src/components/overlay/VainfoDialog.tsx
View File

@@ -33,7 +33,7 @@ export default function VainfoDialog({
<DialogTitle>Vainfo Output</DialogTitle>
</DialogHeader>
{vainfo ? (
<div className="mb-2 max-h-96 overflow-y-scroll whitespace-pre-line">
<div className="scrollbar-container mb-2 max-h-96 overflow-y-scroll whitespace-pre-line">
<div>Return Code: {vainfo.return_code}</div>
<br />
<div>Process {vainfo.return_code == 0 ? "Output" : "Error"}:</div>

2
web/src/components/settings/ZoneEditPane.tsx
View File

@@ -587,7 +587,7 @@ export function ZoneObjectSelector({
return (
<>
<div className="h-auto overflow-y-auto overflow-x-hidden">
<div className="scrollbar-container h-auto overflow-y-auto overflow-x-hidden">
<div className="my-2.5 flex items-center justify-between">
<Label className="cursor-pointer text-primary" htmlFor="allLabels">
All Objects