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

10
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
View File

@@ -7,7 +7,6 @@
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton';
import ArrowBack from '@mui/icons-material/ArrowBack';
@@ -17,6 +16,7 @@ import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
import Divider from '@mui/material/Divider';
import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
import Drawer from '@mui/material/Drawer';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { ReaderNavContainer } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx';
@@ -111,12 +111,12 @@ const BaseReaderNavBarDesktop = ({
<ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
<Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
<Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<Tooltip title={t('reader.button.exit')}>
<CustomTooltip title={t('reader.button.exit')}>
<IconButton onClick={exit} color="inherit">
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
</Tooltip>
<Tooltip title={t('reader.settings.label.static_navigation')}>
</CustomTooltip>
<CustomTooltip title={t('reader.settings.label.static_navigation')}>
<IconButton
onClick={() => {
setReaderNavBarWidth(0);
@@ -126,7 +126,7 @@ const BaseReaderNavBarDesktop = ({
>
{isStaticNav ? <PushPinIcon /> : <PushPinOutlinedIcon />}
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
{manga && currentChapter ? (
<>

22
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx
View File

@@ -7,7 +7,6 @@
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton';
import BookmarkIcon from '@mui/icons-material/Bookmark';
@@ -17,6 +16,7 @@ import DownloadIcon from '@mui/icons-material/Download';
import ReplayIcon from '@mui/icons-material/Replay';
import { memo, useMemo, useRef } from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
@@ -32,11 +32,11 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
if (currentChapter && Chapters.isDownloaded(currentChapter)) {
return (
<Tooltip title={t(actionToTranslationKey.delete.action.single)}>
<CustomTooltip title={t(actionToTranslationKey.delete.action.single)}>
<IconButton onClick={() => Chapters.performAction('delete', [currentChapter.id], {})} color="inherit">
<DeleteIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
);
}
@@ -45,7 +45,7 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
}
return (
<Tooltip title={t(actionToTranslationKey.download.action.single)}>
<CustomTooltip title={t(actionToTranslationKey.download.action.single)} disabled={!currentChapter}>
<IconButton
disabled={!currentChapter}
onClick={() => Chapters.performAction('download', [currentChapter?.id ?? -1], {})}
@@ -53,7 +53,7 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
>
<DownloadIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
);
};
@@ -82,12 +82,12 @@ const BaseReaderNavBarDesktopActions = memo(
return (
<Stack sx={{ flexDirection: 'row', justifyContent: 'center', gap: 1 }}>
<Tooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
<CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
<IconButton onClick={() => Chapters.performAction(bookmarkAction, [id], {})} color="inherit">
{isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
</IconButton>
</Tooltip>
<Tooltip title={t('reader.button.retry_load_pages')}>
</CustomTooltip>
<CustomTooltip title={t('reader.button.retry_load_pages')} disabled={!haveSomePagesFailedToLoad}>
<IconButton
onClick={() => {
setPageLoadStates((statePageLoadStates) =>
@@ -104,9 +104,9 @@ const BaseReaderNavBarDesktopActions = memo(
>
<ReplayIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
<DownloadButton currentChapter={currentChapter} />
<Tooltip title={t('chapter.action.label.open_on_source')}>
<CustomTooltip title={t('chapter.action.label.open_on_source')} disabled={!realUrl}>
<IconButton
disabled={!realUrl}
href={realUrl ?? ''}
@@ -116,7 +116,7 @@ const BaseReaderNavBarDesktopActions = memo(
>
<OpenInNewIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
);
},

14
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx
View File

@@ -7,11 +7,11 @@
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Link from '@mui/material/Link';
import { Link as RouterLink } from 'react-router-dom';
import { memo } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
@@ -28,7 +28,7 @@ export const ReaderNavBarDesktopMetadata = memo(
scanlator?: string | null;
}) => (
<Stack>
<Tooltip title={mangaTitle} placement="right">
<CustomTooltip title={mangaTitle} placement="right">
<TypographyMaxLines lines={3} variant="h6" component="h1" sx={{ textAlign: 'center' }}>
<Link
component={RouterLink}
@@ -38,14 +38,14 @@ export const ReaderNavBarDesktopMetadata = memo(
{mangaTitle}
</Link>
</TypographyMaxLines>
</Tooltip>
<Tooltip title={chapterTitle} placement="right">
</CustomTooltip>
<CustomTooltip title={chapterTitle} placement="right">
<TypographyMaxLines lines={4} variant="body1" component="h2" sx={{ textAlign: 'center' }}>
{chapterTitle}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
{scanlator && (
<Tooltip title={scanlator} placement="right">
<CustomTooltip title={scanlator} placement="right">
<TypographyMaxLines
lines={4}
variant="body2"
@@ -55,7 +55,7 @@ export const ReaderNavBarDesktopMetadata = memo(
>
{scanlator}
</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
)}
</Stack>
),

14
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx
View File

@@ -6,23 +6,29 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Tooltip from '@mui/material/Tooltip';
import { ComponentProps } from 'react';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton';
export const ReaderNavBarDesktopNextPreviousButton = ({
title,
type,
disabled,
...customIconButtonProps
}: Omit<ComponentProps<typeof CustomIconButton>, 'children'> & {
title: string;
type: 'previous' | 'next';
}) => (
<Tooltip title={title}>
<CustomIconButton sx={{ minWidth: 0, px: 1, flexBasis: '15%' }} variant="contained" {...customIconButtonProps}>
<CustomTooltip title={title} disabled={disabled}>
<CustomIconButton
sx={{ minWidth: 0, px: 1, flexBasis: '15%' }}
variant="contained"
disabled={disabled}
{...customIconButtonProps}
>
{type === 'previous' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
</CustomIconButton>
</Tooltip>
</CustomTooltip>
);

6
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx
View File

@@ -7,9 +7,9 @@
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import FitScreenIcon from '@mui/icons-material/FitScreen';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
import {
@@ -51,7 +51,7 @@ export const ReaderNavBarDesktopPageScale = ({
defaultIcon={PAGE_SCALE_VALUE_TO_DISPLAY_DATA[pageScaleMode.value].icon}
/>
{READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
<Tooltip title={t('reader.settings.page_scale.stretch')}>
<CustomTooltip title={t('reader.settings.page_scale.stretch')}>
<CustomIconButton
onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)}
sx={{ minWidth: 0 }}
@@ -60,7 +60,7 @@ export const ReaderNavBarDesktopPageScale = ({
>
<FitScreenIcon />
</CustomIconButton>
</Tooltip>
</CustomTooltip>
)}
</Stack>
);

14
src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
View File

@@ -15,10 +15,10 @@ import { alpha } from '@mui/material/styles';
import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import Slide from '@mui/material/Slide';
import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ReaderBottomBarMobileProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { MobileReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx';
import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
@@ -89,21 +89,21 @@ const BaseReaderBottomBarMobile = ({
alignItems: 'center',
}}
>
<Tooltip title={t('reader.button.chapter_list')}>
<CustomTooltip title={t('reader.button.chapter_list')}>
<IconButton {...bindTrigger(chapterListPopupState)} size="large" color="inherit">
<FormatListBulletedIcon />
</IconButton>
</Tooltip>
<Tooltip title={t('reader.settings.title.quick_settings')}>
</CustomTooltip>
<CustomTooltip title={t('reader.settings.title.quick_settings')}>
<IconButton {...bindTrigger(quickSettingsPopupState)} size="large" color="inherit">
<AppSettingsAltIcon />
</IconButton>
</Tooltip>
<Tooltip title={t('settings.title')}>
</CustomTooltip>
<CustomTooltip title={t('settings.title')}>
<IconButton onClick={openSettings} size="large" color="inherit">
<SettingsIcon />
</IconButton>
</Tooltip>
</CustomTooltip>
</Stack>
</Stack>
</Slide>