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

migrate some components to Mui5 new styling system (#72)

Browse Source 
* - Changed the value in Manga from 960 to 900( md breakpooint)
- The CicularLoader in About  and Reader screens is now centered to the whole screen
- Changed relative imports in About screen to absolute imports
- removed changed styles from Browse Screen, PageNumber

* Migrated Source Card, Extension Card and LoadingPlaceHolder to MUI system

* Migrated CategorySelect and LandSelect to using the sx prop

* migrated ReaderNavbar to mui 5

* - Removed Unused Styles from Page
- Migrated DoublePage, doublePagedPager, PagedPager, Vertical Pager and Horizontal Pager.

* Replaced style prop with sx prop

* removed useStyles completely from the project except for the Manga Screen

* added a comment

* Fixed the Source Card Buttons padding

* Removed the trailing backspace

Co-authored-by: Sascha Hahne <ntbm@users.noreply.github.com>

Co-authored-by: Sascha Hahne <ntbm@users.noreply.github.com>
This commit is contained in:
abhijeetChawla
2021-11-14 15:51:08 +05:30
committed by GitHub
parent 93c4ce3450
commit 72ef61e286
28 changed files with 341 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/screens/Browse.tsx
View File

@@ -6,21 +6,13 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useState } from 'react';
import makeStyles from '@mui/styles/makeStyles';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import TabPanel from 'components/util/TabPanel';
import Sources from 'screens/Sources';
import Extensions from 'screens/Extensions';
const useStyles = makeStyles({
noCapitalize: {
textTransform: 'none',
},
});
export default function Browse() {
const classes = useStyles();
const [tabNum, setTabNum] = useState<number>(0);
return (
@@ -35,8 +27,8 @@ export default function Browse() {
scrollButtons
allowScrollButtonsMobile
>
<Tab className={classes.noCapitalize} label="Sources" />
<Tab className={classes.noCapitalize} label="Extensions" />
<Tab sx={{ textTransform: 'none' }} label="Sources" />
<Tab sx={{ textTransform: 'none' }} label="Extensions" />
</Tabs>
<TabPanel index={0} currentIndex={tabNum}>
<Sources />

22
src/screens/Manga.tsx
View File

@@ -18,15 +18,9 @@ import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
import makeToast from 'components/util/Toast';
import { Fab } from '@mui/material';
import PlayArrow from '@mui/icons-material/PlayArrow';
import { Box } from '@mui/system';
const useStyles = makeStyles((theme: Theme) => ({
root: {
[theme.breakpoints.up('md')]: {
display: 'flex',
},
overflow: 'hidden',
},
chapters: {
listStyle: 'none',
padding: 0,
@@ -37,12 +31,6 @@ const useStyles = makeStyles((theme: Theme) => ({
margin: 0,
},
},
loading: {
margin: '10px 0',
display: 'flex',
justifyContent: 'center',
},
}));
const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
@@ -153,7 +141,7 @@ export default function Manga() {
));
return (
<div className={classes.root}>
<Box sx={{ display: { md: 'flex' }, overflow: 'hidden' }}>
<LoadingPlaceholder
shouldRender={manga !== undefined}
component={MangaDetails}
@@ -166,7 +154,7 @@ export default function Manga() {
<Virtuoso
style={{ // override Virtuoso default values and set them with class
height: 'undefined',
overflowY: window.innerWidth < 960 ? 'visible' : 'auto',
overflowY: window.innerWidth < 900 ? 'visible' : 'auto',
}}
className={classes.chapters}
totalCount={chapters.length}
@@ -177,11 +165,11 @@ export default function Manga() {
triggerChaptersUpdate={triggerChaptersUpdate}
/>
)}
useWindowScroll={window.innerWidth < 960}
useWindowScroll={window.innerWidth < 900}
overscan={window.innerHeight * 0.5}
/>
</LoadingPlaceholder>
<ResumeFab />
</div>
</Box>
);
}

26
src/screens/Reader.tsx
View File

@@ -6,7 +6,6 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import CircularProgress from '@mui/material/CircularProgress';
import makeStyles from '@mui/styles/makeStyles';
import React, { useContext, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import HorizontalPager from 'components/reader/pager/HorizontalPager';
@@ -19,18 +18,7 @@ import NavbarContext from 'components/context/NavbarContext';
import client from 'util/client';
import useLocalStorage from 'util/useLocalStorage';
import cloneObject from 'util/cloneObject';
const useStyles = (settings: IReaderSettings) => makeStyles({
root: {
width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw',
},
loading: {
margin: '50px auto',
display: 'flex',
justifyContent: 'center',
},
});
import { Box } from '@mui/system';
const getReaderComponent = (readerType: ReaderType) => {
switch (readerType) {
@@ -63,7 +51,6 @@ const initialChapter = () => ({ pageCount: -1, index: -1, chapterCount: 0 });
export default function Reader() {
const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);
const classes = useStyles(settings)();
const history = useHistory();
const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
@@ -145,9 +132,12 @@ export default function Reader() {
// return spinner while chpater data is loading
if (chapter.pageCount === -1) {
return (
<div className={classes.loading}>
<Box sx={{
height: '100vh', width: '100vw', display: 'grid', placeItems: 'center',
}}
>
<CircularProgress thickness={5} />
</div>
</Box>
);
}
@@ -176,7 +166,7 @@ export default function Reader() {
const ReaderComponent = getReaderComponent(settings.readerType);
return (
<div className={classes.root}>
<Box sx={{ width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw' }}>
<PageNumber
settings={settings}
curPage={curPage}
@@ -193,6 +183,6 @@ export default function Reader() {
nextChapter={nextChapter}
prevChapter={prevChapter}
/>
</div>
</Box>
);
}

30
src/screens/SearchSingle.tsx
View File

@@ -6,33 +6,19 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useContext, useEffect, useState } from 'react';
import makeStyles from '@mui/styles/makeStyles';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { useParams } from 'react-router-dom';
import MangaGrid from 'components/MangaGrid';
import NavbarContext from 'components/context/NavbarContext';
import client from 'util/client';
const useStyles = makeStyles((theme) => ({
root: {
margin: '20px 10px',
display: 'flex',
justifyContent: 'space-around',
width: '300px',
TextField: {
margin: theme.spacing(1),
width: '25ch',
},
},
}));
import { Box } from '@mui/system';
export default function SearchSingle() {
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => { setTitle('Search'); setAction(<></>); }, []);
const { sourceId } = useParams<{ sourceId: string }>();
const classes = useStyles();
const [error, setError] = useState<boolean>(false);
const [mangas, setMangas] = useState<IMangaCard[]>([]);
const [message, setMessage] = useState<string>('');
@@ -89,10 +75,20 @@ export default function SearchSingle() {
return (
<>
<div className={classes.root}>
<Box sx={{
margin: '20px 10px',
display: 'flex',
justifyContent: 'space-around',
width: '300px',
}}
>
<TextField
inputRef={textInput}
error={error}
sx={{
m: 1,
width: '25ch',
}}
id="filled-basic"
variant="filled"
size="small"
@@ -102,7 +98,7 @@ export default function SearchSingle() {
<Button variant="contained" color="primary" onClick={() => processInput()}>
Search
</Button>
</div>
</Box>
{searchTerm.length > 0
&& (
<MangaGrid

2
src/screens/Settings.tsx
View File

@@ -59,7 +59,7 @@ export default function Settings() {
return (
<>
<List style={{ padding: 0 }}>
<List sx={{ padding: 0 }}>
<ListItemLink href="/settings/categories">
<ListItemIcon>
<ListAltIcon />

2
src/screens/SourceConfigure.tsx
View File

@@ -57,7 +57,7 @@ export default function SourceConfigure() {
return (
<>
<List style={{ padding: 0 }}>
<List sx={{ padding: 0 }}>
{sourcePreferences.map(
(it, index) => {
const props = cloneObject(it.props);

9
src/screens/Updates.tsx
View File

@@ -20,6 +20,7 @@ import client from 'util/client';
import useLocalStorage from 'util/useLocalStorage';
import EmptyView from 'components/util/EmptyView';
import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
import { Box } from '@mui/system';
function epochToDate(epoch: number) {
const date = new Date(0); // The 0 there is the key, which sets the date to the epoch
@@ -189,7 +190,7 @@ export default function Updates() {
padding: 2,
}}
>
<div style={{ display: 'flex' }}>
<Box sx={{ display: 'flex' }}>
<Avatar
variant="rounded"
sx={{
@@ -201,7 +202,7 @@ export default function Updates() {
}}
src={`${serverAddress}${manga.thumbnailUrl}?useCache=${useCache}`}
/>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="h5" component="h2">
{manga.title}
</Typography>
@@ -209,8 +210,8 @@ export default function Updates() {
{chapter.name}
{downloadStatusStringFor(chapter)}
</Typography>
</div>
</div>
</Box>
</Box>
{downloadStatusStringFor(chapter) === ''
&& (
<IconButton

26
src/screens/settings/About.tsx
View File

@@ -1,26 +1,15 @@
import React, { useContext, useEffect, useState } from 'react';
import { CircularProgress } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import client from '../../util/client';
import ListItemLink from '../../components/util/ListItemLink';
import NavbarContext from '../../components/context/NavbarContext';
const useStyles = makeStyles({
loading: {
width: '100vw',
'& div': {
margin: '50px auto',
display: 'block',
},
},
});
import { Box } from '@mui/system';
import client from 'util/client';
import ListItemLink from 'components/util/ListItemLink';
import NavbarContext from 'components/context/NavbarContext';
export default function About() {
const { setTitle, setAction } = useContext(NavbarContext);
const classes = useStyles();
const [about, setAbout] = useState<IAbout>();
@@ -36,9 +25,12 @@ export default function About() {
if (about === undefined) {
return (
<div className={classes.loading}>
<Box sx={{
height: 'calc(100vh - 128px)', display: 'grid', placeItems: 'center',
}}
>
<CircularProgress thickness={5} />
</div>
</Box>
);
}

2
src/screens/settings/Backup.tsx
View File

@@ -67,7 +67,7 @@ export default function Backup() {
return (
<>
<List style={{ padding: 0 }}>
<List sx={{ padding: 0 }}>
<ListItemLink href={`${baseURL}/api/v1/backup/export/file`}>
<ListItemText
primary="Create Backup"