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

* - 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>
2021-11-14 15:51:08 +05:30
parent 93c4ce3450
commit 72ef61e286
28 changed files with 341 additions and 501 deletions
--- a/src/components/reader/DoublePage.tsx
+++ b/src/components/reader/DoublePage.tsx
@@ -5,28 +5,16 @@
 * 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 makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
+import { Box, styled } from '@mui/system';

-const useStyles = (settings: IReaderSettings) => makeStyles({
-    image: {
-        display: 'block',
-        marginBottom: 0,
-        width: 'auto',
-        minHeight: '99vh',
-        height: 'auto',
-        maxHeight: '99vh',
-        objectFit: 'contain',
-    },
-    page: {
-        display: 'flex',
-        flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
-        justifyContent: 'center',
-        margin: '0 auto',
-        width: 'auto',
-        height: 'auto',
-        overflowX: 'scroll',
-    },
+const Image = styled('img')({
+    marginBottom: 0,
+    width: 'auto',
+    minHeight: '99vh',
+    height: 'auto',
+    maxHeight: '99vh',
+    objectFit: 'contain',
 });

 interface IProps {
@@ -41,21 +29,28 @@ const DoublePage = React.forwardRef((props: IProps, ref: any) => {
        image1src, image2src, index, settings,
    } = props;

-    const classes = useStyles(settings)();
-
    return (
-        <div ref={ref} className={classes.page}>
-            <img
-                className={classes.image}
+        <Box
+            ref={ref}
+            sx={{
+                display: 'flex',
+                flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
+                justifyContent: 'center',
+                margin: '0 auto',
+                width: 'auto',
+                height: 'auto',
+                overflowX: 'scroll',
+            }}
+        >
+            <Image
                src={image1src}
                alt={`Page #${index}`}
            />
-            <img
-                className={classes.image}
+            <Image
                src={image2src}
                alt={`Page #${index + 1}`}
            />
-        </div>
+        </Box>
    );
 });

--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -5,7 +5,6 @@
 * 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 makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
 import SpinnerImage from 'components/util/SpinnerImage';
 import useLocalStorage from 'util/useLocalStorage';
@@ -53,22 +52,6 @@ function imageStyle(settings: IReaderSettings): any {
    };
 }

-const useStyles = (settings: IReaderSettings) => makeStyles({
-    loading: {
-        margin: '100px auto',
-        height: '100vh',
-        width: '100vw',
-    },
-    loadingImage: {
-        height: '100vh',
-        width: '70vw',
-        padding: '50px calc(50% - 20px)',
-        backgroundColor: '#525252',
-        marginBottom: 10,
-    },
-    image: imageStyle(settings),
-});
-
 interface IProps {
    src: string
    index: number
@@ -84,7 +67,6 @@ const Page = React.forwardRef((props: IProps, ref: any) => {

    const [useCache] = useLocalStorage<boolean>('useCache', true);

-    const classes = useStyles(settings)();
    const imgRef = useRef<HTMLImageElement>(null);

    const handleVerticalScroll = () => {
@@ -127,8 +109,14 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
                onImageLoad={onImageLoad}
                alt={`Page #${index}`}
                imgRef={imgRef}
-                spinnerClassName={`${classes.image} ${classes.loadingImage}`}
-                imgClassName={classes.image}
+                spinnerStyle={{
+                    height: '100vh',
+                    width: '70vw',
+                    padding: '50px calc(50% - 20px)',
+                    backgroundColor: '#525252',
+                    marginBottom: 10,
+                }}
+                imgStyle={imageStyle(settings)}
            />
        </div>
    );
--- a/src/components/reader/PageNumber.tsx
+++ b/src/components/reader/PageNumber.tsx
@@ -5,21 +5,8 @@
 * 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 makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
-
-const useStyles = (settings: IReaderSettings) => makeStyles({
-    pageNumber: {
-        display: settings.showPageNumber ? 'block' : 'none',
-        position: 'fixed',
-        bottom: '50px',
-        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
-        padding: '2px',
-        textAlign: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-        borderRadius: '10px',
-    },
-});
+import { Box } from '@mui/system';

 interface IProps {
    settings: IReaderSettings
@@ -29,11 +16,20 @@ interface IProps {

 export default function PageNumber(props: IProps) {
    const { settings, curPage, pageCount } = props;
-    const classes = useStyles(settings)();

    return (
-        <div className={classes.pageNumber}>
+        <Box sx={{
+            display: settings.showPageNumber ? 'block' : 'none',
+            position: 'fixed',
+            bottom: '50px',
+            right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
+            padding: '2px',
+            textAlign: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            borderRadius: '10px',
+        }}
+        >
            {`${curPage + 1} / ${pageCount}`}
-        </div>
+        </Box>
    );
 }
--- a/src/components/reader/pager/DoublePagedPager.tsx
+++ b/src/components/reader/pager/DoublePagedPager.tsx
@@ -5,34 +5,17 @@
 * 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 makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
+import { Box } from '@mui/system';
 import Page from '../Page';
 import DoublePage from '../DoublePage';

-const useStyles = (settings: IReaderSettings) => makeStyles({
-    preload: {
-        display: 'none',
-    },
-    reader: {
-        display: 'flex',
-        flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
-        justifyContent: 'center',
-        margin: '0 auto',
-        width: 'auto',
-        height: 'auto',
-        overflowX: 'scroll',
-    },
-});
-
 export default function DoublePagedPager(props: IReaderProps) {
    const {
        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
    } = props;

-    const classes = useStyles(settings)();
-
    const selfRef = useRef<HTMLDivElement>(null);
    const pagesRef = useRef<HTMLImageElement[]>([]);

@@ -192,8 +175,8 @@ export default function DoublePagedPager(props: IReaderProps) {
    }, [selfRef, curPage, settings.readerType]);

    return (
-        <div ref={selfRef}>
-            <div id="preload" className={classes.preload}>
+        <Box ref={selfRef}>
+            <Box id="preload" sx={{ display: 'none' }}>
                {
                    pages.map((page) => (
                        <img
@@ -205,8 +188,19 @@ export default function DoublePagedPager(props: IReaderProps) {
                        />
                    ))
                }
-            </div>
-            <div id="display" className={classes.reader} />
-        </div>
+            </Box>
+            <Box
+                id="display"
+                sx={{
+                    display: 'flex',
+                    flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
+                    justifyContent: 'center',
+                    margin: '0 auto',
+                    width: 'auto',
+                    height: 'auto',
+                    overflowX: 'scroll',
+                }}
+            />
+        </Box>
    );
 }
--- a/src/components/reader/pager/HorizontalPager.tsx
+++ b/src/components/reader/pager/HorizontalPager.tsx
@@ -5,30 +5,15 @@
 * 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 makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
+import { Box } from '@mui/system';
 import Page from '../Page';

-const useStyles = (settings: IReaderSettings) => makeStyles({
-    reader: {
-        display: 'flex',
-        flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
-        justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
-        margin: '0 auto',
-        width: 'auto',
-        height: 'auto',
-        overflowX: 'visible',
-        userSelect: 'none',
-    },
-});
-
 export default function HorizontalPager(props: IReaderProps) {
    const {
        pages, curPage, settings, setCurPage, prevChapter, nextChapter,
    } = props;

-    const classes = useStyles(settings)();
-
    const selfRef = useRef<HTMLDivElement>(null);
    const pagesRef = useRef<HTMLDivElement[]>([]);

@@ -128,7 +113,19 @@ export default function HorizontalPager(props: IReaderProps) {
    }, [selfRef, curPage]);

    return (
-        <div ref={selfRef} className={classes.reader}>
+        <Box
+            ref={selfRef}
+            sx={{
+                display: 'flex',
+                flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
+                justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
+                margin: '0 auto',
+                width: 'auto',
+                height: 'auto',
+                overflowX: 'visible',
+                userSelect: 'none',
+            }}
+        >
            {
                pages.map((page) => (
                    <Page
@@ -142,6 +139,6 @@ export default function HorizontalPager(props: IReaderProps) {
                    />
                ))
            }
-        </div>
+        </Box>
    );
 }
--- a/src/components/reader/pager/PagedPager.tsx
+++ b/src/components/reader/pager/PagedPager.tsx
@@ -5,28 +5,15 @@
 * 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 makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
+import { Box } from '@mui/system';
 import Page from '../Page';

-const useStyles = makeStyles({
-    reader: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        margin: '0 auto',
-        width: '100%',
-        height: '100vh',
-    },
-});
-
 export default function PagedReader(props: IReaderProps) {
    const {
        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
    } = props;

-    const classes = useStyles();
-
    const selfRef = useRef<HTMLDivElement>(null);

    function nextPage() {
@@ -97,7 +84,17 @@ export default function PagedReader(props: IReaderProps) {
    }, [selfRef, curPage, settings.readerType]);

    return (
-        <div ref={selfRef} className={classes.reader}>
+        <Box
+            ref={selfRef}
+            sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                margin: '0 auto',
+                width: '100%',
+                height: '100vh',
+            }}
+        >
            <Page
                key={curPage}
                index={curPage}
@@ -106,6 +103,6 @@ export default function PagedReader(props: IReaderProps) {
                setCurPage={setCurPage}
                settings={settings}
            />
-        </div>
+        </Box>
    );
 }
--- a/src/components/reader/pager/VerticalPager.tsx
+++ b/src/components/reader/pager/VerticalPager.tsx
@@ -5,27 +5,15 @@
 * 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 makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
+import { Box } from '@mui/system';
 import Page from '../Page';

-const useStyles = makeStyles({
-    reader: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        margin: '0 auto',
-        width: '100%',
-    },
-});
-
 export default function VerticalReader(props: IReaderProps) {
    const {
        pages, settings, setCurPage, curPage, chapter, nextChapter, prevChapter,
    } = props;

-    const classes = useStyles();
-
    const selfRef = useRef<HTMLDivElement>(null);
    const pagesRef = useRef<HTMLDivElement[]>([]);

@@ -111,7 +99,16 @@ export default function VerticalReader(props: IReaderProps) {
    }, [pagesRef.current.length]);

    return (
-        <div ref={selfRef} className={classes.reader}>
+        <Box
+            ref={selfRef}
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                margin: '0 auto',
+                width: '100%',
+            }}
+        >
            {
                pages.map((page) => (
                    <Page
@@ -125,6 +122,6 @@ export default function VerticalReader(props: IReaderProps) {
                    />
                ))
            }
-        </div>
+        </Box>
    );
 }