Linting for settings modal
This commit is contained in:
mmarangoni
parent
c141576ef7
commit
916d3f4b92
@ -77,7 +77,7 @@ export default class BaseModal extends React.Component {
|
||||
onRequestClose={this.closeModal}
|
||||
shouldCloseOnOverlayClick={false}
|
||||
style={ customStyles } >
|
||||
<div style={{ name: 'settingsTop' }} className={styles.settingsMenuTop} role='presentation'>
|
||||
<div className={styles.settingsMenuTop} role='presentation'>
|
||||
<div className={classNames(styles.modalHeaderTitle, 'largeFont')}>
|
||||
{this.state.title}
|
||||
</div>
|
||||
@ -100,12 +100,14 @@ export default class BaseModal extends React.Component {
|
||||
aria-describedby={'doneDesc'}
|
||||
/>
|
||||
<div className={styles.hidden} id='cancelLabel'>Cancel</div>
|
||||
<div className={styles.hidden} id='cancelDesc'>Disregards changes and closes the settings menu.</div>
|
||||
<div className={styles.hidden} id='cancelDesc'>
|
||||
Disregards changes and closes the settings menu.</div>
|
||||
<div className={styles.hidden} id='doneLabel'>Done</div>
|
||||
<div className={styles.hidden} id='doneDesc'>Saves changes and closes the settings menu.</div>
|
||||
<div className={styles.hidden} id='doneDesc'>
|
||||
Saves changes and closes the settings menu.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ name: 'settingsBottom' }} className={styles.settingsMenuBottom} role='presentation'>
|
||||
<div className={styles.settingsMenuBottom} role='presentation'>
|
||||
{this.getContent()}
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@ -21,16 +21,16 @@ export default class SettingsModal extends BaseModal {
|
||||
componentWillMount() {
|
||||
this.setState({ activeSubmenu: 0 });
|
||||
this.setState({ focusSubmenu: 0 });
|
||||
this.submenus.push({ className: AudioMenu,
|
||||
props: { title: 'Audio', prependIconName: 'icon-', icon: 'bbb-audio', }, tabIndex: 3, });
|
||||
this.submenus.push({ className: VideoMenu,
|
||||
props: { title: 'Video', prependIconName: 'icon-', icon: 'bbb-video', }, tabIndex: 4, });
|
||||
this.submenus.push({ className: ApplicationMenu,
|
||||
props: { title: 'Application', prependIconName: 'icon-', icon: 'bbb-application', }, tabIndex: 5, });
|
||||
this.submenus.push({ className: UsersMenu,
|
||||
props: { title: 'Participants', prependIconName: 'icon-', icon: 'bbb-user', }, tabIndex: 6, });
|
||||
this.submenus.push({ className: SessionMenu,
|
||||
props: { title: 'Leave session', prependIconName: 'icon-', icon: 'bbb-logout', }, tabIndex: 7, });
|
||||
this.submenus.push({ className: AudioMenu, tabIndex: 3,
|
||||
props: { title: 'Audio', prependIconName: 'icon-', icon: 'bbb-audio', }, });
|
||||
this.submenus.push({ className: VideoMenu, tabIndex: 4,
|
||||
props: { title: 'Video', prependIconName: 'icon-', icon: 'bbb-video', }, });
|
||||
this.submenus.push({ className: ApplicationMenu, tabIndex: 5,
|
||||
props: { title: 'Application', prependIconName: 'icon-', icon: 'bbb-application', }, });
|
||||
this.submenus.push({ className: UsersMenu, tabIndex: 6,
|
||||
props: { title: 'Participants', prependIconName: 'icon-', icon: 'bbb-user', }, });
|
||||
this.submenus.push({ className: SessionMenu, tabIndex: 7,
|
||||
props: { title: 'Leave session', prependIconName: 'icon-', icon: 'bbb-logout', }, });
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -45,8 +45,7 @@ export default class SettingsModal extends BaseModal {
|
||||
aria-haspopup={'true'}
|
||||
aria-labelledby={'settingsLabel'}
|
||||
aria-describedby={'settingsDesc'}
|
||||
/>
|
||||
, document.getElementById('settingsButtonPlaceHolder'));
|
||||
/>, document.getElementById('settingsButtonPlaceHolder'));
|
||||
}
|
||||
|
||||
createMenu() {
|
||||
@ -67,6 +66,7 @@ export default class SettingsModal extends BaseModal {
|
||||
this.setState({ activeSubmenu: 0, focusSubmenu: 0, });
|
||||
return;
|
||||
}
|
||||
|
||||
if (i >= this.submenus.length) {
|
||||
this.setState({ activeSubmenu: this.submenus.length - 1,
|
||||
focusSubmenu: this.submenus.length - 1, });
|
||||
@ -85,6 +85,7 @@ export default class SettingsModal extends BaseModal {
|
||||
} else {
|
||||
newIndex = this.state.focusSubmenu + 1;
|
||||
}
|
||||
|
||||
this.setState({ focusSubmenu: newIndex });
|
||||
return;
|
||||
}
|
||||
@ -97,6 +98,7 @@ export default class SettingsModal extends BaseModal {
|
||||
} else {
|
||||
newIndex = this.state.focusSubmenu - 1;
|
||||
}
|
||||
|
||||
this.setState({ focusSubmenu: newIndex });
|
||||
return;
|
||||
}
|
||||
@ -104,28 +106,30 @@ export default class SettingsModal extends BaseModal {
|
||||
// up arrow
|
||||
if (event.keyCode === 38) {
|
||||
if (this.state.focusSubmenu <= 0) {
|
||||
this.setState({ focusSubmenu: this.submenus.length - 1 }, function() {
|
||||
this.setState({ focusSubmenu: this.submenus.length - 1 }, function () {
|
||||
ReactDOM.findDOMNode(this.refs[`submenu${this.state.focusSubmenu}`]).focus();
|
||||
});
|
||||
} else {
|
||||
this.setState({ focusSubmenu: this.state.focusSubmenu - 1 }, function() {
|
||||
this.setState({ focusSubmenu: this.state.focusSubmenu - 1 }, function () {
|
||||
ReactDOM.findDOMNode(this.refs[`submenu${this.state.focusSubmenu}`]).focus();
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// down arrow
|
||||
if (event.keyCode === 40) {
|
||||
if (this.state.focusSubmenu >= this.submenus.length - 1) {
|
||||
this.setState({ focusSubmenu: 0 }, function() {
|
||||
this.setState({ focusSubmenu: 0 }, function () {
|
||||
ReactDOM.findDOMNode(this.refs[`submenu${this.state.focusSubmenu}`]).focus();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.setState({ focusSubmenu: this.state.focusSubmenu + 1 }, function() {
|
||||
this.setState({ focusSubmenu: this.state.focusSubmenu + 1 }, function () {
|
||||
ReactDOM.findDOMNode(this.refs[`submenu${this.state.focusSubmenu}`]).focus();
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
@ -146,7 +150,7 @@ export default class SettingsModal extends BaseModal {
|
||||
<div className={styles.settingsMenuLeft}>
|
||||
<ul style={{ listStyleType: 'none', paddingLeft: '0px' }} role='menu'>
|
||||
{this.submenus.map((value, index) => (
|
||||
<li key={index} ref={"submenu" + index} role='menuitem' tabIndex={value.tabIndex}
|
||||
<li key={index} ref={'submenu' + index} role='menuitem' tabIndex={value.tabIndex}
|
||||
onClick={this.clickSubmenu.bind(this, index)}
|
||||
onKeyDown={this.handleKeyDown.bind(this)}
|
||||
onFocus={this.handleFocus.bind(this, index)}
|
||||
|
||||
@ -19,14 +19,18 @@ export default class ApplicationMenu extends BaseMenu {
|
||||
return (
|
||||
<div style={{ height: '100%' }} role='presentation'>
|
||||
<div style={{ height: '15%' }} role='presentation'>
|
||||
<label><input type='checkbox' tabIndex='8' aria-labelledby='audioNotifLabel' aria-describedby='audioNotifDesc' />Audio notifications for chat</label>
|
||||
<label><input type='checkbox' tabIndex='8' aria-labelledby='audioNotifLabel'
|
||||
aria-describedby='audioNotifDesc' />Audio notifications for chat</label>
|
||||
<div className={styles.hidden} id='audioNotifLabel'>Audio notifications</div>
|
||||
<div className={styles.hidden} id='audioNotifDesc'>Toggles the audio notifications for chat.</div>
|
||||
<div className={styles.hidden} id='audioNotifDesc'>
|
||||
Toggles the audio notifications for chat.</div>
|
||||
</div>
|
||||
<div style={{ height: '15%' }} role='presentation'>
|
||||
<label><input type='checkbox' tabIndex='9' aria-labelledby='pushNotifLabel' aria-describedby='pushNotifDesc' />Push notifications for chat</label>
|
||||
<label><input type='checkbox' tabIndex='9' aria-labelledby='pushNotifLabel'
|
||||
aria-describedby='pushNotifDesc' />Push notifications for chat</label>
|
||||
<div className={styles.hidden} id='pushNotifLabel'>Push notifications</div>
|
||||
<div className={styles.hidden} id='pushNotifDesc'>Toggles the push notifications for chat.</div>
|
||||
<div className={styles.hidden} id='pushNotifDesc'>
|
||||
Toggles the push notifications for chat.</div>
|
||||
</div>
|
||||
<div className={styles.applicationFontContainer} role='presentation'>
|
||||
<div className={styles.fontBarLeft}>
|
||||
@ -47,7 +51,8 @@ export default class ApplicationMenu extends BaseMenu {
|
||||
aria-describedby={'sizeUpDesc'}
|
||||
/>
|
||||
<div className={styles.hidden} id='sizeUpLabel'>Font size up</div>
|
||||
<div className={styles.hidden} id='sizeUpDesc'>Increases the font size of the application.</div>
|
||||
<div className={styles.hidden} id='sizeUpDesc'>
|
||||
Increases the font size of the application.</div>
|
||||
<Button
|
||||
onClick={FontControl.decreaseFontSize.bind(this)}
|
||||
icon={'circle-minus'}
|
||||
@ -59,7 +64,8 @@ export default class ApplicationMenu extends BaseMenu {
|
||||
aria-describedby={'sizeDownDesc'}
|
||||
/>
|
||||
<div className={styles.hidden} id='sizeDownLabel'>Font size down</div>
|
||||
<div className={styles.hidden} id='sizeDownDesc'>Decreases the font size of the application.</div>
|
||||
<div className={styles.hidden} id='sizeDownDesc'>
|
||||
Decreases the font size of the application.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@ export default class AudioMenu extends BaseMenu {
|
||||
|
||||
getContent() {
|
||||
return (
|
||||
<div style={{ height: '100%', width: '100%'}} role='presentation'>
|
||||
<div style={{ height: '100%', width: '100%' }} role='presentation'>
|
||||
<div className={styles.containerLeftHalf}>
|
||||
<label htmlFor='microphone'>Microphone source</label>
|
||||
</div>
|
||||
@ -27,31 +27,36 @@ export default class AudioMenu extends BaseMenu {
|
||||
<label htmlFor='audioVolume'>Your audio stream volume</label>
|
||||
</div>
|
||||
<div style={{ height: '20%' }} className={styles.containerLeftHalf} role='presentation'>
|
||||
<select id='microphone' defaultValue='0' tabIndex='8' role='listbox' aria-labelledby='micLabel' aria-describedby='micDesc'>
|
||||
<select id='microphone' defaultValue='0' tabIndex='8' role='listbox'
|
||||
aria-labelledby='micLabel' aria-describedby='micDesc'>
|
||||
<option value='0' disabled>Displace Audio</option>
|
||||
<option value='1' role='option'>audio 1</option>
|
||||
<option value='2' role='option'>audio 2</option>
|
||||
<option value='3' role='option'>audio 3</option>
|
||||
</select>
|
||||
<div className={styles.hidden} id='micLabel'>Select microphone source</div>
|
||||
<div className={styles.hidden} id='micDesc'>Chooses a microphone source from the dropdown menu.</div>
|
||||
<div className={styles.hidden} id='micDesc'>
|
||||
Chooses a microphone source from the dropdown menu.</div>
|
||||
</div>
|
||||
<div style={{ height: '20%' }} className={styles.containerRightHalf}>
|
||||
<input type='text' placeholder='volume bar placeholder' style={{ width: '90%' }} tabIndex='-1'></input>
|
||||
<input style={{ width: '90%' }} type='text' placeholder='volume bar placeholder'
|
||||
tabIndex='-1' />
|
||||
</div>
|
||||
<div className={styles.containerLeftHalf}>
|
||||
<label htmlFor='speaker'>Speaker source</label>
|
||||
</div>
|
||||
<div className={styles.containerRightHalf}><br/></div>
|
||||
<div style={{ height: '20%' }} className={styles.containerLeftHalf} role='presentation'>
|
||||
<select id='speaker' defaultValue='0' tabIndex='9' role='listbox' aria-labelledby='spkrLabel' aria-describedby='spkrDesc'>
|
||||
<select id='speaker' defaultValue='0' tabIndex='9' role='listbox'
|
||||
aria-labelledby='spkrLabel' aria-describedby='spkrDesc'>
|
||||
<option value='0' disabled>Displace Audio</option>
|
||||
<option value='1' role='option'>audio 1</option>
|
||||
<option value='2' role='option'>audio 2</option>
|
||||
<option value='3' role='option'>audio 3</option>
|
||||
</select>
|
||||
<div className={styles.hidden} id='spkrLabel'>Select speaker source</div>
|
||||
<div className={styles.hidden} id='spkrDesc'>Chooses a speaker source from the dropdown menu.</div>
|
||||
<div className={styles.hidden} id='spkrDesc'>
|
||||
Chooses a speaker source from the dropdown menu.</div>
|
||||
</div>
|
||||
<div style={{ height: '20%' }} className={styles.containerRightHalf} role='presentation'>
|
||||
<Button className={styles.testAudioBtn}
|
||||
@ -65,7 +70,8 @@ export default class AudioMenu extends BaseMenu {
|
||||
aria-describedby={'testAudioDesc'}
|
||||
/>
|
||||
<div className={styles.hidden} id='testAudioLabel'>Test audio</div>
|
||||
<div className={styles.hidden} id='testAudioDesc'>Previews the audio output of your microphone.</div>
|
||||
<div className={styles.hidden} id='testAudioDesc'>
|
||||
Previews the audio output of your microphone.</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -14,40 +14,52 @@ export default class UsersMenu extends BaseMenu {
|
||||
return (
|
||||
<div style={{ height: '100%' }} role='presentation'>
|
||||
<div style={{ height: '15%' }} role='presentation'>
|
||||
<label><input type='checkbox' tabIndex='8' aria-labelledby='muteALlLabel' aria-describedby='muteAllDesc' />Mute all except the presenter</label>
|
||||
<label><input type='checkbox' tabIndex='8' aria-labelledby='muteALlLabel'
|
||||
aria-describedby='muteAllDesc' />Mute all except the presenter</label>
|
||||
</div>
|
||||
<div className={styles.hidden} id='muteAllLabel'>Mute all</div>
|
||||
<div className={styles.hidden} id='muteAllDesc'>Mutes all participants except the presenter.</div>
|
||||
<div className={styles.hidden} id='muteAllDesc'>
|
||||
Mutes all participants except the presenter.</div>
|
||||
|
||||
<div style={{ height: '15%' }} role='presentation'>
|
||||
<label><input type="checkbox" tabIndex='9' aria-labelledby='lockAllLabel' aria-describedby='lockAllDesc' />Lock all participants</label>
|
||||
<label><input type="checkbox" tabIndex='9' aria-labelledby='lockAllLabel'
|
||||
aria-describedby='lockAllDesc' />Lock all participants</label>
|
||||
</div>
|
||||
<div className={styles.hidden} id='lockAllLabel'>Lock all</div>
|
||||
<div className={styles.hidden} id='lockAllDesc'>Toggles locked status for all participants.</div>
|
||||
<div className={styles.hidden} id='lockAllDesc'>
|
||||
Toggles locked status for all participants.</div>
|
||||
|
||||
<div style={{ height: '15%', paddingLeft: '10%' }} role='presentation'>
|
||||
<label><input type='checkbox' tabIndex='10' aria-labelledby='webcamLabel' aria-describedby='webcamDesc' />Webcam</label>
|
||||
<label><input type='checkbox' tabIndex='10' aria-labelledby='webcamLabel'
|
||||
aria-describedby='webcamDesc' />Webcam</label>
|
||||
</div>
|
||||
<div className={styles.hidden} id='webcamLabel'>Webcam lock</div>
|
||||
<div className={styles.hidden} id='webcamDesc'>Disables the webcam for all locked participants.</div>
|
||||
<div className={styles.hidden} id='webcamDesc'>
|
||||
Disables the webcam for all locked participants.</div>
|
||||
|
||||
<div style={{ height: '15%', paddingLeft: '10%' }} role='presentation'>
|
||||
<label><input type='checkbox' tabIndex='11' aria-labelledby='micLabel' aria-describedby='micDesc' />Microphone</label>
|
||||
<label><input type='checkbox' tabIndex='11' aria-labelledby='micLabel'
|
||||
aria-describedby='micDesc' />Microphone</label>
|
||||
</div>
|
||||
<div className={styles.hidden} id='micLabel'>Microphone lock</div>
|
||||
<div className={styles.hidden} id='micDesc'>Disables the microphone for all locked participants.</div>
|
||||
<div className={styles.hidden} id='micDesc'>
|
||||
Disables the microphone for all locked participants.</div>
|
||||
|
||||
<div style={{ height: '15%', paddingLeft: '10%' }} role='presentation'>
|
||||
<label><input type='checkbox' tabIndex='12' aria-labelledby='pubChatLabel' aria-describedby='pubChatDesc' />Public chat</label>
|
||||
<label><input type='checkbox' tabIndex='12' aria-labelledby='pubChatLabel'
|
||||
aria-describedby='pubChatDesc' />Public chat</label>
|
||||
</div>
|
||||
<div className={styles.hidden} id='pubChatLabel'>Public chat lock</div>
|
||||
<div className={styles.hidden} id='pubChatDesc'>Disables public chat for all locked participants.</div>
|
||||
<div className={styles.hidden} id='pubChatDesc'>
|
||||
Disables public chat for all locked participants.</div>
|
||||
|
||||
<div style={{ height: '15%', paddingLeft: '10%' }} role='presentation'>
|
||||
<label><input type='checkbox' tabIndex='13' aria-labelledby='privChatLabel' aria-describedby='privChatDesc' />Private chat</label>
|
||||
<label><input type='checkbox' tabIndex='13' aria-labelledby='privChatLabel'
|
||||
aria-describedby='privChatDesc' />Private chat</label>
|
||||
</div>
|
||||
<div className={styles.hidden} id='privChatLabel'>Private chat lock</div>
|
||||
<div className={styles.hidden} id='privChatDesc'>Disables private chat for all locked participants.</div>
|
||||
<div className={styles.hidden} id='privChatDesc'>
|
||||
Disables private chat for all locked participants.</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -20,24 +20,28 @@ export default class VideoMenu extends BaseMenu {
|
||||
<label htmlFor='quality' >Video quality</label>
|
||||
</div>
|
||||
<div style={{ height: '20%' }} className={styles.containerLeftHalf} role='presentation'>
|
||||
<select id='camera' defaultValue='0' tabIndex='7' aria-labelledby='camLabel' aria-describedby='camDesc'>
|
||||
<select id='camera' defaultValue='0' tabIndex='7'
|
||||
aria-labelledby='camLabel' aria-describedby='camDesc'>
|
||||
<option value='0' disabled>Select camera</option>
|
||||
<option value='1'>Camera 1</option>
|
||||
<option value='2'>Camera 2</option>
|
||||
<option value='3'>Camera 3</option>
|
||||
</select>
|
||||
<div className={styles.hidden} id='camLabel'>Camera source</div>
|
||||
<div className={styles.hidden} id='camDesc'>Chooses a camera source from the dropdown menu.</div>
|
||||
<div className={styles.hidden} id='camDesc'>
|
||||
Chooses a camera source from the dropdown menu.</div>
|
||||
</div>
|
||||
<div style={{ height: '20%' }} className={styles.containerRightHalf} role='presentation'>
|
||||
<select id='quality' defaultValue='0' tabIndex='8' aria-labelledby='vidLabel' aria-describedby='vidDesc'>
|
||||
<select id='quality' defaultValue='0' tabIndex='8'
|
||||
aria-labelledby='vidLabel' aria-describedby='vidDesc'>
|
||||
<option value='0' disabled>Select quality</option>
|
||||
<option value='1'>Low</option>
|
||||
<option value='2'>Medium</option>
|
||||
<option value='3'>High</option>
|
||||
</select>
|
||||
<div className={styles.hidden} id='vidLabel'>Video quality</div>
|
||||
<div className={styles.hidden} id='vidDesc'>Chooses the video quality level from the dropdown menu.</div>
|
||||
<div className={styles.hidden} id='vidDesc'>
|
||||
Chooses the video quality level from the dropdown menu.</div>
|
||||
</div>
|
||||
<div className={styles.containerLeftHalf}>
|
||||
<p style={{ margin: '0px' }}>Viewing participants webcams</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user