feat: add send message button

css/_font.scss

@@ -25,6 +25,9 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-send:before {
+  content: "\e911";
+}
 .icon-blur-background:before {
   content: "\e90f";
   color: #a4b8d1;

fonts/jitsi.svg

@@ -44,6 +44,7 @@
 <glyph unicode="&#xe90e;" glyph-name="security-locked" d="M768 170v428h-512v-428h512zM380 768v-86h264v86c0 72-60 132-132 132s-132-60-132-132zM768 682c46 0 86-38 86-84v-428c0-46-40-84-86-84h-512c-46 0-86 38-86 84v428c0 46 40 84 86 84h42v86c0 118 96 214 214 214s214-96 214-214v-86h42zM512 298c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
 <glyph unicode="&#xe90f;" glyph-name="blur-background" d="M469.333 640c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333zM725.333 640c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333zM469.333 384c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333zM426.667 170.667c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667zM682.667 170.667c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667zM213.333 384c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667zM213.333 640c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667zM896 384c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667zM896 640c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667zM426.667 853.333c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667zM682.667 853.333c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667zM725.333 384c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333z" />
 <glyph unicode="&#xe910;" glyph-name="microphone" d="M738 554h72c0-146-116-266-256-286v-140h-84v140c-140 20-256 140-256 286h72c0-128 108-216 226-216s226 88 226 216zM512 426c-70 0-128 58-128 128v256c0 70 58 128 128 128s128-58 128-128v-256c0-70-58-128-128-128z" />
+<glyph unicode="&#xe911;" glyph-name="send" d="M86 128v298l640 86-640 86v298l896-384z" />
 <glyph unicode="&#xe912;" glyph-name="mic-disabled" d="M182 896l714-714-54-54-178 178c-32-20-72-32-110-38v-140h-84v140c-140 20-256 140-256 286h72c0-128 108-216 226-216 34 0 68 8 98 22l-70 70c-8-2-18-4-28-4-70 0-128 58-128 128v32l-256 256zM640 548l-256 254v8c0 70 58 128 128 128s128-58 128-128v-262zM810 554c0-50-14-98-38-140l-52 54c12 26 18 54 18 86h72z" />
 <glyph unicode="&#xe913;" glyph-name="link" d="M640 426c114 0 342-56 342-170v-86h-684v86c0 114 228 170 342 170zM256 598h128v-86h-128v-128h-86v128h-128v86h128v128h86v-128zM640 512c-94 0-170 76-170 170s76 172 170 172 170-78 170-172-76-170-170-170z" />
 <glyph unicode="&#xe914;" glyph-name="shared-video" d="M512 170c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM426 320v384l256-192z" />

react/features/chat/components/native/ChatInputBar.js

@@ -1,8 +1,9 @@
 // @flow
 
 import React, { Component } from 'react';
-import { TextInput, View } from 'react-native';
+import { TextInput, TouchableOpacity, View } from 'react-native';
 
+import { Icon } from '../../../base/font-icons';
 import { Platform } from '../../../base/react';
 
 import styles from './styles';
@@ -25,7 +26,12 @@ type State = {
     /**
      * The value of the input field.
      */
-    message: string
+    message: string,
+
+    /**
+     * Boolean to show or hide the send button.
+     */
+    showSend: boolean
 };
 
 /**
@@ -42,7 +48,8 @@ export default class ChatInputBar extends Component<Props, State> {
 
         this.state = {
             addPadding: false,
-            message: ''
+            message: '',
+            showSend: false
         };
 
         this._onChangeText = this._onChangeText.bind(this);
@@ -72,6 +79,13 @@ export default class ChatInputBar extends Component<Props, State> {
                     returnKeyType = 'send'
                     style = { styles.inputField }
                     value = { this.state.message } />
+                {
+                    this.state.showSend && <TouchableOpacity onPress = { this._onSubmit }>
+                        <Icon
+                            name = 'send'
+                            style = { styles.sendButtonIcon } />
+                    </TouchableOpacity>
+                }
             </View>
         );
     }
@@ -86,7 +100,8 @@ export default class ChatInputBar extends Component<Props, State> {
      */
     _onChangeText(text) {
         this.setState({
-            message: text
+            message: text,
+            showSend: Boolean(text)
         });
     }
 
@@ -117,6 +132,9 @@ export default class ChatInputBar extends Component<Props, State> {
         const message = this.state.message.trim();
 
         message && this.props.onSend(message);
-        this.setState({ message: '' });
+        this.setState({
+            message: '',
+            showSend: false
+        });
     }
 }

react/features/chat/components/native/styles.js

@@ -63,6 +63,7 @@ export default {
     },
 
     inputBar: {
+        alignItems: 'center',
         borderTopColor: 'rgb(209, 219, 231)',
         borderTopWidth: 1,
         flexDirection: 'row',
@@ -114,6 +115,11 @@ export default {
         borderTopRightRadius: 0
     },
 
+    sendButtonIcon: {
+        color: ColorPalette.darkGrey,
+        fontSize: 22
+    },
+
     /**
      * Style modifier for system (error) messages.
      */