ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent tooltip on disabled button warning

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
src/modules/manga/components/ContinueReadingButton.tsx
View File

@@ -8,9 +8,9 @@
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import { Link } from 'react-router-dom';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ChapterReadInfo, Chapters, ChapterSourceOrderInfo } from '@/modules/chapter/services/Chapters.ts';
export const ContinueReadingButton = ({
@@ -32,7 +32,7 @@ export const ContinueReadingButton = ({
const isFirstChapter = sourceOrder === 1;
return (
<Tooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
<CustomTooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
<Button
variant="contained"
size="small"
@@ -45,6 +45,6 @@ export const ContinueReadingButton = ({
>
<PlayArrowIcon />
</Button>
</Tooltip>
</CustomTooltip>
);
};

10
src/modules/manga/components/MangaDetails.tsx
View File

@@ -15,7 +15,6 @@ import { t as translate } from 'i18next';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Tooltip from '@mui/material/Tooltip';
import LaunchIcon from '@mui/icons-material/Launch';
import Collapse from '@mui/material/Collapse';
import Stack from '@mui/material/Stack';
@@ -28,6 +27,7 @@ import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { Vibrant } from 'node-vibrant/browser';
import { FastAverageColor } from 'fast-average-color';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
@@ -129,7 +129,7 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
const { t } = useTranslation();
return (
<Tooltip title={t('global.button.open_site')}>
<CustomTooltip title={t('global.button.open_site')} disabled={!url}>
<CustomIconButton
size="medium"
disabled={!url}
@@ -141,7 +141,7 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
>
<LaunchIcon />
</CustomIconButton>
</Tooltip>
</CustomTooltip>
);
};
@@ -391,11 +391,11 @@ export const MangaDetails = ({
<Typography variant="h5" component="h2" sx={{ wordBreak: 'break-word' }}>
{manga.title}
</Typography>
<Tooltip title={t('global.button.copy')}>
<CustomTooltip title={t('global.button.copy')}>
<IconButton onClick={copyTitle} color="inherit">
<ContentCopyIcon fontSize="small" />
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
<Metadata title={t('manga.label.author')} value={getValueOrUnknown(manga.author)} />
<Metadata title={t('manga.label.artist')} value={getValueOrUnknown(manga.artist)} />

14
src/modules/manga/components/MangaOptionButton.tsx
View File

@@ -9,12 +9,12 @@
import { useTranslation } from 'react-i18next';
import { BaseSyntheticEvent, MouseEvent, TouchEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { PopupState } from 'material-ui-popup-state/hooks';
import { bindTrigger } from 'material-ui-popup-state';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SelectableCollectionReturnType } from '@/modules/collection/hooks/useSelectableCollection.ts';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
@@ -71,15 +71,15 @@ export const MangaOptionButton = forwardRef(
}
return (
<Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
<CustomTooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
<Checkbox checked={selected} onMouseDown={preventDefaultAction} onChange={handleSelectionChange} />
</Tooltip>
</CustomTooltip>
);
}
if (asCheckbox) {
return (
<Tooltip title={t('global.button.options')}>
<CustomTooltip title={t('global.button.options')}>
<IconButton
ref={ref}
{...bindTriggerProps}
@@ -90,12 +90,12 @@ export const MangaOptionButton = forwardRef(
>
<MoreVertIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
);
}
return (
<Tooltip title={t('global.button.options')}>
<CustomTooltip title={t('global.button.options')}>
<Button
ref={ref}
{...bindTriggerProps}
@@ -118,7 +118,7 @@ export const MangaOptionButton = forwardRef(
>
<MoreVertIcon />
</Button>
</Tooltip>
</CustomTooltip>
);
},
);

14
src/modules/manga/components/MangaToolbarMenu.tsx
View File

@@ -14,13 +14,13 @@ import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Tooltip from '@mui/material/Tooltip';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import SyncAltIcon from '@mui/icons-material/SyncAlt';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { useCategorySelect } from '@/modules/category/hooks/useCategorySelect.tsx';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
@@ -51,7 +51,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
<>
{isLargeScreen && (
<>
<Tooltip title={t('manga.label.reload_from_source')}>
<CustomTooltip title={t('manga.label.reload_from_source')} disabled={refreshing}>
<IconButton
onClick={() => {
onRefresh();
@@ -61,10 +61,10 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
>
<Refresh />
</IconButton>
</Tooltip>
</CustomTooltip>
{manga.inLibrary && (
<>
<Tooltip title={t('global.button.migrate')}>
<CustomTooltip title={t('global.button.migrate')}>
<Link
to={`${AppRoutes.migrate.childRoutes.search.path(manga.sourceId, manga.id)}?query=${manga.title}`}
state={{ mangaTitle: manga.title }}
@@ -74,8 +74,8 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
<SyncAltIcon />
</IconButton>
</Link>
</Tooltip>
<Tooltip title={t('manga.label.edit_categories')}>
</CustomTooltip>
<CustomTooltip title={t('manga.label.edit_categories')}>
<IconButton
onClick={() => {
openCategorySelect(true);
@@ -84,7 +84,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
>
<Label />
</IconButton>
</Tooltip>
</CustomTooltip>
</>
)}
</>

10
src/modules/manga/components/cards/MangaGridCard.tsx
View File

@@ -12,9 +12,9 @@ import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import { memo, useRef } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { MangaOptionButton } from '@/modules/manga/components/MangaOptionButton.tsx';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
@@ -166,7 +166,7 @@ export const MangaGridCard = memo(
}}
>
{gridLayout !== GridLayout.Comfortable && (
<Tooltip title={title} placement="top">
<CustomTooltip title={title} placement="top">
<TypographyMaxLines
component="h3"
sx={{
@@ -176,7 +176,7 @@ export const MangaGridCard = memo(
>
{title}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
)}
{continueReadingButton}
</Stack>
@@ -185,7 +185,7 @@ export const MangaGridCard = memo(
</Card>
{gridLayout === GridLayout.Comfortable && (
<Stack sx={{ pb: 1 }}>
<Tooltip title={title} placement="top">
<CustomTooltip title={title} placement="top">
<TypographyMaxLines
component="h3"
sx={{
@@ -197,7 +197,7 @@ export const MangaGridCard = memo(
>
{title}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
</Stack>
)}
</Box>

6
src/modules/manga/components/cards/MangaListCard.tsx
View File

@@ -12,9 +12,9 @@ import CardActionArea from '@mui/material/CardActionArea';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { Link as RouterLink } from 'react-router-dom';
import { memo, useRef } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { SpecificMangaCardProps } from '@/modules/manga/Manga.types.ts';
@@ -103,11 +103,11 @@ export const MangaListCard = memo(
width: 'min-content',
}}
>
<Tooltip title={title} placement="top">
<CustomTooltip title={title} placement="top">
<TypographyMaxLines variant="h6" component="h3">
{title}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
</Box>
<Stack
direction="row"

6
src/modules/manga/screens/Manga.tsx
View File

@@ -10,12 +10,12 @@ import Warning from '@mui/icons-material/Warning';
import CircularProgress from '@mui/material/CircularProgress';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Box from '@mui/material/Box';
import React, { useEffect, useLayoutEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
import { isNetworkRequestInFlight } from '@apollo/client/core/networkStatus';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { ChapterList } from '@/modules/chapter/components/ChapterList.tsx';
import { useRefreshManga } from '@/modules/manga/hooks/useRefreshManga.ts';
@@ -78,7 +78,7 @@ export const Manga: React.FC = () => {
}}
>
{error && !isValidating && !refreshing && (
<Tooltip
<CustomTooltip
title={
<>
{t('manga.error.label.request_failure')}
@@ -90,7 +90,7 @@ export const Manga: React.FC = () => {
<IconButton onClick={() => refetch()}>
<Warning color="error" />
</IconButton>
</Tooltip>
</CustomTooltip>
)}
{manga && (refreshing || isValidating) && (
<IconButton disabled>