dropdown _v2
This commit is contained in:
parent
8beec9df6b
commit
8e47a5f937
61
bigbluebutton-html5/imports/ui/components/modals/dropdown/Dropdown.jsx
Executable file
61
bigbluebutton-html5/imports/ui/components/modals/dropdown/Dropdown.jsx
Executable file
@ -0,0 +1,61 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
import classNames from 'classnames';
|
||||
import styles from './styles';
|
||||
import DropdownContent from './DropdownContent';
|
||||
|
||||
|
||||
export default class Dropdown extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { isMenuOpen: false, };
|
||||
this.showMenu = this.showMenu.bind(this);
|
||||
this.hideMenu = this.hideMenu.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
window.addEventListener( 'click', this.onWindowClick.bind(this) );
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener( 'click', this.onWindowClick.bind(this) );
|
||||
}
|
||||
|
||||
showMenu() {
|
||||
this.setState({ isMenuOpen: !this.state.isMenuOpen, });
|
||||
}
|
||||
|
||||
hideMenu() {
|
||||
this.setState({ isMenuOpen: false, });
|
||||
}
|
||||
|
||||
onWindowClick(event) {
|
||||
const dropdown_element = ReactDOM.findDOMNode(this);
|
||||
|
||||
if(event.target!== dropdown_element && !dropdown_element.contains(event.target)) {
|
||||
this.hideMenu();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { styleName, icon, label } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<Button className={styles.settingBtn}
|
||||
role='button'
|
||||
label={label}
|
||||
icon={icon}
|
||||
ghost={true}
|
||||
circle={true}
|
||||
hideLabel={true}
|
||||
onClick={this.showMenu}
|
||||
ref='menuBtn'/>
|
||||
{ this.state.isMenuOpen ?
|
||||
<DropdownContent /> : null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
148
bigbluebutton-html5/imports/ui/components/modals/dropdown/DropdownContent.jsx
Executable file
148
bigbluebutton-html5/imports/ui/components/modals/dropdown/DropdownContent.jsx
Executable file
@ -0,0 +1,148 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Icon from '/imports/ui/components/icon/component';
|
||||
import classNames from 'classnames';
|
||||
import styles from './styles';
|
||||
import SettingsModal from '../settings/SettingsModal';
|
||||
import SessionMenu from '../settings/submenus/SessionMenu';
|
||||
|
||||
export default class DropdownContent extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.menus = [];
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.setState({ activeMenu: -1, focusMenu: 0, });
|
||||
this.menus.push({ className: '',
|
||||
props: { title: 'Fullscreen', prependIconName: 'icon-',
|
||||
icon: 'bbb-full-screen', }, tabIndex: 1, });
|
||||
this.menus.push({ className: SettingsModal,
|
||||
props: { title: 'Settings/Options', prependIconName: 'icon-',
|
||||
icon: 'bbb-more', }, tabIndex: 2, });
|
||||
this.menus.push({ className: SessionMenu,
|
||||
props: { title: 'Leave Session', prependIconName: 'icon-',
|
||||
icon: 'bbb-logout', }, tabIndex: 3, });
|
||||
}
|
||||
|
||||
handleListKeyDown(event) {
|
||||
const pressedKey = event.keyCode;
|
||||
let menusLength = this.menus.length - 1;
|
||||
|
||||
// tab
|
||||
if (pressedKey === 9) {
|
||||
let newIndex = 0;
|
||||
if (this.state.focusMenu >= menusLength) {
|
||||
newIndex = menusLength;
|
||||
} else {
|
||||
newIndex = this.state.focusMenu + 1;
|
||||
}
|
||||
|
||||
this.setState({ focusMenu: newIndex });
|
||||
return;
|
||||
}
|
||||
|
||||
// shift + tab
|
||||
if (event.shiftKey && pressedKey === 9) {
|
||||
let newIndex = 0;
|
||||
if (this.state.focusMenu <= 0) {
|
||||
newIndex = 0;
|
||||
} else {
|
||||
newIndex = this.state.focusMenu - 1;
|
||||
}
|
||||
|
||||
this.setState({ focusMenu: newIndex });
|
||||
return;
|
||||
}
|
||||
|
||||
// Up key
|
||||
if (pressedKey === 38) {
|
||||
if (this.state.focusMenu <= 0) { // checks if at end of menu
|
||||
this.setState({ focusMenu: menusLength },
|
||||
function () { ReactDOM.findDOMNode(this.refs[`menu${this.state.focusMenu}`]).focus();
|
||||
});
|
||||
} else {
|
||||
this.setState({ focusMenu: this.state.focusMenu - 1 },
|
||||
function () { ReactDOM.findDOMNode(this.refs[`menu${this.state.focusMenu}`]).focus(); });
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Down key
|
||||
if (pressedKey === 40) {
|
||||
if (this.state.focusMenu >= menusLength) { // checks if at end of menu
|
||||
this.setState({ focusMenu: 0 },
|
||||
function () { ReactDOM.findDOMNode(this.refs[`menu${this.state.focusMenu}`]).focus();
|
||||
});
|
||||
} else {
|
||||
this.setState({ focusMenu: this.state.focusMenu + 1 },
|
||||
function () { ReactDOM.findDOMNode(this.refs[`menu${this.state.focusMenu}`]).focus(); });
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Enter and SpaceBar
|
||||
if (pressedKey === 13 || pressedKey === 32) {
|
||||
this.clickMenu(this.state.focusMenu);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
clickMenu(i) {
|
||||
if (i < 0) {
|
||||
this.setState({ activeMenu: -1, focusMenu: 0, });
|
||||
}
|
||||
|
||||
if (i >= this.menus.length) {
|
||||
this.setState({ activeMenu: this.menus.length - 1,
|
||||
focusMenu: this.menus.length - 1, });
|
||||
} else {
|
||||
this.setState({ activeMenu: i, focusMenu: i, });
|
||||
}
|
||||
}
|
||||
|
||||
createMenu() {
|
||||
const curr = this.state.activeMenu;
|
||||
console.log(curr);
|
||||
|
||||
if(curr === 0) {
|
||||
return console.log('full screen trigger');
|
||||
}
|
||||
|
||||
if(curr === 1) {
|
||||
return <SettingsModal />;
|
||||
}
|
||||
|
||||
if (curr == 2) {
|
||||
return <SessionMenu />;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles.dropdown__active__content}>
|
||||
<p id="dropdownModal" className={styles.descModal}>Setting dropdown</p>
|
||||
<ul className={styles.menuList} role="menu">
|
||||
{this.menus.map((value, index) => (
|
||||
<li key={index} role='menuitem'
|
||||
tabIndex={value.tabIndex}
|
||||
onClick={this.clickMenu.bind(this, index)}
|
||||
onKeyDown={this.handleListKeyDown.bind(this)}
|
||||
ref={'menu' + index}
|
||||
className={styles.settingsMenuItem}>
|
||||
<Icon key={index} prependIconName={value.props.prependIconName}
|
||||
iconName={value.props.icon} title={value.props.title}/>
|
||||
<span className={styles.settingsMenuItemText}>{value.props.title}</span>
|
||||
{index == '0' ? <hr /> : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div>{this.createMenu()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
27
bigbluebutton-html5/imports/ui/components/modals/dropdown/component.jsx
Executable file
27
bigbluebutton-html5/imports/ui/components/modals/dropdown/component.jsx
Executable file
@ -0,0 +1,27 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Modal from 'react-modal';
|
||||
import Icon from '/imports/ui/components/icon/component';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
import classNames from 'classnames';
|
||||
import styles from './styles';
|
||||
import SettingsModal from '../settings/SettingsModal';
|
||||
import SessionMenu from '../settings/submenus/SessionMenu';
|
||||
import Dropdown from './Dropdown';
|
||||
|
||||
export default class SettingsDropdown extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dropdown styleName='settingBtn'
|
||||
label='setting'
|
||||
icon='more'
|
||||
ghost='true'
|
||||
circle='true'/>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,3 +1,5 @@
|
||||
@import "imports/ui/stylesheets/variables/_all";
|
||||
|
||||
.settingsMenuLeft {
|
||||
width: 14%;
|
||||
float: right;
|
||||
@ -20,8 +22,40 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.divModal {
|
||||
clear: 'both';
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menuList {
|
||||
list-style-type: none;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.descModal {
|
||||
position: fixed;
|
||||
left: -999em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.settingBtn {
|
||||
-ms-transform: rotate( 90deg ); /* IE 9 */
|
||||
-webkit-transform: rotate( 90deg ); /* Safari */
|
||||
transform: rotate( 90deg );
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown__active__content {
|
||||
height: auto;
|
||||
width: auto;
|
||||
display: block;
|
||||
background-color: #ffffff;
|
||||
font-size: $font-size-base * 1.2;
|
||||
}
|
||||
|
@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
|
||||
import styles from './styles.scss';
|
||||
import Button from '../button/component';
|
||||
import RecordButton from './recordbutton/component';
|
||||
import SettingsDropdown from '../modals/dropdown/component';
|
||||
|
||||
const propTypes = {
|
||||
presentationTitle: PropTypes.string.isRequired,
|
||||
@ -26,6 +27,11 @@ class NavBar extends Component {
|
||||
this.props.toggleUserList();
|
||||
}
|
||||
|
||||
clickEvent() {
|
||||
console.log("Clicked button");
|
||||
return <Dropdown beingClicked={true} />;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { presentationTitle, beingRecorded } = this.props;
|
||||
document.title = presentationTitle;
|
||||
@ -51,7 +57,7 @@ class NavBar extends Component {
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.right}>
|
||||
<span id="settingsButtonPlaceHolder"></span>
|
||||
<SettingsDropdown />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user