Composer layout tweaked (#464)

* Composer layout tweaked

* Fix localization error

* Bump version to 1.3.2

android/app/build.gradle

@@ -102,7 +102,7 @@ android {
         minSdkVersion 21
         targetSdkVersion 27
         versionCode VERSIONCODE as Integer
-        versionName "1.3.1"
+        versionName "1.3.2"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }

app/containers/MessageBox/Recording.js

@@ -4,6 +4,8 @@ import {
 	View, SafeAreaView, Platform, PermissionsAndroid, Text
 } from 'react-native';
 import { AudioRecorder, AudioUtils } from 'react-native-audio';
+import { BorderlessButton } from 'react-native-gesture-handler';
+
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import styles from './styles';
 import I18n from '../../i18n';
@@ -119,24 +121,32 @@ export default class extends React.PureComponent {
 				testID='messagebox-recording'
 				style={styles.textBox}
 			>
-				<View style={[styles.textArea, { backgroundColor: '#F6F7F9' }]}>
+				<View style={styles.textArea}>
-					<Icon
+					<BorderlessButton
-						style={[styles.actionButtons, { color: 'red' }]}
+						onPress={this.cancelAudioMessage}
-						name='clear'
-						key='clear'
 						accessibilityLabel={I18n.t('Cancel_recording')}
 						accessibilityTraits='button'
-						onPress={this.cancelAudioMessage}
+						style={styles.actionButton}
-					/>
+					>
-					<Text key='currentTime' style={styles.textBoxInput}>{currentTime}</Text>
 						<Icon
-						style={[styles.actionButtons, { color: 'green' }]}
+							size={22}
-						name='check'
+							color='#f5455c'
-						key='check'
+							name='clear'
+						/>
+					</BorderlessButton>
+					<Text key='currentTime' style={styles.textBoxInput}>{currentTime}</Text>
+					<BorderlessButton
+						onPress={this.finishAudioMessage}
 						accessibilityLabel={I18n.t('Finish_recording')}
 						accessibilityTraits='button'
-						onPress={this.finishAudioMessage}
+						style={styles.actionButton}
+					>
+						<Icon
+							size={22}
+							color='#2de0a5'
+							name='check'
 						/>
+					</BorderlessButton>
 				</View>
 			</SafeAreaView>);
 	}

app/containers/MessageBox/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, TextInput, FlatList, Text, TouchableOpacity, Alert
+	View, TextInput, FlatList, Text, TouchableOpacity, Alert, Image
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { connect } from 'react-redux';
 import { emojify } from 'react-emojione';
 import { KeyboardAccessoryView } from 'react-native-keyboard-input';
 import ImagePicker from 'react-native-image-crop-picker';
+import { BorderlessButton } from 'react-native-gesture-handler';
 
 import { userTyping as userTypingAction } from '../../actions/room';
 import {
@@ -17,7 +18,6 @@ import {
 } from '../../actions/messages';
 import RocketChat from '../../lib/rocketchat';
 import styles from './styles';
-import MyIcon from '../icons';
 import database from '../../lib/realm';
 import Avatar from '../Avatar';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
@@ -182,35 +182,52 @@ export default class MessageBox extends React.PureComponent {
 
 		if (editing) {
 			return (
-				<Icon
+				<BorderlessButton
-					style={styles.actionButtons}
+					onPress={this.editCancel}
-					name='close'
 					accessibilityLabel={I18n.t('Cancel_editing')}
 					accessibilityTraits='button'
-					onPress={() => this.editCancel()}
+					style={styles.actionButton}
 					testID='messagebox-cancel-editing'
+				>
+					<Icon
+						size={22}
+						color='#1d74f5'
+						name='close'
 					/>
+				</BorderlessButton>
 			);
 		}
 		return !showEmojiKeyboard
 			? (
-				<Icon
+				<BorderlessButton
-					style={styles.actionButtons}
+					onPress={this.openEmoji}
-					onPress={() => this.openEmoji()}
 					accessibilityLabel={I18n.t('Open_emoji_selector')}
 					accessibilityTraits='button'
-					name='mood'
+					style={styles.actionButton}
 					testID='messagebox-open-emoji'
-				/>)
+				>
-			: (
 					<Icon
-					onPress={() => this.closeEmoji()}
+						size={22}
-					style={styles.actionButtons}
+						color='#1d74f5'
+						name='mood'
+					/>
+				</BorderlessButton>
+			)
+			: (
+				<BorderlessButton
+					onPress={this.closeEmoji}
 					accessibilityLabel={I18n.t('Close_emoji_selector')}
 					accessibilityTraits='button'
-					name='keyboard'
+					style={styles.actionButton}
 					testID='messagebox-close-emoji'
-				/>);
+				>
+					<Icon
+						size={22}
+						color='#1d74f5'
+						name='keyboard'
+					/>
+				</BorderlessButton>
+			);
 	}
 
 	get rightButtons() {
@@ -218,35 +235,44 @@ export default class MessageBox extends React.PureComponent {
 		const icons = [];
 
 		if (text) {
-			icons.push(<MyIcon
+			icons.push(
-				style={[styles.actionButtons, { color: '#1D74F5' }]}
+				<BorderlessButton
-				name='send'
+					key='send-message'
-				key='sendIcon'
+					onPress={() => this.submit(text)}
+					style={styles.actionButton}
+					testID='messagebox-send-message'
 					accessibilityLabel={I18n.t('Send message')}
 					accessibilityTraits='button'
-				onPress={() => this.submit(text)}
+				>
-				testID='messagebox-send-message'
+					<Image source={{ uri: 'composer_send' }} style={{ width: 23, height: 23 }} />
-			/>);
+				</BorderlessButton>
+			);
 			return icons;
 		}
-		icons.push(<Icon
+		icons.push(
-			style={[styles.actionButtons, { color: '#1D74F5', paddingHorizontal: 10 }]}
+			<BorderlessButton
-			name='mic'
+				key='audio-message'
-			key='micIcon'
+				onPress={this.recordAudioMessage}
+				style={styles.actionButton}
+				testID='messagebox-send-audio'
 				accessibilityLabel={I18n.t('Send audio message')}
 				accessibilityTraits='button'
-			onPress={() => this.recordAudioMessage()}
+			>
-			testID='messagebox-send-audio'
+				<Image source={{ uri: 'composer_mic' }} style={{ width: 16, height: 23 }} />
-		/>);
+			</BorderlessButton>
-		icons.push(<MyIcon
+		);
-			style={[styles.actionButtons, { color: '#2F343D', fontSize: 16 }]}
+		icons.push(
-			name='plus'
+			<BorderlessButton
-			key='fileIcon'
+				key='file-message'
+				onPress={this.toggleFilesActions}
+				style={styles.actionButton}
+				testID='messagebox-actions'
 				accessibilityLabel={I18n.t('Message actions')}
 				accessibilityTraits='button'
-			onPress={this.toggleFilesActions}
+			>
-			testID='messagebox-actions'
+				<Image source={{ uri: 'composer_plus' }} style={{ width: 18, height: 18 }} />
-		/>);
+			</BorderlessButton>
+		);
 		return icons;
 	}
 
@@ -653,7 +679,7 @@ export default class MessageBox extends React.PureComponent {
 							underlineColorAndroid='transparent'
 							defaultValue=''
 							multiline
-							placeholderTextColor='#9EA2A8'
+							placeholderTextColor='#9ea2a8'
 							testID='messagebox-input'
 						/>
 						{this.rightButtons}

app/containers/MessageBox/styles.js

@@ -25,25 +25,26 @@ export default StyleSheet.create({
 	},
 	textBoxInput: {
 		textAlignVertical: 'center',
-		maxHeight: 120,
+		maxHeight: 242,
 		flexGrow: 1,
 		width: 1,
 		// paddingVertical: 12, needs to be paddingTop/paddingBottom because of iOS/Android's TextInput differences on rendering
 		paddingTop: 12,
 		paddingBottom: 12,
 		paddingLeft: 0,
-		paddingRight: 0
+		paddingRight: 0,
+		fontSize: 17,
+		letterSpacing: 0,
+		color: '#2f343d'
 	},
 	editing: {
 		backgroundColor: '#fff5df'
 	},
-	actionButtons: {
+	actionButton: {
-		color: '#2F343D',
+		alignItems: 'center',
-		fontSize: 20,
+		justifyContent: 'center',
-		textAlign: 'center',
+		width: 60,
-		padding: 15,
+		height: 56
-		paddingHorizontal: 12,
-		flex: 0
 	},
 	mentionList: {
 		maxHeight: MENTION_HEIGHT * 4

app/containers/icons.js

@@ -1,4 +0,0 @@
-import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
-import iconConfig from '../icons.json';
-
-export default createIconSetFromIcoMoon(iconConfig);

app/i18n/index.js

@@ -1,12 +1,13 @@
 import I18n from 'react-native-i18n';
 import en from './locales/en';
 import ru from './locales/ru';
-import pt from './locales/pt-BR';
+import ptBR from './locales/pt-BR';
 
 I18n.fallbacks = true;
+I18n.defaultLocale = 'en';
 
 I18n.translations = {
-	en, ru, pt
+	en, ru, 'pt-BR': ptBR
 };
 
 export default I18n;

app/icons.json

@@ -1,370 +0,0 @@
-{
-  "IcoMoonType": "selection",
-  "icons": [
-    {
-      "icon": {
-        "paths": [
-          "M438.857 0v1024h146.286v-1024z",
-          "M1024 438.857h-1024v146.286h1024z"
-        ],
-        "attrs": [
-          {},
-          {}
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "grid": 0,
-        "tags": [
-          "plus"
-        ],
-        "colorPermutations": {
-          "47526116572821": [
-            {},
-            {}
-          ]
-        }
-      },
-      "attrs": [
-        {},
-        {}
-      ],
-      "properties": {
-        "order": 28,
-        "id": 2,
-        "name": "plus",
-        "prevSize": 32,
-        "code": 59648
-      },
-      "setIdx": 2,
-      "setId": 6,
-      "iconIdx": 0
-    },
-    {
-      "icon": {
-        "paths": [
-          "M192 256.3v511.4c0 35.542 28.768 64.3 64.3 64.3h511.4c35.542 0 64.3-28.768 64.3-64.3v-511.4c0-35.542-28.768-64.3-64.3-64.3h-511.4c-35.542 0-64.3 28.768-64.3 64.3zM115.2 256.3c0-77.942 63.136-141.1 141.1-141.1h511.4c77.942 0 141.1 63.136 141.1 141.1v511.4c0 77.942-63.136 141.1-141.1 141.1h-511.4c-77.942 0-141.1-63.136-141.1-141.1v-511.4z",
-          "M384 499.2c-63.623 0-115.2-51.577-115.2-115.2s51.577-115.2 115.2-115.2c63.623 0 115.2 51.577 115.2 115.2s-51.577 115.2-115.2 115.2zM384 422.4c21.208 0 38.4-17.192 38.4-38.4s-17.192-38.4-38.4-38.4c-21.208 0-38.4 17.192-38.4 38.4s17.192 38.4 38.4 38.4z",
-          "M362.1 661.315l142.276 97.378 216.661-204.97 119.31 88.168 45.643-61.765-171.023-126.383-218.354 206.571-141.706-96.989-215.826 199.756 52.167 56.364z"
-        ],
-        "attrs": [
-          {
-            "fill": "rgb(29, 116, 245)"
-          },
-          {
-            "fill": "rgb(29, 116, 245)"
-          },
-          {
-            "fill": "rgb(29, 116, 245)"
-          }
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "grid": 0,
-        "tags": [
-          "image--dark"
-        ],
-        "colorPermutations": {
-          "2372372371291162451461152331": [
-            {
-              "f": 0
-            },
-            {
-              "f": 0
-            },
-            {
-              "f": 0
-            }
-          ]
-        }
-      },
-      "attrs": [
-        {
-          "fill": "rgb(29, 116, 245)"
-        },
-        {
-          "fill": "rgb(29, 116, 245)"
-        },
-        {
-          "fill": "rgb(29, 116, 245)"
-        }
-      ],
-      "properties": {
-        "order": 27,
-        "id": 7,
-        "name": "image",
-        "prevSize": 32,
-        "code": 59649
-      },
-      "setIdx": 3,
-      "setId": 5,
-      "iconIdx": 1
-    },
-    {
-      "icon": {
-        "paths": [
-          "M536.525 899.948l-24.525 20.355-24.525-20.355c-2.383-1.978-6.519-5.545-12.158-10.619-9.205-8.281-19.41-17.9-30.368-28.777-31.205-30.973-62.381-65.972-91.538-104.393-84.606-111.487-135.811-228.912-135.811-347.961 0-161.866 131.854-292.999 294.4-292.999s294.4 131.133 294.4 292.999c0 119.049-51.205 236.473-135.811 347.961-29.157 38.421-60.333 73.42-91.538 104.393-10.958 10.877-21.164 20.496-30.368 28.777-5.639 5.073-9.775 8.64-12.158 10.619zM524.949 806.045c28.795-28.581 57.619-60.94 84.462-96.312 75.394-99.349 120.189-202.073 120.189-301.534 0-119.356-97.376-216.199-217.6-216.199s-217.6 96.843-217.6 216.199c0 99.46 44.795 202.185 120.189 301.534 26.843 35.372 55.667 67.731 84.462 96.312 4.618 4.584 8.948 8.792 12.949 12.611 4.001-3.819 8.33-8.027 12.949-12.611z",
-          "M512 550.4c-77.762 0-140.8-63.038-140.8-140.8s63.038-140.8 140.8-140.8c77.762 0 140.8 63.038 140.8 140.8s-63.038 140.8-140.8 140.8zM512 473.6c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z"
-        ],
-        "attrs": [
-          {
-            "fill": "rgb(29, 116, 245)"
-          },
-          {
-            "fill": "rgb(29, 116, 245)"
-          }
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "grid": 0,
-        "tags": [
-          "locaiton--dark"
-        ],
-        "colorPermutations": {
-          "2372372371291162451461152331": [
-            {
-              "f": 0
-            },
-            {
-              "f": 0
-            }
-          ]
-        }
-      },
-      "attrs": [
-        {
-          "fill": "rgb(29, 116, 245)"
-        },
-        {
-          "fill": "rgb(29, 116, 245)"
-        }
-      ],
-      "properties": {
-        "order": 26,
-        "id": 6,
-        "name": "locaiton",
-        "prevSize": 32,
-        "code": 59650
-      },
-      "setIdx": 3,
-      "setId": 5,
-      "iconIdx": 2
-    },
-    {
-      "icon": {
-        "paths": [
-          "M192 396.8v384h435.2v-384h-435.2zM704 320v537.6h-588.8v-537.6h588.8z",
-          "M704 669.575l179.2 58.183v-226.793l-179.2 58.183v110.427zM860.987 427.431c51.738-16.799 99.013 17.465 99.013 71.914v230.034c0 54.383-47.285 88.709-99.013 71.914l-233.787-75.907v-222.049l233.787-75.907z",
-          "M243.2 243.2h332.8v-76.8h-332.8z"
-        ],
-        "attrs": [
-          {
-            "fill": "rgb(29, 116, 245)"
-          },
-          {
-            "fill": "rgb(29, 116, 245)"
-          },
-          {
-            "fill": "rgb(29, 116, 245)"
-          }
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "grid": 0,
-        "tags": [
-          "video--dark"
-        ],
-        "colorPermutations": {
-          "2372372371291162451461152331": [
-            {
-              "f": 0
-            },
-            {
-              "f": 0
-            },
-            {
-              "f": 0
-            }
-          ]
-        }
-      },
-      "attrs": [
-        {
-          "fill": "rgb(29, 116, 245)"
-        },
-        {
-          "fill": "rgb(29, 116, 245)"
-        },
-        {
-          "fill": "rgb(29, 116, 245)"
-        }
-      ],
-      "properties": {
-        "order": 25,
-        "id": 5,
-        "name": "video",
-        "prevSize": 32,
-        "code": 59652
-      },
-      "setIdx": 3,
-      "setId": 5,
-      "iconIdx": 3
-    },
-    {
-      "icon": {
-        "paths": [
-          "M512 179.2c-56.554 0-102.4 45.846-102.4 102.4v153.6c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4v-153.6c0-56.554-45.846-102.4-102.4-102.4zM512 102.4c98.969-0 179.2 80.231 179.2 179.2v153.6c0 98.969-80.231 179.2-179.2 179.2s-179.2-80.231-179.2-179.2v-153.6c0-98.969 80.231-179.2 179.2-179.2z",
-          "M473.6 716.8v153.6h76.8v-153.6z",
-          "M358.4 870.4h307.2v51.2h-307.2v-51.2z",
-          "M217.603 410.070c2.746 224.36 103.388 345.13 294.397 345.13s291.651-120.77 294.397-345.13l-76.794-0.94c-2.268 185.24-72.292 269.27-217.603 269.27s-215.335-84.030-217.603-269.27l-76.794 0.94z"
-        ],
-        "attrs": [
-          {
-            "fill": "rgb(29, 116, 245)"
-          },
-          {
-            "fill": "rgb(29, 116, 245)"
-          },
-          {
-            "fill": "rgb(29, 116, 245)"
-          },
-          {
-            "fill": "rgb(29, 116, 245)"
-          }
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "grid": 0,
-        "tags": [
-          "volume--dark"
-        ],
-        "colorPermutations": {
-          "2372372371291162451461152331": [
-            {
-              "f": 0
-            },
-            {
-              "f": 0
-            },
-            {
-              "f": 0
-            },
-            {
-              "f": 0
-            }
-          ]
-        }
-      },
-      "attrs": [
-        {
-          "fill": "rgb(29, 116, 245)"
-        },
-        {
-          "fill": "rgb(29, 116, 245)"
-        },
-        {
-          "fill": "rgb(29, 116, 245)"
-        },
-        {
-          "fill": "rgb(29, 116, 245)"
-        }
-      ],
-      "properties": {
-        "order": 24,
-        "id": 4,
-        "name": "audio",
-        "prevSize": 32,
-        "code": 59653
-      },
-      "setIdx": 3,
-      "setId": 5,
-      "iconIdx": 4
-    },
-    {
-      "icon": {
-        "paths": [
-          "M4.676 67.568c-7.948-17.050-4.542-38.646 10.218-53.423 13.625-13.64 34.062-18.186 53.363-10.23l1080.886 463.755c17.031 7.957 28.385 26.143 28.385 44.33 1.135 19.323-11.354 36.373-28.385 44.33l-1080.886 463.755c-19.302 7.957-39.738 3.41-53.363-10.23-14.76-14.777-19.302-35.236-10.218-53.423l196.421-444.432-196.421-444.432zM1007.221 512l-864.028-371.686 148.735 335.313 238.431 2.273c26.114-1.137 47.686 20.46 47.686 47.74 1.135 26.143-20.437 47.74-47.686 47.74h-249.785l-137.382 310.307 864.028-371.686z"
-        ],
-        "attrs": [
-          {
-            "fill": "rgb(46, 115, 233)"
-          }
-        ],
-        "width": 1178,
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "grid": 0,
-        "tags": [
-          "teste"
-        ],
-        "colorPermutations": {
-          "2372372371291162451461152331": [
-            {
-              "f": 1
-            }
-          ]
-        }
-      },
-      "attrs": [
-        {
-          "fill": "rgb(46, 115, 233)"
-        }
-      ],
-      "properties": {
-        "order": 15,
-        "id": 0,
-        "name": "send",
-        "prevSize": 32,
-        "code": 59651
-      },
-      "setIdx": 3,
-      "setId": 5,
-      "iconIdx": 8
-    }
-  ],
-  "height": 1024,
-  "metadata": {
-    "name": "icomoon"
-  },
-  "preferences": {
-    "showGlyphs": true,
-    "showQuickUse": true,
-    "showQuickUse2": true,
-    "showSVGs": true,
-    "fontPref": {
-      "prefix": "icon-",
-      "metadata": {
-        "fontFamily": "icomoon",
-        "majorVersion": 1,
-        "minorVersion": 0
-      },
-      "metrics": {
-        "emSize": 1024,
-        "baseline": 6.25,
-        "whitespace": 50
-      },
-      "embed": false,
-      "autoHost": false,
-      "noie8": false,
-      "ie7": true,
-      "showSelector": false,
-      "showMetrics": false,
-      "showMetadata": false,
-      "showVersion": false
-    },
-    "imagePref": {
-      "prefix": "icon-",
-      "png": true,
-      "useClassSelector": true,
-      "color": 0,
-      "bgColor": 16777215,
-      "classSelector": ".icon"
-    },
-    "historySize": 50,
-    "showCodes": false,
-    "gridSize": 16,
-    "quickUsageToken": {
-      "UntitledProject": "NTdjODdjYjc0ZDI5MGY2MWFiYjIxMjg0ZmJlZTE1OTgjMSMxNTEyMTU3MDcxIyMj"
-    },
-    "showLiga": false
-  }
-}

app/views/SettingsView/index.js

@@ -128,9 +128,6 @@ export default class SettingsView extends LoggedView {
 		} catch (e) {
 			this.setState({ saving: false });
 			setTimeout(() => {
-				if (e && e.error) {
-					return showErrorAlert(I18n.t(e.error, e.details));
-				}
 				showErrorAlert(I18n.t('There_was_an_error_while_action', { action: I18n.t('saving_preferences') }));
 				log('saveUserPreferences', e);
 			}, 300);

ios/RocketChatRN/Images.xcassets/Icons/composer_mic.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "composer_mic@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "composer_mic@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "composer_mic@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/RocketChatRN/Images.xcassets/Icons/composer_plus.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "composer_plus@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "composer_plus@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "composer_plus@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/RocketChatRN/Images.xcassets/Icons/composer_send.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "composer_send@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "composer_send@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "composer_send@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/RocketChatRN/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.1</string>
+	<string>1.3.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>