diff --git a/web/src/components/Appbar/index.js b/web/src/components/Appbar/index.js index a1da5e3..d4bd34b 100644 --- a/web/src/components/Appbar/index.js +++ b/web/src/components/Appbar/index.js @@ -14,6 +14,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight' import ListItem from '@material-ui/core/ListItem' import ListItemIcon from '@material-ui/core/ListItemIcon' import ListItemText from '@material-ui/core/ListItemText' +import CreditCardIcon from '@material-ui/icons/CreditCard' import ListIcon from '@material-ui/icons/List' import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew' @@ -25,22 +26,24 @@ import RemoveAll from '../RemoveAll' import SettingsDialog from '../Settings' import AboutDialog from '../About' import { playlistAllHost, shutdownHost, torrserverHost } from '../../utils/Hosts' -import DonateDialog from '../Donate' +import DonateSnackbar from '../Donate' +import DonateDialog from '../Donate/DonateDialog' import UploadDialog from '../Upload' import useStyles from './useStyles' export default function MiniDrawer() { const classes = useStyles() const theme = useTheme() - const [open, setOpen] = useState(false) + const [isDrawerOpen, setIsDrawerOpen] = useState(false) + const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false) const [tsVersion, setTSVersion] = useState('') const handleDrawerOpen = () => { - setOpen(true) + setIsDrawerOpen(true) } const handleDrawerClose = () => { - setOpen(false) + setIsDrawerOpen(false) } useEffect(() => { @@ -49,14 +52,14 @@ export default function MiniDrawer() { .then((txt) => { if (!txt.startsWith('')) setTSVersion(txt) }) - }, [open]) + }, [isDrawerOpen]) return (
@@ -66,7 +69,7 @@ export default function MiniDrawer() { onClick={handleDrawerOpen} edge="start" className={clsx(classes.menuButton, { - [classes.hide]: open, + [classes.hide]: isDrawerOpen, })} > @@ -80,13 +83,13 @@ export default function MiniDrawer() { @@ -95,7 +98,7 @@ export default function MiniDrawer() { {theme.direction === 'rtl' ? : }
- + @@ -114,7 +117,6 @@ export default function MiniDrawer() { - fetch(shutdownHost())}> @@ -123,15 +125,27 @@ export default function MiniDrawer() { + + + + + setIsDonationDialogOpen(true)}> + + + + + + - +
- +
- + {isDonationDialogOpen && setIsDonationDialogOpen(false)} />} + {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && } ) } diff --git a/web/src/components/Appbar/useStyles.js b/web/src/components/Appbar/useStyles.js index d0cdb59..7c71d42 100644 --- a/web/src/components/Appbar/useStyles.js +++ b/web/src/components/Appbar/useStyles.js @@ -29,7 +29,7 @@ export default makeStyles((theme) => ({ }, drawer: { width: drawerWidth, - flexShrink: 0, + flexShrink: 1, whiteSpace: 'nowrap', }, drawerOpen: { diff --git a/web/src/components/Donate.js b/web/src/components/Donate.js deleted file mode 100644 index 17d8ec9..0000000 --- a/web/src/components/Donate.js +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react' -import ListItem from '@material-ui/core/ListItem' -import ListItemIcon from '@material-ui/core/ListItemIcon' -import ListItemText from '@material-ui/core/ListItemText' -import Dialog from '@material-ui/core/Dialog' -import DialogTitle from '@material-ui/core/DialogTitle' -import DialogContent from '@material-ui/core/DialogContent' -import DialogActions from '@material-ui/core/DialogActions' -import Button from '@material-ui/core/Button' -import Snackbar from '@material-ui/core/Snackbar' -import IconButton from '@material-ui/core/IconButton' -import CreditCardIcon from '@material-ui/icons/CreditCard' -import List from '@material-ui/core/List' -import ButtonGroup from '@material-ui/core/ButtonGroup' - -const donateFrame = - '' - -export default function DonateDialog() { - const [open, setOpen] = React.useState(false) - const [snakeOpen, setSnakeOpen] = React.useState(true) - - // NOT USED FOR NOW - const handleClickOpen = () => { - setOpen(true) - } - const handleClose = () => { - setOpen(false) - } - - return ( -
- {/* !!!!!!!!!!! Should be removed or moved to sidebar because it is not visible. It is hiddent behind header */} - - - - - - - {/* !!!!!!!!!!!!!!!!!!!! */} - - - Donate - - - - - - - - - -
- - - - - - -
- - { setSnakeOpen(false) }} - autoHideDuration={6000} - message="Donate?" - action={ - - { - setSnakeOpen(false) - setOpen(true) - }}> - - - - } - /> -
- ) -} diff --git a/web/src/components/Donate/DonateDialog.js b/web/src/components/Donate/DonateDialog.js new file mode 100644 index 0000000..ab5c112 --- /dev/null +++ b/web/src/components/Donate/DonateDialog.js @@ -0,0 +1,38 @@ +import ListItem from '@material-ui/core/ListItem' +import Dialog from '@material-ui/core/Dialog' +import DialogTitle from '@material-ui/core/DialogTitle' +import DialogContent from '@material-ui/core/DialogContent' +import DialogActions from '@material-ui/core/DialogActions' +import List from '@material-ui/core/List' +import ButtonGroup from '@material-ui/core/ButtonGroup' +import Button from '@material-ui/core/Button' + +const donateFrame = + '' + +export default function DonateDialog ({ onClose }) { + return ( + + Donate + + + + + + + + + +
+ + + + + + + +
+ ) +} \ No newline at end of file diff --git a/web/src/components/Donate/index.js b/web/src/components/Donate/index.js new file mode 100644 index 0000000..8a91e84 --- /dev/null +++ b/web/src/components/Donate/index.js @@ -0,0 +1,48 @@ +import { useState } from 'react' +import Button from '@material-ui/core/Button' +import Snackbar from '@material-ui/core/Snackbar' +import IconButton from '@material-ui/core/IconButton' +import CreditCardIcon from '@material-ui/icons/CreditCard' +import CloseIcon from '@material-ui/icons/Close' +import DonateDialog from './DonateDialog' + +export default function DonateSnackbar() { + const [open, setOpen] = useState(false) + const [snackbarOpen, setSnackbarOpen] = useState(true) + + const disableSnackbar = () => { + setSnackbarOpen(false) + localStorage.setItem('snackbarIsClosed', true) + } + + return ( + <> + {open && setOpen(false)} />} + + + + + + + + + } + /> + + ) +}