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

Resolved Merged Conflicts (#127)

Browse Source
This commit is contained in:
abhijeetChawla
2022-03-03 18:19:01 +05:30
committed by GitHub
parent 052c9c3ba6
commit 03df6fbdf6
6 changed files with 300 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/App.tsx
View File

@@ -7,7 +7,8 @@
import React from 'react'; import React from 'react';
import { import {
BrowserRouter as Router, Switch, BrowserRouter as Router,
Switch,
Route, Route,
Redirect, Redirect,
} from 'react-router-dom'; } from 'react-router-dom';
@@ -15,7 +16,10 @@ import { QueryParamProvider } from 'use-query-params';
import { Container } from '@mui/material'; import { Container } from '@mui/material';
import CssBaseline from '@mui/material/CssBaseline'; import CssBaseline from '@mui/material/CssBaseline';
import { import {
createTheme, ThemeProvider, Theme, StyledEngineProvider, createTheme,
ThemeProvider,
Theme,
StyledEngineProvider,
} from '@mui/material/styles'; } from '@mui/material/styles';
import DefaultNavBar from 'components/navbar/DefaultNavBar'; import DefaultNavBar from 'components/navbar/DefaultNavBar';
import DarkTheme from 'components/context/DarkTheme'; import DarkTheme from 'components/context/DarkTheme';
@@ -36,15 +40,18 @@ import Browse from 'screens/Browse';
import Sources from 'screens/Sources'; import Sources from 'screens/Sources';
import Extensions from 'screens/Extensions'; import Extensions from 'screens/Extensions';
import NavBarContextProvider from 'components/navbar/NavBarContextProvider'; import NavBarContextProvider from 'components/navbar/NavBarContextProvider';
import LibraryOptionsContextProvider from 'components/library/LibraryOptionsProvider';
declare module '@mui/styles/defaultTheme' { declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface // eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme { interface DefaultTheme extends Theme {}
}
} }
export default function App() { export default function App() {
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true); const [darkTheme, setDarkTheme] = useLocalStorage<boolean>(
'darkTheme',
true,
);
const darkThemeContext = { const darkThemeContext = {
darkTheme, darkTheme,
@@ -69,7 +76,6 @@ export default function App() {
border-radius: 5px; border-radius: 5px;
} }
`, `,
}, },
}, },
}), }),
@@ -81,99 +87,104 @@ export default function App() {
<StyledEngineProvider injectFirst> <StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<QueryParamProvider ReactRouterRoute={Route}> <QueryParamProvider ReactRouterRoute={Route}>
<NavBarContextProvider> <LibraryOptionsContextProvider>
<CssBaseline /> <NavBarContextProvider>
<DefaultNavBar /> <CssBaseline />
<Container <DefaultNavBar />
id="appMainContainer" <Container
maxWidth={false} id="appMainContainer"
disableGutters maxWidth={false}
sx={{ disableGutters
mt: 8, sx={{
ml: { sm: 8 }, mt: 8,
mb: { xs: 8, sm: 0 }, ml: { sm: 8 },
width: 'auto', mb: { xs: 8, sm: 0 },
overflow: 'auto', width: 'auto',
}} overflow: 'auto',
> }}
>
<Switch>
{/* General Routes */}
<Route
exact
path="/"
render={() => (
<Redirect to="/library" />
)}
/>
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<DarkTheme.Provider
value={darkThemeContext}
>
<Settings />
</DarkTheme.Provider>
</Route>
{/* Manga Routes */}
<Route path="/sources/:sourceId/search/">
<SearchSingle />
</Route>
<Route path="/sources/:sourceId/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
<Route path="/updates">
<Updates />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/browse">
<Browse />
</Route>
</Switch>
</Container>
<Switch> <Switch>
{/* General Routes */}
<Route <Route
exact path="/manga/:mangaId/chapter/:chapterIndex"
path="/" // passing a key re-mounts the reader when changing chapters
render={() => ( render={(props: any) => (
<Redirect to="/library" /> <Reader
key={
props.match.params
.chapterIndex
}
/>
)} )}
/> />
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<DarkTheme.Provider value={darkThemeContext}>
<Settings />
</DarkTheme.Provider>
</Route>
{/* Manga Routes */}
<Route path="/sources/:sourceId/search/">
<SearchSingle />
</Route>
<Route path="/sources/:sourceId/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
<Route path="/updates">
<Updates />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/browse">
<Browse />
</Route>
</Switch> </Switch>
</Container> </NavBarContextProvider>
<Switch> </LibraryOptionsContextProvider>
<Route
path="/manga/:mangaId/chapter/:chapterIndex"
// passing a key re-mounts the reader when changing chapters
render={
(props: any) => (
<Reader
key={props.match.params.chapterIndex}
/>
)
}
/>
</Switch>
</NavBarContextProvider>
</QueryParamProvider> </QueryParamProvider>
</ThemeProvider> </ThemeProvider>
</StyledEngineProvider> </StyledEngineProvider>

6
src/components/MangaCard.tsx
View File

@@ -14,6 +14,7 @@ import { Grid } from '@mui/material';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';
import SpinnerImage from 'components/util/SpinnerImage'; import SpinnerImage from 'components/util/SpinnerImage';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
const BottomGradient = styled('div')({ const BottomGradient = styled('div')({
position: 'absolute', position: 'absolute',
@@ -76,6 +77,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
id, title, thumbnailUrl, downloadCount, unreadCount: unread, id, title, thumbnailUrl, downloadCount, unreadCount: unread,
}, },
} = props; } = props;
const { options: { showUnreadBadge, showDownloadBadge } } = useLibraryOptionsContext();
const [serverAddress] = useLocalStorage<String>('serverBaseURL', ''); const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const [useCache] = useLocalStorage<boolean>('useCache', true); const [useCache] = useLocalStorage<boolean>('useCache', true);
@@ -99,14 +101,14 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
> >
<BadgeContainer> <BadgeContainer>
{unread! > 0 && ( { showUnreadBadge && unread! > 0 && (
<Typography <Typography
sx={{ backgroundColor: 'primary.dark' }} sx={{ backgroundColor: 'primary.dark' }}
> >
{unread} {unread}
</Typography> </Typography>
)} )}
{downloadCount! > 0 && ( { showDownloadBadge && downloadCount! > 0 && (
<Typography sx={{ <Typography sx={{
backgroundColor: 'success.dark', backgroundColor: 'success.dark',
}} }}

24
src/components/context/LibraryOptionsContext.tsx Normal file
View File

@@ -0,0 +1,24 @@
/*
* 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 React, { useContext } from 'react';
type ContextType = {
options: LibraryDisplayOptions;
setOptions: React.Dispatch<React.SetStateAction<LibraryDisplayOptions>>;
};
const LibraryOptionsContext = React.createContext<ContextType>({
options: { showDownloadBadge: false, showUnreadBadge: false },
setOptions: () => {},
});
export default LibraryOptionsContext;
export function useLibraryOptionsContext() {
return useContext(LibraryOptionsContext);
}

155
src/components/library/LibraryOptions.tsx
View File

@@ -6,24 +6,101 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. * file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/ */
import React from 'react'; import React, { useState } from 'react';
import FilterListIcon from '@mui/icons-material/FilterList'; import FilterListIcon from '@mui/icons-material/FilterList';
import SortIcon from '@mui/icons-material/Sort'; import {
import { Drawer, FormControlLabel, IconButton } from '@mui/material'; Drawer,
FormControlLabel,
IconButton,
Tabs,
Tab,
Box,
Stack,
Checkbox,
Radio,
Switch,
} from '@mui/material';
import useLibraryOptions from 'util/useLibraryOptions'; import useLibraryOptions from 'util/useLibraryOptions';
import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox'; import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
import Switch from '@mui/material/Switch'; import TabPanel from 'components/util/TabPanel';
import Radio from '@mui/material/Radio'; import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
import { Box } from '@mui/system'; import SortIcon from '@mui/icons-material/Sort';
function Options() { function Options() {
const { const {
downloaded, setDownloaded, unread, setUnread, downloaded, setDownloaded, unread, setUnread,
} = useLibraryOptions(); } = useLibraryOptions();
const [currentTab, setCurrentTab] = useState<number>(0);
const { options, setOptions } = useLibraryOptionsContext();
function setContextOptions(
e: React.ChangeEvent<HTMLInputElement>,
checked: boolean,
) {
setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
}
return ( return (
<Box sx={{ display: 'flex', flexDirection: 'column' }}> <Box>
<FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" /> <Tabs
<FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={downloaded} onChange={setDownloaded} />} label="Downloaded" /> key={currentTab}
value={currentTab}
variant="fullWidth"
onChange={(e, newTab) => setCurrentTab(newTab)}
indicatorColor="primary"
textColor="primary"
>
<Tab label="Filter" value={0} />
<Tab label="Display" value={1} />
</Tabs>
<TabPanel index={0} currentIndex={currentTab}>
<Stack direction="column">
<FormControlLabel
control={(
<ThreeStateCheckbox
name="Unread"
checked={unread}
onChange={setUnread}
/>
)}
label="Unread"
/>
<FormControlLabel
control={(
<ThreeStateCheckbox
name="Downloaded"
checked={downloaded}
onChange={setDownloaded}
/>
)}
label="Downloaded"
/>
</Stack>
</TabPanel>
<TabPanel index={1} currentIndex={currentTab}>
<Stack direction="column">
<FormControlLabel
label="Unread Badges"
control={(
<Checkbox
name="showUnreadBadge"
checked={options.showUnreadBadge}
onChange={setContextOptions}
/>
)}
/>
<FormControlLabel
label="Download Badges"
control={(
<Checkbox
name="showDownloadBadge"
checked={options.showDownloadBadge}
onChange={setContextOptions}
/>
)}
/>
</Stack>
</TabPanel>
</Box> </Box>
); );
} }
@@ -33,20 +110,57 @@ function SortOptions() {
sorts, setSorts, sortDesc, setSortDesc, sorts, setSorts, sortDesc, setSortDesc,
} = useLibraryOptions(); } = useLibraryOptions();
const handleSortChange = (name: string) => (event: { target: { checked: boolean; }; }) => { const handleSortChange = (name: string) => (event: { target: { checked: boolean } }) => {
setSorts(event.target.checked ? name : undefined); setSorts(event.target.checked ? name : undefined);
}; };
const handleOrderChange = () => (event: { target: { checked: boolean; }; }) => { const handleOrderChange = () => (event: { target: { checked: boolean } }) => {
setSortDesc(event.target.checked); setSortDesc(event.target.checked);
}; };
return ( return (
<Box sx={{ display: 'flex', flexDirection: 'column' }}> <Box sx={{ display: 'flex', flexDirection: 'column' }}>
<FormControlLabel control={<Switch name="sortDesc" checked={sortDesc === true} onChange={handleOrderChange()} color="default" />} label="Asc/Desc" /> <FormControlLabel
<FormControlLabel control={<Radio name="sortToRead" checked={sorts === 'sortToRead'} onChange={handleSortChange('sortToRead')} />} label="Sort by left to read" /> control={(
<FormControlLabel control={<Radio name="sortAlph" checked={sorts === 'sortAlph'} onChange={handleSortChange('sortAlph')} />} label="Sort alphbetical" /> <Switch
<FormControlLabel control={<Radio name="sortID" checked={sorts === 'sortID' || sorts === undefined} onChange={handleSortChange('sortID')} />} label="Sort by ID" /> name="sortDesc"
checked={sortDesc === true}
onChange={handleOrderChange()}
color="default"
/>
)}
label="Asc/Desc"
/>
<FormControlLabel
control={(
<Radio
name="sortToRead"
checked={sorts === 'sortToRead'}
onChange={handleSortChange('sortToRead')}
/>
)}
label="Sort by left to read"
/>
<FormControlLabel
control={(
<Radio
name="sortAlph"
checked={sorts === 'sortAlph'}
onChange={handleSortChange('sortAlph')}
/>
)}
label="Sort alphbetical"
/>
<FormControlLabel
control={(
<Radio
name="sortID"
checked={sorts === 'sortID' || sorts === undefined}
onChange={handleSortChange('sortID')}
/>
)}
label="Sort by ID"
/>
</Box> </Box>
); );
} }
@@ -70,7 +184,10 @@ export default function LibraryOptions() {
onClose={() => setFiltersOpen(false)} onClose={() => setFiltersOpen(false)}
PaperProps={{ PaperProps={{
style: { style: {
maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto', maxWidth: 600,
padding: '1em',
marginLeft: 'auto',
marginRight: 'auto',
}, },
}} }}
> >
@@ -90,13 +207,15 @@ export default function LibraryOptions() {
onClose={() => setSortsOpen(false)} onClose={() => setSortsOpen(false)}
PaperProps={{ PaperProps={{
style: { style: {
maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto', maxWidth: 600,
padding: '1em',
marginLeft: 'auto',
marginRight: 'auto',
}, },
}} }}
> >
<SortOptions /> <SortOptions />
</Drawer> </Drawer>
</> </>
); );
} }

25
src/components/library/LibraryOptionsProvider.tsx Normal file
View File

@@ -0,0 +1,25 @@
/*
* 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 React from 'react';
import LibraryOptionsContext from 'components/context/LibraryOptionsContext';
import useLocalStorage from 'util/useLocalStorage';
interface IProps {
children: React.ReactNode;
}
export default function LibraryOptionsContextProvider({ children }: IProps) {
const [options, setOptions] = useLocalStorage<LibraryDisplayOptions>('libraryOptions',
{ showDownloadBadge: false, showUnreadBadge: false });
return (
<LibraryOptionsContext.Provider value={{ options, setOptions }}>
{children}
</LibraryOptionsContext.Provider>
);
}

5
src/typings.d.ts vendored
View File

@@ -236,3 +236,8 @@ type ChapterOptionsReducerAction =
| { type: 'sortBy', sortBy: ChapterSortMode } | { type: 'sortBy', sortBy: ChapterSortMode }
| { type: 'sortReverse' } | { type: 'sortReverse' }
| { type: 'showChapterNumber' }; | { type: 'showChapterNumber' };
interface LibraryDisplayOptions {
showDownloadBadge: boolean
showUnreadBadge: boolean
}