mirror of https://github.com/morpheus65535/bazarr
Added settings provider maximum description lines (#2611)
This commit is contained in:
parent
f424c21628
commit
baae406a02
|
@ -108,10 +108,12 @@ export const ProviderView: FunctionComponent<ProviderViewProps> = ({
|
||||||
})
|
})
|
||||||
.map((v, idx) => (
|
.map((v, idx) => (
|
||||||
<Card
|
<Card
|
||||||
|
titleStyles={{ overflow: "hidden", textOverflow: "ellipsis" }}
|
||||||
key={BuildKey(v.key, idx)}
|
key={BuildKey(v.key, idx)}
|
||||||
header={v.name ?? capitalize(v.key)}
|
header={v.name ?? capitalize(v.key)}
|
||||||
description={v.description}
|
description={v.description}
|
||||||
onClick={() => select(v)}
|
onClick={() => select(v)}
|
||||||
|
lineClamp={2}
|
||||||
></Card>
|
></Card>
|
||||||
));
|
));
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -1,14 +1,23 @@
|
||||||
import { FunctionComponent } from "react";
|
import { FunctionComponent } from "react";
|
||||||
import { Center, Stack, Text, UnstyledButton } from "@mantine/core";
|
import {
|
||||||
|
Center,
|
||||||
|
MantineStyleProp,
|
||||||
|
Stack,
|
||||||
|
Text,
|
||||||
|
UnstyledButton,
|
||||||
|
} from "@mantine/core";
|
||||||
import { faPlus } from "@fortawesome/free-solid-svg-icons";
|
import { faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import TextPopover from "@/components/TextPopover";
|
||||||
import styles from "./Card.module.scss";
|
import styles from "./Card.module.scss";
|
||||||
|
|
||||||
interface CardProps {
|
interface CardProps {
|
||||||
header?: string;
|
|
||||||
description?: string;
|
description?: string;
|
||||||
plus?: boolean;
|
header?: string;
|
||||||
|
lineClamp?: number | undefined;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
|
plus?: boolean;
|
||||||
|
titleStyles?: MantineStyleProp | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Card: FunctionComponent<CardProps> = ({
|
export const Card: FunctionComponent<CardProps> = ({
|
||||||
|
@ -16,6 +25,8 @@ export const Card: FunctionComponent<CardProps> = ({
|
||||||
description,
|
description,
|
||||||
plus,
|
plus,
|
||||||
onClick,
|
onClick,
|
||||||
|
lineClamp,
|
||||||
|
titleStyles,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<UnstyledButton p="lg" onClick={onClick} className={styles.card}>
|
<UnstyledButton p="lg" onClick={onClick} className={styles.card}>
|
||||||
|
@ -24,9 +35,15 @@ export const Card: FunctionComponent<CardProps> = ({
|
||||||
<FontAwesomeIcon size="2x" icon={faPlus}></FontAwesomeIcon>
|
<FontAwesomeIcon size="2x" icon={faPlus}></FontAwesomeIcon>
|
||||||
</Center>
|
</Center>
|
||||||
) : (
|
) : (
|
||||||
<Stack h="100%" gap={0} align="flex-start">
|
<Stack h="100%" gap={0}>
|
||||||
<Text fw="bold">{header}</Text>
|
<Text fw="bold" style={titleStyles}>
|
||||||
<Text hidden={description === undefined}>{description}</Text>
|
{header}
|
||||||
|
</Text>
|
||||||
|
<TextPopover text={description}>
|
||||||
|
<Text hidden={description === undefined} lineClamp={lineClamp}>
|
||||||
|
{description}
|
||||||
|
</Text>
|
||||||
|
</TextPopover>
|
||||||
</Stack>
|
</Stack>
|
||||||
)}
|
)}
|
||||||
</UnstyledButton>
|
</UnstyledButton>
|
||||||
|
|
Loading…
Reference in New Issue