adds some compact states in the userlist

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

@@ -7,6 +7,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,
@@ -49,9 +50,12 @@ export default class App extends Component {
   renderUserList() {
     const { userList } = this.props;
 
+    const userListStyle = {};
+    userListStyle[styles.minview] = true;
+
     if (userList) {
       return (
-        <nav className={styles.userList}>
+        <nav className={cx(styles.userList, userListStyle)}>
           {userList}
         </nav>
       );

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

@@ -117,6 +117,10 @@ $actionsbar-height: 50px; // TODO: Change to ActionsBar real height
   }
 }
 
+.minview {
+  flex-basis: 5vw;
+}
+
 .chat {
   @extend %full-page;
   z-index: 3;

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

@@ -36,7 +36,7 @@ class ChatListItem extends Component {
         <Link to={linkPath} className={styles.chatListItemLink}>
           {chat.icon ? this.renderChatIcon() : this.renderChatAvatar()}
           <div className={styles.chatName}>
-            <h3 className={styles.chatNameMain}>{chat.name}</h3>
+            {!this.props.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,10 @@ const listTransition = {
 class UserList extends Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      compact: true,
+    };
   }
 
   render() {
@@ -42,13 +46,15 @@ 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,15 @@ 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></hr>
+        }
         <div className={styles.scrollableList}>
           <ReactCSSTransitionGroup
             transitionName={listTransition}
@@ -90,6 +98,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} />
@@ -109,14 +118,16 @@ class UserList extends Component {
 
     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;({this.props.users.length})
+          </h3> : <hr></hr>
+        }
         <ReactCSSTransitionGroup
           transitionName={listTransition}
           transitionAppear={true}
@@ -129,6 +140,7 @@ class UserList extends Component {
           className={cx(styles.participantsList, styles.scrollableList)}>
           {users.map(user => (
             <UserListItem
+              compact={this.state.compact}
               key={user.id}
               user={user}
               currentUser={currentUser}

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

@@ -7,6 +7,7 @@ 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';
 
 const propTypes = {
   user: React.PropTypes.shape({
@@ -100,9 +101,12 @@ class UserListItem extends Component {
       user,
     } = this.props;
 
+    const userItemContentsStyle = {};
+    userItemContentsStyle[styles.userItemContentsCompact] = this.props.compact;
+
     return (
       <li onClick={this.handleToggleActions.bind(this, user)}
-          className={styles.userListItem} {...this.props}>
+          className={cx(styles.userListItem, userItemContentsStyle)} {...this.props}>
         <div className={styles.userItemContents}>
           <UserAvatar user={this.props.user}/>
           {this.renderUserName()}
@@ -119,6 +123,10 @@ class UserListItem extends Component {
       intl,
     } = this.props;
 
+    if (this.props.compact) {
+      return;
+    }
+
     let userNameSub = [];
     if (user.isPresenter) {
       userNameSub.push(intl.formatMessage(messages.presenter));
@@ -147,6 +155,10 @@ class UserListItem extends Component {
       user,
     } = this.props;
 
+    if (this.props.compact) {
+      return;
+    }
+
     let audioChatIcon = null;
     if (user.isVoiceUser || user.isListenOnly) {
       if (user.isMuted) {

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

@@ -19,6 +19,11 @@
   }
 }
 
+.userItemContentsCompact {
+  background-color: red;
+  margin-right: 0.7rem;
+}
+
 .userName {
   @extend %flex-column;
   min-width: 0;
@@ -74,7 +79,7 @@
 }
 
 .userItemContents {
-  flex-grow: 1;
+  flex-grow: 0;
   display: flex;
   flex-flow: row;
 }