Changes dropdown for actions on userlist

bigbluebutton-html5/imports/ui/components/app/component.jsx

@@ -54,7 +54,7 @@ export default class App extends Component {
     const { userList } = this.props;
 
     const userListStyle = {};
-    userListStyle[styles.minview] = false;
+    userListStyle[styles.compact] = false;
 
     if (userList) {
       return (

bigbluebutton-html5/imports/ui/components/app/styles.scss

@@ -113,7 +113,7 @@ $actionsbar-height: 50px; // TODO: Change to ActionsBar real height
   }
 }
 
-.minview {
+.compact {
   flex-basis: 4.6rem;
 }
 

bigbluebutton-html5/imports/ui/components/user-list/component.jsx

@@ -31,7 +31,6 @@ class UserList extends Component {
 
     this.state = {
       compact: false,
-      participantsScrollable: true,
     };
   }
 
@@ -69,19 +68,6 @@ class UserList extends Component {
     );
   }
 
-  openActions() {
-    console.log('4HEAD');
-    this.setState({
-      participantsScrollable: false,
-    });
-  }
-
-  closeActions() {
-    this.setState({
-      participantsScrollable: true,
-    });
-  }
-
   renderMessages() {
     const {
       openChats,
@@ -159,8 +145,6 @@ class UserList extends Component {
               user={user}
               currentUser={currentUser}
               userActions={userActions}
-              onUserActionsOpen={() => this.openActions()}
-              onUserActionsClose={() => this.closeActions()}
             />
           ))}
         </ReactCSSTransitionGroup>

bigbluebutton-html5/imports/ui/components/user-list/styles.scss

@@ -43,7 +43,7 @@ $user-icons-color-hover: $color-gray;
   padding-left: 0.5rem;
   padding-right: 0rem;
   margin-left: 0.7rem;
-  margin-top: 0.9rem;
+  margin-top: 0.3rem;
   display: flex;
   flex-flow: row;
   transition: all 0.3s;

bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx

@@ -2,14 +2,13 @@ import React, { Component } from 'react';
 import UserAvatar from '/imports/ui/components/user-avatar/component';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import Icon from '/imports/ui/components/icon/component';
-import UserActions from './user-actions/component';
 import { findDOMNode } from 'react-dom';
 import { withRouter } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
 import styles from './styles.scss';
 import cx from 'classnames';
+import _ from 'underscore';
 
-import Button from '/imports/ui/components/button/component';
 import Dropdown from '/imports/ui/components/dropdown/component';
 import DropdownTrigger from '/imports/ui/components/dropdown/trigger/component';
 import DropdownContent from '/imports/ui/components/dropdown/content/component';
@@ -17,10 +16,6 @@ import DropdownList from '/imports/ui/components/dropdown/list/component';
 import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
 import DropdownListSeparator from '/imports/ui/components/dropdown/list/separator/component';
 
-// import Dropdown from '/imports/ui/components/dropdown/dropdown-menu/component';
-// import DropdownTrigger from '/imports/ui/components/dropdown/dropdown-trigger/component';
-// import DropdownContent from '/imports/ui/components/dropdown/dropdown-content/component';
-
 const propTypes = {
   user: React.PropTypes.shape({
     name: React.PropTypes.string.isRequired,
@@ -87,126 +82,133 @@ class UserListItem extends Component {
     super(props);
 
     this.state = {
-      visibleActions: false,
+      isActionsOpen: false,
     };
 
-    this.handleToggleActions = this.handleToggleActions.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
-    this.handleClickOutsideDropdown = this.handleClickOutsideDropdown.bind(this);
   }
 
-  handleClickOutsideDropdown(e) {
+  handleScroll() {
-    const node = findDOMNode(this);
+    this.setState({
-    const shouldUpdateState = e.target !== node &&
+      isActionsOpen: false,
-                              !node.contains(e.target) &&
+    });
-                              this.state.visibleActions;
-    if (shouldUpdateState) {
-      this.setState({ visibleActions: false });
-    }
   }
 
-  handleToggleActions() {
+  getUserActions() {
-    this.setState({ visibleActions: !this.state.visibleActions });
+    const {
+      currentUser,
+      user,
+      userActions,
+      router,
+    } = this.props;
+
+    const {
+      openChat,
+      clearStatus,
+      setPresenter,
+      promote,
+      kick,
+    } = userActions;
+
+    return _.compact([
+      (!user.isCurrent ? this.renderUserAction(openChat, router, user) : null),
+      (currentUser.isModerator ? this.renderUserAction(clearStatus, user) : null),
+      (currentUser.isModerator ? this.renderUserAction(setPresenter, user) : null),
+      (currentUser.isModerator ? this.renderUserAction(promote, user) : null),
+      (currentUser.isModerator ? this.renderUserAction(kick, user) : null),
+    ]);
   }
 
   render() {
     const {
       user,
+      currentUser,
+      userActions,
     } = this.props;
 
-    const userItemContentsStyle = {};
+    let userItemContentsStyle = {};
     userItemContentsStyle[styles.userItemContentsCompact] = this.props.compact;
-    let contentPositioning = {
+    userItemContentsStyle[styles.active] = this.state.active;
-      top: this.state.contentTop,
-    };
 
-    // let trigger = (
-    //   <DropdownTrigger>
-    //       <li className={cx(styles.userListItem, userItemContentsStyle)}>
-    //         <div className={styles.userItemContents}>
-    //           <UserAvatar user={this.props.user}/>
-    //           {this.renderUserName()}
-    //           {this.renderUserIcons()}
-    //         </div>
-    //       </li>
-    //   </DropdownTrigger>
-    // );
-
-    let onActionsOpen = () => {
-      // const dropdown = findDOMNode(this.refs.dropdown);
-
-      // console.log(dropdown.parentElement.offsetTop);
-      // console.log(dropdown.offsetTop);
-      // console.log(dropdown);
-
-      this.setState({ contentTop: dropdown.offsetTop - dropdown.parentElement.scrollTop });
-      this.props.onUserActionsOpen();
-    };
-
-
-    console.log('Kappa');
     return (
-      <li className={cx(styles.userListItem, userItemContentsStyle)}>
+      <li
-        <Dropdown ref="dropdown">
+        className={cx(styles.userListItem, userItemContentsStyle)}>
+        {this.renderUserContents()}
+      </li>
+    );
+  }
+
+  renderUserContents() {
+    const {
+      user,
+    } = this.props;
+
+    let actions = this.getUserActions();
+    let contents = (
+      <div tabIndex={0} className={styles.userItemContents}>
+        <UserAvatar user={user}/>
+        {this.renderUserName()}
+        {this.renderUserIcons()}
+      </div>
+    );
+
+    let onActionsShow = () => {
+      const dropdown = findDOMNode(this.refs.dropdown);
+      this.setState({
+        contentTop: `${dropdown.offsetTop - dropdown.parentElement.parentElement.scrollTop}px`,
+      });
+
+      findDOMNode(this).parentElement.addEventListener('scroll', this.handleScroll, false);
+    };
+
+    let onActionsHide = () => {
+      findDOMNode(this).parentElement.removeEventListener('scroll', this.handleScroll, false);
+    };
+
+    if (actions.length) {
+      actions = [
+        (<DropdownListItem key={_.uniqueId('action-header')}
+          label={user.name}
+          defaultMessage={user.name}
+        />),
+        (<DropdownListSeparator key={_.uniqueId('action-separator')} />),
+      ].concat(actions);
+
+      contents = (
+        <Dropdown
+          isOpen={this.state.isActionsOpen}
+          ref="dropdown"
+          onShow={onActionsShow}
+          onHide={onActionsHide}
+          className={styles.dropdown}>
           <DropdownTrigger>
-           <div className={styles.userItemContents}>
+            {contents}
-             <UserAvatar user={this.props.user}/>
-             {this.renderUserName()}
-             {this.renderUserIcons()}
-           </div>
           </DropdownTrigger>
-          <DropdownContent placement="right top">
+          <DropdownContent
-            <DropdownList>
+            style={{
-              <DropdownListItem
+              top: this.state.contentTop,
-                icon="full-screen"
+            }}
-                label="Fullscreen"
+            placement="right top">
-                defaultMessage="Make the application fullscreen"
+
-                onClick={() => {}}
+            <DropdownList {...this.props}>
-              />
+              {actions}
-              <DropdownListItem
-                icon="more"
-                label="Settings"
-                description="Change the general settings"
-                onClick={() => {}}
-              />
-              <DropdownListSeparator />
-              <DropdownListItem
-                icon="logout"
-                label="Leave Session"
-                description="Leave the meeting"
-                onClick={() => {}}
-              />
             </DropdownList>
           </DropdownContent>
         </Dropdown>
-      </li>
+      );
-    );
+    }
 
-    // <Dropdown
+    return contents;
-    //   ref='dropdown'
-    //   onOpen={onActionsOpen}
-    //   onClose={this.props.onUserActionsClose}>
-    //     {trigger}
-    //   <DropdownContent>
-    //     <div
-    //       className={styles.triangleOnDropdown}
-    //       style={contentPositioning}></div>
-    //     <div
-    //       className={styles.dropdownActiveContent}
-    //       style={contentPositioning}>
-    //       {this.renderUserActions()}
-    //     </div>
-    //   </DropdownContent>
-    // </Dropdown>
-    // );
   }
 
   renderUserName() {
     const {
       user,
       intl,
+      compact,
     } = this.props;
 
-    if (this.props.compact) {
+    if (compact) {
       return;
     }
 
@@ -263,29 +265,20 @@ class UserListItem extends Component {
     );
   }
 
-  renderUserActions() {
+  renderUserAction(action, ...parameters) {
-    const {
+    const currentUser = this.props.currentUser;
-      user,
+    const user = this.props.user;
-      currentUser,
-      userActions,
-    } = this.props;
 
-    return (
+    const userAction = (
-      <ReactCSSTransitionGroup
+      <DropdownListItem key={_.uniqueId('action-item-')}
-        transitionName={userActionsTransition}
+        icon={action.icon}
-        transitionAppear={true}
+        label={action.label}
-        transitionEnter={true}
+        defaultMessage={action.label}
-        transitionLeave={true}
+        onClick={action.handler.bind(this, ...parameters)}
-        transitionAppearTimeout={0}
+      />
-        transitionEnterTimeout={0}
-        transitionLeaveTimeout={0}
-      >
-        <UserActions
-          user={user}
-          currentUser={currentUser}
-          userActions={userActions}/>
-      </ReactCSSTransitionGroup>
     );
+
+    return userAction;
   }
 }
 

bigbluebutton-html5/imports/ui/components/user-list/user-list-item/styles.scss

@@ -17,6 +17,15 @@
       opacity: 1;
     }
   }
+
+  &:last-child {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.active {
+  background-color: $list-item-bg-hover;
+  outline: none;
 }
 
 .userItemContentsCompact {
@@ -38,7 +47,6 @@
   line-height: 1rem;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-transform: capitalize;
   white-space: nowrap;
   transition: all 0.3s;
 }
@@ -133,69 +141,6 @@
   transform: translateY(-100%);
 }
 
-@import "../../../stylesheets/variables/_all";
-
-.settingsMenuItem {
-  padding-top:20px;
-}
-
-.settingsMenuItemText {
-  margin-left: 10px;
-}
-
-.menuList {
-  list-style-type: none;
-  padding-left: 0px;
-}
-
-.settingBtn {
-  -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.3px solid $color-gray-light;
-  width: 165px;
-  text-align: center;
-}
-
 .dropdown {
   position: static;
 }
-
-.dropdownActiveContent {
-  left: 16vw;
-  height: auto;
-  width: 190px;
-  display: block;
-  background-color: #ffffff;
-  position: absolute;
-  text-align: left;
-  font-size: 1rem;
-  border-radius: 3px;
-  -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);
-  z-index: 9999;
-}
-
-.triangleOnDropdown {
-  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);
-  left: 15.5vw;
-  top: 263px;
-  position: absolute;
-  z-index: 5;
-  width: 0;
-  height: 0;
-}
-
-.iconColor {
- font-size: $font-size-base;
- color: $color-gray-light;
-}

bigbluebutton-html5/imports/ui/components/user-list/user-list-item/user-actions/component.jsx

@@ -2,6 +2,10 @@ import React, { Component } from 'react';
 import { withRouter } from 'react-router';
 import Icon from '/imports/ui/components/icon/component';
 import styles from './styles.scss';
+import _ from 'underscore';
+
+import DropdownList from '/imports/ui/components/dropdown/list/component';
+import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
 
 const propTypes = {
   user: React.PropTypes.shape({
@@ -19,10 +23,6 @@ const defaultProps = {
 };
 
 class UserActions extends Component {
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     const {
       user,
@@ -38,17 +38,18 @@ class UserActions extends Component {
       kick,
     } = this.props.userActions;
 
-    return (
+    let actions = [
-      <div key={user.id} className={styles.userItemActions}>
+      (!user.isCurrent ? this.renderUserAction(openChat, router, user) : null),
-        <ul className={styles.userActionsList}>
+      (currentUser.isModerator ? this.renderUserAction(clearStatus, user) : null),
+      (currentUser.isModerator ? this.renderUserAction(setPresenter, user) : null),
+      (currentUser.isModerator ? this.renderUserAction(promote, user) : null),
+      (currentUser.isModerator ? this.renderUserAction(kick, user) : null),
+    ];
 
-          {!user.isCurrent ? this.renderUserAction(openChat, router, user) : null}
+    return (
-          {currentUser.isModerator ? this.renderUserAction(clearStatus, user) : null}
+      <DropdownList {...this.props}>
-          {currentUser.isModerator ? this.renderUserAction(setPresenter, user) : null}
+        {_.compact(actions)}
-          {currentUser.isModerator ? this.renderUserAction(promote, user) : null}
+      </DropdownList>
-          {currentUser.isModerator ? this.renderUserAction(kick, user) : null}
-        </ul>
-      </div>
     );
   }
 
@@ -57,13 +58,12 @@ class UserActions extends Component {
     const user = this.props.user;
 
     const userAction = (
-      <li onClick={action.handler.bind(this, ...parameters)}
+      <DropdownListItem
-          className={styles.userActionsItem}>
+        icon={action.icon}
-        <Icon iconName={action.icon} className={styles.actionIcon}/>
+        label={action.label}
-        <span className={styles.actionText}>
+        defaultMessage={action.label}
-          {action.label}
+        onClick={action.handler.bind(this, ...parameters)}
-        </span>
+      />
-      </li>
     );
 
     return userAction;