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

Add button to copy manga title

Browse Source
This commit is contained in:
schroda
2024-10-08 02:56:22 +02:00
parent 97a62b037e
commit 954195c24e
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,6 @@ import { useTranslation } from 'react-i18next';
import { t as translate } from 'i18next'; import { t as translate } from 'i18next';
import Link from '@mui/material/Link'; import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { useLongPress } from 'use-long-press';
import Chip from '@mui/material/Chip'; import Chip from '@mui/material/Chip';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import LaunchIcon from '@mui/icons-material/Launch'; import LaunchIcon from '@mui/icons-material/Launch';
@@ -26,6 +25,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import OpenInFullIcon from '@mui/icons-material/OpenInFull'; import OpenInFullIcon from '@mui/icons-material/OpenInFull';
import Modal from '@mui/material/Modal'; import Modal from '@mui/material/Modal';
import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks'; import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
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';
@@ -298,14 +298,14 @@ export const MangaDetails = ({
const { CategorySelectComponent, updateLibraryState } = useManageMangaLibraryState(manga); const { CategorySelectComponent, updateLibraryState } = useManageMangaLibraryState(manga);
const copyTitleLongPressBind = useLongPress(async () => { const copyTitle = async () => {
try { try {
await navigator.clipboard.writeText(manga.title); await navigator.clipboard.writeText(manga.title);
makeToast(t('global.label.copied'), 'info'); makeToast(t('global.label.copied'), 'info');
} catch (e) { } catch (e) {
defaultPromiseErrorHandler('MangaDetails::copyTitleLongPress')(e); defaultPromiseErrorHandler('MangaDetails::copyTitleLongPress')(e);
} }
}); };
return ( return (
<> <>
@@ -314,14 +314,16 @@ export const MangaDetails = ({
<ThumbnailMetadataWrapper> <ThumbnailMetadataWrapper>
<Thumbnail manga={manga} /> <Thumbnail manga={manga} />
<MetadataContainer> <MetadataContainer>
<Typography <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'flex-start', mb: 1 }}>
variant="h5" <Typography variant="h5" component="h2" sx={{ wordBreak: 'break-word' }}>
component="h2" {manga.title}
sx={{ mb: 1, '@media not (pointer: fine)': { userSelect: 'none' } }} </Typography>
{...copyTitleLongPressBind()} <Tooltip title={t('global.button.copy')}>
> <IconButton onClick={copyTitle} color="inherit">
{manga.title} <ContentCopyIcon fontSize="small" />
</Typography> </IconButton>
</Tooltip>
</Stack>
<Metadata title={t('manga.label.author')} value={getValueOrUnknown(manga.author)} /> <Metadata title={t('manga.label.author')} value={getValueOrUnknown(manga.author)} />
<Metadata title={t('manga.label.artist')} value={getValueOrUnknown(manga.artist)} /> <Metadata title={t('manga.label.artist')} value={getValueOrUnknown(manga.artist)} />
<Metadata title={t('manga.label.status')} value={t(statusToTranslationKey[manga.status])} /> <Metadata title={t('manga.label.status')} value={t(statusToTranslationKey[manga.status])} />