feat: add link to support and FAQ page
This commit is contained in:
Stefano Brilli
parent
7140425089
commit
b84380cd5d
|
|
@ -54,7 +54,6 @@ const useStyles = makeStyles(theme => ({
|
|||
marginLeft: -theme.spacing(2),
|
||||
},
|
||||
copyrightTypography: {
|
||||
marginRight: theme.spacing(1),
|
||||
textAlign: 'center',
|
||||
},
|
||||
backdrop: {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import InfoIcon from '@material-ui/icons/Info';
|
|||
import ToggleOffIcon from '@material-ui/icons/ToggleOff';
|
||||
import ToggleOnIcon from '@material-ui/icons/ToggleOn';
|
||||
import Win95Icon from '../images/win95/win95.png';
|
||||
import HelpIcon from '@material-ui/icons/Help';
|
||||
|
||||
import { W95TopMenu } from './win95/topmenu';
|
||||
|
||||
|
|
@ -42,6 +43,7 @@ export const TopMenu = function(props: { onClick?: () => void }) {
|
|||
let discTitle = useShallowEqualSelector(state => state.main.disc?.title ?? ``);
|
||||
|
||||
const githubLinkRef = React.useRef<null | HTMLAnchorElement>(null);
|
||||
const helpLinkRef = React.useRef<null | HTMLAnchorElement>(null);
|
||||
const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const menuOpen = Boolean(menuAnchorEl);
|
||||
|
||||
|
|
@ -107,6 +109,18 @@ export const TopMenu = function(props: { onClick?: () => void }) {
|
|||
[handleMenuClose]
|
||||
);
|
||||
|
||||
const handleHelpLink = useCallback(
|
||||
(event: React.MouseEvent<HTMLElement>) => {
|
||||
event.stopPropagation();
|
||||
if (event.target !== helpLinkRef.current) {
|
||||
// Prevent opening the link twice
|
||||
helpLinkRef.current?.click();
|
||||
}
|
||||
handleMenuClose();
|
||||
},
|
||||
[handleMenuClose]
|
||||
);
|
||||
|
||||
const menuItems = [];
|
||||
if (mainView === 'MAIN') {
|
||||
menuItems.push(
|
||||
|
|
@ -169,6 +183,24 @@ export const TopMenu = function(props: { onClick?: () => void }) {
|
|||
<ListItemText>About</ListItemText>
|
||||
</MenuItem>
|
||||
);
|
||||
menuItems.push(
|
||||
<MenuItem key="support" onClick={handleHelpLink}>
|
||||
<ListItemIcon className={classes.listItemIcon}>
|
||||
<HelpIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Link
|
||||
rel="noopener noreferrer"
|
||||
href="https://github.com/cybercase/webminidisc/wiki/Support-and-FAQ"
|
||||
target="_blank"
|
||||
ref={helpLinkRef}
|
||||
onClick={handleHelpLink}
|
||||
>
|
||||
Support and FAQs
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</MenuItem>
|
||||
);
|
||||
menuItems.push(
|
||||
<MenuItem key="github" onClick={handleGithubLink}>
|
||||
<ListItemIcon className={classes.listItemIcon}>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { AboutDialog } from './about-dialog';
|
|||
import { TopMenu } from './topmenu';
|
||||
import ChromeIconPath from '../images/chrome-icon.svg';
|
||||
import { W95Welcome } from './win95/welcome';
|
||||
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
main: {
|
||||
|
|
@ -46,6 +47,20 @@ const useStyles = makeStyles(theme => ({
|
|||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
connectContainer: {
|
||||
flex: '1 1 auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
},
|
||||
supportContainer: {
|
||||
flex: '1 1 auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
},
|
||||
}));
|
||||
|
||||
export const Welcome = (props: {}) => {
|
||||
|
|
@ -86,6 +101,7 @@ export const Welcome = (props: {}) => {
|
|||
<Box className={classes.main}>
|
||||
{browserSupported ? (
|
||||
<React.Fragment>
|
||||
<div className={classes.connectContainer}>
|
||||
<Typography component="h2" variant="subtitle1" align="center" className={classes.spacing}>
|
||||
Press the button to connect to a NetMD device
|
||||
</Typography>
|
||||
|
|
@ -94,9 +110,26 @@ export const Welcome = (props: {}) => {
|
|||
Connect
|
||||
</Button>
|
||||
|
||||
<FormControl error={true} className={classes.spacing} style={{ visibility: pairingFailed ? 'visible' : 'hidden' }}>
|
||||
<FormControl
|
||||
error={true}
|
||||
className={classes.spacing}
|
||||
style={{ visibility: pairingFailed ? 'visible' : 'hidden' }}
|
||||
>
|
||||
<FormHelperText>{pairingMessage}</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div>
|
||||
<Typography component="h2" variant="subtitle1" align="center" className={classes.spacing}>
|
||||
<Link
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://github.com/cybercase/webminidisc/wiki/Support-and-FAQ"
|
||||
>
|
||||
<span style={{ verticalAlign: 'middle' }}>Support and FAQ</span>{' '}
|
||||
<OpenInNewIcon style={{ verticalAlign: 'middle' }} fontSize="inherit" />
|
||||
</Link>
|
||||
</Typography>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
|
|
|
|||
|
|
@ -79,6 +79,10 @@ export const W95App = () => {
|
|||
setMenuOpen(!isMenuOpen);
|
||||
}, [isMenuOpen, setMenuOpen]);
|
||||
|
||||
const handleHelpClick = useCallback(() => {
|
||||
window.open('https://github.com/cybercase/webminidisc/wiki/Support-and-FAQ', '_blank');
|
||||
}, []);
|
||||
|
||||
const currentTheme = original;
|
||||
const theme = {
|
||||
...currentTheme,
|
||||
|
|
@ -106,6 +110,9 @@ export const W95App = () => {
|
|||
<Button variant="menu" size="sm" active={isMenuOpen} onClick={toggleMenu}>
|
||||
File
|
||||
</Button>
|
||||
<Button variant="menu" size="sm" onClick={handleHelpClick}>
|
||||
Help
|
||||
</Button>
|
||||
{isMenuOpen ? <TopMenu onClick={closeMenu} /> : null}
|
||||
</Toolbar>
|
||||
<>
|
||||
|
|
|
|||
Loading…
Reference in New Issue