Merge pull request #3368 from Gcampes/compact-userlist

Compact userlist

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

@@ -9,6 +9,7 @@ import NotificationsBarContainer from '../notifications-bar/container';
 
 import Button from '../button/component';
 import styles from './styles';
+import cx from 'classnames';
 
 const propTypes = {
   navbar: PropTypes.element,
@@ -21,6 +22,14 @@ const propTypes = {
 };
 
 export default class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      compactUserList: false, //TODO: Change this on userlist resize (?)
+    };
+  }
+
   renderNavBar() {
     const { navbar } = this.props;
 
@@ -50,11 +59,18 @@ export default class App extends Component {
   }
 
   renderUserList() {
-    const { userList } = this.props;
+    let { userList } = this.props;
+    const { compactUserList } = this.state;
 
+    let userListStyle = {};
+    userListStyle[styles.compact] = compactUserList;
     if (userList) {
+      userList = React.cloneElement(userList, {
+        compact: compactUserList,
+      });
+
       return (
-        <nav className={styles.userList}>
+        <nav className={cx(styles.userList, userListStyle)}>
           {userList}
         </nav>
       );

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

@@ -97,11 +97,7 @@ $actionsbar-height: 50px; // TODO: Change to ActionsBar real height
 .userList {
   @extend %full-page;
   z-index: 2;
-  overflow: hidden;
-
-  @include mq($small-only) {
-    padding-top: $navbar-height;
-  }
+  overflow: visible;
 
   @include mq($small-only) {
     padding-top: $navbar-height;
@@ -117,11 +113,15 @@ $actionsbar-height: 50px; // TODO: Change to ActionsBar real height
   }
 }
 
+.compact {
+  flex-basis: 4.6rem;
+}
+
 .chat {
   @extend %full-page;
-  z-index: 3;
 
   @include mq($small-only) {
+    z-index: 3;
     padding-top: $navbar-height;
   }
 

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

@@ -10,9 +10,8 @@
 
 .closeChat {
   text-decoration: none;
-  text-transform: capitalize;
 }
- 
+
 .header {
   margin-bottom: $line-height-computed;
 }

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

@@ -3,6 +3,7 @@ import { findDOMNode } from 'react-dom';
 import styles from './styles';
 import DropdownTrigger from './trigger/component';
 import DropdownContent from './content/component';
+import cx from 'classnames';
 
 const FOCUSABLE_CHILDREN = `[tabindex]:not([tabindex="-1"]), a, input, button`;
 
@@ -48,19 +49,37 @@ export default class Dropdown extends Component {
     this.state = { isOpen: false, };
     this.handleShow = this.handleShow.bind(this);
     this.handleHide = this.handleHide.bind(this);
+    this.handleStateCallback = this.handleStateCallback.bind(this);
     this.handleToggle = this.handleToggle.bind(this);
     this.handleWindowClick = this.handleWindowClick.bind(this);
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.isOpen !== this.props.isOpen
+      && this.state.isOpen !== this.props.isOpen) {
+      this.setState({ isOpen: this.props.isOpen }, this.handleStateCallback);
+    }
+  }
+
+  handleStateCallback() {
+    const { onShow, onHide } = this.props;
+
+    if (this.state.isOpen && onShow) {
+      onShow();
+    } else if (onHide) {
+      onHide();
+    }
+  }
+
   handleShow() {
-    this.setState({ isOpen: true });
+    this.setState({ isOpen: true }, this.handleStateCallback);
 
     const contentElement = findDOMNode(this.refs.content);
     contentElement.querySelector(FOCUSABLE_CHILDREN).focus();
   }
 
   handleHide() {
-    this.setState({ isOpen: false });
+    this.setState({ isOpen: false }, this.handleStateCallback);
     const triggerElement = findDOMNode(this.refs.trigger);
     triggerElement.focus();
   }
@@ -93,7 +112,7 @@ export default class Dropdown extends Component {
   }
 
   render() {
-    const { children } = this.props;
+    const { children, className, style } = this.props;
 
     let trigger = children.find(x => x.type === DropdownTrigger);
     let content = children.find(x => x.type === DropdownContent);
@@ -114,7 +133,7 @@ export default class Dropdown extends Component {
     });
 
     return (
-      <div className={styles.dropdown}>
+      <div style={style} className={cx(styles.dropdown, className)}>
         {trigger}
         {content}
       </div>

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

@@ -23,12 +23,8 @@ const defaultProps = {
 };
 
 export default class DropdownContent extends Component {
-  constructor(props) {
-    super(props);
-  }
-
   render() {
-    const { placement, className, children } = this.props;
+    const { placement, className, children, style } = this.props;
     const { dropdownToggle, dropdownShow, dropdownHide } = this.props;
 
     let placementName = placement.split(' ').join('-');
@@ -41,6 +37,7 @@ export default class DropdownContent extends Component {
 
     return (
       <div
+        style={style}
         aria-expanded={this.props['aria-expanded']}
         className={cx(styles.content, styles[placementName], className)}>
         {boundChildren}

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

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes, Children, cloneElement } from 'react';
 import styles from './styles';
+import cx from 'classnames';
 
 import KEY_CODES from '/imports/utils/keyCodes';
 
@@ -84,6 +85,7 @@ export default class DropdownList extends Component {
     const { dropdownHide } = this.props;
 
     this.setState({ activeItemIndex: null });
+
     dropdownHide();
 
     if (typeof callback === 'function') {
@@ -92,7 +94,9 @@ export default class DropdownList extends Component {
   }
 
   render() {
-    const boundChildren = Children.map(this.props.children,
+    const { children, style, className } = this.props;
+
+    const boundChildren = Children.map(children,
       (item, i) => {
         if (item.type === ListSeparator) {
           return item;
@@ -122,7 +126,7 @@ export default class DropdownList extends Component {
       });
 
     return (
-      <ul className={styles.list} role="menu">
+      <ul style={style} className={cx(styles.list, className)} role="menu">
         {boundChildren}
       </ul>
     );

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

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import styles from '../styles';
 import _ from 'underscore';
+import cx from 'classnames';
 
 import Icon from '/imports/ui/components/icon/component';
 
@@ -22,14 +23,15 @@ export default class DropdownListItem extends Component {
     const { icon, label } = this.props;
 
     return [
-      (<Icon iconName={icon} key="icon" className={styles.itemIcon}/>),
+      (icon ? <Icon iconName={icon} key="icon" className={styles.itemIcon}/> : null),
       (<span className={styles.itemLabel} key="label">{label}</span>),
     ];
   }
 
   render() {
     const { label, description, children,
-      injectRef, tabIndex, onClick, onKeyDown, } = this.props;
+      injectRef, tabIndex, onClick, onKeyDown,
+      className, style, } = this.props;
 
     return (
       <li
@@ -39,7 +41,8 @@ export default class DropdownListItem extends Component {
         tabIndex={tabIndex}
         aria-labelledby={this.labelID}
         aria-describedby={this.descID}
-        className={styles.item}
+        className={cx(styles.item, className)}
+        style={style}
         role="menuitem">
         {
           children ? children

bigbluebutton-html5/imports/ui/components/dropdown/list/separator/component.jsx

@@ -1,8 +1,10 @@
 import React, { Component, PropTypes } from 'react';
 import styles from '../styles';
+import cx from 'classnames';
 
 export default class DropdownListSeparator extends Component {
   render() {
-    return <li className={styles.separator} role="separator" />;
+    const { style, className } = this.props;
+    return <li style={style} className={cx(styles.separator, className)} role="separator" />;
   }
 }

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

@@ -2,6 +2,7 @@
 
 $dropdown-bg: $color-white;
 $dropdown-color: $color-text;
+$caret-shadow-color: $color-gray;
 
 $dropdown-caret-width: 12px;
 $dropdown-caret-height: 8px;
@@ -20,7 +21,7 @@ $dropdown-caret-height: 8px;
   // min-width: 150px;
   z-index: 1000;
 
-  &:after {
+  &:after, &:before {
     content: '';
     position: absolute;
     width: 0;
@@ -49,13 +50,17 @@ $dropdown-caret-height: 8px;
   transform: translateX(-50%);
   margin-bottom: $dropdown-caret-height * 1.25;
 
-  &:after {
+  &:before, &:after {
     border-left: $dropdown-caret-width solid transparent;
     border-right: $dropdown-caret-width solid transparent;
     border-top: $dropdown-caret-height solid $dropdown-bg;
     bottom: 0;
     margin-bottom: -($dropdown-caret-height);
   }
+
+  &:before {
+    border-top: $dropdown-caret-height solid $caret-shadow-color;
+  }
 }
 
 %up-caret {
@@ -64,13 +69,17 @@ $dropdown-caret-height: 8px;
   transform: translateX(-50%);
   margin-top: $dropdown-caret-height * 1.25;
 
-  &:after {
+  &:before, &:after {
     border-left: $dropdown-caret-width solid transparent;
     border-right: $dropdown-caret-width solid transparent;
     border-bottom: $dropdown-caret-height solid $dropdown-bg;
     margin-top: -($dropdown-caret-height);
     top: 0;
   }
+
+  &:before {
+    border-bottom: $dropdown-caret-height solid $caret-shadow-color;
+  }
 }
 
 %right-caret {
@@ -78,7 +87,7 @@ $dropdown-caret-height: 8px;
   transform: translateX(-100%) translateY(-50%);
   left: -($dropdown-caret-height * 1.25);
 
-  &:after {
+  &:before, &:after{
     border-top: $dropdown-caret-width solid transparent;
     border-bottom: $dropdown-caret-width solid transparent;
     border-left: $dropdown-caret-height solid $dropdown-bg;
@@ -86,6 +95,10 @@ $dropdown-caret-height: 8px;
     top: 50%;
     right: 0;
   }
+
+  &:before {
+    border-left: $dropdown-caret-height solid $caret-shadow-color;
+  }
 }
 
 %left-caret {
@@ -93,7 +106,7 @@ $dropdown-caret-height: 8px;
   transform: translateX(100%) translateY(-50%);
   right: -($dropdown-caret-height * 1.25);
 
-  &:after {
+  &:before, &:after {
     border-top: $dropdown-caret-width solid transparent;
     border-bottom: $dropdown-caret-width solid transparent;
     border-right: $dropdown-caret-height solid $dropdown-bg;
@@ -101,10 +114,14 @@ $dropdown-caret-height: 8px;
     top: 50%;
     left: 0;
   }
+
+  &:before {
+    border-right: $dropdown-caret-height solid $caret-shadow-color;
+  }
 }
 
 %horz-center-caret {
-  &:after {
+  &:after, &:before {
     margin-left: -($dropdown-caret-width);
   }
 }
@@ -113,7 +130,7 @@ $dropdown-caret-height: 8px;
   transform: translateX(-100%);
   left: 100%;
 
-  &:after {
+  &:after, &:before {
     right: $dropdown-caret-width / 2;
   }
 }
@@ -123,13 +140,13 @@ $dropdown-caret-height: 8px;
   right: 100%;
   left: auto;
 
-  &:after {
+  &:after, &:before {
     left: $dropdown-caret-width / 2;
   }
 }
 
 %vert-center-caret {
-  &:after {
+  &:after, &:before {
     margin-top: -($dropdown-caret-width);
   }
 }
@@ -137,7 +154,7 @@ $dropdown-caret-height: 8px;
 %vert-top-caret {
   top: 0;
 
-  &:after {
+  &:after, &:before {
     top: 0;
     margin-top: $dropdown-caret-width / 2;
   }
@@ -147,7 +164,7 @@ $dropdown-caret-height: 8px;
   top: auto;
   bottom: 0;
 
-  &:after {
+  &:after, &:before {
     top: auto;
     bottom: $dropdown-caret-width / 2;
   }

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

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { findDOMNode } from 'react-dom';
+import cx from 'classnames';
 
 import KEY_CODES from '/imports/utils/keyCodes';
 
@@ -20,7 +21,7 @@ export default class DropdownTrigger extends Component {
   }
 
   handleKeyDown(event) {
-    const { dropdownShow, dropdownHide } = this.props;
+    const { dropdownShow, dropdownHide, } = this.props;
 
     if ([KEY_CODES.SPACE, KEY_CODES.ENTER].includes(event.which)) {
       event.preventDefault();
@@ -40,13 +41,16 @@ export default class DropdownTrigger extends Component {
   }
 
   render() {
-    const { children } = this.props;
+    const { children, style, className, } = this.props;
     const TriggerComponent = React.Children.only(children);
 
     const TriggerComponentBounded = React.cloneElement(children, {
       onClick: this.handleClick,
       onKeyDown: this.handleKeyDown,
       'aria-haspopup': true,
+      tabIndex: '0',
+      style: style,
+      className: cx(children.props.className, className),
     });
 
     return TriggerComponentBounded;

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

@@ -25,6 +25,7 @@ class ChatListItem extends Component {
     const {
       chat,
       openChat,
+      compact,
     } = this.props;
 
     const linkPath = [PRIVATE_CHAT_PATH, chat.id].join('');
@@ -33,11 +34,11 @@ class ChatListItem extends Component {
     linkClasses[styles.active] = chat.id === openChat;
 
     return (
-      <li className={cx(styles.chatListItem, linkClasses)} {...this.props}>
+      <li className={cx(styles.chatListItem, linkClasses)}>
         <Link to={linkPath} className={styles.chatListItemLink}>
           {chat.icon ? this.renderChatIcon() : this.renderChatAvatar()}
           <div className={styles.chatName}>
-            <h3 className={styles.chatNameMain}>{chat.name}</h3>
+            {!compact ? <h3 className={styles.chatNameMain}>{chat.name}</h3> : null }
           </div>
           {(chat.unreadCounter > 0) ?
             <div className={styles.unreadMessages}>

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

@@ -28,6 +28,9 @@ const listTransition = {
 class UserList extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      compact: this.props.compact,
+    };
   }
 
   render() {
@@ -42,13 +45,16 @@ class UserList extends Component {
   renderHeader() {
     return (
       <div className={styles.header}>
-        <h2 className={styles.headerTitle}>
-          <FormattedMessage
-            id="app.userlist.participantsTitle"
-            description="Title for the Header"
-            defaultMessage="Participants"
-          />
-        </h2>
+        {
+          !this.state.compact ?
+          <h2 className={styles.headerTitle}>
+            <FormattedMessage
+              id="app.userlist.participantsTitle"
+              description="Title for the Header"
+              defaultMessage="Participants"
+            />
+          </h2> : null
+        }
       </div>
     );
   }
@@ -70,13 +76,16 @@ class UserList extends Component {
 
     return (
       <div className={styles.messages}>
-        <h3 className={styles.smallTitle}>
-          <FormattedMessage
-            id="app.userlist.messagesTitle"
-            description="Title for the messages list"
-            defaultMessage="Messages"
-          />
-        </h3>
+        {
+          !this.state.compact ?
+          <h3 className={styles.smallTitle}>
+            <FormattedMessage
+              id="app.userlist.messagesTitle"
+              description="Title for the messages list"
+              defaultMessage="Messages"
+            />
+          </h3> : <hr className={styles.separator}></hr>
+        }
         <div className={styles.scrollableList}>
           <ReactCSSTransitionGroup
             transitionName={listTransition}
@@ -90,6 +99,7 @@ class UserList extends Component {
             className={cx(styles.chatsList, styles.scrollableList)}>
               {openChats.map(chat => (
                 <ChatListItem
+                  compact={this.state.compact}
                   key={chat.id}
                   openChat={openChat}
                   chat={chat} />
@@ -105,18 +115,22 @@ class UserList extends Component {
       users,
       currentUser,
       userActions,
+      compact,
     } = this.props;
 
     return (
       <div className={styles.participants}>
-        <h3 className={styles.smallTitle}>
-          <FormattedMessage
-            id="app.userlist.participantsTitle"
-            description="Title for the Participants list"
-            defaultMessage="Participants"
-          />
-          &nbsp;({this.props.users.length})
-        </h3>
+        {
+          !this.state.compact ?
+          <h3 className={styles.smallTitle}>
+            <FormattedMessage
+              id="app.userlist.participantsTitle"
+              description="Title for the Participants list"
+              defaultMessage="Participants"
+            />
+            &nbsp;({users.length})
+          </h3> : <hr className={styles.separator}></hr>
+        }
         <ReactCSSTransitionGroup
           transitionName={listTransition}
           transitionAppear={true}
@@ -127,8 +141,10 @@ class UserList extends Component {
           transitionLeaveTimeout={0}
           component="ul"
           className={cx(styles.participantsList, styles.scrollableList)}>
-          {users.map(user => (
+          {
+            users.map(user => (
             <UserListItem
+              compact={this.state.compact}
               key={user.id}
               user={user}
               currentUser={currentUser}

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

@@ -6,10 +6,25 @@ import UserList from './component.jsx';
 
 class UserListContainer extends Component {
   render() {
+    const {
+      compact,
+      users,
+      currentUser,
+      openChats,
+      openChat,
+      userActions,
+      children,
+    } = this.props;
+
     return (
       <UserList
-        {...this.props}>
-        {this.props.children}
+        compact={compact}
+        users={users}
+        currentUser={currentUser}
+        openChats={openChats}
+        openChat={openChat}
+        userActions={userActions}>
+        {children}
       </UserList>
     );
   }

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;
@@ -102,6 +102,7 @@ $user-icons-color-hover: $color-gray;
 .participantsList,
 .chatsList {
   @extend .lists;
+  overflow-x: hidden;
   flex-shrink: 1;
 }
 
@@ -130,6 +131,13 @@ $user-icons-color-hover: $color-gray;
   flex-shrink: 1;
 }
 
+.separator {
+  margin: 1rem auto;
+  width: 2.2rem;
+  border: 0;
+  border-top: 1px solid $color-gray-lighter;
+}
+
 .enter, .appear {
   opacity: 0.01;
 }

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

@@ -2,11 +2,19 @@ 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 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';
+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';
 
 const propTypes = {
   user: React.PropTypes.shape({
@@ -74,51 +82,148 @@ 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);
+    this.onActionsShow = this.onActionsShow.bind(this);
+    this.onActionsHide = this.onActionsHide.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 });
+  getAvailableActions() {
+    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),
+    ]);
+  }
+
+  onActionsShow() {
+    const dropdown = findDOMNode(this.refs.dropdown);
+    this.setState({
+      contentTop: `${dropdown.offsetTop - dropdown.parentElement.parentElement.scrollTop}px`,
+      isActionsOpen: true,
+      active: true,
+    });
+
+    findDOMNode(this).parentElement.addEventListener('scroll', this.handleScroll, false);
+  }
+
+  onActionsHide() {
+    this.setState({
+      active: false,
+      isActionsOpen: false,
+    });
+
+    findDOMNode(this).parentElement.removeEventListener('scroll', this.handleScroll, false);
   }
 
   render() {
     const {
       user,
+      currentUser,
+      userActions,
+      compact,
     } = this.props;
 
+    let userItemContentsStyle = {};
+    userItemContentsStyle[styles.userItemContentsCompact] = compact;
+    userItemContentsStyle[styles.active] = this.state.active;
+
     return (
-      <li onClick={this.handleToggleActions.bind(this, user)}
-          className={styles.userListItem} {...this.props}>
-        <div className={styles.userItemContents}>
-          <UserAvatar user={this.props.user}/>
-          {this.renderUserName()}
-          {this.renderUserIcons()}
-        </div>
-        {this.renderUserActions()}
+      <li
+        className={cx(styles.userListItem, userItemContentsStyle)}>
+        {this.renderUserContents()}
       </li>
     );
   }
 
+  renderUserContents() {
+    const {
+      user,
+    } = this.props;
+
+    let actions = this.getAvailableActions();
+    let contents = (
+      <div tabIndex={0} className={styles.userItemContents}>
+        <UserAvatar user={user}/>
+        {this.renderUserName()}
+        {this.renderUserIcons()}
+      </div>
+    );
+
+    if (!actions.length) {
+      return contents;
+    }
+
+    return (
+      <Dropdown
+        isOpen={this.state.isActionsOpen}
+        ref="dropdown"
+        onShow={this.onActionsShow}
+        onHide={this.onActionsHide}
+        className={styles.dropdown}>
+        <DropdownTrigger>
+          {contents}
+        </DropdownTrigger>
+        <DropdownContent
+          style={{
+            top: this.state.contentTop,
+          }}
+          className={styles.dropdownContent}
+          placement="right top">
+
+          <DropdownList>
+            {
+              [
+                (<DropdownListItem
+                  className={styles.actionsHeader}
+                  key={_.uniqueId('action-header')}
+                  label={user.name}
+                  defaultMessage={user.name}/>),
+                (<DropdownListSeparator key={_.uniqueId('action-separator')} />),
+              ].concat(actions)
+            }
+          </DropdownList>
+        </DropdownContent>
+      </Dropdown>
+    );
+  }
+
   renderUserName() {
     const {
       user,
       intl,
+      compact,
     } = this.props;
 
+    if (compact) {
+      return;
+    }
+
     let userNameSub = [];
     if (user.isPresenter) {
       userNameSub.push(intl.formatMessage(messages.presenter));
@@ -145,8 +250,13 @@ class UserListItem extends Component {
   renderUserIcons() {
     const {
       user,
+      compact,
     } = this.props;
 
+    if (compact) {
+      return;
+    }
+
     let audioChatIcon = null;
     if (user.isVoiceUser || user.isListenOnly) {
       if (user.isMuted) {
@@ -168,34 +278,22 @@ class UserListItem extends Component {
     );
   }
 
-  renderUserActions() {
+  renderUserAction(action, ...parameters) {
     const {
-      user,
       currentUser,
-      userActions,
+      user,
     } = this.props;
 
-    let visibleActions = null;
-    if (this.state.visibleActions) {
-      visibleActions = <UserActions
-                  user={user}
-                  currentUser={currentUser}
-                  userActions={userActions}/>;
-    }
-
-    return (
-      <ReactCSSTransitionGroup
-        transitionName={userActionsTransition}
-        transitionAppear={true}
-        transitionEnter={true}
-        transitionLeave={true}
-        transitionAppearTimeout={0}
-        transitionEnterTimeout={0}
-        transitionLeaveTimeout={0}
-      >
-        {visibleActions}
-      </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;
   }
 }
 

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

@@ -17,6 +17,18 @@
       opacity: 1;
     }
   }
+
+  &:last-child {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.active {
+  background-color: $list-item-bg-hover;
+  outline: none;
+}
+
+.userItemContentsCompact {
 }
 
 .userName {
@@ -35,7 +47,6 @@
   line-height: 1rem;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-transform: capitalize;
   white-space: nowrap;
   transition: all 0.3s;
 }
@@ -74,7 +85,7 @@
 }
 
 .userItemContents {
-  flex-grow: 1;
+  flex-grow: 0;
   display: flex;
   flex-flow: row;
 }
@@ -129,3 +140,20 @@
   transition: all 300ms;
   transform: translateY(-100%);
 }
+
+.dropdown {
+  position: static;
+}
+
+.dropdownContent {
+  cursor: default;
+}
+
+.actionsHeader {
+  color: $color-gray;
+
+  &:hover {
+    color: $color-gray !important;
+    cursor: default;
+  }
+}

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

@@ -1,76 +0,0 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router';
-import Icon from '/imports/ui/components/icon/component';
-import styles from './styles.scss';
-
-const propTypes = {
-  user: React.PropTypes.shape({
-    id: React.PropTypes.string.isRequired,
-  }).isRequired,
-
-  currentUser: React.PropTypes.shape({
-    isModerator: React.PropTypes.bool.isRequired,
-  }).isRequired,
-
-  userActions: React.PropTypes.shape().isRequired,
-};
-
-const defaultProps = {
-};
-
-class UserActions extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const {
-      user,
-      currentUser,
-      router,
-    } = this.props;
-
-    const {
-      openChat,
-      clearStatus,
-      setPresenter,
-      promote,
-      kick,
-    } = this.props.userActions;
-
-    return (
-      <div key={user.id} className={styles.userItemActions}>
-        <ul className={styles.userActionsList}>
-
-          {!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>
-    );
-  }
-
-  renderUserAction(action, ...parameters) {
-    const currentUser = this.props.currentUser;
-    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>
-    );
-
-    return userAction;
-  }
-}
-
-UserActions.propTypes = propTypes;
-UserActions.defaultProps = defaultProps;
-
-export default withRouter(UserActions);

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

@@ -1,42 +0,0 @@
-@import  '../styles.scss';
-
-.userItemActions {
-  overflow: hidden;
-  // display: none;
-}
-
-.userActionsList {
-  list-style: none;
-  padding: 0;
-  font-size: 0.9rem;
-}
-
-.userActionsItem {
-  margin-top: 0.25rem;
-  padding: 0.2rem 0;
-  display: flex;
-  cursor: pointer;
-  border-bottom-left-radius: 5px;
-  border-top-left-radius: 5px;
-  transition: background-color 0.3s;
-
-  &:hover, &:focus {
-    background-color: darken($user-list-bg, 14%);
-  }
-
-  &:first-child {
-    margin-top: 0.5rem;
-  }
-}
-
-.actionIcon {
-  color: $color-gray-light;
-  line-height: 1.1rem;
-  flex-basis: 1.7rem;
-  font-weight: bold;
-}
-
-.actionText {
-  color: $color-gray;
-  padding: 0 0.6rem;
-}