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

Use Typography in MangaDetails

Browse Source
This commit is contained in:
schroda
2024-05-23 00:40:20 +02:00
parent 0ab6549a20
commit c9cf516473
3 changed files with 56 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/atoms/Metadata.tsx Normal file
View File

@@ -0,0 +1,34 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack, { StackProps } from '@mui/material/Stack';
import Typography, { TypographyProps } from '@mui/material/Typography';
export const Metadata = ({
title,
value,
stackProps,
titleProps,
valueProps,
}: {
title: string;
value: string;
stackProps?: StackProps;
titleProps?: TypographyProps;
valueProps?: TypographyProps;
}) => (
<Stack
{...stackProps}
sx={{ flexDirection: 'row', columnGap: 1, flexWrap: 'wrap', alignItems: 'baseline', ...stackProps?.sx }}
>
<Typography {...titleProps}>{title}</Typography>
<Typography color="text.secondary" {...valueProps}>
{value}
</Typography>
</Stack>
);

33
src/components/manga/MangaDetails.tsx
View File

@@ -10,10 +10,11 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import PublicIcon from '@mui/icons-material/Public';
import { styled } from '@mui/material/styles';
import React, { useEffect, useMemo } from 'react';
import React, { ComponentProps, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { t as translate } from 'i18next';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { ISource, TManga } from '@/typings';
import { makeToast } from '@/components/util/Toast';
import { Mangas } from '@/lib/data/Mangas.ts';
@@ -21,6 +22,7 @@ import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
import { CustomIconButton } from '@/components/atoms/CustomIconButton';
import { TrackMangaButton } from '@/components/manga/TrackMangaButton.tsx';
import { useManageMangaLibraryState } from '@/components/manga/useManageMangaLibraryState.tsx';
import { Metadata as BaseMetadata } from '@/components/atoms/Metadata.tsx';
const DetailsWrapper = styled('div')(({ theme }) => ({
width: '100%',
@@ -59,7 +61,7 @@ const Thumbnail = styled('div')(() => ({
// },
}));
const Metadata = styled('div')(({ theme }) => ({
const MetadataContainer = styled('div')(({ theme }) => ({
marginLeft: 15,
maxWidth: '100%',
'& span': {
@@ -69,6 +71,11 @@ const Metadata = styled('div')(({ theme }) => ({
fontSize: '1.3em',
},
}));
const Metadata = (props: ComponentProps<typeof BaseMetadata>) => (
<BaseMetadata {...props} titleProps={{ variant: 'h6' }} valueProps={{ variant: 'h6' }} />
);
const MangaButtonsContainer = styled('div')(({ theme }) => ({
display: 'flex',
justifyContent: 'space-around',
@@ -181,19 +188,15 @@ export const MangaDetails: React.FC<IProps> = ({ manga }) => {
<Thumbnail>
<SpinnerImage src={Mangas.getThumbnailUrl(manga)} alt="Manga Thumbnail" />
</Thumbnail>
<Metadata>
<h1>{manga.title}</h1>
<h3>
{`${t('manga.label.author')}: `}
<span>{getValueOrUnknown(manga.author)}</span>
</h3>
<h3>
{`${t('manga.label.artist')}: `}
<span>{getValueOrUnknown(manga.artist)}</span>
</h3>
<h3>{`${t('manga.label.status')}: ${manga.status}`}</h3>
<h3>{`${t('source.title')}: ${getSourceName(manga.source)}`}</h3>
</Metadata>
<MetadataContainer>
<Typography variant="h4" component="h1" sx={{ mb: 1 }}>
{manga.title}
</Typography>
<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.status')} value={getValueOrUnknown(manga.status)} />
<Metadata title={t('source.title')} value={getSourceName(manga.source)} />
</MetadataContainer>
</ThumbnailMetadataWrapper>
<MangaButtonsContainer>
<CustomIconButton

16
src/components/tracker/TrackerMangaCard.tsx
View File

@@ -27,6 +27,7 @@ import sanitizeHtml from 'sanitize-html';
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
import { TrackerManga } from '@/lib/data/Trackers.ts';
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
import { Metadata } from '@/components/atoms/Metadata.tsx';
const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
<Stack direction="row" gap="5px" justifyContent="space-between">
@@ -39,15 +40,6 @@ const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: b
</Stack>
);
const TrackerMangaCardInfo = ({ title, value }: { title: string; value: string }) => (
<Stack direction="row" gap="5px" flexWrap="wrap">
<Typography variant="body1">{title}</Typography>
<Typography variant="body1" color="text.secondary">
{value}
</Typography>
</Stack>
);
const SUMMARY_COLLAPSED_SIZE = 50;
const TrackerMangaCardSummary = ({ summary }: { summary: string }) => {
const { t } = useTranslation();
@@ -164,9 +156,9 @@ export const TrackerMangaCard = ({
<TrackerMangaCardLink url={manga.trackingUrl}>
<TrackerMangaCardTitle title={manga.title} selected={selected} />
</TrackerMangaCardLink>
<TrackerMangaCardInfo title={t('global.label.type')} value={manga.publishingType} />
<TrackerMangaCardInfo title={t('global.label.started')} value={manga.startDate} />
<TrackerMangaCardInfo title={t('manga.label.status')} value={manga.publishingStatus} />
<Metadata title={t('global.label.type')} value={manga.publishingType} />
<Metadata title={t('global.label.started')} value={manga.startDate} />
<Metadata title={t('manga.label.status')} value={manga.publishingStatus} />
</Stack>
</Stack>
<TrackerMangaCardSummary summary={manga.summary} />