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,
ChapterScanlatorInfo,
} from '@/modules/chapter/services/Chapters.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
type TChapter = ChapterIdInfo &
ChapterMangaInfo &
@@ -112,13 +113,9 @@ export const ChapterCard = memo((props: IProps) => {
<Card
sx={{
touchCallout: 'none',
backgroundColor:
// eslint-disable-next-line no-nested-ternary
mode === 'reader'
? isActiveChapter
? 'primary.main'
: 'background.default'
: undefined,
...applyStyles(mode === 'reader' && isActiveChapter, {
backgroundColor: 'primary.main',
}),
}}
>
<CardActionArea
@@ -155,22 +152,55 @@ export const ChapterCard = memo((props: IProps) => {
}}
>
{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
? `${t('chapter.title_one')} ${chapter.chapterNumber}`
: chapter.name}
</TypographyMaxLines>
</Stack>
<Typography variant="caption">{chapter.scanlator}</Typography>
<Typography variant="caption">
<Typography
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)}
{isDownloaded && ` • ${t('chapter.status.label.downloaded')}`}
</Typography>
</Stack>
<DownloadStateIndicator chapterId={chapter.id} />
<DownloadStateIndicator
chapterId={chapter.id}
color={
mode === 'reader' && isActiveChapter
? theme.palette.primary.contrastText
: undefined
}
/>
<Stack sx={{ minHeight: '48px' }}>
{selected === null ? (
@@ -181,6 +211,7 @@ export const ChapterCard = memo((props: IProps) => {
onClick={(e) => handleClickOpenMenu(e, popupState.open)}
aria-label="more"
size="large"
color={mode === 'reader' && isActiveChapter ? 'secondary' : 'primary'}
>
<MoreVertIcon />
</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',
} as const;
export const DownloadStateIndicator = ({ chapterId }: { chapterId: ChapterIdInfo['id'] }) => {
export const DownloadStateIndicator = ({ chapterId, color }: { chapterId: ChapterIdInfo['id']; color?: string }) => {
const { t } = useTranslation();
const download = Chapters.useDownloadStatusFromCache(chapterId);
@@ -44,7 +44,7 @@ export const DownloadStateIndicator = ({ chapterId }: { chapterId: ChapterIdInfo
justifyContent: 'center',
}}
>
{isDownloading && <CircularProgress variant="determinate" value={download.progress * 100} />}
{isDownloading && <CircularProgress variant="determinate" value={download.progress * 100} sx={{ color }} />}
<Box
sx={{
top: 0,
@@ -57,13 +57,7 @@ export const DownloadStateIndicator = ({ chapterId }: { chapterId: ChapterIdInfo
justifyContent: 'center',
}}
>
<Typography
variant="caption"
component="div"
sx={{
color: 'text.secondary',
}}
>
<Typography variant="caption" component="div" sx={{ color }}>
<>
{isDownloading && progress}
{!isDownloading &&