浏览代码

feat: add send message button

j8
Bettenbuk Zoltan 5 年前
父节点
当前提交
cfc7210ac8
共有 8 个文件被更改,包括 34 次插入6 次删除
  1. 3
    0
      css/_font.scss
  2. 二进制
      fonts/jitsi.eot
  3. 1
    0
      fonts/jitsi.svg
  4. 二进制
      fonts/jitsi.ttf
  5. 二进制
      fonts/jitsi.woff
  6. 1
    1
      fonts/selection.json
  7. 23
    5
      react/features/chat/components/native/ChatInputBar.js
  8. 6
    0
      react/features/chat/components/native/styles.js

+ 3
- 0
css/_font.scss 查看文件

25
     -moz-osx-font-smoothing: grayscale;
25
     -moz-osx-font-smoothing: grayscale;
26
 }
26
 }
27
 
27
 
28
+.icon-send:before {
29
+  content: "\e911";
30
+}
28
 .icon-blur-background:before {
31
 .icon-blur-background:before {
29
   content: "\e90f";
32
   content: "\e90f";
30
   color: #a4b8d1;
33
   color: #a4b8d1;

二进制
fonts/jitsi.eot 查看文件


+ 1
- 0
fonts/jitsi.svg 查看文件

44
 <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" />
44
 <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" />
45
 <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" />
45
 <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" />
46
 <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" />
46
 <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" />
47
+<glyph unicode="&#xe911;" glyph-name="send" d="M86 128v298l640 86-640 86v298l896-384z" />
47
 <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" />
48
 <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" />
48
 <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" />
49
 <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" />
49
 <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" />
50
 <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" />

二进制
fonts/jitsi.ttf 查看文件


二进制
fonts/jitsi.woff 查看文件


+ 1
- 1
fonts/selection.json
文件差异内容过多而无法显示
查看文件


+ 23
- 5
react/features/chat/components/native/ChatInputBar.js 查看文件

1
 // @flow
1
 // @flow
2
 
2
 
3
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
4
-import { TextInput, View } from 'react-native';
4
+import { TextInput, TouchableOpacity, View } from 'react-native';
5
 
5
 
6
+import { Icon } from '../../../base/font-icons';
6
 import { Platform } from '../../../base/react';
7
 import { Platform } from '../../../base/react';
7
 
8
 
8
 import styles from './styles';
9
 import styles from './styles';
25
     /**
26
     /**
26
      * The value of the input field.
27
      * The value of the input field.
27
      */
28
      */
28
-    message: string
29
+    message: string,
30
+
31
+    /**
32
+     * Boolean to show or hide the send button.
33
+     */
34
+    showSend: boolean
29
 };
35
 };
30
 
36
 
31
 /**
37
 /**
42
 
48
 
43
         this.state = {
49
         this.state = {
44
             addPadding: false,
50
             addPadding: false,
45
-            message: ''
51
+            message: '',
52
+            showSend: false
46
         };
53
         };
47
 
54
 
48
         this._onChangeText = this._onChangeText.bind(this);
55
         this._onChangeText = this._onChangeText.bind(this);
72
                     returnKeyType = 'send'
79
                     returnKeyType = 'send'
73
                     style = { styles.inputField }
80
                     style = { styles.inputField }
74
                     value = { this.state.message } />
81
                     value = { this.state.message } />
82
+                {
83
+                    this.state.showSend && <TouchableOpacity onPress = { this._onSubmit }>
84
+                        <Icon
85
+                            name = 'send'
86
+                            style = { styles.sendButtonIcon } />
87
+                    </TouchableOpacity>
88
+                }
75
             </View>
89
             </View>
76
         );
90
         );
77
     }
91
     }
86
      */
100
      */
87
     _onChangeText(text) {
101
     _onChangeText(text) {
88
         this.setState({
102
         this.setState({
89
-            message: text
103
+            message: text,
104
+            showSend: Boolean(text)
90
         });
105
         });
91
     }
106
     }
92
 
107
 
117
         const message = this.state.message.trim();
132
         const message = this.state.message.trim();
118
 
133
 
119
         message && this.props.onSend(message);
134
         message && this.props.onSend(message);
120
-        this.setState({ message: '' });
135
+        this.setState({
136
+            message: '',
137
+            showSend: false
138
+        });
121
     }
139
     }
122
 }
140
 }

+ 6
- 0
react/features/chat/components/native/styles.js 查看文件

63
     },
63
     },
64
 
64
 
65
     inputBar: {
65
     inputBar: {
66
+        alignItems: 'center',
66
         borderTopColor: 'rgb(209, 219, 231)',
67
         borderTopColor: 'rgb(209, 219, 231)',
67
         borderTopWidth: 1,
68
         borderTopWidth: 1,
68
         flexDirection: 'row',
69
         flexDirection: 'row',
114
         borderTopRightRadius: 0
115
         borderTopRightRadius: 0
115
     },
116
     },
116
 
117
 
118
+    sendButtonIcon: {
119
+        color: ColorPalette.darkGrey,
120
+        fontSize: 22
121
+    },
122
+
117
     /**
123
     /**
118
      * Style modifier for system (error) messages.
124
      * Style modifier for system (error) messages.
119
      */
125
      */

正在加载...
取消
保存