BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed incorrectly displayed dropdown in the user list, if it was scrolled down

Browse Source
This commit is contained in:
Oleksandr Zhurbenko 2017-10-05 14:46:46 -07:00
parent ab95c87f48
commit 6639ee5e8e
3 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
View File

@ -96,6 +96,12 @@ const intlMessages = defineMessages({
class UserParticipants extends Component {
constructor() {
super();
this.getScrollContainerRef = this.getScrollContainerRef.bind(this);
}
componentDidMount() {
if (!this.props.compact) {
this._usersList.addEventListener('keydown',
@ -106,6 +112,10 @@ class UserParticipants extends Component {
}
}
getScrollContainerRef() {
return this.refScrollContainer;
}
render() {
const {
users,
@ -169,7 +179,10 @@ class UserParticipants extends Component {
};
return (
<div className={styles.participants}>
<div
className={styles.participants}
ref={(ref) => { if (ref != null) { this.refScrollContainer = ref; } }}
>
{
!compact ?
<div className={styles.smallTitle} role="banner">
@ -208,6 +221,7 @@ class UserParticipants extends Component {
getAvailableActions={getAvailableActions}
normalizeEmojiName={normalizeEmojiName}
isMeetingLocked={isMeetingLocked}
getScrollContainerRef={this.getScrollContainerRef}
/>
))
}

3
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/component.jsx
View File

@ -30,6 +30,7 @@ const propTypes = {
meeting: PropTypes.shape({}).isRequired,
isMeetingLocked: PropTypes.func.isRequired,
normalizeEmojiName: PropTypes.func.isRequired,
getScrollContainerRef: PropTypes.func.isRequired,
};
const defaultProps = {
@ -105,6 +106,7 @@ class UserListItem extends Component {
meeting,
isMeetingLocked,
normalizeEmojiName,
getScrollContainerRef,
} = this.props;
const actions = this.getUsersActions();
@ -117,6 +119,7 @@ class UserListItem extends Component {
actions={actions}
meeting={meeting}
isMeetingLocked={isMeetingLocked}
getScrollContainerRef={getScrollContainerRef}
/>);
return contents;

8
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx
View File

@ -52,6 +52,7 @@ const propTypes = {
actions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
meeting: PropTypes.shape({}).isRequired,
isMeetingLocked: PropTypes.func.isRequired,
getScrollContainerRef: PropTypes.func.isRequired,
};
@ -90,7 +91,7 @@ class UserListContent extends Component {
onActionsShow() {
const dropdown = findDOMNode(this.dropdown);
const scrollContainer = dropdown.parentElement.parentElement;
const scrollContainer = this.props.getScrollContainerRef();
const dropdownTrigger = dropdown.children[0];
this.setState({
@ -109,7 +110,8 @@ class UserListContent extends Component {
dropdownVisible: false,
});
findDOMNode(this).parentElement.removeEventListener('scroll', this.handleScroll, false);
const scrollContainer = this.props.getScrollContainerRef();
scrollContainer.removeEventListener('scroll', this.handleScroll, false);
}
getDropdownMenuParent() {
@ -131,7 +133,7 @@ class UserListContent extends Component {
const dropdownTrigger = dropdown.children[0];
const dropdownContent = dropdown.children[1];
const scrollContainer = dropdown.parentElement.parentElement;
const scrollContainer = this.props.getScrollContainerRef();
const nextState = {
dropdownVisible: true,