mirror/bazarr
1
0
Fork 0
mirror of https://github.com/morpheus65535/bazarr synced 2025-01-03 13:35:18 +00:00
Code Issues Releases Wiki Activity

Added matches dialog alert and column titles (#2771)

Browse source
This commit is contained in:
Anderson Shindy Oki 2024-11-26 15:24:06 +09:00 committed by GitHub
parent 0f7f3192c3
commit 04be28f437
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/components/StateIcon.tsx
View file

@ -1,12 +1,21 @@
import { FunctionComponent } from "react";
import { Group, List, Popover, Stack, Text } from "@mantine/core";
import { useHover } from "@mantine/hooks";
import {
faCheck,
Alert,
em,
Flex,
Group,
List,
Popover,
Stack,
Text,
} from "@mantine/core";
import { useHover, useMediaQuery } from "@mantine/hooks";
import {
faCheckCircle,
faExclamationCircle,
faListCheck,
faTimes,
faMinus,
faPlus,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { BuildKey } from "@/utilities";
@ -26,6 +35,8 @@ const StateIcon: FunctionComponent<StateIconProps> = ({
const { hovered, ref } = useHover();
const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
const PopoverTarget: FunctionComponent = () => {
if (isHistory) {
return <FontAwesomeIcon icon={faListCheck} />;
@ -48,11 +59,23 @@ const StateIcon: FunctionComponent<StateIconProps> = ({
</Text>
</Popover.Target>
<Popover.Dropdown>
<Text size="xl" ta="center">
Scoring Criteria
</Text>
{isMobile ? null : (
<Alert variant="light" color="blue" mb="sm">
Not matching attributes will not prevent the subtitle to be
downloaded and are strictly used for scoring the subtitle.
</Alert>
)}
<Group justify="left" gap="xl" wrap="nowrap" grow>
<Stack align="flex-start" justify="flex-start" gap="xs" mb="auto">
<Text c="green">
<FontAwesomeIcon icon={faCheck}></FontAwesomeIcon>
</Text>
<Flex gap="sm">
<Text c="green">
<FontAwesomeIcon icon={faPlus}></FontAwesomeIcon>
</Text>
<Text c="green">Matching</Text>
</Flex>
<List>
{matches.map((v, idx) => (
<List.Item key={BuildKey(idx, v, "match")}>{v}</List.Item>
@ -60,9 +83,12 @@ const StateIcon: FunctionComponent<StateIconProps> = ({
</List>
</Stack>
<Stack align="flex-start" justify="flex-start" gap="xs" mb="auto">
<Text c="yellow">
<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>
</Text>
<Flex gap="sm">
<Text c="yellow">
<FontAwesomeIcon icon={faMinus}></FontAwesomeIcon>
</Text>
<Text c="yellow">Not Matching</Text>
</Flex>
<List>
{dont.map((v, idx) => (
<List.Item key={BuildKey(idx, v, "miss")}>{v}</List.Item>