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

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

Browse Source 
This reverts commit 72ef61e286.
This commit is contained in:
Aria Moradi
2021-11-15 17:21:31 +03:30
parent 0eedbe6626
commit 04a1898ea7
28 changed files with 501 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/screens/Browse.tsx
View File

@@ -6,13 +6,21 @@
* 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 (
@@ -27,8 +35,8 @@ export default function Browse() {
scrollButtons
allowScrollButtonsMobile
>
<Tab sx={{ textTransform: 'none' }} label="Sources" />
<Tab sx={{ textTransform: 'none' }} label="Extensions" />
<Tab className={classes.noCapitalize} label="Sources" />
<Tab className={classes.noCapitalize} label="Extensions" />
</Tabs>
<TabPanel index={0} currentIndex={tabNum}>
<Sources />

22
src/screens/Manga.tsx
View File

@@ -18,9 +18,15 @@ 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,
@@ -31,6 +37,12 @@ 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');
@@ -141,7 +153,7 @@ export default function Manga() {
));
return (
<Box sx={{ display: { md: 'flex' }, overflow: 'hidden' }}>
<div className={classes.root}>
<LoadingPlaceholder
shouldRender={manga !== undefined}
component={MangaDetails}
@@ -154,7 +166,7 @@ export default function Manga() {
<Virtuoso
style={{ // override Virtuoso default values and set them with class
height: 'undefined',
overflowY: window.innerWidth < 900 ? 'visible' : 'auto',
overflowY: window.innerWidth < 960 ? 'visible' : 'auto',
}}
className={classes.chapters}
totalCount={chapters.length}
@@ -165,11 +177,11 @@ export default function Manga() {
triggerChaptersUpdate={triggerChaptersUpdate}
/>
)}
useWindowScroll={window.innerWidth < 900}
useWindowScroll={window.innerWidth < 960}
overscan={window.innerHeight * 0.5}
/>
</LoadingPlaceholder>
<ResumeFab />
</Box>
</div>
);
}

26
src/screens/Reader.tsx
View File

@@ -6,6 +6,7 @@
* 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';
@@ -18,7 +19,18 @@ import NavbarContext from 'components/context/NavbarContext';
import client from 'util/client';
import useLocalStorage from 'util/useLocalStorage';
import cloneObject from 'util/cloneObject';
import { Box } from '@mui/system';
const useStyles = (settings: IReaderSettings) => makeStyles({
root: {
width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw',
},
loading: {
margin: '50px auto',
display: 'flex',
justifyContent: 'center',
},
});
const getReaderComponent = (readerType: ReaderType) => {
switch (readerType) {
@@ -51,6 +63,7 @@ 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', '');
@@ -136,12 +149,9 @@ export default function Reader() {
// return spinner while chpater data is loading
if (chapter.pageCount === -1) {
return (
<Box sx={{
height: '100vh', width: '100vw', display: 'grid', placeItems: 'center',
}}
>
<div className={classes.loading}>
<CircularProgress thickness={5} />
</Box>
</div>
);
}
@@ -170,7 +180,7 @@ export default function Reader() {
const ReaderComponent = getReaderComponent(settings.readerType);
return (
<Box sx={{ width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw' }}>
<div className={classes.root}>
<PageNumber
settings={settings}
curPage={curPage}
@@ -187,6 +197,6 @@ export default function Reader() {
nextChapter={nextChapter}
prevChapter={prevChapter}
/>
</Box>
</div>
);
}

30
src/screens/SearchSingle.tsx
View File

@@ -6,19 +6,33 @@
* 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';
import { Box } from '@mui/system';
const useStyles = makeStyles((theme) => ({
root: {
margin: '20px 10px',
display: 'flex',
justifyContent: 'space-around',
width: '300px',
TextField: {
margin: theme.spacing(1),
width: '25ch',
},
},
}));
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>('');
@@ -75,20 +89,10 @@ export default function SearchSingle() {
return (
<>
<Box sx={{
margin: '20px 10px',
display: 'flex',
justifyContent: 'space-around',
width: '300px',
}}
>
<div className={classes.root}>
<TextField
inputRef={textInput}
error={error}
sx={{
m: 1,
width: '25ch',
}}
id="filled-basic"
variant="filled"
size="small"
@@ -98,7 +102,7 @@ export default function SearchSingle() {
<Button variant="contained" color="primary" onClick={() => processInput()}>
Search
</Button>
</Box>
</div>
{searchTerm.length > 0
&& (
<MangaGrid

2
src/screens/Settings.tsx
View File

@@ -59,7 +59,7 @@ export default function Settings() {
return (
<>
<List sx={{ padding: 0 }}>
<List style={{ 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 sx={{ padding: 0 }}>
<List style={{ padding: 0 }}>
{sourcePreferences.map(
(it, index) => {
const props = cloneObject(it.props);

9
src/screens/Updates.tsx
View File

@@ -20,7 +20,6 @@ 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
@@ -190,7 +189,7 @@ export default function Updates() {
padding: 2,
}}
>
<Box sx={{ display: 'flex' }}>
<div style={{ display: 'flex' }}>
<Avatar
variant="rounded"
sx={{
@@ -202,7 +201,7 @@ export default function Updates() {
}}
src={`${serverAddress}${manga.thumbnailUrl}?useCache=${useCache}`}
/>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="h5" component="h2">
{manga.title}
</Typography>
@@ -210,8 +209,8 @@ export default function Updates() {
{chapter.name}
{downloadStatusStringFor(chapter)}
</Typography>
</Box>
</Box>
</div>
</div>
{downloadStatusStringFor(chapter) === ''
&& (
<IconButton

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

@@ -1,15 +1,26 @@
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 { Box } from '@mui/system';
import client from 'util/client';
import ListItemLink from 'components/util/ListItemLink';
import NavbarContext from 'components/context/NavbarContext';
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',
},
},
});
export default function About() {
const { setTitle, setAction } = useContext(NavbarContext);
const classes = useStyles();
const [about, setAbout] = useState<IAbout>();
@@ -25,12 +36,9 @@ export default function About() {
if (about === undefined) {
return (
<Box sx={{
height: 'calc(100vh - 128px)', display: 'grid', placeItems: 'center',
}}
>
<div className={classes.loading}>
<CircularProgress thickness={5} />
</Box>
</div>
);
}

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

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