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

add chapter dropdown to reader nav bar (#229)

Browse Source 
* Add chapter dropdown to reader chapter nav buttons

Makes it possible to select a specific chapter inside the reader without having to leave and open the manga page

* Always show chapter nav buttons

In case they are unusable, they will be disabled
This commit is contained in:
Daniel
2023-02-08 18:37:39 +01:00
committed by GitHub
parent c7aaed8378
commit baa2f680f7
1 changed files with 61 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/navbar/ReaderNavBar.tsx
View File

@@ -13,7 +13,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { useHistory, Link, useLocation } from 'react-router-dom'; import { useHistory, useLocation } from 'react-router-dom';
import Slide from '@mui/material/Slide'; import Slide from '@mui/material/Slide';
import Fade from '@mui/material/Fade'; import Fade from '@mui/material/Fade';
import Zoom from '@mui/material/Zoom'; import Zoom from '@mui/material/Zoom';
@@ -22,7 +22,6 @@ import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import Collapse from '@mui/material/Collapse'; import Collapse from '@mui/material/Collapse';
import Button from '@mui/material/Button';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
import useBackTo from 'util/useBackTo'; import useBackTo from 'util/useBackTo';
import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions'; import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
@@ -81,20 +80,18 @@ const PageNavigation = styled('div')({
const ChapterNavigation = styled('div')({ const ChapterNavigation = styled('div')({
display: 'grid', display: 'grid',
gridTemplateColumns: '1fr 1fr', gridTemplateRows: 'auto auto auto',
gridTemplateAreas: '"prev next"', gridTemplateColumns: '0fr 1fr 0fr',
gridTemplateAreas: '"pre current next"',
gridColumnGap: '5px', gridColumnGap: '5px',
margin: '10px 0', margin: '10px 0',
'& a': { '& a': {
flexGrow: 1,
textDecoration: 'none', textDecoration: 'none',
color: 'inherit',
'& button': { display: 'flex',
width: '100%', flexWrap: 'wrap',
padding: '5px 8px', alignContent: 'center',
textTransform: 'none',
},
}, },
}); });
@@ -287,43 +284,71 @@ export default function ReaderNavBar(props: IProps) {
<span>{`of ${chapter.pageCount}`}</span> <span>{`of ${chapter.pageCount}`}</span>
</PageNavigation> </PageNavigation>
<ChapterNavigation> <ChapterNavigation>
{chapter.index > 1 && ( <IconButton
<Link title="Previous Chapter"
replace sx={{ gridArea: 'pre' }}
to={{ disabled={chapter.index <= 1}
onClick={() => {
history.replace({
pathname: `/manga/${manga.id}/chapter/${chapter.index - 1}`, pathname: `/manga/${manga.id}/chapter/${chapter.index - 1}`,
state: { state: {
prevDrawerOpen: drawerOpen, prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen, prevSettingsCollapseOpen: settingsCollapseOpen,
}, },
});
}}
>
<KeyboardArrowLeftIcon />
</IconButton>
<FormControl
sx={{ gridArea: 'current' }}
size="small"
disabled={chapter.index < 1}
>
<Select
MenuProps={MenuProps}
value={chapter.index >= 1 ? chapter.index : ''}
displayEmpty
onChange={({ target: { value: selectedChapter } }) => {
history.replace({
pathname: `/manga/${manga.id}/chapter/${selectedChapter}`,
state: {
prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen,
},
});
}} }}
> >
<Button {Array(Math.max(0, chapter.chapterCount))
variant="outlined" .fill(1)
sx={{ gridArea: 'prev' }} .map((ignoreValue, index) => (
startIcon={<KeyboardArrowLeftIcon />} // eslint-disable-next-line max-len
> // eslint-disable-next-line react/no-array-index-key
Prev. Chapter <MenuItem
</Button> key={`Chapter#${index + 1}`}
</Link> value={index + 1}
)} >{`Chapter ${index + 1}`}</MenuItem>
{chapter.index < chapter.chapterCount && ( ))}
<Link </Select>
replace </FormControl>
style={{ gridArea: 'next' }} <IconButton
to={{ title="Next Chapter"
sx={{ gridArea: 'next' }}
disabled={
chapter.index < 1 || chapter.index >= chapter.chapterCount
}
onClick={() => {
history.replace({
pathname: `/manga/${manga.id}/chapter/${chapter.index + 1}`, pathname: `/manga/${manga.id}/chapter/${chapter.index + 1}`,
state: { state: {
prevDrawerOpen: drawerOpen, prevDrawerOpen: drawerOpen,
prevSettingsCollapseOpen: settingsCollapseOpen, prevSettingsCollapseOpen: settingsCollapseOpen,
}, },
}} });
> }}
<Button variant="outlined" endIcon={<KeyboardArrowRightIcon />}> >
Next Chapter <KeyboardArrowRightIcon />
</Button> </IconButton>
</Link>
)}
</ChapterNavigation> </ChapterNavigation>
</Navigation> </Navigation>
</Root> </Root>