Refactor/download queue and cleanup visuals overall (#202)
* Move context providers and configuration providers to separate component, extract theme to separate file * Use custom palette color instead of direct colors * Replace different clicable things with CardActionArea to get transition and links * Refactor DownloadQueue, update layout, unify all the download progress indicators * Unify active filter indicator * Use divider instead of hr * Fix background color in extensions light theme * Fix thumbnail overlay in library screen list view * Don't show download button on downloaded updates
This commit is contained in:
Valter Martinek
284
src/App.tsx
284
src/App.tsx
@@ -5,194 +5,124 @@
|
||||
* 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 {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
Redirect,
|
||||
} from 'react-router-dom';
|
||||
import { QueryParamProvider } from 'use-query-params';
|
||||
import { Container } from '@mui/material';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import {
|
||||
createTheme,
|
||||
ThemeProvider,
|
||||
Theme,
|
||||
StyledEngineProvider,
|
||||
} from '@mui/material/styles';
|
||||
import { SWRConfig } from 'swr';
|
||||
import { fetcher } from 'util/client';
|
||||
import AppContext from 'components/context/AppContext';
|
||||
import DefaultNavBar from 'components/navbar/DefaultNavBar';
|
||||
import DarkTheme from 'components/context/DarkTheme';
|
||||
import useLocalStorage from 'util/useLocalStorage';
|
||||
import React from 'react';
|
||||
import {
|
||||
Redirect, Route, Switch,
|
||||
} from 'react-router-dom';
|
||||
import Browse from 'screens/Browse';
|
||||
import DownloadQueue from 'screens/DownloadQueue';
|
||||
import Extensions from 'screens/Extensions';
|
||||
import Library from 'screens/Library';
|
||||
import Manga from 'screens/Manga';
|
||||
import Reader from 'screens/Reader';
|
||||
import SearchAll from 'screens/SearchAll';
|
||||
import Settings from 'screens/Settings';
|
||||
import About from 'screens/settings/About';
|
||||
import Categories from 'screens/settings/Categories';
|
||||
import Backup from 'screens/settings/Backup';
|
||||
import Library from 'screens/Library';
|
||||
import Categories from 'screens/settings/Categories';
|
||||
import SourceConfigure from 'screens/SourceConfigure';
|
||||
import Manga from 'screens/Manga';
|
||||
import SourceMangas from 'screens/SourceMangas';
|
||||
import Reader from 'screens/Reader';
|
||||
import Updates from 'screens/Updates';
|
||||
import DownloadQueue from 'screens/DownloadQueue';
|
||||
import Browse from 'screens/Browse';
|
||||
import Sources from 'screens/Sources';
|
||||
import Extensions from 'screens/Extensions';
|
||||
import NavBarContextProvider from 'components/navbar/NavBarContextProvider';
|
||||
import LibraryOptionsContextProvider from 'components/library/LibraryOptionsProvider';
|
||||
import SearchAll from 'screens/SearchAll';
|
||||
import Updates from 'screens/Updates';
|
||||
|
||||
declare module '@mui/styles/defaultTheme' {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||
interface DefaultTheme extends Theme {}
|
||||
}
|
||||
const App: React.FC = () => (
|
||||
<AppContext>
|
||||
<CssBaseline />
|
||||
<DefaultNavBar />
|
||||
<Container
|
||||
id="appMainContainer"
|
||||
maxWidth={false}
|
||||
disableGutters
|
||||
sx={{
|
||||
mt: 8,
|
||||
ml: { sm: 8 },
|
||||
mb: { xs: 8, sm: 0 },
|
||||
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">
|
||||
<Settings />
|
||||
</Route>
|
||||
|
||||
export default function App() {
|
||||
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>(
|
||||
'darkTheme',
|
||||
true,
|
||||
);
|
||||
{/* Manga Routes */}
|
||||
|
||||
const darkThemeContext = {
|
||||
darkTheme,
|
||||
setDarkTheme,
|
||||
};
|
||||
|
||||
const theme = React.useMemo(
|
||||
() => createTheme({
|
||||
palette: {
|
||||
mode: darkTheme ? 'dark' : 'light',
|
||||
},
|
||||
components: {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: `
|
||||
*::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background: ${darkTheme ? '#222' : '#e1e1e1'};
|
||||
<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="/sources/all/search/">
|
||||
<SearchAll />
|
||||
</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>
|
||||
<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
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: ${darkTheme ? '#111' : '#aaa'};
|
||||
border-radius: 5px;
|
||||
}
|
||||
`,
|
||||
},
|
||||
},
|
||||
}),
|
||||
[darkTheme],
|
||||
);
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
</AppContext>
|
||||
);
|
||||
|
||||
return (
|
||||
<SWRConfig value={{ fetcher }}>
|
||||
<Router>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<QueryParamProvider ReactRouterRoute={Route}>
|
||||
<LibraryOptionsContextProvider>
|
||||
<NavBarContextProvider>
|
||||
<CssBaseline />
|
||||
<DefaultNavBar />
|
||||
<Container
|
||||
id="appMainContainer"
|
||||
maxWidth={false}
|
||||
disableGutters
|
||||
sx={{
|
||||
mt: 8,
|
||||
ml: { sm: 8 },
|
||||
mb: { xs: 8, sm: 0 },
|
||||
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/popular/">
|
||||
<SourceMangas popular />
|
||||
</Route>
|
||||
<Route path="/sources/:sourceId/latest/">
|
||||
<SourceMangas popular={false} />
|
||||
</Route>
|
||||
<Route path="/sources/:sourceId/configure/">
|
||||
<SourceConfigure />
|
||||
</Route>
|
||||
<Route path="/sources/all/search/">
|
||||
<SearchAll />
|
||||
</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>
|
||||
<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>
|
||||
</LibraryOptionsContextProvider>
|
||||
</QueryParamProvider>
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
</Router>
|
||||
</SWRConfig>
|
||||
);
|
||||
}
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user