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

Make the guest list a scrollable element

Browse Source
This commit is contained in:
Pedro Beschorner Marin 2020-08-18 18:31:22 -03:00
parent 19cbef1fd9
commit a8af70993b
2 changed files with 59 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
bigbluebutton-html5/imports/ui/components/waiting-users/component.jsx
View File

@ -115,19 +115,23 @@ const renderGuestUserItem = (name, color, handleAccept, handleDeny, role, sequen
const renderPendingUsers = (message, usersArray, action, intl) => {
if (!usersArray.length) return null;
return (
<div>
<div className={styles.pendingUsers}>
<p className={styles.mainTitle}>{message}</p>
{usersArray.map((user, idx) => renderGuestUserItem(
user.name,
user.color,
() => action([user], ALLOW_STATUS),
() => action([user], DENY_STATUS),
user.role,
idx + 1,
user.intId,
user.avatar,
intl,
))}
<div className={styles.usersWrapper}>
<div className={styles.users}>
{usersArray.map((user, idx) => renderGuestUserItem(
user.name,
user.color,
() => action([user], ALLOW_STATUS),
() => action([user], DENY_STATUS),
user.role,
idx + 1,
user.intId,
user.avatar,
intl,
))}
</div>
</div>
</div>
);
};
@ -230,7 +234,7 @@ const WaitingUsers = (props) => {
/>
</div>
</header>
<main>
<div>
<div>
<p className={styles.mainTitle}>{intl.formatMessage(intlMessages.optionTitle)}</p>
{
@ -246,21 +250,21 @@ const WaitingUsers = (props) => {
{intl.formatMessage(intlMessages.rememberChoice)}
</label>
</div>
{renderPendingUsers(
intl.formatMessage(intlMessages.pendingUsers,
{ 0: authenticatedUsers.length }),
authenticatedUsers,
guestUsersCall,
intl,
)}
{renderPendingUsers(
intl.formatMessage(intlMessages.pendingGuestUsers,
{ 0: guestUsers.length }),
guestUsers,
guestUsersCall,
intl,
)}
</main>
</div>
{renderPendingUsers(
intl.formatMessage(intlMessages.pendingUsers,
{ 0: authenticatedUsers.length }),
authenticatedUsers,
guestUsersCall,
intl,
)}
{renderPendingUsers(
intl.formatMessage(intlMessages.pendingGuestUsers,
{ 0: guestUsers.length }),
guestUsers,
guestUsersCall,
intl,
)}
</div>
);
};

27
bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss
View File

@ -144,6 +144,33 @@
}
}
.pendingUsers {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
}
.usersWrapper {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
position: relative;
}
.users {
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
}
.userName {
min-width: 0;
display: inline-block;