diff --git a/web/package.json b/web/package.json index e41076a..89a9151 100644 --- a/web/package.json +++ b/web/package.json @@ -27,6 +27,7 @@ "react-scripts": "^5.0.1", "react-select": "^5.3.2", "react-table": "^7.8.0", + "react-tooltip": "^5.5.2", "stacktracey": "^2.1.8" }, "scripts": { diff --git a/web/src/components/inputs/common.tsx b/web/src/components/inputs/common.tsx index e4a143c..75b92b0 100644 --- a/web/src/components/inputs/common.tsx +++ b/web/src/components/inputs/common.tsx @@ -1,5 +1,6 @@ import { Field, FieldProps } from "formik"; import { classNames } from "../../utils"; +import { CustomTooltip } from "../tooltips/CustomTooltip"; interface ErrorFieldProps { name: string; @@ -16,17 +17,29 @@ const ErrorField = ({ name, classNames }: ErrorFieldProps) => ( ); +interface RequiredFieldProps { + required?: boolean +} + +const RequiredField = ({ required }: RequiredFieldProps) => ( + <> + {required && *} + +); + interface CheckboxFieldProps { name: string; label: string; sublabel?: string; disabled?: boolean; + tooltip?: JSX.Element; } const CheckboxField = ({ name, label, sublabel, + tooltip, disabled }: CheckboxFieldProps) => (
@@ -43,12 +56,17 @@ const CheckboxField = ({ />
-
); -export { ErrorField, CheckboxField }; \ No newline at end of file +export { ErrorField, RequiredField, CheckboxField }; \ No newline at end of file diff --git a/web/src/components/inputs/input.tsx b/web/src/components/inputs/input.tsx index d529c11..0e9b244 100644 --- a/web/src/components/inputs/input.tsx +++ b/web/src/components/inputs/input.tsx @@ -2,6 +2,7 @@ import { Field, FieldProps } from "formik"; import { classNames } from "../../utils"; import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid"; import { useToggle } from "../../hooks/hooks"; +import { CustomTooltip } from "../tooltips/CustomTooltip"; type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; @@ -14,6 +15,7 @@ interface TextFieldProps { autoComplete?: string; hidden?: boolean; disabled?: boolean; + tooltip?: JSX.Element; } export const TextField = ({ @@ -24,6 +26,7 @@ export const TextField = ({ columns, autoComplete, hidden, + tooltip, disabled }: TextFieldProps) => (
{label && ( -
diff --git a/web/src/screens/filters/details.tsx b/web/src/screens/filters/details.tsx index 8af50d5..05352c6 100644 --- a/web/src/screens/filters/details.tsx +++ b/web/src/screens/filters/details.tsx @@ -25,6 +25,8 @@ import { APIClient } from "../../api/APIClient"; import { useToggle } from "../../hooks/hooks"; import { classNames } from "../../utils"; +import { CustomTooltip } from "../../components/tooltips/CustomTooltip"; + import { CheckboxField, IndexerMultiSelect, @@ -346,13 +348,12 @@ export function General() {
- - - - - - -

The unit of time for counting the maximum downloads per filter.

https://autobrr.com/filters#rules
} /> @@ -368,16 +369,16 @@ export function MoviesTv() { return (
- - +

You can use basic filtering like wildcards * or replace single characters with ?

https://autobrr.com/filters#tvmovies
} /> + +

This field takes a range of years and/or comma separated single years.

https://autobrr.com/filters#tvmovies
} /> -
- - +

See docs for information about how to only grab season packs:

https://autobrr.com/filters/examples#only-season-packs
} /> +

See docs for information about how to only grab episodes:

https://autobrr.com/filters/examples/#skip-season-packs
} />
@@ -389,23 +390,23 @@ export function MoviesTv() {
- - +

Will match releases which contain any of the selected resolutions.

https://autobrr.com/filters#quality
} /> +

Will match releases which contain any of the selected sources.

https://autobrr.com/filters#quality
} />
- - +

Will match releases which contain any of the selected codecs.

https://autobrr.com/filters#quality
} /> +

Will match releases which contain any of the selected containers.

https://autobrr.com/filters#quality} />
- - +

Will match releases which contain any of the selected HDR designations.

https://autobrr.com/filters#quality
} /> +

Won't match releases which contain any of the selected HDR designations (takes priority over Match HDR).

https://autobrr.com/filters#quality} />
- - +

Will match releases which contain any of the selected designations.

https://autobrr.com/filters#quality
} /> +

Won't match releases which contain any of the selected Other designations (takes priority over Match Other).

https://autobrr.com/filters#quality} /> @@ -416,26 +417,26 @@ export function Music({ values }: AdvancedProps) { return (
- - - +

You can use basic filtering like wildcards * or replace single characters with ?

https://autobrr.com/filters#music
} /> +

You can use basic filtering like wildcards * or replace single characters with ?

https://autobrr.com/filters#music
} /> +

This field takes a range of years and/or comma separated single years.

https://autobrr.com/filters#music} />
- - +

Will only match releases with any of the selected formats. This is overridden by Perfect FLAC.

https://autobrr.com/filters#quality-1
} /> +

Will only match releases with any of the selected qualities. This is overridden by Perfect FLAC.

https://autobrr.com/filters#quality-1
} />
- - +

Will only match releases with any of the selected sources. This is overridden by Perfect FLAC.

https://autobrr.com/filters#quality-1
} /> +

Will only match releases with any of the selected types.

https://autobrr.com/filters#quality-1} />
- +

Log scores go from 0 to 100. This is overridden by Perfect FLAC.

https://autobrr.com/filters#quality-1
} /> @@ -445,7 +446,7 @@ export function Music({ values }: AdvancedProps) {
{/*
-
+
Extra
*/} @@ -453,7 +454,7 @@ export function Music({ values }: AdvancedProps) {
- +

Override all options about quality, source, format, and cue/log/log score.

https://autobrr.com/filters#quality-1
} />
@@ -475,8 +476,8 @@ export function Advanced({ values }: AdvancedProps) {
- - +

This field has full regex support (Golang flavour).

https://autobrr.com/filters#advanced

Remember to tick Use Regex below if using more than * and ?.

} /> +

This field has full regex support (Golang flavour).

https://autobrr.com/filters#advanced

Remember to tick Use Regex below if using more than * and ?.

} /> {values.match_releases ? ( + - - +

Comma separated list of release groups to match.

https://autobrr.com/filters#advanced} /> +

Comma separated list of release groups to ignore (takes priority over Match releases).

https://autobrr.com/filters#advanced} />
- - +

Comma separated list of categories to match.

https://autobrr.com/filters/categories} /> +

Comma separated list of categories to ignore (takes priority over Match releases).

https://autobrr.com/filters/categories} /> - - +

Comma separated list of tags to match.

https://autobrr.com/filters#advanced} /> +

Comma separated list of tags to ignore (takes priority over Match releases).

hhttps://autobrr.com/filters#advanced} />
- - +

Comma separated list of uploaders to match.

https://autobrr.com/filters#advanced} /> +

Comma separated list of uploaders to ignore (takes priority over Match releases).

https://autobrr.com/filters#advanced} />
@@ -543,7 +545,7 @@ export function Advanced({ values }: AdvancedProps) {
- +

Comma separated list of uploaders to ignore (takes priority over Match releases).

https://autobrr.com/filters#advanced
} /> @@ -603,12 +605,12 @@ export function CollapsableSection({ title, subtitle, children, defaultOpen }: C type="button" className="inline-flex items-center px-4 py-2 border-transparent text-sm font-medium text-white" > - {isOpen ?