Merge pull request #3783 from Klauswk/AddSendButton

HTML5 close #3765, Added send button aside chat textbox

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

@@ -6,6 +6,7 @@ import styles from './styles';
 
 import MessageFormActions from './message-form-actions/component';
 import TextareaAutosize from 'react-autosize-textarea';
+import Button from '../../button/component';
 
 const propTypes = {
 };
@@ -42,9 +43,12 @@ class MessageForm extends Component {
     this.handleMessageChange = this.handleMessageChange.bind(this);
     this.handleMessageKeyDown = this.handleMessageKeyDown.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+
   }
 
   handleMessageKeyDown(e) {
+
+    //TODO Prevent send message pressing enter on mobile and/or virtual keyboard    
     if (e.keyCode === 13 && !e.shiftKey) {
       e.preventDefault();
 
@@ -104,9 +108,9 @@ class MessageForm extends Component {
         <TextareaAutosize
           className={styles.input}
           id="message-input"
-          placeholder={ intl.formatMessage(messages.inputPlaceholder, { name: chatName }) }
+          placeholder={intl.formatMessage(messages.inputPlaceholder, { name: chatName })}
           aria-controls={this.props.chatAreaId}
-          aria-label={ intl.formatMessage(messages.inputLabel, { name: chatTitle }) }
+          aria-label={intl.formatMessage(messages.inputLabel, { name: chatTitle })}
           autoCorrect="off"
           autoComplete="off"
           spellCheck="true"
@@ -115,13 +119,16 @@ class MessageForm extends Component {
           onChange={this.handleMessageChange}
           onKeyDown={this.handleMessageKeyDown}
         />
-        <input
-          ref="btnSubmit"
-          className={'sr-only'}
+        <Button
+          className={styles.sendButton}
+          aria-label={intl.formatMessage(messages.submitLabel)}
           type="submit"
           disabled={disabled}
-          value={ intl.formatMessage(messages.submitLabel) }
-        />
+          label={intl.formatMessage(messages.submitLabel)}
+          hideLabel={true}
+          icon={"right_arrow"}
+          onClick={()=>{}}
+          />
       </form>
     );
   }

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

@@ -61,3 +61,14 @@
     background-color: fade-out($color-gray-lighter, .75);
   }
 }
+
+.sendButton {
+  @extend .input;
+  border-left: 0px;
+  min-width: 1rem;
+  max-width: 2.5rem;
+
+  > [class*=" icon-bbb-"] {
+    color: $color-gray-light;
+  }
+}