continues gap switch

Suwayomi · Mar 27, 2021 · 3a1e1e0 · 3a1e1e0
1 parent a567701
commit 3a1e1e0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/webUI/react/src/components/Page.tsx b/webUI/react/src/components/Page.tsx
@@ -25,6 +25,10 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
         backgroundColor: '#525252',
         marginBottom: 10,
     },
+    image: {
+        display: 'block',
+        marginBottom: settings.continuesPageGap ? '15px' : 0,
+    },
 });
 
 interface IProps {
@@ -77,6 +81,7 @@ function LazyImage(props: IProps) {
 
     return (
         <img
+            className={classes.image}
             ref={ref}
             src={imageSrc}
             alt={`Page #${index}`}
@@ -100,6 +105,7 @@ export default function Page(props: IProps) {
                         <CircularProgress thickness={5} />
                     </div>
                 )}
+                once
             >
                 <LazyImage
                     src={src}

diff --git a/webUI/react/src/components/ReaderNavBar.tsx b/webUI/react/src/components/ReaderNavBar.tsx
@@ -140,11 +140,13 @@ const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({
 export interface IReaderSettings{
     staticNav: boolean
     showPageNumber: boolean
+    continuesPageGap: boolean
 }
 
 export const defaultReaderSettings = () => ({
     staticNav: false,
     showPageNumber: true,
+    continuesPageGap: false,
 } as IReaderSettings);
 
 interface IProps {
@@ -279,6 +281,16 @@ export default function ReaderNavBar(props: IProps) {
                                         />
                                     </ListItemSecondaryAction>
                                 </ListItem>
+                                <ListItem>
+                                    <ListItemText primary="Continues Page gap" />
+                                    <ListItemSecondaryAction>
+                                        <Switch
+                                            edge="end"
+                                            checked={settings.continuesPageGap}
+                                            onChange={(e) => setSettingValue('continuesPageGap', e.target.checked)}
+                                        />
+                                    </ListItemSecondaryAction>
+                                </ListItem>
                             </List>
                         </Collapse>
                         <hr />