mirror of
https://github.com/morpheus65535/bazarr
synced 2025-03-15 00:18:48 +00:00
Add popover to movies and episodes for showing original name
This commit is contained in:
parent
b1478da6b6
commit
08be95c8b7
5 changed files with 44 additions and 9 deletions
|
@ -34,7 +34,3 @@ body {
|
|||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
#manual-search-matches-info {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ import { movieUpdateByRange, movieUpdateInfoAll } from "../@redux/actions";
|
|||
import { useRawMovies } from "../@redux/hooks";
|
||||
import { useReduxAction } from "../@redux/hooks/base";
|
||||
import { MoviesApi } from "../apis";
|
||||
import { ActionBadge } from "../components";
|
||||
import { ActionBadge, TextPopover } from "../components";
|
||||
import BaseItemView from "../generic/BaseItemView";
|
||||
|
||||
interface Props {}
|
||||
|
@ -44,9 +44,11 @@ const MovieView: FunctionComponent<Props> = () => {
|
|||
} else {
|
||||
const target = `/movies/${row.original.radarrId}`;
|
||||
return (
|
||||
<Link to={target} title={row.original.sceneName ?? value}>
|
||||
<span>{value}</span>
|
||||
</Link>
|
||||
<TextPopover text={row.original.sceneName} delay={1}>
|
||||
<Link to={target}>
|
||||
<span>{value}</span>
|
||||
</Link>
|
||||
</TextPopover>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
|
|
@ -16,6 +16,7 @@ import {
|
|||
EpisodeHistoryModal,
|
||||
GroupTable,
|
||||
SubtitleToolModal,
|
||||
TextPopover,
|
||||
useShowModal,
|
||||
} from "../../components";
|
||||
import { ManualSearchModal } from "../../components/modals/ManualSearchModal";
|
||||
|
@ -73,6 +74,11 @@ const Table: FunctionComponent<Props> = ({ episodes, update }) => {
|
|||
Header: "Title",
|
||||
accessor: "title",
|
||||
className: "text-nowrap",
|
||||
Cell: ({ value, row }) => (
|
||||
<TextPopover text={row.original.sceneName} delay={1}>
|
||||
<span>{value}</span>
|
||||
</TextPopover>
|
||||
),
|
||||
},
|
||||
{
|
||||
Header: "Audio",
|
||||
|
|
|
@ -10,10 +10,12 @@ import {
|
|||
FontAwesomeIcon,
|
||||
FontAwesomeIconProps,
|
||||
} from "@fortawesome/react-fontawesome";
|
||||
import { isNull, isUndefined } from "lodash";
|
||||
import moment from "moment";
|
||||
import React, { FunctionComponent, useMemo } from "react";
|
||||
import {
|
||||
OverlayTrigger,
|
||||
OverlayTriggerProps,
|
||||
Popover,
|
||||
Spinner,
|
||||
SpinnerProps,
|
||||
|
@ -148,6 +150,35 @@ export const LanguageText: FunctionComponent<LanguageTextProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
interface TextPopoverProps {
|
||||
children: React.ReactElement<any, any>;
|
||||
text: string | undefined | null;
|
||||
placement?: OverlayTriggerProps["placement"];
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export const TextPopover: FunctionComponent<TextPopoverProps> = ({
|
||||
children,
|
||||
text,
|
||||
placement,
|
||||
delay,
|
||||
}) => {
|
||||
if (isNull(text) || isUndefined(text)) {
|
||||
return children;
|
||||
}
|
||||
|
||||
const popover = (
|
||||
<Popover className="mw-100 py-1" id={text}>
|
||||
<span className="mx-2">{text}</span>
|
||||
</Popover>
|
||||
);
|
||||
return (
|
||||
<OverlayTrigger delay={delay} overlay={popover} placement={placement}>
|
||||
{children}
|
||||
</OverlayTrigger>
|
||||
);
|
||||
};
|
||||
|
||||
export * from "./async";
|
||||
export * from "./buttons";
|
||||
export * from "./ContentHeader";
|
||||
|
|
|
@ -282,7 +282,7 @@ const StateIcon: FunctionComponent<{ matches: string[]; dont: string[] }> = ({
|
|||
|
||||
const popover = useMemo(
|
||||
() => (
|
||||
<Popover id="manual-search-matches-info">
|
||||
<Popover className="w-100" id="manual-search-matches-info">
|
||||
<Popover.Content>
|
||||
<Container fluid>
|
||||
<Row>
|
||||
|
|
Loading…
Add table
Reference in a new issue