Changes dropdown for actions on userlist

2016-09-12 17:12:20 -03:00 · 2016-09-12 17:12:20 -03:00 · f4c8282ebf
commit f4c8282ebf
parent edee8f5097
7 changed files with 143 additions and 221 deletions
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/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 (
--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/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;
 }

--- a/bigbluebutton-html5/imports/ui/components/user-list/component.jsx
+++ b/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>
--- a/bigbluebutton-html5/imports/ui/components/user-list/styles.scss
+++ b/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;
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
+++ b/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.handleClickOutsideDropdown = this.handleClickOutsideDropdown.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
  }

-  handleClickOutsideDropdown(e) {
-    const node = findDOMNode(this);
-    const shouldUpdateState = e.target !== node &&
-                              !node.contains(e.target) &&
-                              this.state.visibleActions;
-    if (shouldUpdateState) {
-      this.setState({ visibleActions: false });
-    }
+  handleScroll() {
+    this.setState({
+      isActionsOpen: false,
+    });
  }

-  handleToggleActions() {
-    this.setState({ visibleActions: !this.state.visibleActions });
+  getUserActions() {
+    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 = {
-      top: this.state.contentTop,
-    };
+    userItemContentsStyle[styles.active] = this.state.active;

-    // 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)}>
-        <Dropdown ref="dropdown">
+      <li
+        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}>
-             <UserAvatar user={this.props.user}/>
-             {this.renderUserName()}
-             {this.renderUserIcons()}
-           </div>
+            {contents}
          </DropdownTrigger>
-          <DropdownContent placement="right top">
-            <DropdownList>
-              <DropdownListItem
-                icon="full-screen"
-                label="Fullscreen"
-                defaultMessage="Make the application fullscreen"
-                onClick={() => {}}
-              />
-              <DropdownListItem
-                icon="more"
-                label="Settings"
-                description="Change the general settings"
-                onClick={() => {}}
-              />
-              <DropdownListSeparator />
-              <DropdownListItem
-                icon="logout"
-                label="Leave Session"
-                description="Leave the meeting"
-                onClick={() => {}}
-              />
+          <DropdownContent
+            style={{
+              top: this.state.contentTop,
+            }}
+            placement="right top">
+
+            <DropdownList {...this.props}>
+              {actions}
            </DropdownList>
          </DropdownContent>
        </Dropdown>
-      </li>
-    );
+      );
+    }

-    // <Dropdown
-    //   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>
-    // );
+    return contents;
  }

  renderUserName() {
    const {
      user,
      intl,
+      compact,
    } = this.props;

-    if (this.props.compact) {
+    if (compact) {
      return;
    }

@ -263,29 +265,20 @@ class UserListItem extends Component {
    );
  }

-  renderUserActions() {
-    const {
-      user,
-      currentUser,
-      userActions,
-    } = this.props;
+  renderUserAction(action, ...parameters) {
+    const currentUser = this.props.currentUser;
+    const user = this.props.user;

-    return (
-      <ReactCSSTransitionGroup
-        transitionName={userActionsTransition}
-        transitionAppear={true}
-        transitionEnter={true}
-        transitionLeave={true}
-        transitionAppearTimeout={0}
-        transitionEnterTimeout={0}
-        transitionLeaveTimeout={0}
-      >
-        <UserActions
-          user={user}
-          currentUser={currentUser}
-          userActions={userActions}/>
-      </ReactCSSTransitionGroup>
+    const userAction = (
+      <DropdownListItem key={_.uniqueId('action-item-')}
+        icon={action.icon}
+        label={action.label}
+        defaultMessage={action.label}
+        onClick={action.handler.bind(this, ...parameters)}
+      />
    );
+
+    return userAction;
  }
 }

--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/styles.scss
+++ b/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;
-}
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/user-actions/component.jsx
+++ b/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 (
-      <div key={user.id} className={styles.userItemActions}>
-        <ul className={styles.userActionsList}>
+    let actions = [
+      (!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),
+    ];

-          {!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}
-        </ul>
-      </div>
+    return (
+      <DropdownList {...this.props}>
+        {_.compact(actions)}
+      </DropdownList>
    );
  }

@ -57,13 +58,12 @@ class UserActions extends Component {
    const user = this.props.user;

    const userAction = (
-      <li onClick={action.handler.bind(this, ...parameters)}
-          className={styles.userActionsItem}>
-        <Icon iconName={action.icon} className={styles.actionIcon}/>
-        <span className={styles.actionText}>
-          {action.label}
-        </span>
-      </li>
+      <DropdownListItem
+        icon={action.icon}
+        label={action.label}
+        defaultMessage={action.label}
+        onClick={action.handler.bind(this, ...parameters)}
+      />
    );

    return userAction;