Add shotcuts to help and add labels
parent
7c13403921
commit
3b779bd81d
|
|
@ -4,13 +4,26 @@ import { withStyles } from '@material-ui/core/styles';
|
|||
import { withRoomContext } from '../../RoomContext';
|
||||
import * as roomActions from '../../actions/roomActions';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import DialogActions from '@material-ui/core/DialogActions';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DialogContentText from '@material-ui/core/DialogContentText';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Tabs from '@material-ui/core/Tabs';
|
||||
import Tab from '@material-ui/core/Tab';
|
||||
|
||||
const shortcuts=[
|
||||
{ key: 'm', label: 'device.muteAudio', defaultMessage: 'Mute Audio' },
|
||||
{ key: 'v', label: 'device.stopVideo', defaultMessage: 'Mute Video' },
|
||||
{ key: '1', label: 'label.democratic', defaultMessage: 'Democratic View' },
|
||||
{ key: '2', label: 'label.filmstrip', defaultMessage: 'Filmstrip View' },
|
||||
{ key: 'space', label: 'me.mutedPTT', defaultMessage: 'Push SPACE to talk' },
|
||||
{ key: 'a', label: 'label.advanced', defaultMessage: 'Show advanced information' }
|
||||
];
|
||||
const styles = (theme) =>
|
||||
({
|
||||
dialogPaper :
|
||||
|
|
@ -31,7 +44,27 @@ const styles = (theme) =>
|
|||
[theme.breakpoints.down('xs')] :
|
||||
{
|
||||
width : '90vw'
|
||||
}
|
||||
},
|
||||
display : 'flex',
|
||||
flexDirection : 'column'
|
||||
},
|
||||
paper : {
|
||||
padding : theme.spacing(1),
|
||||
textAlign : 'center',
|
||||
color : theme.palette.text.secondary,
|
||||
whiteSpace : 'nowrap',
|
||||
marginRight : theme.spacing(3),
|
||||
marginBottom : theme.spacing(1),
|
||||
minWidth : theme.spacing(8)
|
||||
},
|
||||
shortcuts : {
|
||||
display : 'flex',
|
||||
flexDirection : 'row',
|
||||
alignItems : 'center'
|
||||
},
|
||||
tabsHeader :
|
||||
{
|
||||
flexGrow : 1
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -41,6 +74,8 @@ const Help = ({
|
|||
classes
|
||||
}) =>
|
||||
{
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={helpOpen}
|
||||
|
|
@ -55,6 +90,40 @@ const Help = ({
|
|||
defaultMessage='Help'
|
||||
/>
|
||||
</DialogTitle>
|
||||
<Tabs
|
||||
className={classes.tabsHeader}
|
||||
indicatorColor='primary'
|
||||
textColor='primary'
|
||||
variant='fullWidth'
|
||||
>
|
||||
<Tab
|
||||
label={
|
||||
intl.formatMessage({
|
||||
id : 'room.shortcutKeys',
|
||||
defaultMessage : 'Shortcut keys'
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Tabs>
|
||||
<DialogContent dividers='true'>
|
||||
<DialogContentText>
|
||||
{shortcuts.map((value, index) =>
|
||||
{
|
||||
return (
|
||||
<div key={index} className={classes.shortcuts}>
|
||||
<Paper className={classes.paper}>
|
||||
{value.key}
|
||||
</Paper>
|
||||
<FormattedMessage
|
||||
id={value.label}
|
||||
defaultMessage={value.defaultMessage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => { handleCloseHelp(false); }} color='primary'>
|
||||
<FormattedMessage
|
||||
|
|
@ -96,4 +165,4 @@ export default withRoomContext(connect(
|
|||
);
|
||||
}
|
||||
}
|
||||
)(withStyles(styles)(Help)));
|
||||
)(withStyles(styles)(Help)));
|
||||
|
|
|
|||
|
|
@ -496,13 +496,13 @@ const TopBar = (props) =>
|
|||
>
|
||||
<HelpIcon
|
||||
aria-label={intl.formatMessage({
|
||||
id : 'label.help',
|
||||
id : 'room.help',
|
||||
defaultMessage : 'Help'
|
||||
})}
|
||||
/>
|
||||
<p className={classes.moreAction}>
|
||||
<FormattedMessage
|
||||
id='label.help'
|
||||
id='room.help'
|
||||
defaultMessage='Help'
|
||||
/>
|
||||
</p>
|
||||
|
|
@ -516,13 +516,13 @@ const TopBar = (props) =>
|
|||
>
|
||||
<InfoIcon
|
||||
aria-label={intl.formatMessage({
|
||||
id : 'label.about',
|
||||
id : 'room.about',
|
||||
defaultMessage : 'About'
|
||||
})}
|
||||
/>
|
||||
<p className={classes.moreAction}>
|
||||
<FormattedMessage
|
||||
id='label.about'
|
||||
id='room.about'
|
||||
defaultMessage='About'
|
||||
/>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,10 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
"roles.gotRole": null,
|
||||
|
|
|
|||
|
|
@ -59,6 +59,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": "Du bist stummgeschalted, Halte die SPACE-Taste um zu sprechen",
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": "{displayName} put their hand down",
|
||||
"room.extraVideo": "Extra video",
|
||||
"room.overRoomLimit": "The room is full, retry after some time.",
|
||||
"room.help": "Help",
|
||||
"room.about": "About",
|
||||
"room.shortcutKeys": "Shortcut Keys",
|
||||
|
||||
"me.mutedPTT": "You are muted, hold down SPACE-BAR to talk",
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": "{displayName} je spustio ruku",
|
||||
"room.extraVideo": "Dodatni video",
|
||||
"room.overRoomLimit": "Soba je popunjena, pokušajte ponovno kasnije.",
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": "Utišani ste, pritisnite i držite SPACE tipku za razgovor",
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": "{displayName} leeresztette a kezét",
|
||||
"room.extraVideo": "Kiegészítő videó",
|
||||
"room.overRoomLimit": "A konferenciaszoba betelt..",
|
||||
"room.help": "Segítség",
|
||||
"room.about": "Névjegy",
|
||||
"room.shortcutKeys": "Billentyűparancsok",
|
||||
|
||||
"me.mutedPTT": "Némítva vagy, ha beszélnél nyomd le a szóköz billentyűt",
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,10 @@
|
|||
"room.loweredHand": "{displayName} ha abbassato la mano",
|
||||
"room.extraVideo": "Video extra",
|
||||
"room.overRoomLimit": null,
|
||||
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": "Sei mutato, tieni premuto SPAZIO per parlare",
|
||||
|
||||
"roles.gotRole": "Hai ottenuto il ruolo: {role}",
|
||||
|
|
|
|||
|
|
@ -59,6 +59,9 @@
|
|||
"room.raisedHand": "{displayName} pacēla roku",
|
||||
"room.loweredHand": "{displayName} nolaida roku",
|
||||
"room.extraVideo": "Papildus video",
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": "Jūs esat noklusināts. Turiet taustiņu SPACE-BAR, lai runātu",
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": "{displayName} tok ned hånden",
|
||||
"room.extraVideo": "Ekstra video",
|
||||
"room.overRoomLimit": "Rommet er fullt, prøv igjen om litt.",
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": "Du er dempet, hold nede SPACE for å snakke",
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@
|
|||
"room.loweredHand": null,
|
||||
"room.extraVideo": null,
|
||||
"room.overRoomLimit": null,
|
||||
"room.help": null,
|
||||
"room.about": null,
|
||||
"room.shortcutKeys": null,
|
||||
|
||||
"me.mutedPTT": null,
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue