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

move sorts to copy tachiyomi (#151)

Browse Source 
is now in a tab along with filter ad display same as tachiyomi
This commit is contained in:
robo
2022-03-05 23:08:32 +00:00
committed by GitHub
parent a50824c129
commit 08a53053b2
1 changed files with 108 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,6 @@
import React, { useState } 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, Drawer,
FormControlLabel, FormControlLabel,
@@ -30,86 +29,39 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import TabPanel from 'components/util/TabPanel'; import TabPanel from 'components/util/TabPanel';
import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext'; import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
function Options() { function filtersTab(currentTab: number) {
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> <TabPanel index={0} currentIndex={currentTab}>
<Tabs <Stack direction="column">
key={currentTab} <FormControlLabel
value={currentTab} control={(
variant="fullWidth" <ThreeStateCheckbox
onChange={(e, newTab) => setCurrentTab(newTab)} name="Unread"
indicatorColor="primary" checked={unread}
textColor="primary" onChange={setUnread}
> />
<Tab label="Filter" value={0} /> )}
<Tab label="Display" value={1} /> label="Unread"
</Tabs> />
<TabPanel index={0} currentIndex={currentTab}> <FormControlLabel
<Stack direction="column"> control={(
<FormControlLabel <ThreeStateCheckbox
control={( name="Downloaded"
<ThreeStateCheckbox checked={downloaded}
name="Unread" onChange={setDownloaded}
checked={unread} />
onChange={setUnread} )}
/> label="Downloaded"
)} />
label="Unread" </Stack>
/> </TabPanel>
<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>
); );
} }
function SortOptions() { function sortsTab(currentTab: number) {
const { const {
sorts, setSorts, sortDesc, setSortDesc, sorts, setSorts, sortDesc, setSortDesc,
} = useLibraryOptions(); } = useLibraryOptions();
@@ -124,31 +76,95 @@ function SortOptions() {
return ( return (
<> <>
{ <TabPanel index={1} currentIndex={currentTab}>
['sortToRead', 'sortAlph', 'sortID'].map((e) => { <Stack direction="column">
let icon; {
if (sorts === e) { ['sortToRead', 'sortAlph', 'sortID'].map((e) => {
icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />) let icon;
: (<ArrowDownwardIcon color="primary" />); if (sorts === e) {
icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />)
: (<ArrowDownwardIcon color="primary" />);
}
icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon;
return (
<ListItem disablePadding>
<ListItemButton onClick={(event) => handleChange(event, e)}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={e} />
</ListItemButton>
</ListItem>
);
})
} }
icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon; </Stack>
return ( </TabPanel>
<ListItem disablePadding>
<ListItemButton onClick={(event) => handleChange(event, e)}>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={e} />
</ListItemButton>
</ListItem>
);
})
}
</> </>
); );
} }
function dispalyTab(currentTab: number) {
const { options, setOptions } = useLibraryOptionsContext();
function setContextOptions(
e: React.ChangeEvent<HTMLInputElement>,
checked: boolean,
) {
setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
}
return (
<TabPanel index={2} 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>
);
}
function Options() {
const [currentTab, setCurrentTab] = useState<number>(0);
return (
<Box>
<Tabs
key={currentTab}
value={currentTab}
variant="fullWidth"
onChange={(e, newTab) => setCurrentTab(newTab)}
indicatorColor="primary"
textColor="primary"
>
<Tab label="Filter" value={0} />
<Tab label="Sort" value={1} />
<Tab label="Display" value={2} />
</Tabs>
{filtersTab(currentTab)}
{sortsTab(currentTab)}
{dispalyTab(currentTab)}
</Box>
);
}
export default function LibraryOptions() { export default function LibraryOptions() {
const [filtersOpen, setFiltersOpen] = React.useState(false); const [filtersOpen, setFiltersOpen] = React.useState(false);
const [sortsOpen, setSortsOpen] = React.useState(false);
const { active } = useLibraryOptions(); const { active } = useLibraryOptions();
return ( return (
<> <>
@@ -171,27 +187,6 @@ export default function LibraryOptions() {
> >
<Options /> <Options />
</Drawer> </Drawer>
<IconButton
onClick={() => setSortsOpen(!filtersOpen)}
color={active ? 'warning' : 'default'}
>
<SortIcon />
</IconButton>
<Drawer
anchor="bottom"
open={sortsOpen}
onClose={() => setSortsOpen(false)}
PaperProps={{
style: {
maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
},
}}
>
<SortOptions />
</Drawer>
</> </>
); );
} }