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

Merge pull request #6480 from KDSBrowne/2.2-ui-improvments-01

Browse Source 
UI improvements and bug fixes
This commit is contained in:
Anton Georgiev 2019-01-03 11:13:43 -05:00 committed by GitHub
commit f95c72418b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 52 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
View File

@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import cx from 'classnames';
import TextareaAutosize from 'react-autosize-textarea';
import browser from 'browser-detect';
import { styles } from './styles';
import Button from '../../button/component';
@ -42,17 +43,26 @@ class MessageForm extends PureComponent {
hasErrors: false,
};
this.BROWSER_RESULTS = browser();
this.handleMessageChange = this.handleMessageChange.bind(this);
this.handleMessageKeyDown = this.handleMessageKeyDown.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
this.textarea.focus();
const { mobile } = this.BROWSER_RESULTS;
if (!mobile) {
this.textarea.focus();
}
}
componentDidUpdate(prevProps) {
if (prevProps.chatName !== this.props.chatName) {
const { chatName } = this.props;
const { mobile } = this.BROWSER_RESULTS;
if (prevProps.chatName !== chatName && !mobile) {
this.textarea.focus();
}
}
@ -102,13 +112,16 @@ class MessageForm extends PureComponent {
handleSubmit(e) {
e.preventDefault();
const { disabled, minMessageLength, maxMessageLength } = this.props;
let message = this.state.message.trim();
const {
disabled, minMessageLength, maxMessageLength, handleSendMessage,
} = this.props;
const { message } = this.state;
let msg = message.trim();
if (disabled
|| message.length === 0
|| message.length < minMessageLength
|| message.length > maxMessageLength) {
|| msg.length === 0
|| msg.length < minMessageLength
|| msg.length > maxMessageLength) {
this.setState({ hasErrors: true });
return false;
}
@ -116,10 +129,10 @@ class MessageForm extends PureComponent {
// Sanitize. See: http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
const div = document.createElement('div');
div.appendChild(document.createTextNode(message));
message = div.innerHTML;
div.appendChild(document.createTextNode(msg));
msg = div.innerHTML;
return this.props.handleSendMessage(message)
return handleSendMessage(msg)
.then(() => this.setState({
message: '',
hasErrors: false,
@ -128,24 +141,24 @@ class MessageForm extends PureComponent {
render() {
const {
intl, chatTitle, chatName, disabled,
intl, chatTitle, chatName, disabled, className, chatAreaId,
} = this.props;
const { hasErrors, error } = this.state;
const { hasErrors, error, message } = this.state;
return (
<form
ref={(ref) => { this.form = ref; }}
className={cx(this.props.className, styles.form)}
className={cx(className, styles.form)}
onSubmit={this.handleSubmit}
>
<div className={styles.wrapper}>
<TextareaAutosize
className={styles.input}
id="message-input"
innerRef={ref => (this.textarea = ref)}
innerRef={(ref) => { this.textarea = ref; return this.textarea; }}
placeholder={intl.formatMessage(messages.inputPlaceholder, { 0: chatName })}
aria-controls={this.props.chatAreaId}
aria-controls={chatAreaId}
aria-label={intl.formatMessage(messages.inputLabel, { 0: chatTitle })}
aria-invalid={hasErrors ? 'true' : 'false'}
aria-describedby={hasErrors ? 'message-input-error' : null}
@ -153,7 +166,7 @@ class MessageForm extends PureComponent {
autoComplete="off"
spellCheck="true"
disabled={disabled}
value={this.state.message}
value={message}
onChange={this.handleMessageChange}
onKeyDown={this.handleMessageKeyDown}
/>

2
bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
View File

@ -62,7 +62,7 @@
min-height: 2.5rem;
max-height: 10rem;
border: 1px solid var(--color-gray-lighter);
box-shadow: 0 0 0 2px var(--color-gray-lighter);
box-shadow: 0 0 0 1px var(--color-gray-lighter);
&:disabled,
&[disabled] {

1
bigbluebutton-html5/imports/ui/components/tooltip/component.jsx
View File

@ -23,6 +23,7 @@ class Tooltip extends Component {
const expandedEl = tooltipTarget.parentElement.querySelector('[aria-expanded="true"]');
const isTarget = expandedEl === tooltipTarget;
if (expandedEl && !isTarget) return;
tip.set({ content: tooltipTarget.lastChild.innerText });
tip.show();
}

12
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/component.jsx
View File

@ -26,12 +26,18 @@ const BreakoutRoomItem = ({
}) => {
if (hasBreakoutRoom) {
return (
<div role="button" onClick={toggleBreakoutPanel}>
<div>
<h2 className={styles.smallTitle}>
{intl.formatMessage(intlMessages.breakoutTitle).toUpperCase()}
</h2>
<div className={styles.BreakoutRoomsItem}>
<div className={styles.BreakoutRoomsContents}>
<div
role="button"
tabIndex={0}
onClick={toggleBreakoutPanel}
className={styles.BreakoutRoomsItem}
aria-label={intl.formatMessage(intlMessages.breakoutTitle)}
>
<div className={styles.BreakoutRoomsContents} aria-hidden>
<div className={styles.BreakoutRoomsIcon}>
<Icon iconName="rooms" />
</div>

1
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss
View File

@ -40,6 +40,7 @@
.BreakoutRoomsItem {
@extend %list-item;
margin-left: 0.375rem;
padding-left: var(--lg-padding-y);
}
.link {

22
bigbluebutton-html5/private/locales/en.json
View File

@ -1,6 +1,6 @@
{
"app.home.greeting": "Your presentation will begin shortly...",
"app.chat.submitLabel": "Send Message",
"app.chat.submitLabel": "Send message",
"app.chat.errorMinMessageLength": "The message is {0} characters(s) too short",
"app.chat.errorMaxMessageLength": "The message is {0} characters(s) too long",
"app.chat.inputLabel": "Message input for chat {0}",
@ -11,7 +11,7 @@
"app.chat.closeChatLabel": "Close {0}",
"app.chat.hideChatLabel": "Hide {0}",
"app.chat.moreMessages": "More messages below",
"app.chat.dropdown.options": "Chat Options",
"app.chat.dropdown.options": "Chat options",
"app.chat.dropdown.clear": "Clear",
"app.chat.dropdown.copy": "Copy",
"app.chat.dropdown.save": "Save",
@ -39,7 +39,7 @@
"app.userList.userAriaLabel": "{0} {1} {2} Status {3}",
"app.userList.menu.promoteUser.label": "Promote to moderator",
"app.userList.menu.demoteUser.label": "Demote to viewer",
"app.userList.userOptions.manageUsersLabel": "Manage Users",
"app.userList.userOptions.manageUsersLabel": "Manage users",
"app.userList.userOptions.muteAllLabel": "Mute all users",
"app.userList.userOptions.muteAllDesc": "Mutes all users in the meeting",
"app.userList.userOptions.clearAllLabel": "Clear all status icons",
@ -73,7 +73,7 @@
"app.presentation.presentationToolbar.zoomOutLabel": "Zoom out",
"app.presentation.presentationToolbar.zoomOutDesc": "Zoom out of the presentation",
"app.presentation.presentationToolbar.zoomIndicator": "Show the zoom percentage",
"app.presentation.presentationToolbar.fitToWidth": "Fit to Width",
"app.presentation.presentationToolbar.fitToWidth": "Fit to width",
"app.presentation.presentationToolbar.goToSlide": "Slide {0}",
"app.presentationUploder.title": "Presentation",
"app.presentationUploder.message": "As a presenter in BigBlueButton, you have the ability of uploading any office document or PDF file. We recommend for the best results, to please upload a PDF file.",
@ -135,7 +135,7 @@
"app.navBar.settingsDropdown.hotkeysDesc": "Listing of available hotkeys",
"app.navBar.settingsDropdown.helpLabel": "Help",
"app.navBar.settingsDropdown.helpDesc": "Links user to video tutorials",
"app.navBar.userListToggleBtnLabel": "User List Toggle",
"app.navBar.userListToggleBtnLabel": "User list toggle",
"app.navBar.toggleUserList.ariaLabel": "Users and Messages Toggle",
"app.navBar.toggleUserList.newMessages": "with new message notification",
"app.navBar.recording": "This session is being recorded",
@ -167,8 +167,8 @@
"app.submenu.application.audioAlertLabel": "Audio Alerts for Chat",
"app.submenu.application.pushAlertLabel": "Popup Alerts for Chat",
"app.submenu.application.fontSizeControlLabel": "Font size",
"app.submenu.application.increaseFontBtnLabel": "Increase Application Font Size",
"app.submenu.application.decreaseFontBtnLabel": "Decrease Application Font Size",
"app.submenu.application.increaseFontBtnLabel": "Increase application font size",
"app.submenu.application.decreaseFontBtnLabel": "Decrease application font size",
"app.submenu.application.languageLabel": "Application Language",
"app.submenu.application.ariaLanguageLabel": "Change Application Language",
"app.submenu.application.languageOptionLabel": "Choose language",
@ -315,8 +315,8 @@
"app.audioManager.requestTimeout": "Error: There was a timeout in the request",
"app.audioManager.invalidTarget": "Error: Tried to request something to an invalid target",
"app.audioManager.mediaError": "Error: There was an issue getting your media devices",
"app.audio.joinAudio": "Join Audio",
"app.audio.leaveAudio": "Leave Audio",
"app.audio.joinAudio": "Join audio",
"app.audio.leaveAudio": "Leave audio",
"app.audio.enterSessionLabel": "Enter Session",
"app.audio.playSoundLabel": "Play Sound",
"app.audio.backLabel": "Back",
@ -443,8 +443,8 @@
"app.whiteboard.toolbar.color.violet": "Violet",
"app.whiteboard.toolbar.color.magenta": "Magenta",
"app.whiteboard.toolbar.color.silver": "Silver",
"app.whiteboard.toolbar.undo": "Undo Annotation",
"app.whiteboard.toolbar.clear": "Clear All Annotations",
"app.whiteboard.toolbar.undo": "Undo annotation",
"app.whiteboard.toolbar.clear": "Clear all annotations",
"app.whiteboard.toolbar.multiUserOn": "Turn multi-user mode on",
"app.whiteboard.toolbar.multiUserOff": "Turn multi-user mode off",
"app.whiteboard.toolbar.fontSize": "Font Size List",