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

Use prettier-plugin-tailwindcss (#11373)

Browse Source 
* use prettier-plugin-tailwindcss to keep class names organized

* use prettierrc file to ensure formatting on save works with vscode

* classname reorder with prettier-plugin-tailwindcss
This commit is contained in:
Josh Hawkins
2024-05-14 10:06:44 -05:00
committed by GitHub
parent b10ae68c1f
commit 1757f4cb04
80 changed files with 682 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/pages/ConfigEditor.tsx
View File

@@ -127,8 +127,8 @@ function ConfigEditor() {
}
return (
<div className="absolute top-2 bottom-16 right-0 left-0 md:left-2">
<div className="lg:flex justify-between mr-1">
<div className="absolute bottom-16 left-0 right-0 top-2 md:left-2">
<div className="mr-1 justify-between lg:flex">
<Heading as="h2">Config</Heading>
<div>
<Button size="sm" className="mx-1" onClick={() => handleCopyConfig()}>
@@ -152,12 +152,12 @@ function ConfigEditor() {
</div>
{error && (
<div className="p-4 overflow-scroll text-danger whitespace-pre-wrap">
<div className="overflow-scroll whitespace-pre-wrap p-4 text-danger">
{error}
</div>
)}
<div ref={configRef} className="h-full mt-2" />
<div ref={configRef} className="mt-2 h-full" />
<Toaster closeButton={true} />
</div>
);

8
web/src/pages/Exports.tsx
View File

@@ -77,7 +77,7 @@ function Exports() {
const [selected, setSelected] = useState<Export>();
return (
<div className="size-full p-2 overflow-hidden flex flex-col gap-2">
<div className="flex size-full flex-col gap-2 overflow-hidden p-2">
<AlertDialog
open={deleteClip != undefined}
onOpenChange={() => setDeleteClip(undefined)}
@@ -128,9 +128,9 @@ function Exports() {
</DialogContent>
</Dialog>
<div className="w-full p-2 flex items-center justify-center">
<div className="flex w-full items-center justify-center p-2">
<Input
className="w-full md:w-1/3 bg-muted"
className="w-full bg-muted md:w-1/3"
placeholder="Search"
value={search}
onChange={(e) => setSearch(e.target.value)}
@@ -139,7 +139,7 @@ function Exports() {
<div className="w-full overflow-hidden">
{exports && filteredExports && (
<div className="size-full grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 overflow-y-auto">
<div className="grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{Object.values(exports).map((item) => (
<ExportCard
key={item.name}

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

@@ -332,13 +332,13 @@ function Logs() {
const [selectedLog, setSelectedLog] = useState<LogLine>();
return (
<div className="size-full p-2 flex flex-col">
<div className="flex size-full flex-col p-2">
<Toaster position="top-center" closeButton={true} />
<LogInfoDialog logLine={selectedLog} setLogLine={setSelectedLog} />
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<ToggleGroup
className="*:px-3 *:py-4 *:rounded-md"
className="*:rounded-md *:px-3 *:py-4"
type="single"
size="sm"
value={logService}
@@ -363,12 +363,12 @@ function Logs() {
</ToggleGroup>
<div className="flex items-center gap-2">
<Button
className="flex justify-between items-center gap-2"
className="flex items-center justify-between gap-2"
size="sm"
onClick={handleCopyLogs}
>
<FaCopy className="text-secondary-foreground" />
<div className="hidden md:block text-primary">
<div className="hidden text-primary md:block">
Copy to Clipboard
</div>
</Button>
@@ -381,7 +381,7 @@ function Logs() {
{initialScroll && !endVisible && (
<Button
className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-md text-primary bg-secondary-foreground z-20 p-2"
className="absolute bottom-8 left-[50%] z-20 -translate-x-[50%] rounded-md bg-secondary-foreground p-2 text-primary"
onClick={() =>
contentRef.current?.scrollTo({
top: contentRef.current?.scrollHeight,
@@ -393,20 +393,20 @@ function Logs() {
</Button>
)}
<div className="relative size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-background_alt border border-secondary rounded-md overflow-hidden">
<div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary/40">
<div className="p-1 flex items-center capitalize">Type</div>
<div className="col-span-2 sm:col-span-1 flex items-center">
<div className="font-mono relative my-2 flex size-full flex-col overflow-hidden whitespace-pre-wrap rounded-md border border-secondary bg-background_alt text-sm sm:p-2">
<div className="grid grid-cols-5 *:px-2 *:py-3 *:text-sm *:text-primary/40 sm:grid-cols-8 md:grid-cols-12">
<div className="flex items-center p-1 capitalize">Type</div>
<div className="col-span-2 flex items-center sm:col-span-1">
Timestamp
</div>
<div className="col-span-2 flex items-center">Tag</div>
<div className="col-span-5 sm:col-span-4 md:col-span-8 flex items-center">
<div className="col-span-5 flex items-center sm:col-span-4 md:col-span-8">
Message
</div>
</div>
<div
ref={contentRef}
className="w-full flex flex-col overflow-y-auto no-scrollbar overscroll-contain"
className="no-scrollbar flex w-full flex-col overflow-y-auto overscroll-contain"
>
{logLines.length > 0 &&
[...Array(logRange.end).keys()].map((idx) => {
@@ -449,7 +449,7 @@ function Logs() {
{logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />}
</div>
{logLines.length == 0 && (
<ActivityIndicator className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2" />
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
)}
</div>
</div>
@@ -474,25 +474,25 @@ function LogLineData({
<div
ref={startRef}
className={cn(
"w-full py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 border-secondary border-t cursor-pointer hover:bg-muted",
"grid w-full cursor-pointer grid-cols-5 gap-2 border-t border-secondary py-2 hover:bg-muted sm:grid-cols-8 md:grid-cols-12",
className,
"*:text-sm",
)}
onClick={onSelect}
>
<div className="h-full p-1 flex items-center gap-2">
<div className="flex h-full items-center gap-2 p-1">
<LogChip severity={line.severity} onClickSeverity={onClickSeverity} />
</div>
<div className="h-full col-span-2 sm:col-span-1 flex items-center">
<div className="col-span-2 flex h-full items-center sm:col-span-1">
{line.dateStamp}
</div>
<div className="size-full pr-2 col-span-2 flex items-center">
<div className="w-full overflow-hidden whitespace-nowrap text-ellipsis">
<div className="col-span-2 flex size-full items-center pr-2">
<div className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
{line.section}
</div>
</div>
<div className="size-full pl-2 sm:pl-0 pr-2 col-span-5 sm:col-span-4 md:col-span-8 flex justify-between items-center">
<div className="w-full overflow-hidden whitespace-nowrap text-ellipsis">
<div className="col-span-5 flex size-full items-center justify-between pl-2 pr-2 sm:col-span-4 sm:pl-0 md:col-span-8">
<div className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
{line.content}
</div>
</div>

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

@@ -105,12 +105,12 @@ export default function Settings() {
}, []);
return (
<div className="size-full p-2 flex flex-col">
<div className="w-full h-11 relative flex justify-between items-center">
<div className="flex size-full flex-col p-2">
<div className="relative flex h-11 w-full items-center justify-between">
<ScrollArea className="w-full whitespace-nowrap">
<div ref={tabsRef} className="flex flex-row">
<ToggleGroup
className="*:px-3 *:py-4 *:rounded-md"
className="*:rounded-md *:px-3 *:py-4"
type="single"
size="sm"
value={pageToggle}
@@ -123,7 +123,7 @@ export default function Settings() {
{Object.values(settingsViews).map((item) => (
<ToggleGroupItem
key={item}
className={`flex items-center justify-between gap-2 scroll-mx-10 ${page == "general" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "general" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
value={item}
data-nav-item={item}
aria-label={`Select ${item}`}
@@ -138,7 +138,7 @@ export default function Settings() {
{(page == "debug" ||
page == "masks / zones" ||
page == "motion tuner") && (
<div className="flex items-center gap-2 ml-2 flex-shrink-0">
<div className="ml-2 flex flex-shrink-0 items-center gap-2">
{page == "masks / zones" && (
<ZoneMaskFilterButton
selectedZoneMask={filterZoneMask}
@@ -153,7 +153,7 @@ export default function Settings() {
</div>
)}
</div>
<div className="mt-2 flex flex-col items-start w-full h-full md:h-dvh md:pb-24">
<div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24">
{page == "general" && <General />}
{page == "debug" && <ObjectSettings selectedCamera={selectedCamera} />}
{page == "masks / zones" && (
@@ -216,11 +216,11 @@ function CameraSelectButton({
const trigger = (
<Button
className="flex items-center gap-2 capitalize bg-selected hover:bg-selected"
className="flex items-center gap-2 bg-selected capitalize hover:bg-selected"
size="sm"
>
<FaVideo className="text-background dark:text-primary" />
<div className="hidden md:block text-background dark:text-primary">
<div className="hidden text-background dark:text-primary md:block">
{selectedCamera == undefined
? "No Camera"
: selectedCamera.replaceAll("_", " ")}
@@ -237,7 +237,7 @@ function CameraSelectButton({
<DropdownMenuSeparator />
</>
)}
<div className="h-auto max-h-[80dvh] p-4 mb-5 md:mb-1 overflow-y-auto overflow-x-hidden">
<div className="mb-5 h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden p-4 md:mb-1">
<div className="flex flex-col gap-2.5">
{allCameras.map((item) => (
<FilterSwitch

46
web/src/pages/SubmitPlus.tsx
View File

@@ -224,8 +224,8 @@ export default function SubmitPlus() {
);
return (
<div className="size-full flex flex-col">
<div className="w-full h-16 px-2 flex items-center justify-between overflow-x-auto">
<div className="flex size-full flex-col">
<div className="flex h-16 w-full items-center justify-between overflow-x-auto px-2">
<PlusFilterGroup
selectedCameras={selectedCameras}
selectedLabels={selectedLabels}
@@ -236,8 +236,8 @@ export default function SubmitPlus() {
/>
<PlusSortSelector selectedSort={sort} setSelectedSort={setSort} />
</div>
<div className="size-full flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar">
<div className="w-full p-2 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
<div className="no-scrollbar flex size-full flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
<div className="grid w-full gap-2 p-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
<Dialog
open={upload != undefined}
onOpenChange={(open) => (!open ? setUpload(undefined) : null)}
@@ -286,16 +286,16 @@ export default function SubmitPlus() {
<div
key={event.id}
ref={lastRow ? lastEventRef : null}
className="w-full relative rounded-lg md:rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
className="relative flex aspect-video w-full cursor-pointer items-center justify-center rounded-lg bg-black md:rounded-2xl"
onClick={() => setUpload(event)}
>
<div className="absolute left-0 top-2 z-40">
<Tooltip>
<div className="flex">
<TooltipTrigger asChild>
<div className="mx-3 pb-1 text-white text-sm">
<div className="mx-3 pb-1 text-sm text-white">
<Chip
className={`flex items-start justify-between space-x-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
className={`z-0 flex items-start justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
>
{[event.label].map((object) => {
return getIconForLabel(
@@ -317,7 +317,7 @@ export default function SubmitPlus() {
</Tooltip>
</div>
<img
className="aspect-video h-full object-contain rounded-lg md:rounded-2xl"
className="aspect-video h-full rounded-lg object-contain md:rounded-2xl"
src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
loading="lazy"
/>
@@ -392,7 +392,7 @@ function PlusFilterGroup({
const Content = isMobile ? DrawerContent : DropdownMenuContent;
return (
<div className="h-full flex justify-start gap-2 items-center">
<div className="flex h-full items-center justify-start gap-2">
<CamerasFilterButton
allCameras={allCameras}
groups={[]}
@@ -417,7 +417,7 @@ function PlusFilterGroup({
<FaList
className={`${selectedLabels == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/>
<div className="hidden md:block text-primary">
<div className="hidden text-primary md:block">
{selectedLabels == undefined
? "All Labels"
: `${selectedLabels.length} Labels`}
@@ -450,7 +450,7 @@ function PlusFilterGroup({
<PiSlidersHorizontalFill
className={`${selectedScoreRange == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/>
<div className="hidden md:block text-primary">
<div className="hidden text-primary md:block">
{selectedScoreRange == undefined
? "Score Range"
: `${selectedScoreRange[0] * 100}% - ${selectedScoreRange[1] * 100}%`}
@@ -458,7 +458,7 @@ function PlusFilterGroup({
</Button>
</Trigger>
<Content
className={`min-w-80 p-2 flex flex-col justify-center ${isMobile ? "gap-2 *:max-h-[75dvh]" : ""}`}
className={`flex min-w-80 flex-col justify-center p-2 ${isMobile ? "gap-2 *:max-h-[75dvh]" : ""}`}
>
<div className="flex items-center gap-1">
<Input
@@ -493,7 +493,7 @@ function PlusFilterGroup({
/>
</div>
<DropdownMenuSeparator />
<div className="p-2 flex justify-evenly items-center">
<div className="flex items-center justify-evenly p-2">
<Button
variant="select"
onClick={() => {
@@ -547,7 +547,7 @@ function PlusSortSelector({
const Content = isMobile ? DrawerContent : DropdownMenuContent;
return (
<div className="h-full flex justify-start gap-2 items-center">
<div className="flex h-full items-center justify-start gap-2">
<Menu
open={open}
onOpenChange={(open) => {
@@ -572,24 +572,24 @@ function PlusSortSelector({
<Sort
className={`${selectedSort == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/>
<div className="hidden md:block text-primary">
<div className="hidden text-primary md:block">
{selectedSort == undefined ? "Sort" : selectedSort.split("_")[0]}
</div>
</Button>
</Trigger>
<Content
className={`p-2 flex flex-col justify-center gap-2 ${isMobile ? "max-h-[75dvh]" : ""}`}
className={`flex flex-col justify-center gap-2 p-2 ${isMobile ? "max-h-[75dvh]" : ""}`}
>
<RadioGroup
className={`flex flex-col gap-4 ${isMobile ? "mt-4" : ""}`}
onValueChange={(value) => setCurrentSort(value)}
>
<div className="w-full flex items-center gap-2">
<div className="flex w-full items-center gap-2">
<RadioGroupItem
className={
currentSort == "date"
? "from-selected/50 to-selected/90 text-selected bg-selected"
: "from-secondary/50 to-secondary/90 text-secondary bg-secondary"
? "bg-selected from-selected/50 to-selected/90 text-selected"
: "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
}
id="date"
value="date"
@@ -616,12 +616,12 @@ function PlusSortSelector({
<div className="size-5" />
)}
</div>
<div className="w-full flex items-center gap-2">
<div className="flex w-full items-center gap-2">
<RadioGroupItem
className={
currentSort == "score"
? "from-selected/50 to-selected/90 text-selected bg-selected"
: "from-secondary/50 to-secondary/90 text-secondary bg-secondary"
? "bg-selected from-selected/50 to-selected/90 text-selected"
: "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
}
id="score"
value="score"
@@ -650,7 +650,7 @@ function PlusSortSelector({
</div>
</RadioGroup>
<DropdownMenuSeparator />
<div className="p-2 flex justify-evenly items-center">
<div className="flex items-center justify-evenly p-2">
<Button
variant="select"
onClick={() => {

16
web/src/pages/System.tsx
View File

@@ -41,13 +41,13 @@ function System() {
});
return (
<div className="size-full p-2 flex flex-col">
<div className="w-full h-11 relative flex justify-between items-center">
<div className="flex size-full flex-col p-2">
<div className="relative flex h-11 w-full items-center justify-between">
{isMobile && (
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
<Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
)}
<ToggleGroup
className="*:px-3 *:py-4 *:rounded-md"
className="*:rounded-md *:px-3 *:py-4"
type="single"
size="sm"
value={pageToggle}
@@ -72,18 +72,18 @@ function System() {
))}
</ToggleGroup>
<div className="h-full flex items-center">
<div className="flex h-full items-center">
{lastUpdated && (
<div className="h-full text-muted-foreground text-sm content-center">
<div className="h-full content-center text-sm text-muted-foreground">
Last refreshed: <TimeAgo time={lastUpdated * 1000} dense />
</div>
)}
</div>
</div>
<div className="mt-2 flex items-end gap-2">
<div className="h-full font-medium content-center">System</div>
<div className="h-full content-center font-medium">System</div>
{statsSnapshot && (
<div className="h-full text-muted-foreground text-sm content-center">
<div className="h-full content-center text-sm text-muted-foreground">
{statsSnapshot.service.version}
</div>
)}

14
web/src/pages/UIPlayground.tsx
View File

@@ -55,9 +55,9 @@ const colors = [
function ColorSwatch({ name, value }: { name: string; value: string }) {
return (
<div className="flex items-center mb-2">
<div className="mb-2 flex items-center">
<div
className="w-10 h-10 mr-2 border border-gray-300"
className="mr-2 h-10 w-10 border border-gray-300"
style={{ backgroundColor: value }}
></div>
<span>{name}</span>
@@ -212,9 +212,9 @@ function UIPlayground() {
return (
<>
<div className="w-full h-full">
<div className="h-full w-full">
<div className="flex h-full">
<div className="flex-1 content-start gap-2 overflow-y-auto no-scrollbar mt-4 mr-5">
<div className="no-scrollbar mr-5 mt-4 flex-1 content-start gap-2 overflow-y-auto">
<Heading as="h2">UI Playground</Heading>
<IconPicker
@@ -294,7 +294,7 @@ function UIPlayground() {
</SelectContent>
</Select>
</div>
<div className="flex p-2 justify-start items-center">
<div className="flex items-center justify-start p-2">
<Switch
id="exporthandles"
checked={showExportHandles}
@@ -326,7 +326,7 @@ function UIPlayground() {
Export
</Button>
</div>
<div className="w-[40px] my-4">
<div className="my-4 w-[40px]">
<CameraActivityIndicator />
</div>
<p>
@@ -378,7 +378,7 @@ function UIPlayground() {
</div>
</div>
<div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
<div className="no-scrollbar w-[55px] overflow-y-auto md:w-[100px]">
{!isEventsReviewTimeline && (
<MotionReviewTimeline
segmentDuration={zoomSettings.segmentDuration} // seconds per segment