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

Feature/utilize long press (#709)

Browse Source 
* Open manga action menu on long press

* Open chapter action menu on long press
This commit is contained in:
schroda
2024-04-07 15:21:25 +02:00
committed by GitHub
parent ecd9b7478b
commit 41d876e156
3 changed files with 221 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/MangaCard.tsx
View File

@@ -9,11 +9,11 @@
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea'; import CardActionArea from '@mui/material/CardActionArea';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom'; import { Link as RouterLink } from 'react-router-dom';
import { Avatar, Box, CardContent, Stack, styled, Tooltip } from '@mui/material'; import { Avatar, Box, CardContent, Link, Stack, styled, Tooltip } from '@mui/material';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import PopupState, { bindMenu } from 'material-ui-popup-state'; import PopupState, { bindMenu } from 'material-ui-popup-state';
import { useState } from 'react'; import { useRef, useState } from 'react';
import { useLongPress } from 'use-long-press'; import { useLongPress } from 'use-long-press';
import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext'; import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { SpinnerImage } from '@/components/util/SpinnerImage'; import { SpinnerImage } from '@/components/util/SpinnerImage';
@@ -94,6 +94,8 @@ const getMangaLinkTo = (
export const MangaCard = (props: MangaCardProps) => { export const MangaCard = (props: MangaCardProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const optionButtonRef = useRef<HTMLButtonElement>(null);
const { manga, gridLayout, inLibraryIndicator, selected, handleSelection, mode = 'default' } = props; const { manga, gridLayout, inLibraryIndicator, selected, handleSelection, mode = 'default' } = props;
const { const {
id, id,
@@ -117,18 +119,36 @@ export const MangaCard = (props: MangaCardProps) => {
const [isMigrateDialogOpen, setIsMigrateDialogOpen] = useState(false); const [isMigrateDialogOpen, setIsMigrateDialogOpen] = useState(false);
const handleClick = (e: React.MouseEvent | React.TouchEvent) => { const handleClick = (event: React.MouseEvent | React.TouchEvent, openMenu?: () => void) => {
if (selected === null) { const isDefaultMode = mode === 'default';
const isMigrateSelectMode = mode === 'migrate.select';
const isSelectionMode = selected !== null;
const shouldHandleClick = isMigrateSelectMode || isSelectionMode || (isDefaultMode && !!openMenu);
if (!shouldHandleClick) {
return; return;
} }
e.preventDefault(); event.preventDefault();
handleSelection?.(id, !selected, { selectRange: e.shiftKey });
if (isSelectionMode) {
handleSelection?.(id, !selected, { selectRange: event.shiftKey });
return;
}
if (isDefaultMode) {
openMenu?.();
return;
}
if (isMigrateSelectMode) {
setIsMigrateDialogOpen(true);
}
}; };
const longPressBind = useLongPress((e) => { const longPressBind = useLongPress((e, { context }) => {
e.shiftKey = true; e.shiftKey = true;
handleClick(e); handleClick(e, context as () => {});
}); });
if (gridLayout !== GridLayout.List) { if (gridLayout !== GridLayout.List) {
@@ -141,27 +161,11 @@ export const MangaCard = (props: MangaCardProps) => {
{(popupState) => ( {(popupState) => (
<> <>
<Link <Link
{...longPressBind()} component={RouterLink}
onClick={(e) => { {...longPressBind(() => popupState.open(optionButtonRef.current))}
const isMigrateSelectMode = mode === 'migrate.select'; onClick={handleClick}
const isSelectionMode = selected !== null;
const shouldHandleClick = isMigrateSelectMode || isSelectionMode;
if (!shouldHandleClick) {
return;
}
e.preventDefault();
if (isMigrateSelectMode) {
setIsMigrateDialogOpen(true);
return;
}
handleClick(e);
}}
to={mangaLinkTo} to={mangaLinkTo}
style={{ textDecoration: 'none' }} sx={{ textDecoration: 'none', touchCallout: 'none' }}
> >
<Box <Box
sx={{ sx={{
@@ -228,6 +232,7 @@ export const MangaCard = (props: MangaCardProps) => {
)} )}
</BadgeContainer> </BadgeContainer>
<MangaOptionButton <MangaOptionButton
ref={optionButtonRef}
popupState={popupState} popupState={popupState}
id={id} id={id}
selected={selected} selected={selected}
@@ -348,10 +353,11 @@ export const MangaCard = (props: MangaCardProps) => {
<> <>
<Card> <Card>
<CardActionArea <CardActionArea
component={Link} component={RouterLink}
to={mangaLinkTo} to={mangaLinkTo}
onClick={handleClick} onClick={handleClick}
{...longPressBind()} {...longPressBind()}
sx={{ touchCallout: 'none' }}
> >
<CardContent <CardContent
sx={{ sx={{
@@ -425,6 +431,7 @@ export const MangaCard = (props: MangaCardProps) => {
mangaLinkTo={mangaLinkTo} mangaLinkTo={mangaLinkTo}
/> />
<MangaOptionButton <MangaOptionButton
ref={optionButtonRef}
popupState={popupState} popupState={popupState}
id={id} id={id}
selected={selected} selected={selected}

206
src/components/chapter/ChapterCard.tsx
View File

@@ -14,7 +14,7 @@ import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import React, { MouseEvent, TouchEvent } from 'react'; import React, { MouseEvent, TouchEvent, useRef } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state'; import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
@@ -39,130 +39,130 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const theme = useTheme(); const theme = useTheme();
const menuButtonRef = useRef<HTMLButtonElement>(null);
const { chapter, allChapters, downloadChapter: dc, showChapterNumber, onSelect, selected } = props; const { chapter, allChapters, downloadChapter: dc, showChapterNumber, onSelect, selected } = props;
const isSelecting = selected !== null; const isSelecting = selected !== null;
const { isDownloaded } = chapter; const { isDownloaded } = chapter;
const handleClick = (e: MouseEvent | TouchEvent) => { const handleClick = (event: MouseEvent | TouchEvent) => {
if (!isSelecting) return; if (!isSelecting) return;
e.preventDefault(); event.preventDefault();
e.stopPropagation(); event.stopPropagation();
onSelect(!selected, e.shiftKey); onSelect(!selected, event.shiftKey);
}; };
const longPressBind = useLongPress((e) => { const handleClickOpenMenu = (
e.shiftKey = true; event: React.MouseEvent | React.TouchEvent,
handleClick(e); openMenu: (e: React.SyntheticEvent) => void,
) => {
event.stopPropagation();
event.preventDefault();
openMenu(event);
};
const longPressBind = useLongPress((event, { context: openMenu }) => {
if (!isSelecting && !!menuButtonRef.current) {
handleClickOpenMenu(event, () => (openMenu as (event: Element) => void)?.(menuButtonRef.current!));
return;
}
// eslint-disable-next-line no-param-reassign
event.shiftKey = true;
handleClick(event);
}); });
return ( return (
<li> <li>
<PopupState variant="popover" popupId="chapter-card-action-menu"> <PopupState variant="popover" popupId="chapter-card-action-menu">
{(popupState) => { {(popupState) => (
const bindTriggerProps = bindTrigger(popupState); <>
<Card
const preventDefaultAction = (e: React.BaseSyntheticEvent<unknown>) => { sx={{
e.stopPropagation(); position: 'relative',
e.preventDefault(); margin: 1,
}; touchCallout: 'none',
}}
const handleClickOpenMenu = (e: React.BaseSyntheticEvent<unknown>) => { >
preventDefaultAction(e); <CardActionArea
bindTriggerProps.onClick(e as any); component={Link}
}; to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`}
style={{
const handleTouchStart = (e: React.BaseSyntheticEvent<unknown>) => { color: theme.palette.text[chapter.isRead ? 'disabled' : 'primary'],
preventDefaultAction(e);
bindTriggerProps.onTouchStart(e as TouchEvent);
};
return (
<>
<Card
sx={{
position: 'relative',
margin: 1,
}} }}
onClick={(e) => handleClick(e)}
{...longPressBind(popupState.open)}
> >
<CardActionArea <CardContent
component={Link} sx={{
to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`} display: 'flex',
style={{ justifyContent: 'space-between',
color: theme.palette.text[chapter.isRead ? 'disabled' : 'primary'], alignItems: 'center',
padding: 2,
'&:last-child': { pb: 2 },
}} }}
onClick={(e) => handleClick(e)}
{...longPressBind()}
> >
<CardContent <Stack direction="column" flex={1}>
sx={{ <Typography variant="h5" component="h2">
display: 'flex', {chapter.isBookmarked && (
justifyContent: 'space-between', <BookmarkIcon
alignItems: 'center', color="primary"
padding: 2, sx={{ mr: 0.5, position: 'relative', top: '0.15em' }}
'&:last-child': { pb: 2 }, />
}} )}
> {showChapterNumber
<Stack direction="column" flex={1}> ? `${t('chapter.title')} ${chapter.chapterNumber}`
<Typography variant="h5" component="h2"> : chapter.name}
{chapter.isBookmarked && ( </Typography>
<BookmarkIcon <Typography variant="caption">{chapter.scanlator}</Typography>
color="primary" <Typography variant="caption">
sx={{ mr: 0.5, position: 'relative', top: '0.15em' }} {getUploadDateString(Number(chapter.uploadDate ?? 0))}
/> {isDownloaded && ` • ${t('chapter.status.label.downloaded')}`}
)} </Typography>
{showChapterNumber </Stack>
? `${t('chapter.title')} ${chapter.chapterNumber}`
: chapter.name}
</Typography>
<Typography variant="caption">{chapter.scanlator}</Typography>
<Typography variant="caption">
{getUploadDateString(Number(chapter.uploadDate ?? 0))}
{isDownloaded && ` • ${t('chapter.status.label.downloaded')}`}
</Typography>
</Stack>
{dc && <DownloadStateIndicator download={dc} />} {dc && <DownloadStateIndicator download={dc} />}
{selected === null ? ( {selected === null ? (
<Tooltip title={t('global.button.options')}> <Tooltip title={t('global.button.options')}>
<IconButton <IconButton
{...bindTriggerProps} ref={menuButtonRef}
onClick={handleClickOpenMenu} {...bindTrigger(popupState)}
onTouchStart={handleTouchStart} onClick={(e) => handleClickOpenMenu(e, popupState.open)}
aria-label="more" onTouchStart={(e) => handleClickOpenMenu(e, popupState.open)}
size="large" aria-label="more"
> size="large"
<MoreVertIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip
title={t(selected ? 'global.button.deselect' : 'global.button.select')}
> >
<Checkbox checked={selected} /> <MoreVertIcon />
</Tooltip> </IconButton>
)} </Tooltip>
</CardContent> ) : (
</CardActionArea> <Tooltip
</Card> title={t(selected ? 'global.button.deselect' : 'global.button.select')}
{!isSelecting && popupState.isOpen && ( >
<Menu {...bindMenu(popupState)}> <Checkbox checked={selected} />
{(onClose) => ( </Tooltip>
<ChapterActionMenuItems
onClose={onClose}
chapter={chapter}
allChapters={allChapters}
handleSelection={() => onSelect(true)}
canBeDownloaded={!chapter.isDownloaded && !dc}
/>
)} )}
</Menu> </CardContent>
)} </CardActionArea>
</> </Card>
); {!isSelecting && popupState.isOpen && (
}} <Menu {...bindMenu(popupState)}>
{(onClose) => (
<ChapterActionMenuItems
onClose={onClose}
chapter={chapter}
allChapters={allChapters}
handleSelection={() => onSelect(true)}
canBeDownloaded={!chapter.isDownloaded && !dc}
/>
)}
</Menu>
)}
</>
)}
</PopupState> </PopupState>
</li> </li>
); );

158
src/components/manga/MangaOptionButton.tsx
View File

@@ -7,7 +7,7 @@
*/ */
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import React, { TouchEvent, useMemo } from 'react'; import { BaseSyntheticEvent, MouseEvent, TouchEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
import { Button, Tooltip } from '@mui/material'; import { Button, Tooltip } from '@mui/material';
import Checkbox from '@mui/material/Checkbox'; import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
@@ -18,97 +18,101 @@ import { isMobile } from 'react-device-detect';
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts'; import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
import { TManga } from '@/typings.ts'; import { TManga } from '@/typings.ts';
export const MangaOptionButton = ({ export const MangaOptionButton = forwardRef(
id, (
selected, {
handleSelection, id,
asCheckbox = false, selected,
popupState, handleSelection,
}: { asCheckbox = false,
id: number; popupState,
selected?: boolean | null; }: {
handleSelection?: SelectableCollectionReturnType<TManga['id']>['handleSelection']; id: number;
asCheckbox?: boolean; selected?: boolean | null;
popupState: PopupState; handleSelection?: SelectableCollectionReturnType<TManga['id']>['handleSelection'];
}) => { asCheckbox?: boolean;
const { t } = useTranslation(); popupState: PopupState;
},
ref: ForwardedRef<HTMLButtonElement | null>,
) => {
const { t } = useTranslation();
const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]); const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]);
const preventDefaultAction = (e: React.BaseSyntheticEvent<unknown>) => { const preventDefaultAction = (e: BaseSyntheticEvent) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
}; };
const handleSelectionChange = (e: React.BaseSyntheticEvent<unknown>, isSelected: boolean) => { const handleSelectionChange = (e: ChangeEvent, isSelected: boolean) => {
preventDefaultAction(e); preventDefaultAction(e);
handleSelection?.(id, isSelected); handleSelection?.(id, isSelected);
}; };
const handleClick = (e: React.BaseSyntheticEvent<unknown>) => { const handleClick = (e: MouseEvent | TouchEvent) => {
preventDefaultAction(e); if (isMobile) return;
bindTriggerProps.onClick(e as any);
};
const handleTouchStart = (e: React.BaseSyntheticEvent<unknown>) => { preventDefaultAction(e);
preventDefaultAction(e); popupState.open(e);
bindTriggerProps.onTouchStart(e as TouchEvent); bindTriggerProps.onClick(e as any);
}; };
if (!handleSelection) { if (!handleSelection) {
return null;
}
const isSelected = selected !== null;
if (isSelected) {
if (!asCheckbox) {
return null; return null;
} }
return ( const isSelected = selected !== null;
<Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}> if (isSelected) {
<Checkbox checked={selected} onMouseDown={preventDefaultAction} onChange={handleSelectionChange} /> if (!asCheckbox) {
</Tooltip> return null;
); }
}
return (
<Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
<Checkbox checked={selected} onMouseDown={preventDefaultAction} onChange={handleSelectionChange} />
</Tooltip>
);
}
if (asCheckbox) {
return (
<Tooltip title={t('global.button.options')}>
<IconButton
{...bindTriggerProps}
onClick={handleClick}
onTouchStart={handleClick}
aria-label="more"
size="large"
onMouseDown={preventDefaultAction}
>
<MoreVertIcon />
</IconButton>
</Tooltip>
);
}
if (asCheckbox) {
return ( return (
<Tooltip title={t('global.button.options')}> <Tooltip title={t('global.button.options')}>
<IconButton <Button
ref={ref}
{...bindTriggerProps} {...bindTriggerProps}
onClick={handleClick} onClick={handleClick}
onTouchStart={handleTouchStart} onTouchStart={handleClick}
aria-label="more" className="manga-option-button"
size="large" size="small"
onMouseDown={preventDefaultAction} variant="contained"
sx={{
minWidth: 'unset',
paddingX: '0',
paddingY: '2.5px',
visibility: popupState.isOpen && !isMobile ? 'visible' : 'hidden',
pointerEvents: isMobile ? undefined : 'none',
}}
onMouseDown={(e) => e.stopPropagation()}
> >
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </Button>
</Tooltip> </Tooltip>
); );
} },
);
return (
<Tooltip title={t('global.button.options')}>
<Button
{...bindTriggerProps}
onClick={handleClick}
onTouchStart={handleTouchStart}
className="manga-option-button"
size="small"
variant="contained"
sx={{
minWidth: 'unset',
paddingX: '0',
paddingY: '2.5px',
visibility: popupState.isOpen || isMobile ? 'visible' : 'hidden',
pointerEvents: isMobile ? undefined : 'none',
}}
onMouseDown={(e) => e.stopPropagation()}
>
<MoreVertIcon />
</Button>
</Tooltip>
);
};