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

18
src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
View File

@@ -20,9 +20,9 @@ import Menu from '@mui/material/Menu';
import Link from '@mui/material/Link';
import { Link as RouterLink } from 'react-router-dom';
import { alpha } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import Slide from '@mui/material/Slide';
import { forwardRef, memo } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
@@ -80,15 +80,15 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
boxShadow: 2,
}}
>
<Tooltip title={t('reader.button.exit')}>
<CustomTooltip title={t('reader.button.exit')}>
<IconButton sx={{ marginRight: 2 }} onClick={handleBack} color="inherit">
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
</Tooltip>
</CustomTooltip>
<Stack sx={{ flexGrow: 1 }}>
{manga && currentChapter ? (
<>
<Tooltip title={title}>
<CustomTooltip title={title}>
<TypographyMaxLines lines={1} component="h1" variant="h5">
<Link
component={RouterLink}
@@ -98,20 +98,20 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
{title}
</Link>
</TypographyMaxLines>
</Tooltip>
<Tooltip title={name}>
</CustomTooltip>
<CustomTooltip title={name}>
<TypographyMaxLines lines={1}>{name}</TypographyMaxLines>
</Tooltip>
</CustomTooltip>
</>
) : (
<LoadingPlaceholder />
)}
</Stack>
<Tooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
<CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
<IconButton onClick={() => Chapters.performAction(bookmarkAction, [chapterId], {})} color="inherit">
{isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
</IconButton>
</Tooltip>
</CustomTooltip>
<IconButton {...bindTrigger(popupState)} color="inherit">
<MoreVertIcon />
</IconButton>

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>

6
src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx
View File

@@ -7,8 +7,8 @@
*/
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import { ReactNode } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { CurrentPageSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
@@ -23,7 +23,7 @@ export const ReaderProgressBarCurrentPageSlot = ({
children,
progressBarPosition,
}: CurrentPageSlotProps & { children?: ReactNode }) => (
<Tooltip
<CustomTooltip
title={pageName}
slotProps={{
tooltip: { sx: { backgroundColor: 'primary.main', color: 'primary.contrastText' } },
@@ -50,5 +50,5 @@ export const ReaderProgressBarCurrentPageSlot = ({
>
{children}
</Box>
</Tooltip>
</CustomTooltip>
);

6
src/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx
View File

@@ -7,15 +7,15 @@
*/
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import { memo, ReactNode } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ReaderProgressBarSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
export const ReaderProgressBarSlot = memo(
({ pageName, progressBarPosition, slotProps, children }: ReaderProgressBarSlotProps & { children?: ReactNode }) => (
<Tooltip
<CustomTooltip
{...slotProps?.tooltip}
key={pageName}
title={pageName}
@@ -24,6 +24,6 @@ export const ReaderProgressBarSlot = memo(
<Box {...slotProps?.box} sx={{ width: '100%', height: '100%', ...slotProps?.box?.sx }}>
{children}
</Box>
</Tooltip>
</CustomTooltip>
),
);