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

Hide chapter list action menu during active selection

Browse Source 
Handling changing filters during selection is too cumbersome
This commit is contained in:
schroda
2025-05-20 23:30:19 +02:00
parent e888c989e9
commit fde33a2412
2 changed files with 69 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/modules/chapter/components/ChapterList.tsx
View File

@@ -13,12 +13,6 @@ import Typography from '@mui/material/Typography';
import { ComponentProps, useCallback, useMemo, useState } from 'react';
import { Virtuoso } from 'react-virtuoso';
import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton';
import DownloadIcon from '@mui/icons-material/Download';
import DoneAllIcon from '@mui/icons-material/DoneAll';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import Menu from '@mui/material/Menu';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx';
import { ResumeFab } from '@/modules/manga/components/ResumeFAB.tsx';
@@ -41,7 +35,6 @@ import { useSelectableCollection } from '@/modules/collection/hooks/useSelectabl
import { SelectableCollectionSelectAll } from '@/modules/collection/components/SelectableCollectionSelectAll.tsx';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { ChapterActionMenuItems } from '@/modules/chapter/components/actions/ChapterActionMenuItems.tsx';
import { ChaptersDownloadActionMenuItems } from '@/modules/chapter/components/actions/ChaptersDownloadActionMenuItems.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPlaceholder.tsx';
import { GET_CHAPTERS_MANGA } from '@/lib/graphql/queries/ChapterQuery.ts';
@@ -191,46 +184,16 @@ export const ChapterList = ({
</Typography>
<Stack direction="row">
<CustomTooltip
title={t('chapter.action.mark_as_read.add.label.action.current')}
disabled={areAllChaptersRead}
>
<IconButton
disabled={areAllChaptersRead}
onClick={() => Chapters.markAsRead(Chapters.getNonRead(chapters), true, manga.id)}
color="inherit"
>
<DoneAllIcon />
</IconButton>
</CustomTooltip>
<PopupState variant="popover" popupId="chapterlist-download-button">
{(popupState) => (
<>
<CustomTooltip
title={t('chapter.action.download.add.label.action')}
disabled={areAllChaptersRead}
>
<IconButton
disabled={areAllChaptersDownloaded}
{...bindTrigger(popupState)}
color="inherit"
>
<DownloadIcon />
</IconButton>
</CustomTooltip>
{popupState.isOpen && (
<Menu {...bindMenu(popupState)}>
<ChaptersDownloadActionMenuItems
mangaIds={[manga.id]}
closeMenu={popupState.close}
/>
</Menu>
)}
</>
)}
</PopupState>
<ChaptersToolbarMenu options={options} updateOption={updateOption} />
{areNoItemsSelected && (
<ChaptersToolbarMenu
mangaId={manga.id}
areAllChaptersDownloaded={areAllChaptersDownloaded}
areAllChaptersRead={areAllChaptersRead}
options={options}
updateOption={updateOption}
unreadChapters={Chapters.getNonRead(chapters)}
/>
)}
<SelectableCollectionSelectAll
areAllItemsSelected={areAllItemsSelected}
areNoItemsSelected={areNoItemsSelected}

61
src/modules/chapter/components/ChaptersToolbarMenu.tsx
View File

@@ -10,17 +10,39 @@ import FilterList from '@mui/icons-material/FilterList';
import IconButton from '@mui/material/IconButton';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
import Menu from '@mui/material/Menu';
import DownloadIcon from '@mui/icons-material/Download';
import DoneAllIcon from '@mui/icons-material/DoneAll';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { ChapterOptions } from '@/modules/chapter/components/ChapterOptions.tsx';
import { isFilterActive, updateChapterListOptions } from '@/modules/chapter/utils/ChapterList.util.tsx';
import { ChapterListOptions } from '@/modules/chapter/Chapter.types.ts';
import {
ChapterBookmarkInfo,
ChapterDownloadInfo,
ChapterIdInfo,
ChapterListOptions,
} from '@/modules/chapter/Chapter.types.ts';
import { ChaptersDownloadActionMenuItems } from '@/modules/chapter/components/actions/ChaptersDownloadActionMenuItems.tsx';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
interface IProps {
mangaId: number;
areAllChaptersRead: boolean;
areAllChaptersDownloaded: boolean;
options: ChapterListOptions;
updateOption: ReturnType<typeof updateChapterListOptions>;
unreadChapters: (ChapterIdInfo & ChapterDownloadInfo & ChapterBookmarkInfo)[];
}
export const ChaptersToolbarMenu = ({ options, updateOption }: IProps) => {
export const ChaptersToolbarMenu = ({
mangaId,
areAllChaptersRead,
areAllChaptersDownloaded,
options,
updateOption,
unreadChapters,
}: IProps) => {
const { t } = useTranslation();
const [open, setOpen] = React.useState(false);
@@ -28,6 +50,41 @@ export const ChaptersToolbarMenu = ({ options, updateOption }: IProps) => {
return (
<>
<CustomTooltip
title={t('chapter.action.mark_as_read.add.label.action.current')}
disabled={areAllChaptersRead}
>
<IconButton
disabled={areAllChaptersRead}
onClick={() => Chapters.markAsRead(unreadChapters, true, mangaId)}
color="inherit"
>
<DoneAllIcon />
</IconButton>
</CustomTooltip>
<PopupState variant="popover" popupId="chapterlist-download-button">
{(popupState) => (
<>
<CustomTooltip
title={t('chapter.action.download.add.label.action')}
disabled={areAllChaptersRead}
>
<IconButton
disabled={areAllChaptersDownloaded}
{...bindTrigger(popupState)}
color="inherit"
>
<DownloadIcon />
</IconButton>
</CustomTooltip>
{popupState.isOpen && (
<Menu {...bindMenu(popupState)}>
<ChaptersDownloadActionMenuItems mangaIds={[mangaId]} closeMenu={popupState.close} />
</Menu>
)}
</>
)}
</PopupState>
<CustomTooltip title={t('settings.title')}>
<IconButton onClick={() => setOpen(true)} color="inherit">
<FilterList color={isFiltered ? 'warning' : undefined} />