mirror of
https://github.com/morpheus65535/bazarr.git
synced 2025-04-23 06:08:00 -04:00
Add label to all action buttons
This commit is contained in:
parent
059ab59fc7
commit
5a5df23b9c
23 changed files with 61 additions and 9 deletions
|
@ -84,6 +84,8 @@ const AppHeader: FunctionComponent = () => {
|
|||
<Menu
|
||||
control={
|
||||
<Action
|
||||
label="System"
|
||||
tooltip={{ position: "left" }}
|
||||
loading={offline}
|
||||
color={offline ? "yellow" : undefined}
|
||||
icon={faGear}
|
||||
|
|
|
@ -136,6 +136,7 @@ const AppNavbar: FunctionComponent = () => {
|
|||
<MantineNavbar.Section mt="xs">
|
||||
<Group spacing="xs">
|
||||
<Action
|
||||
label="Change Theme"
|
||||
color={dark ? "yellow" : "indigo"}
|
||||
variant="hover"
|
||||
onClick={() => toggleColorScheme()}
|
||||
|
@ -145,7 +146,12 @@ const AppNavbar: FunctionComponent = () => {
|
|||
href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=XHHRWXT9YB7WE&source=url"
|
||||
target="_blank"
|
||||
>
|
||||
<Action icon={faHeart} variant="hover" color="red"></Action>
|
||||
<Action
|
||||
label="Donate"
|
||||
icon={faHeart}
|
||||
variant="hover"
|
||||
color="red"
|
||||
></Action>
|
||||
</Anchor>
|
||||
</Group>
|
||||
</MantineNavbar.Section>
|
||||
|
|
|
@ -222,6 +222,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
|
|||
Cell: ({ row: { index } }) => {
|
||||
return (
|
||||
<Action
|
||||
label="Remove"
|
||||
icon={faTrash}
|
||||
color="red"
|
||||
onClick={() => action.remove(index)}
|
||||
|
|
|
@ -207,6 +207,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
|
|||
Cell: ({ row }) => {
|
||||
return (
|
||||
<Action
|
||||
label="Remove"
|
||||
icon={faTrash}
|
||||
color="red"
|
||||
onClick={() => action.remove(row.index)}
|
||||
|
|
|
@ -285,6 +285,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
|
|||
Cell: ({ row: { index } }) => {
|
||||
return (
|
||||
<Action
|
||||
label="Remove"
|
||||
icon={faTrash}
|
||||
color="red"
|
||||
onClick={() => action.remove(index)}
|
||||
|
|
|
@ -3,20 +3,29 @@ import {
|
|||
FontAwesomeIcon,
|
||||
FontAwesomeIconProps,
|
||||
} from "@fortawesome/react-fontawesome";
|
||||
import { ActionIcon, ActionIconProps } from "@mantine/core";
|
||||
import {
|
||||
ActionIcon,
|
||||
ActionIconProps,
|
||||
Tooltip,
|
||||
TooltipProps,
|
||||
} from "@mantine/core";
|
||||
import { forwardRef } from "react";
|
||||
|
||||
export type ActionProps = ActionIconProps<"button"> & {
|
||||
icon: IconDefinition;
|
||||
label: string;
|
||||
tooltip?: Omit<TooltipProps, "label" | "openDelay" | "children">;
|
||||
iconProps?: Omit<FontAwesomeIconProps, "icon">;
|
||||
};
|
||||
|
||||
const Action = forwardRef<HTMLButtonElement, ActionProps>(
|
||||
({ icon, iconProps, ...props }, ref) => {
|
||||
({ icon, iconProps, label, tooltip, ...props }, ref) => {
|
||||
return (
|
||||
<ActionIcon {...props} ref={ref}>
|
||||
<FontAwesomeIcon icon={icon} {...iconProps}></FontAwesomeIcon>
|
||||
</ActionIcon>
|
||||
<Tooltip {...tooltip} label={label} openDelay={500}>
|
||||
<ActionIcon aria-label={label} {...props} ref={ref}>
|
||||
<FontAwesomeIcon icon={icon} {...iconProps}></FontAwesomeIcon>
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
|
@ -82,6 +82,7 @@ const MovieHistoryView: FunctionComponent<MovieHistoryViewProps> = ({
|
|||
if (subs_id && provider && language) {
|
||||
return (
|
||||
<MutateAction
|
||||
label="Add to Blacklist"
|
||||
disabled={value}
|
||||
icon={faFileExcel}
|
||||
mutation={add}
|
||||
|
@ -193,6 +194,7 @@ const EpisodeHistoryView: FunctionComponent<EpisodeHistoryViewProps> = ({
|
|||
if (subs_id && provider && language) {
|
||||
return (
|
||||
<MutateAction
|
||||
label="Add to Blacklist"
|
||||
disabled={value}
|
||||
icon={faFileExcel}
|
||||
mutation={add}
|
||||
|
|
|
@ -162,6 +162,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
|
|||
const result = row.original;
|
||||
return (
|
||||
<Action
|
||||
label="Download"
|
||||
icon={faDownload}
|
||||
color="brand"
|
||||
variant="light"
|
||||
|
|
|
@ -67,6 +67,7 @@ const Table: FunctionComponent<Props> = ({ blacklist }) => {
|
|||
|
||||
return (
|
||||
<MutateAction
|
||||
label="Remove from Blacklist"
|
||||
noReset
|
||||
icon={faTrash}
|
||||
mutation={remove}
|
||||
|
|
|
@ -74,6 +74,7 @@ const Table: FunctionComponent<Props> = ({ blacklist }) => {
|
|||
|
||||
return (
|
||||
<MutateAction
|
||||
label="Remove from Blacklist"
|
||||
noReset
|
||||
icon={faTrash}
|
||||
mutation={remove}
|
||||
|
|
|
@ -161,6 +161,7 @@ const Table: FunctionComponent<Props> = ({ episodes, profile, disabled }) => {
|
|||
return (
|
||||
<Group spacing="xs" noWrap>
|
||||
<Action
|
||||
label="Manual Search"
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
modals.openContextModal(EpisodeSearchModal, {
|
||||
|
@ -172,6 +173,7 @@ const Table: FunctionComponent<Props> = ({ episodes, profile, disabled }) => {
|
|||
icon={faUser}
|
||||
></Action>
|
||||
<Action
|
||||
label="History"
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
modals.openContextModal(
|
||||
|
|
|
@ -104,6 +104,7 @@ const MoviesHistoryView: FunctionComponent = () => {
|
|||
if (subs_id && provider && language) {
|
||||
return (
|
||||
<MutateAction
|
||||
label="Add to Blacklist"
|
||||
disabled={value}
|
||||
icon={faFileExcel}
|
||||
mutation={add}
|
||||
|
|
|
@ -126,6 +126,7 @@ const SeriesHistoryView: FunctionComponent = () => {
|
|||
if (subs_id && provider && language) {
|
||||
return (
|
||||
<MutateAction
|
||||
label="Add to Blacklist"
|
||||
disabled={value}
|
||||
icon={faFileExcel}
|
||||
mutation={add}
|
||||
|
|
|
@ -192,7 +192,15 @@ const MovieDetailView: FunctionComponent = () => {
|
|||
>
|
||||
Edit Movie
|
||||
</Toolbox.Button>
|
||||
<Menu control={<Action icon={faEllipsis} disabled={hasTask} />}>
|
||||
<Menu
|
||||
control={
|
||||
<Action
|
||||
label="More Actions"
|
||||
icon={faEllipsis}
|
||||
disabled={hasTask}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Menu.Item
|
||||
icon={<FontAwesomeIcon icon={faToolbox} />}
|
||||
onClick={() => {
|
||||
|
|
|
@ -111,6 +111,7 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => {
|
|||
if (isSubtitleMissing(path)) {
|
||||
return (
|
||||
<Action
|
||||
label="Search Subtitle"
|
||||
icon={faSearch}
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
|
@ -159,6 +160,7 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => {
|
|||
}}
|
||||
>
|
||||
<Action
|
||||
label="Subtitle Actions"
|
||||
disabled={isSubtitleTrack(path)}
|
||||
icon={faEllipsis}
|
||||
></Action>
|
||||
|
|
|
@ -83,6 +83,8 @@ const MovieView: FunctionComponent = () => {
|
|||
const mutation = useMovieModification();
|
||||
return (
|
||||
<Action
|
||||
label="Edit Movie"
|
||||
tooltip={{ position: "left" }}
|
||||
variant="light"
|
||||
onClick={() =>
|
||||
modals.openContextModal(
|
||||
|
|
|
@ -83,6 +83,8 @@ const SeriesView: FunctionComponent = () => {
|
|||
const modals = useModals();
|
||||
return (
|
||||
<Action
|
||||
label="Edit Series"
|
||||
tooltip={{ position: "left" }}
|
||||
variant="light"
|
||||
onClick={() =>
|
||||
modals.openContextModal(
|
||||
|
|
|
@ -88,6 +88,7 @@ const SettingsGeneralView: FunctionComponent = () => {
|
|||
rightSection={
|
||||
<MantineGroup spacing="xs" mx="xs" position="right">
|
||||
<Action
|
||||
label="Copy API Key"
|
||||
variant="light"
|
||||
settingKey={settingApiKey}
|
||||
color={copied ? "green" : undefined}
|
||||
|
@ -100,6 +101,7 @@ const SettingsGeneralView: FunctionComponent = () => {
|
|||
}}
|
||||
></Action>
|
||||
<Action
|
||||
label="Regenerate"
|
||||
variant="light"
|
||||
settingKey={settingApiKey}
|
||||
color="red"
|
||||
|
|
|
@ -122,6 +122,7 @@ const Table: FunctionComponent = () => {
|
|||
return (
|
||||
<Group spacing="xs" noWrap>
|
||||
<Action
|
||||
label="Edit Profile"
|
||||
icon={faWrench}
|
||||
onClick={() => {
|
||||
modals.openContextModal(ProfileEditModal, {
|
||||
|
@ -132,6 +133,7 @@ const Table: FunctionComponent = () => {
|
|||
}}
|
||||
></Action>
|
||||
<Action
|
||||
label="Remove"
|
||||
icon={faTrash}
|
||||
color="red"
|
||||
onClick={() => action.remove(row.index)}
|
||||
|
|
|
@ -121,6 +121,7 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => {
|
|||
Cell: ({ row: { index } }) => {
|
||||
return (
|
||||
<Action
|
||||
label="Remove"
|
||||
icon={faTrash}
|
||||
onClick={() => action.remove(index)}
|
||||
></Action>
|
||||
|
|
|
@ -53,6 +53,7 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
|
|||
return (
|
||||
<Group spacing="xs" noWrap>
|
||||
<Action
|
||||
label="Restore"
|
||||
onClick={() =>
|
||||
modals.openConfirmModal({
|
||||
title: "Restore Backup",
|
||||
|
@ -71,6 +72,7 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
|
|||
icon={faHistory}
|
||||
></Action>
|
||||
<Action
|
||||
label="Delete"
|
||||
onClick={() =>
|
||||
modals.openConfirmModal({
|
||||
title: "Delete Backup",
|
||||
|
|
|
@ -58,6 +58,7 @@ const Table: FunctionComponent<Props> = ({ logs }) => {
|
|||
if (!isUndefined(value)) {
|
||||
return (
|
||||
<Action
|
||||
label="Detail"
|
||||
icon={faLayerGroup}
|
||||
onClick={() =>
|
||||
modals.openContextModal(SystemLogModal, { stack: value })
|
||||
|
|
|
@ -2,7 +2,7 @@ import { useRunTask } from "@/apis/hooks";
|
|||
import { SimpleTable } from "@/components";
|
||||
import MutateAction from "@/components/async/MutateAction";
|
||||
import { useTableStyles } from "@/styles";
|
||||
import { faSync } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faPlay } from "@fortawesome/free-solid-svg-icons";
|
||||
import { Text } from "@mantine/core";
|
||||
import { FunctionComponent, useMemo } from "react";
|
||||
import { Column, useSortBy } from "react-table";
|
||||
|
@ -42,7 +42,8 @@ const Table: FunctionComponent<Props> = ({ tasks }) => {
|
|||
|
||||
return (
|
||||
<MutateAction
|
||||
icon={faSync}
|
||||
label="Run"
|
||||
icon={faPlay}
|
||||
iconProps={{ spin: value }}
|
||||
mutation={runTask}
|
||||
args={() => job_id}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue