diff --git a/bigbluebutton-html5/imports/ui/components/user-list/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/component.jsx index ef94df49be91965b07164821dc9c45ac7bf78907..c9e4b16c841ec792428940936b03a2c47404aadf 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-list/component.jsx @@ -6,7 +6,6 @@ import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; import cx from 'classnames'; import KEY_CODES from '/imports/utils/keyCodes'; -import Button from '/imports/ui/components/button/component'; import styles from './styles.scss'; @@ -89,6 +88,24 @@ class UserList extends Component { this.focusedItemIndex = -1; } + componentDidMount() { + if (!this.state.compact) { + this._msgsList.addEventListener('keydown', + event => this.rovingIndex(event, 'messages')); + + this._usersList.addEventListener('keydown', + event => this.rovingIndex(event, 'users')); + } + + // to let the whiteboard know that the presentation area's size has changed + window.dispatchEvent(new Event('resize')); + } + + componentWillUnmount() { + // to let the whiteboard know that the presentation area's size has changed + window.dispatchEvent(new Event('resize')); + } + focusList(list) { document.activeElement.tabIndex = -1; this.focusedItemIndex = -1; @@ -158,55 +175,6 @@ class UserList extends Component { this.setState({ compact: !this.state.compact }); } - componentDidMount() { - if (!this.state.compact) { - this._msgsList.addEventListener('keydown', - event => this.rovingIndex(event, 'messages')); - - this._usersList.addEventListener('keydown', - event => this.rovingIndex(event, 'users')); - } - - // to let the whiteboard know that the presentation area's size has changed - window.dispatchEvent(new Event('resize')); - } - - componentWillUnmount() { - // to let the whiteboard know that the presentation area's size has changed - window.dispatchEvent(new Event('resize')); - } - - renderHeader() { - const { intl } = this.props; - - return ( - <div className={styles.header}> - { - !this.state.compact ? - <div className={styles.headerTitle} role="banner"> - {intl.formatMessage(intlMessages.participantsTitle)} - </div> : null - } - {/* <Button - label={intl.formatMessage(intlMessages.toggleCompactView)} - hideLabel - icon={!this.state.compact ? 'left_arrow' : 'right_arrow'} - className={styles.btnToggle} - onClick={this.handleToggleCompactView} - /> */} - </div> - ); - } - - renderContent() { - return ( - <div className={styles.content}> - {this.renderMessages()} - {this.renderParticipants()} - </div> - ); - } - renderMessages() { const { openChats, @@ -223,6 +191,7 @@ class UserList extends Component { </div> : <hr className={styles.separator} /> } <div + role="section" tabIndex={0} className={styles.scrollableList} ref={(ref) => { this._msgsList = ref; }} @@ -349,8 +318,10 @@ class UserList extends Component { render() { return ( <div className={styles.userList}> - {this.renderHeader()} - {this.renderContent()} + <div className={styles.content}> + {this.renderMessages()} + {this.renderParticipants()} + </div> </div> ); } diff --git a/bigbluebutton-html5/imports/ui/components/user-list/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/styles.scss index cb8a495a165e71ecb8c374dccd8c0815d0af059c..6dfde17c62d40b551856c66a5a696b0add67892f 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/user-list/styles.scss @@ -76,23 +76,6 @@ $user-icons-color-hover: $color-gray; height: 100vh; } -.header { - @extend %flex-column; - justify-content: left; - flex-grow: 0; - display: flex; - flex-direction: row; - padding: 0 $md-padding-x; - margin: $md-padding-x 0; -} - -.headerTitle { - flex: 0; - font-size: 1rem; - font-weight: 600; - color: $color-heading; -} - .btnToggle { flex: 0; padding: 0; @@ -117,6 +100,7 @@ $user-icons-color-hover: $color-gray; @extend %flex-column; flex-grow: 9; overflow: hidden; + padding-top: $md-padding-x; } .lists {