From 08be95c8b736527312ccefc04fc1337e5a6584c3 Mon Sep 17 00:00:00 2001 From: LASER-Yi Date: Mon, 29 Mar 2021 19:49:41 +0800 Subject: [PATCH] Add popover to movies and episodes for showing original name --- frontend/src/@scss/bazarr.scss | 4 --- frontend/src/Movies/index.tsx | 10 +++--- frontend/src/Series/Episodes/table.tsx | 6 ++++ frontend/src/components/index.tsx | 31 +++++++++++++++++++ .../components/modals/ManualSearchModal.tsx | 2 +- 5 files changed, 44 insertions(+), 9 deletions(-) diff --git a/frontend/src/@scss/bazarr.scss b/frontend/src/@scss/bazarr.scss index 73782f951..27289bad0 100644 --- a/frontend/src/@scss/bazarr.scss +++ b/frontend/src/@scss/bazarr.scss @@ -34,7 +34,3 @@ body { max-width: 500px; } } - -#manual-search-matches-info { - width: 100%; -} diff --git a/frontend/src/Movies/index.tsx b/frontend/src/Movies/index.tsx index 2a83de364..e3b79fb01 100644 --- a/frontend/src/Movies/index.tsx +++ b/frontend/src/Movies/index.tsx @@ -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 = () => { } else { const target = `/movies/${row.original.radarrId}`; return ( - - {value} - + + + {value} + + ); } }, diff --git a/frontend/src/Series/Episodes/table.tsx b/frontend/src/Series/Episodes/table.tsx index 42565cce3..2ae43aeab 100644 --- a/frontend/src/Series/Episodes/table.tsx +++ b/frontend/src/Series/Episodes/table.tsx @@ -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 = ({ episodes, update }) => { Header: "Title", accessor: "title", className: "text-nowrap", + Cell: ({ value, row }) => ( + + {value} + + ), }, { Header: "Audio", diff --git a/frontend/src/components/index.tsx b/frontend/src/components/index.tsx index 431050040..2bec9df67 100644 --- a/frontend/src/components/index.tsx +++ b/frontend/src/components/index.tsx @@ -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 = ({ ); }; +interface TextPopoverProps { + children: React.ReactElement; + text: string | undefined | null; + placement?: OverlayTriggerProps["placement"]; + delay?: number; +} + +export const TextPopover: FunctionComponent = ({ + children, + text, + placement, + delay, +}) => { + if (isNull(text) || isUndefined(text)) { + return children; + } + + const popover = ( + + {text} + + ); + return ( + + {children} + + ); +}; + export * from "./async"; export * from "./buttons"; export * from "./ContentHeader"; diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx index e5705727c..3e431da59 100644 --- a/frontend/src/components/modals/ManualSearchModal.tsx +++ b/frontend/src/components/modals/ManualSearchModal.tsx @@ -282,7 +282,7 @@ const StateIcon: FunctionComponent<{ matches: string[]; dont: string[] }> = ({ const popover = useMemo( () => ( - +