fix filter tips steps

This commit is contained in:
Josh Hawkins 2025-04-17 07:18:00 -05:00 committed by Nicolas Mowen
parent b950096ca4
commit 00b0c51376
2 changed files with 32 additions and 16 deletions

View File

@ -46,8 +46,13 @@
"title": "How to use text filters", "title": "How to use text filters",
"desc": { "desc": {
"text": "Filters help you narrow down your search results. Here's how to use them in the input field:", "text": "Filters help you narrow down your search results. Here's how to use them in the input field:",
"step": "<ul className=\"list-disc pl-5 text-sm text-primary-variant\"><li>Type a filter name followed by a colon (e.g., \"cameras:\").</li><li>Select a value from the suggestions or type your own.</li><li>Use multiple filters by adding them one after another with a space in between.</li><li>Date filters (before: and after:) use <em>{{DateFormat}}</em> format.</li><li>Time range filter uses <em>{{exampleTime}}</em> format.</li><li>Remove filters by clicking the 'x' next to them.</li></ul>", "step1": "Type a filter key name followed by a colon (e.g., \"cameras:\").",
"example": "Example: <code className=\"text-primary\">cameras:front_door label:person before:01012024 time_range:3:00PM-4:00PM </code>" "step2": "Select a value from the suggestions or type your own.",
"step3": "Use multiple filters by adding them one after another with a space in between.",
"step4": "Date filters (before: and after:) use {{DateFormat}} format.",
"step5": "Time range filter uses {{exampleTime}} format.",
"step6": "Remove filters by clicking the 'x' next to them.",
"exampleLabel": "Example:"
} }
}, },
"header": { "header": {

View File

@ -51,7 +51,7 @@ import { toast } from "sonner";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { MdImageSearch } from "react-icons/md"; import { MdImageSearch } from "react-icons/md";
import { Trans, useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
type InputWithTagsProps = { type InputWithTagsProps = {
inputFocused: boolean; inputFocused: boolean;
@ -729,20 +729,31 @@ export default function InputWithTags({
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t("filter.tips.desc.text")} {t("filter.tips.desc.text")}
</p> </p>
<Trans <ul className="list-disc pl-5 text-sm text-primary-variant">
ns="views/search" <li>{t("filter.tips.desc.step1")}</li>
values={{ <li>{t("filter.tips.desc.step2")}</li>
<li>{t("filter.tips.desc.step3")}</li>
<li>
{t("filter.tips.desc.step4", {
DateFormat: getIntlDateFormat(), DateFormat: getIntlDateFormat(),
})}
</li>
<li>
{t("filter.tips.desc.step5", {
exampleTime: exampleTime:
config?.ui.time_format == "24hour" config?.ui.time_format == "24hour"
? "15:00-16:00" ? "15:00-16:00"
: "3:00PM-4:00PM", : "3:00PM-4:00PM",
}} })}
> </li>
filter.tips.desc.step <li>{t("filter.tips.desc.step6")}</li>
</Trans> </ul>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
<Trans ns="views/search">filter.tips.desc.example</Trans> {t("filter.tips.desc.exampleLabel")}{" "}
<code className="text-primary">
cameras:front_door label:person before:01012024
time_range:3:00PM-4:00PM
</code>
</p> </p>
</div> </div>
</PopoverContent> </PopoverContent>