Prevent tooltip on disabled button warning

This commit is contained in:
schroda
2025-02-01 14:24:38 +01:00
parent dc9f6fc863
commit 8ddb259c82
46 changed files with 229 additions and 194 deletions

View File

@@ -8,7 +8,6 @@
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import { ComponentProps, useCallback, useMemo, useState } from 'react';
@@ -19,6 +18,7 @@ import DownloadIcon from '@mui/icons-material/Download';
import DoneAllIcon from '@mui/icons-material/DoneAll';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import Menu from '@mui/material/Menu';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx';
import { ResumeFab } from '@/modules/manga/components/ResumeFAB.tsx';
@@ -186,7 +186,10 @@ export const ChapterList = ({
</Typography>
<Stack direction="row">
<Tooltip title={t('chapter.action.mark_as_read.add.label.action.current')}>
<CustomTooltip
title={t('chapter.action.mark_as_read.add.label.action.current')}
disabled={areAllChaptersRead}
>
<IconButton
disabled={areAllChaptersRead}
onClick={() => Chapters.markAsRead(Chapters.getNonRead(chapters), true, manga.id)}
@@ -194,11 +197,14 @@ export const ChapterList = ({
>
<DoneAllIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<PopupState variant="popover" popupId="chapterlist-download-button">
{(popupState) => (
<>
<Tooltip title={t('chapter.action.download.add.label.action')}>
<CustomTooltip
title={t('chapter.action.download.add.label.action')}
disabled={areAllChaptersRead}
>
<IconButton
disabled={areAllChaptersDownloaded}
{...bindTrigger(popupState)}
@@ -206,7 +212,7 @@ export const ChapterList = ({
>
<DownloadIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
{popupState.isOpen && (
<Menu {...bindMenu(popupState)}>
<ChaptersDownloadActionMenuItems

View File

@@ -8,9 +8,9 @@
import FilterList from '@mui/icons-material/FilterList';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ChapterOptions } from '@/modules/chapter/components/ChapterOptions.tsx';
import { isFilterActive } from '@/modules/chapter/utils/ChapterList.util.tsx';
import { ChapterListOptions, ChapterOptionsReducerAction } from '@/modules/chapter/Chapter.types.ts';
@@ -28,11 +28,11 @@ export const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
return (
<>
<Tooltip title={t('settings.title')}>
<CustomTooltip title={t('settings.title')}>
<IconButton onClick={() => setOpen(true)} color="inherit">
<FilterList color={isFiltered ? 'warning' : undefined} />
</IconButton>
</Tooltip>
</CustomTooltip>
<ChapterOptions
open={open}
onClose={() => setOpen(false)}

View File

@@ -11,7 +11,6 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
import CardActionArea from '@mui/material/CardActionArea';
import Checkbox from '@mui/material/Checkbox';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton';
@@ -22,6 +21,7 @@ import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import { useLongPress } from 'use-long-press';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { getDateString } from '@/util/DateHelper.ts';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
@@ -204,7 +204,7 @@ export const ChapterCard = memo((props: IProps) => {
<Stack sx={{ minHeight: '48px' }}>
{selected === null ? (
<Tooltip title={t('global.button.options')}>
<CustomTooltip title={t('global.button.options')}>
<IconButton
ref={menuButtonRef}
{...bindTrigger(popupState)}
@@ -220,13 +220,13 @@ export const ChapterCard = memo((props: IProps) => {
>
<MoreVertIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
) : (
<Tooltip
<CustomTooltip
title={t(selected ? 'global.button.deselect' : 'global.button.select')}
>
<Checkbox checked={selected} />
</Tooltip>
</CustomTooltip>
)}
</Stack>
</CardContent>