From 29cd3396cd6363d2ca07a970d24ff6f801783aee Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Fri, 28 Dec 2018 21:04:18 +0000 Subject: [PATCH 1/6] reduce border size used on the chat input --- .../imports/ui/components/chat/message-form/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss index b96a30df51..0adbdf9e2a 100755 --- a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss @@ -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] { From aba38b635b9abc790aee45a4e3b57c1833aba3b0 Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Fri, 28 Dec 2018 21:26:35 +0000 Subject: [PATCH 2/6] update tooltips to use sentence case --- bigbluebutton-html5/private/locales/en.json | 22 ++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json index e47b002d4f..d944bf09b1 100755 --- a/bigbluebutton-html5/private/locales/en.json +++ b/bigbluebutton-html5/private/locales/en.json @@ -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", From ec15ad9aa64c3bd6f2fe566e7a546813d6b3987d Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Fri, 28 Dec 2018 21:48:59 +0000 Subject: [PATCH 3/6] remove default focus state on chat input field --- .../chat/message-form/component.jsx | 40 ++++++++----------- 1 file changed, 16 insertions(+), 24 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx index 85d0c213b7..b3eb989e95 100755 --- a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx @@ -47,16 +47,6 @@ class MessageForm extends PureComponent { this.handleSubmit = this.handleSubmit.bind(this); } - componentDidMount() { - this.textarea.focus(); - } - - componentDidUpdate(prevProps) { - if (prevProps.chatName !== this.props.chatName) { - this.textarea.focus(); - } - } - handleMessageKeyDown(e) { // TODO Prevent send message pressing enter on mobile and/or virtual keyboard if (e.keyCode === 13 && !e.shiftKey) { @@ -102,13 +92,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 +109,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 +121,23 @@ 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 (
{ this.form = ref; }} - className={cx(this.props.className, styles.form)} + className={cx(className, styles.form)} onSubmit={this.handleSubmit} >
(this.textarea = ref)} 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 +145,7 @@ class MessageForm extends PureComponent { autoComplete="off" spellCheck="true" disabled={disabled} - value={this.state.message} + value={message} onChange={this.handleMessageChange} onKeyDown={this.handleMessageKeyDown} /> From d58c16cd09caef94fba2f3ad01dde20f6a465e9a Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Fri, 28 Dec 2018 23:11:05 +0000 Subject: [PATCH 4/6] fix tooltip label not updating --- bigbluebutton-html5/imports/ui/components/tooltip/component.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/bigbluebutton-html5/imports/ui/components/tooltip/component.jsx b/bigbluebutton-html5/imports/ui/components/tooltip/component.jsx index 0798908ef8..874efac55d 100755 --- a/bigbluebutton-html5/imports/ui/components/tooltip/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/tooltip/component.jsx @@ -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(); } From 2fbc0447acefa85b08dee80013eebafc85e35ca2 Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Sat, 29 Dec 2018 00:02:42 +0000 Subject: [PATCH 5/6] align breakoutroom icon / make element accessible --- .../user-list-content/breakout-room/component.jsx | 12 +++++++++--- .../user-list-content/breakout-room/styles.scss | 1 + 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/component.jsx index 57eeb2d6f7..f00639a132 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/component.jsx @@ -26,12 +26,18 @@ const BreakoutRoomItem = ({ }) => { if (hasBreakoutRoom) { return ( -
+

{intl.formatMessage(intlMessages.breakoutTitle).toUpperCase()}

-
-
+
+
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss index e66b3a9432..76c1e6543f 100644 --- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/breakout-room/styles.scss @@ -40,6 +40,7 @@ .BreakoutRoomsItem { @extend %list-item; margin-left: 0.375rem; + padding-left: var(--lg-padding-y); } .link { From db64de825816a9ea22312c55f3434a575a10c7fc Mon Sep 17 00:00:00 2001 From: KDSBrowne Date: Thu, 3 Jan 2019 15:41:20 +0000 Subject: [PATCH 6/6] remove chat input auto-focus on mobile only --- .../chat/message-form/component.jsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx index b3eb989e95..37a840db03 100755 --- a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx @@ -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,11 +43,30 @@ 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() { + const { mobile } = this.BROWSER_RESULTS; + + if (!mobile) { + this.textarea.focus(); + } + } + + componentDidUpdate(prevProps) { + const { chatName } = this.props; + const { mobile } = this.BROWSER_RESULTS; + + if (prevProps.chatName !== chatName && !mobile) { + this.textarea.focus(); + } + } + handleMessageKeyDown(e) { // TODO Prevent send message pressing enter on mobile and/or virtual keyboard if (e.keyCode === 13 && !e.shiftKey) { @@ -136,6 +156,7 @@ class MessageForm extends PureComponent { { this.textarea = ref; return this.textarea; }} placeholder={intl.formatMessage(messages.inputPlaceholder, { 0: chatName })} aria-controls={chatAreaId} aria-label={intl.formatMessage(messages.inputLabel, { 0: chatTitle })}