Dropdown with dropdown_v2 branch

bigbluebutton-html5/imports/ui/components/modals/dropdown/Dropdown.jsx

@@ -2,58 +2,53 @@ import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import Button from '/imports/ui/components/button/component';
 import classNames from 'classnames';
+import Icon from '/imports/ui/components/icon/component';
 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, });
   }
-
+  // componentDidMount () {
-  onWindowClick(event) {
+  //   window.addEventListener( 'click', this.onWindowClick.bind(this) );
-    const dropdown_element = ReactDOM.findDOMNode(this);
+  // }
-
+  //
-    if(event.target!== dropdown_element && !dropdown_element.contains(event.target)) {
+  // componentWillUnmount () {
-      this.hideMenu();
+  //   window.removeEventListener( 'click', this.onWindowClick.bind(this) );
-    }
+  // }
-  }
+  //
-
+  // onWindowClick(event) {
+  //   const dropdown_element = ReactDOM.findDOMNode(this);
+  //
+  //   if(!dropdown_element.contains(event.target)) {
+  //     this.hideMenu();
+  //   }
+  // }
   render() {
-    const { styleName, icon, label } = this.props;
+    const { styleName, icon, label, circle } = this.props;
     return (
-      <div>
+      <div className={styles.dropdown}>
         <Button className={styles.settingBtn}
-                role='button'
+            role='button'
-                label={label}
+            label={'settings'}
-                icon={icon}
+            icon={'more'}
-                ghost={true}
+            ghost={true}
-                circle={true}
+            circle={true}
-                hideLabel={true}
+            hideLabel={true}
-                onClick={this.showMenu}
+            onClick={this.showMenu}
-                ref='menuBtn'/>
+            ref='menuBtn'/>
-        { this.state.isMenuOpen ?
+        {
-          <DropdownContent /> : null
+          this.state.isMenuOpen ?
+          this.props.children
+          : null
         }
       </div>
     );

bigbluebutton-html5/imports/ui/components/modals/dropdown/DropdownContent.jsx

@@ -10,139 +10,9 @@ 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 (
+    return <div>{this.props.children}</div>;
-      <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>
-    );
   }
 }

bigbluebutton-html5/imports/ui/components/modals/dropdown/component.jsx

@@ -8,20 +8,121 @@ import styles from './styles';
 import SettingsModal from '../settings/SettingsModal';
 import SessionMenu from '../settings/submenus/SessionMenu';
 import Dropdown from './Dropdown';
-
+import DropdownContent from './DropdownContent';
 export default class SettingsDropdown extends Component {
-
   constructor(props) {
     super(props);
+    console.log(this.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 = 0;
+      } 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 = menusLength;
+      } 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) {
+    this.setState({ activeMenu: i, focusMenu: i, });
+  }
+  createMenu() {
+    const curr = this.state.activeMenu;
+    if(curr === 0) {
+      return console.log('full screen trigger');
+    }
+    if(curr === 1) {
+      return <SettingsModal />;
+    }
+    if (curr == 2) {
+      return <SessionMenu />;
+    }
   }
-
   render() {
     return (
-      <Dropdown styleName='settingBtn'
+      <Dropdown label='setting' icon='more'>
-              label='setting'
+        <DropdownContent>
-              icon='more'
+          <div className={styles.triangleOnDropdown}></div>
-              ghost='true'
+          <div className={styles.dropdown__active__content}>
-              circle='true'/>
+              <p id="dropdownModal" className={styles.descModal}>Settings 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>
+        </DropdownContent>
+        <div>{this.createMenu()}</div>
+      </Dropdown>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/modals/dropdown/styles.scss

@@ -42,20 +42,45 @@
   -ms-transform: rotate( 90deg ); /* IE 9 */
   -webkit-transform: rotate( 90deg ); /* Safari */
   transform: rotate( 90deg );
+  color: #ffffff;
+  span {
+    border: 0px solid;
+    box-shadow: none;
+  }
+}
+
+.hrDropdown {
+  border: 0.5px solid black;
+  width: 150px;
+  text-align: center;
 }
 
 .dropdown {
-    display: inline-block;
+    position: relative;
-}
-
-.dropdown__content {
-    display: none;
 }
 
 .dropdown__active__content {
+  margin-top: 14px;
+  margin-right: -3px;
+  padding-left: 15px;
   height: auto;
-  width: auto;
+  width: 190px;
   display: block;
   background-color: #ffffff;
-  font-size: $font-size-base * 1.2;
+  font-size: $font-size-base * 1.1;
+  position: absolute;
+  right: 0;
+  text-align: left;
+  border-radius: 3%;
 }
+
+ .triangleOnDropdown {
+   position: absolute;
+   margin-top: 5px;
+   margin-left: -2px;
+   width: 0;
+   height: 0;
+   border-left: 18px solid transparent;
+   border-right: 18px solid transparent;
+   border-bottom: 18px solid #ffffff;
+ }