source layouts (#153)

src/components/context/LibraryOptionsContext.tsx

@@ -14,7 +14,9 @@ type ContextType = {
 };
 
 const LibraryOptionsContext = React.createContext<ContextType>({
-    options: { showDownloadBadge: false, showUnreadBadge: false, gridLayout: 0 },
+    options: {
+        showDownloadBadge: false, showUnreadBadge: false, gridLayout: 0, SourcegridLayout: 0,
+    },
     setOptions: () => {},
 });
 

src/components/library/LibraryOptionsProvider.tsx

@@ -15,7 +15,9 @@ interface IProps {
 
 export default function LibraryOptionsContextProvider({ children }: IProps) {
     const [options, setOptions] = useLocalStorage<LibraryDisplayOptions>('libraryOptions',
-        { showDownloadBadge: false, showUnreadBadge: false, gridLayout: 0 });
+        {
+            showDownloadBadge: false, showUnreadBadge: false, gridLayout: 0, SourcegridLayout: 0,
+        });
 
     return (
         <LibraryOptionsContext.Provider value={{ options, setOptions }}>

src/components/source/GridLayouts.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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 {
+    IconButton, Menu, MenuItem, FormControlLabel, Radio,
+} from '@mui/material';
+import React from 'react';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+
+export default function SourceGridLayout() {
+    const { options, setOptions } = useLibraryOptionsContext();
+
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: any) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    function setGridContextOptions(
+        e: React.ChangeEvent<HTMLInputElement>,
+        checked: boolean,
+    ) {
+        if (checked) {
+            setOptions((prev: any) => ({ ...prev, SourcegridLayout: parseInt(e.target.name, 10) }));
+        }
+    }
+
+    return (
+        <>
+            <IconButton
+                onClick={handleClick}
+                size="small"
+                sx={{ ml: 2 }}
+                aria-controls={open ? 'account-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+            >
+                <ViewModuleIcon />
+            </IconButton>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{ 'aria-labelledby': 'basic-button' }}
+            >
+                <MenuItem onClick={handleClose}>
+                    <FormControlLabel
+                        label="Compact grid"
+                        control={(
+                            <Radio
+                                name="0"
+                                // eslint-disable-next-line max-len
+                                checked={options.SourcegridLayout === 0 || options.SourcegridLayout === undefined}
+                                onChange={setGridContextOptions}
+                            />
+                        )}
+                    />
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <FormControlLabel
+                        label="Comfortable grid"
+                        control={(
+                            <Radio
+                                name="1"
+                                checked={options.SourcegridLayout === 1}
+                                onChange={setGridContextOptions}
+                            />
+                        )}
+                    />
+
+                </MenuItem>
+            </Menu>
+
+        </>
+    );
+}

src/components/source/SourceMangaGrid.tsx

@@ -17,7 +17,8 @@ function filterManga(mangas: IMangaCard[]): IMangaCard[] {
 
 export default function SourceMangaGrid(props: IMangaGridProps) {
     const {
-        mangas, isLoading, hasNextPage, lastPageNum, setLastPageNum, message, messageExtra,
+        mangas, isLoading, hasNextPage, lastPageNum,
+        setLastPageNum, message, messageExtra, gridLayout,
     } = props;
 
     const filteredManga = filterManga(mangas);
@@ -32,6 +33,7 @@ export default function SourceMangaGrid(props: IMangaGridProps) {
             setLastPageNum={setLastPageNum}
             message={showFilteredOutMessage ? FILTERED_OUT_MESSAGE : message}
             messageExtra={messageExtra}
+            gridLayout={gridLayout}
         />
     );
 }

src/screens/SourceMangas.tsx

@@ -15,6 +15,8 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import SourceOptions from 'components/source/SourceOptions';
 import AppbarSearch from 'components/util/AppbarSearch';
 import { useQueryParam, StringParam } from 'use-query-params';
+import SourceGridLayout from 'components/source/GridLayouts';
+import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 
 interface IPos {
     position: number
@@ -43,6 +45,8 @@ export default function SourceMangas(props: { popular: boolean }) {
     const [Init, setInit] = useState<undefined | null>();
     const [Noreset, setNoreset] = useQueryParam('R');
 
+    const { options } = useLibraryOptionsContext();
+
     function makeFilters() {
         client.get(`/api/v1/source/${sourceId}/filters`)
             .then((response) => response.data)
@@ -123,6 +127,7 @@ export default function SourceMangas(props: { popular: boolean }) {
     useEffect(() => {
         setAction(
             <>
+                <SourceGridLayout />
                 <AppbarSearch />
                 {isConfigurable && (
                     <IconButton
@@ -202,6 +207,7 @@ export default function SourceMangas(props: { popular: boolean }) {
                 message={message}
                 messageExtra={messageExtra}
                 isLoading={!fetched}
+                gridLayout={options.SourcegridLayout}
             />
             {Data !== undefined && (
                 <SourceOptions

src/typings.d.ts

@@ -265,4 +265,5 @@ interface LibraryDisplayOptions {
     showDownloadBadge: boolean
     showUnreadBadge: boolean
     gridLayout: number
+    SourcegridLayout:number
 }