Rename "CustomIconButton" to "CustomButton"

This commit is contained in:
schroda
2025-02-08 16:03:37 +01:00
parent cae52fd782
commit f633059083
5 changed files with 20 additions and 16 deletions

View File

@@ -10,7 +10,7 @@ import Button, { ButtonProps } from '@mui/material/Button';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import { ForwardedRef, forwardRef } from 'react'; import { ForwardedRef, forwardRef } from 'react';
export const CustomIconButton = forwardRef( export const CustomButton = forwardRef(
<C extends React.ElementType>( <C extends React.ElementType>(
{ children, ...props }: ButtonProps<C, { component?: C }>, { children, ...props }: ButtonProps<C, { component?: C }>,
ref: ForwardedRef<HTMLButtonElement | null>, ref: ForwardedRef<HTMLButtonElement | null>,

View File

@@ -31,7 +31,7 @@ import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { makeToast } from '@/modules/core/utils/Toast.ts'; import { makeToast } from '@/modules/core/utils/Toast.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts'; import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx'; import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx'; import { CustomButton } from '@/modules/core/components/buttons/CustomButton.tsx';
import { TrackMangaButton } from '@/modules/manga/components/TrackMangaButton.tsx'; import { TrackMangaButton } from '@/modules/manga/components/TrackMangaButton.tsx';
import { useManageMangaLibraryState } from '@/modules/manga/hooks/useManageMangaLibraryState.tsx'; import { useManageMangaLibraryState } from '@/modules/manga/hooks/useManageMangaLibraryState.tsx';
import { Metadata as BaseMetadata } from '@/modules/core/components/Metadata.tsx'; import { Metadata as BaseMetadata } from '@/modules/core/components/Metadata.tsx';
@@ -130,7 +130,7 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
return ( return (
<CustomTooltip title={t('global.button.open_site')} disabled={!url}> <CustomTooltip title={t('global.button.open_site')} disabled={!url}>
<CustomIconButton <CustomButton
size="medium" size="medium"
disabled={!url} disabled={!url}
component={Link} component={Link}
@@ -138,9 +138,13 @@ const OpenSourceButton = ({ url }: { url?: string | null }) => {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
variant="outlined" variant="outlined"
sx={{
minWidth: 'unset',
px: '10px',
}}
> >
<LaunchIcon /> <LaunchIcon />
</CustomIconButton> </CustomButton>
</CustomTooltip> </CustomTooltip>
); );
}; };
@@ -404,14 +408,14 @@ export const MangaDetails = ({
</MetadataContainer> </MetadataContainer>
</ThumbnailMetadataWrapper> </ThumbnailMetadataWrapper>
<MangaButtonsContainer> <MangaButtonsContainer>
<CustomIconButton <CustomButton
size="medium" size="medium"
onClick={updateLibraryState} onClick={updateLibraryState}
variant={manga.inLibrary ? 'contained' : 'outlined'} variant={manga.inLibrary ? 'contained' : 'outlined'}
> >
{manga.inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />} {manga.inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
{manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')} {manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')}
</CustomIconButton> </CustomButton>
<TrackMangaButton manga={manga} /> <TrackMangaButton manga={manga} />
<OpenSourceButton url={manga.realUrl} /> <OpenSourceButton url={manga.realUrl} />
</MangaButtonsContainer> </MangaButtonsContainer>

View File

@@ -16,7 +16,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts'; import { makeToast } from '@/modules/core/utils/Toast.ts';
import { TrackManga } from '@/modules/tracker/components/TrackManga.tsx'; import { TrackManga } from '@/modules/tracker/components/TrackManga.tsx';
import { Trackers } from '@/modules/tracker/services/Trackers.ts'; import { Trackers } from '@/modules/tracker/services/Trackers.ts';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx'; import { CustomButton } from '@/modules/core/components/buttons/CustomButton.tsx';
import { GetTrackersSettingsQuery, MangaType } from '@/lib/graphql/generated/graphql.ts'; import { GetTrackersSettingsQuery, MangaType } from '@/lib/graphql/generated/graphql.ts';
import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts'; import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';
import { MangaTrackRecordInfo } from '@/modules/manga/Manga.types.ts'; import { MangaTrackRecordInfo } from '@/modules/manga/Manga.types.ts';
@@ -51,7 +51,7 @@ export const TrackMangaButton = ({ manga }: { manga: MangaTrackRecordInfo & Pick
<PopupState variant="dialog" popupId="manga-track-modal"> <PopupState variant="dialog" popupId="manga-track-modal">
{(popupState) => ( {(popupState) => (
<> <>
<CustomIconButton <CustomButton
{...bindTrigger(popupState)} {...bindTrigger(popupState)}
size="medium" size="medium"
disabled={trackerList.loading || !!trackerList.error} disabled={trackerList.loading || !!trackerList.error}
@@ -62,7 +62,7 @@ export const TrackMangaButton = ({ manga }: { manga: MangaTrackRecordInfo & Pick
{trackersInUse.length {trackersInUse.length
? t('manga.button.track.active', { count: trackersInUse.length }) ? t('manga.button.track.active', { count: trackersInUse.length })
: t('manga.button.track.start')} : t('manga.button.track.start')}
</CustomIconButton> </CustomButton>
{popupState.isOpen && ( {popupState.isOpen && (
<Dialog {...bindDialog(popupState)} maxWidth="md" fullWidth scroll="paper"> <Dialog {...bindDialog(popupState)} maxWidth="md" fullWidth scroll="paper">
<TrackManga manga={manga} /> <TrackManga manga={manga} />

View File

@@ -10,25 +10,25 @@ import { ComponentProps } from 'react';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx'; import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton'; import { CustomButton } from '@/modules/core/components/buttons/CustomButton.tsx';
export const ReaderNavBarDesktopNextPreviousButton = ({ export const ReaderNavBarDesktopNextPreviousButton = ({
title, title,
type, type,
disabled, disabled,
...customIconButtonProps ...customIconButtonProps
}: Omit<ComponentProps<typeof CustomIconButton>, 'children'> & { }: Omit<ComponentProps<typeof CustomButton>, 'children'> & {
title: string; title: string;
type: 'previous' | 'next'; type: 'previous' | 'next';
}) => ( }) => (
<CustomTooltip title={title} disabled={disabled}> <CustomTooltip title={title} disabled={disabled}>
<CustomIconButton <CustomButton
sx={{ minWidth: 0, px: 1, flexBasis: '15%' }} sx={{ minWidth: 0, px: 1, flexBasis: '15%' }}
variant="contained" variant="contained"
disabled={disabled} disabled={disabled}
{...customIconButtonProps} {...customIconButtonProps}
> >
{type === 'previous' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />} {type === 'previous' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
</CustomIconButton> </CustomButton>
</CustomTooltip> </CustomTooltip>
); );

View File

@@ -10,7 +10,7 @@ import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import FitScreenIcon from '@mui/icons-material/FitScreen'; import FitScreenIcon from '@mui/icons-material/FitScreen';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx'; import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx'; import { CustomButton } from '@/modules/core/components/buttons/CustomButton.tsx';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx'; import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
import { import {
IReaderSettings, IReaderSettings,
@@ -52,14 +52,14 @@ export const ReaderNavBarDesktopPageScale = ({
/> />
{READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && ( {READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
<CustomTooltip title={t('reader.settings.page_scale.stretch')}> <CustomTooltip title={t('reader.settings.page_scale.stretch')}>
<CustomIconButton <CustomButton
onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)} onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)}
sx={{ minWidth: 0 }} sx={{ minWidth: 0 }}
variant="contained" variant="contained"
color={shouldStretchPage.value ? 'secondary' : 'primary'} color={shouldStretchPage.value ? 'secondary' : 'primary'}
> >
<FitScreenIcon /> <FitScreenIcon />
</CustomIconButton> </CustomButton>
</CustomTooltip> </CustomTooltip>
)} )}
</Stack> </Stack>