mirror
/
bazarr
mirror of https://github.com/morpheus65535/bazarr
1
0
Fork 0
Code Issues Releases Wiki Activity

Add color to the icon in upload modal

This commit is contained in:
LASER-Yi 2022-06-03 11:29:39 +08:00
parent 4bb2cf65e6
commit ed819ce299
2 changed files with 48 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/forms/MovieUploadForm.tsx
View File

@ -15,7 +15,14 @@ import {
faTrash,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, Checkbox, Divider, Stack, Text } from "@mantine/core";
import {
Button,
Checkbox,
Divider,
MantineColor,
Stack,
Text,
} from "@mantine/core";
import { useForm } from "@mantine/hooks";
import { isString } from "lodash";
import { FunctionComponent, useEffect, useMemo } from "react";
@ -153,10 +160,24 @@ const MovieUploadForm: FunctionComponent<Props> = ({
}
}, [value?.state]);
const color = useMemo<MantineColor | undefined>(() => {
switch (value?.state) {
case "valid":
return "green";
case "warning":
return "yellow";
case "error":
return "red";
default:
return undefined;
}
}, [value?.state]);
return (
<TextPopover text={value?.messages}>
{/* TODO: Color */}
<FontAwesomeIcon icon={icon}></FontAwesomeIcon>
<Text color={color} inline>
<FontAwesomeIcon icon={icon}></FontAwesomeIcon>
</Text>
</TextPopover>
);
},

27
frontend/src/components/forms/SeriesUploadForm.tsx
View File

@ -19,7 +19,14 @@ import {
faTrash,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, Checkbox, Divider, Stack, Text } from "@mantine/core";
import {
Button,
Checkbox,
Divider,
MantineColor,
Stack,
Text,
} from "@mantine/core";
import { useForm } from "@mantine/hooks";
import { isString } from "lodash";
import { FunctionComponent, useEffect, useMemo } from "react";
@ -177,10 +184,24 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
}
}, [value?.state]);
const color = useMemo<MantineColor | undefined>(() => {
switch (value?.state) {
case "valid":
return "green";
case "warning":
return "yellow";
case "error":
return "red";
default:
return undefined;
}
}, [value?.state]);
return (
<TextPopover text={value?.messages}>
{/* TODO: Color */}
<FontAwesomeIcon icon={icon}></FontAwesomeIcon>
<Text color={color} inline>
<FontAwesomeIcon icon={icon}></FontAwesomeIcon>
</Text>
</TextPopover>
);
},