-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add What's New modal and delete sequences. (#98)
- Loading branch information
1 parent
f427067
commit 4fdc2d8
Showing
8 changed files
with
265 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import CloseIcon from '@mui/icons-material/Close'; | ||
| import { CardContent, CardActions, Grid, Divider, IconButton, Typography } from '@mui/material'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import MainCard from 'ui-component/cards/MainCard'; | ||
| import RFLoadingButton from 'ui-component/RFLoadingButton'; | ||
|
|
||
| const WhatsNew = ({ handleClose }) => ( | ||
| <MainCard | ||
| sx={{ | ||
| position: 'absolute', | ||
| width: { xs: 450, lg: 900 }, | ||
| top: '50%', | ||
| left: '50%', | ||
| transform: 'translate(-50%, -50%)' | ||
| }} | ||
| title="What's New" | ||
| content={false} | ||
| secondary={ | ||
| <IconButton onClick={handleClose} size="large"> | ||
| <CloseIcon fontSize="small" /> | ||
| </IconButton> | ||
| } | ||
| > | ||
| <CardContent> | ||
| <Typography variant="h4"> | ||
| <ul> | ||
| <li style={{ paddingBottom: '1em' }}> | ||
| This modal is new! Sometimes people might miss messages on Facebook or Discord, so this is another way to communicate new | ||
| features or changes. | ||
| </li> | ||
| <li style={{ paddingBottom: '1em' }}> | ||
| Added an option to the Sequences page to Delete Inactive or Delete All Sequences. Fair warning, if you choose to delete | ||
| sequences, it will remove any customizations (display name, artist, etc.).{' '} | ||
| <a href="https://docs.remotefalcon.com/docs/control-panel/sequences#delete-sequences" target="_blank" rel="noreferrer"> | ||
| Docs link | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </Typography> | ||
| </CardContent> | ||
| <Divider /> | ||
| <CardActions> | ||
| <Grid container justifyContent="flex-end"> | ||
| <RFLoadingButton onClick={handleClose} color="primary"> | ||
| Got It! | ||
| </RFLoadingButton> | ||
| </Grid> | ||
| </CardActions> | ||
| </MainCard> | ||
| ); | ||
|
|
||
| WhatsNew.propTypes = { | ||
| handleClose: PropTypes.func | ||
| }; | ||
|
|
||
| export default WhatsNew; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; | ||
| import Button from '@mui/material/Button'; | ||
| import ButtonGroup from '@mui/material/ButtonGroup'; | ||
| import ClickAwayListener from '@mui/material/ClickAwayListener'; | ||
| import Grow from '@mui/material/Grow'; | ||
| import MenuItem from '@mui/material/MenuItem'; | ||
| import MenuList from '@mui/material/MenuList'; | ||
| import Paper from '@mui/material/Paper'; | ||
| import Popper from '@mui/material/Popper'; | ||
| import { useTheme } from '@mui/material/styles'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const options = ['Delete Inactive Sequences', 'Delete All Sequences']; | ||
|
|
||
| const RFSplitButton = ({ disabled, onClick, color, variant, sx }) => { | ||
| const theme = useTheme(); | ||
|
|
||
| let background = theme.palette.primary.main; | ||
| let backgroundHover = theme.palette.primary.dark; | ||
| if (color === 'error') { | ||
| background = theme.palette.error.main; | ||
| backgroundHover = theme.palette.error.dark; | ||
| } | ||
|
|
||
| const [open, setOpen] = React.useState(false); | ||
| const anchorRef = React.useRef(null); | ||
| const [selectedIndex, setSelectedIndex] = React.useState(0); | ||
|
|
||
| const handleMenuItemClick = (event, index) => { | ||
| setSelectedIndex(index); | ||
| setOpen(false); | ||
| }; | ||
|
|
||
| const handleToggle = () => { | ||
| setOpen((prevOpen) => !prevOpen); | ||
| }; | ||
|
|
||
| const handleClose = (event) => { | ||
| if (anchorRef.current && anchorRef.current.contains(event.target)) { | ||
| return; | ||
| } | ||
|
|
||
| setOpen(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <ButtonGroup variant="contained" ref={anchorRef} aria-label="split button"> | ||
| <Button | ||
| sx={sx || { background, '&:hover': { background: backgroundHover } }} | ||
| disabled={disabled} | ||
| variant={variant || 'contained'} | ||
| size="large" | ||
| onClick={() => onClick(options, selectedIndex)} | ||
| > | ||
| {options[selectedIndex]} | ||
| </Button> | ||
| <Button | ||
| sx={sx || { background, '&:hover': { background: backgroundHover } }} | ||
| size="small" | ||
| aria-controls={open ? 'split-button-menu' : undefined} | ||
| aria-expanded={open ? 'true' : undefined} | ||
| aria-label="select delete" | ||
| aria-haspopup="menu" | ||
| onClick={handleToggle} | ||
| > | ||
| <ArrowDropDownIcon /> | ||
| </Button> | ||
| </ButtonGroup> | ||
| <Popper | ||
| sx={{ | ||
| zIndex: 1 | ||
| }} | ||
| open={open} | ||
| anchorEl={anchorRef.current} | ||
| role={undefined} | ||
| transition | ||
| disablePortal | ||
| > | ||
| {({ TransitionProps, placement }) => ( | ||
| <Grow | ||
| {...TransitionProps} | ||
| style={{ | ||
| transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' | ||
| }} | ||
| > | ||
| <Paper> | ||
| <ClickAwayListener onClickAway={handleClose}> | ||
| <MenuList id="split-button-menu" autoFocusItem> | ||
| {options.map((option, index) => ( | ||
| <MenuItem | ||
| key={option} | ||
| disabled={index === 2} | ||
| selected={index === selectedIndex} | ||
| onClick={(event) => handleMenuItemClick(event, index)} | ||
| > | ||
| {option} | ||
| </MenuItem> | ||
| ))} | ||
| </MenuList> | ||
| </ClickAwayListener> | ||
| </Paper> | ||
| </Grow> | ||
| )} | ||
| </Popper> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| RFSplitButton.propTypes = { | ||
| disabled: PropTypes.bool, | ||
| onClick: PropTypes.func, | ||
| color: PropTypes.string, | ||
| variant: PropTypes.string, | ||
| sx: PropTypes.object, | ||
| callback: PropTypes.func | ||
| }; | ||
|
|
||
| export default RFSplitButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters