Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

UI tweaks (#10645)

Browse Source 
* Use green chip instead of dimming to show that item has been reviewed

* Redesign log page to use similar style to events

* Use icon only in mobile

* Remove unused
This commit is contained in:
Nicolas Mowen 2024-03-24 11:23:39 -06:00 committed by GitHub
parent f91dc37399
commit 0fda7147be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -202,7 +202,9 @@ export default function PreviewThumbnailPlayer({
<div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm "> <div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm ">
{(review.severity == "alert" || {(review.severity == "alert" ||
review.severity == "detection") && ( review.severity == "detection") && (
<Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0"> <Chip
className={`absolute top-2 left-2 flex gap-1 bg-gradient-to-br ${review.has_been_reviewed ? "from-green-600 to-green-700 bg-green-600" : "from-gray-400 to-gray-500 bg-gray-500"} z-0`}
>
{review.data.objects.map((object) => { {review.data.objects.map((object) => {
return getIconForLabel(object, "size-3 text-white"); return getIconForLabel(object, "size-3 text-white");
})} })}
@ -225,9 +227,6 @@ export default function PreviewThumbnailPlayer({
</> </>
)} )}
</div> </div>
{!playingBack && imgLoaded && review.has_been_reviewed && (
<div className="absolute inset-0 z-10 bg-black bg-opacity-60" />
)}
</div> </div>
); );
} }

61
web/src/pages/Logs.tsx
View File

@ -1,16 +1,8 @@
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Heading from "@/components/ui/heading";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { useCallback, useMemo, useRef, useState } from "react"; import { useCallback, useMemo, useRef, useState } from "react";
import { LuCopy } from "react-icons/lu";
import useSWR from "swr"; import useSWR from "swr";
const logTypes = ["frigate", "go2rtc", "nginx"] as const; const logTypes = ["frigate", "go2rtc", "nginx"] as const;
@ -61,38 +53,37 @@ function Logs() {
); );
return ( return (
<div className="relative w-full h-full overflow-hidden"> <div className="size-full flex flex-col pr-2">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<Heading className="first:mt-2" as="h2"> <ToggleGroup
Logs className="*:px-3 *:py-4 *:rounded-2xl"
</Heading> type="single"
<div> size="sm"
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="mx-2 capitalize" variant="outline">
{logService} Logs
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Select Logs To View</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={logService} value={logService}
onValueChange={(type) => setLogService(type as LogType)} onValueChange={(value: LogType) =>
value ? setLogService(value) : null
} // don't allow the severity to be unselected
> >
{Object.values(logTypes).map((item) => ( {Object.values(logTypes).map((item) => (
<DropdownMenuRadioItem <ToggleGroupItem
className="capitalize"
key={item} key={item}
className={`flex items-center justify-between gap-2 ${logService == item ? "" : "text-gray-500"}`}
value={item} value={item}
aria-label={`Select ${item}`}
> >
{item} Logs <div className="capitalize">{`${item} Logs`}</div>
</DropdownMenuRadioItem> </ToggleGroupItem>
))} ))}
</DropdownMenuRadioGroup> </ToggleGroup>
</DropdownMenuContent> <div>
</DropdownMenu> <Button
<Button onClick={handleCopyLogs}>Copy to Clipboard</Button> className="flex justify-between items-center gap-2"
size="sm"
onClick={handleCopyLogs}
>
<LuCopy />
<div className="hidden md:block">Copy to Clipboard</div>
</Button>
</div> </div>
</div> </div>
@ -113,7 +104,7 @@ function Logs() {
<div <div
ref={contentRef} ref={contentRef}
className="absolute left-0 top-16 bottom-2 right-2 overflow-auto font-mono text-sm bg-secondary rounded p-2 whitespace-pre-wrap" className="w-full h-min my-2 font-mono text-sm bg-secondary rounded p-2 whitespace-pre-wrap overflow-auto"
> >
{logs} {logs}
<div ref={endLogRef} /> <div ref={endLogRef} />