67a7227c26
Added proper settings buttons and icons, created containers to align content with style guide, populated submenu's with content to match style guide, numerous CSS changes for each submenu and its contents.
85 lines
3.0 KiB
JavaScript
Executable File
85 lines
3.0 KiB
JavaScript
Executable File
import React from 'react';
|
|
import Modal from 'react-modal';
|
|
import Icon from '/imports/ui/components/icon/component';
|
|
import Button from '/imports/ui/components/button/component';
|
|
import BaseModal from '../BaseModal';
|
|
import AudioMenu from './submenus/AudioMenu';
|
|
import VideoMenu from './submenus/VideoMenu';
|
|
import ApplicationMenu from './submenus/ApplicationMenu';
|
|
import UsersMenu from './submenus/UsersMenu';
|
|
import SessionMenu from './submenus/SessionMenu';
|
|
import classNames from 'classnames';
|
|
import ReactDOM from 'react-dom';
|
|
import styles from './styles';
|
|
|
|
export default class SettingsModal extends BaseModal {
|
|
constructor(props) {
|
|
super(props);
|
|
this.submenus = [];
|
|
}
|
|
|
|
componentWillMount() {
|
|
this.setState({ activeSubmenu: 0 });
|
|
this.submenus.push({ className: AudioMenu,
|
|
props: { title: 'Audio', prependIconName: 'icon-', icon: 'bbb-audio', }, });
|
|
this.submenus.push({ className: VideoMenu,
|
|
props: { title: 'Video', prependIconName: 'icon-', icon: 'bbb-video', }, });
|
|
this.submenus.push({ className: ApplicationMenu,
|
|
props: { title: 'Application', prependIconName: 'icon-', icon: 'bbb-application', }, });
|
|
this.submenus.push({ className: UsersMenu,
|
|
props: { title: 'Participants', prependIconName: 'icon-', icon: 'bbb-user', }, });
|
|
this.submenus.push({ className: SessionMenu,
|
|
props: { title: 'Leave session', prependIconName: 'icon-', icon: 'bbb-logout', }, });
|
|
}
|
|
|
|
componentDidMount() {
|
|
ReactDOM.render(
|
|
<Button style={{ transform: 'rotate(90deg)' }}
|
|
onClick={this.openModal}
|
|
icon={'more'}
|
|
ghost={true}
|
|
circle={true}
|
|
/>, document.getElementById('settingsButtonPlaceHolder'));
|
|
}
|
|
|
|
createMenu() {
|
|
const curr = this.state.activeSubmenu === undefined ? 0 : this.state.activeSubmenu;
|
|
|
|
let props = {
|
|
title: this.submenus[curr].props.title,
|
|
prependIconName: this.submenus[curr].props.prependIconName,
|
|
icon: this.submenus[curr].props.icon,
|
|
};
|
|
|
|
const Submenu = this.submenus[curr].className;
|
|
return <Submenu {...props}/>;
|
|
}
|
|
|
|
clickSubmenu(i) {
|
|
this.setState({ activeSubmenu: i });
|
|
}
|
|
|
|
getContent() {
|
|
return (
|
|
<div style={{ clear: 'both', height: '100%' }}>
|
|
<div className={styles.settingsMenuLeft}>
|
|
<ul style={{ listStyleType: 'none', padding: 0 }}>
|
|
{this.submenus.map((value, index) => (
|
|
<li key={index} onClick={this.clickSubmenu.bind(this, index)}
|
|
className={classNames(styles.settingsSubmenuItem,
|
|
index == this.state.activeSubmenu ? styles.settingsSubmenuItemActive : null)}>
|
|
<Icon key={index} prependIconName={value.props.prependIconName}
|
|
iconName={value.props.icon} title={value.props.title}/>
|
|
<span className={styles.settingsSubmenuItemText}>{value.props.title}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className={styles.settingsMenuRight}>{this.createMenu()}</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
SettingsModal.defaultProps = { title: 'Settings' };
|