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

Fix text color of active chapter in chapter list of reader

Browse Source
This commit is contained in:
schroda
2025-01-17 00:48:37 +01:00
parent 5391bc256d
commit 7818fb450d
2 changed files with 46 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/modules/chapter/components/cards/ChapterCard.tsx
View File

@@ -38,6 +38,7 @@ import {
Chapters, Chapters,
ChapterScanlatorInfo, ChapterScanlatorInfo,
} from '@/modules/chapter/services/Chapters.ts'; } from '@/modules/chapter/services/Chapters.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
type TChapter = ChapterIdInfo & type TChapter = ChapterIdInfo &
ChapterMangaInfo & ChapterMangaInfo &
@@ -112,13 +113,9 @@ export const ChapterCard = memo((props: IProps) => {
<Card <Card
sx={{ sx={{
touchCallout: 'none', touchCallout: 'none',
backgroundColor: ...applyStyles(mode === 'reader' && isActiveChapter, {
// eslint-disable-next-line no-nested-ternary backgroundColor: 'primary.main',
mode === 'reader' }),
? isActiveChapter
? 'primary.main'
: 'background.default'
: undefined,
}} }}
> >
<CardActionArea <CardActionArea
@@ -155,22 +152,55 @@ export const ChapterCard = memo((props: IProps) => {
}} }}
> >
{chapter.isBookmarked && ( {chapter.isBookmarked && (
<BookmarkIcon color={isActiveChapter ? 'secondary' : 'primary'} /> <BookmarkIcon
color={mode === 'reader' && isActiveChapter ? 'secondary' : 'primary'}
/>
)} )}
<TypographyMaxLines variant="h6" component="h4"> <TypographyMaxLines
variant="h6"
component="h4"
sx={{
...applyStyles(mode === 'reader' && isActiveChapter, {
color: theme.palette.primary.contrastText,
}),
}}
>
{showChapterNumber {showChapterNumber
? `${t('chapter.title_one')} ${chapter.chapterNumber}` ? `${t('chapter.title_one')} ${chapter.chapterNumber}`
: chapter.name} : chapter.name}
</TypographyMaxLines> </TypographyMaxLines>
</Stack> </Stack>
<Typography variant="caption">{chapter.scanlator}</Typography> <Typography
<Typography variant="caption"> variant="caption"
sx={{
...applyStyles(mode === 'reader' && isActiveChapter, {
color: theme.palette.primary.contrastText,
}),
}}
>
{chapter.scanlator}
</Typography>
<Typography
variant="caption"
sx={{
...applyStyles(mode === 'reader' && isActiveChapter, {
color: theme.palette.primary.contrastText,
}),
}}
>
{getDateString(Number(chapter.uploadDate ?? 0), true)} {getDateString(Number(chapter.uploadDate ?? 0), true)}
{isDownloaded && ` • ${t('chapter.status.label.downloaded')}`} {isDownloaded && ` • ${t('chapter.status.label.downloaded')}`}
</Typography> </Typography>
</Stack> </Stack>
<DownloadStateIndicator chapterId={chapter.id} /> <DownloadStateIndicator
chapterId={chapter.id}
color={
mode === 'reader' && isActiveChapter
? theme.palette.primary.contrastText
: undefined
}
/>
<Stack sx={{ minHeight: '48px' }}> <Stack sx={{ minHeight: '48px' }}>
{selected === null ? ( {selected === null ? (
@@ -181,6 +211,7 @@ export const ChapterCard = memo((props: IProps) => {
onClick={(e) => handleClickOpenMenu(e, popupState.open)} onClick={(e) => handleClickOpenMenu(e, popupState.open)}
aria-label="more" aria-label="more"
size="large" size="large"
color={mode === 'reader' && isActiveChapter ? 'secondary' : 'primary'}
> >
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButton>

12
src/modules/core/components/DownloadStateIndicator.tsx
View File

@@ -21,7 +21,7 @@ const DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP: { [state in DownloadState]: Transla
QUEUED: 'download.state.label.queued', QUEUED: 'download.state.label.queued',
} as const; } as const;
export const DownloadStateIndicator = ({ chapterId }: { chapterId: ChapterIdInfo['id'] }) => { export const DownloadStateIndicator = ({ chapterId, color }: { chapterId: ChapterIdInfo['id']; color?: string }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const download = Chapters.useDownloadStatusFromCache(chapterId); const download = Chapters.useDownloadStatusFromCache(chapterId);
@@ -44,7 +44,7 @@ export const DownloadStateIndicator = ({ chapterId }: { chapterId: ChapterIdInfo
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
{isDownloading && <CircularProgress variant="determinate" value={download.progress * 100} />} {isDownloading && <CircularProgress variant="determinate" value={download.progress * 100} sx={{ color }} />}
<Box <Box
sx={{ sx={{
top: 0, top: 0,
@@ -57,13 +57,7 @@ export const DownloadStateIndicator = ({ chapterId }: { chapterId: ChapterIdInfo
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<Typography <Typography variant="caption" component="div" sx={{ color }}>
variant="caption"
component="div"
sx={{
color: 'text.secondary',
}}
>
<> <>
{isDownloading && progress} {isDownloading && progress}
{!isDownloading && {!isDownloading &&