Composer layout tweaked (#464)

* Composer layout tweaked

* Fix localization error

* Bump version to 1.3.2
This commit is contained in:
Diego Mello 2018-09-27 08:43:19 -03:00 committed by GitHub
parent 589747100d
commit d6c6ac4ae8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 178 additions and 448 deletions

View File

@ -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"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 987 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 594 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 823 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 430 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 579 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -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' }]}>
<Icon
style={[styles.actionButtons, { color: 'red' }]}
name='clear'
key='clear'
<View style={styles.textArea}>
<BorderlessButton
onPress={this.cancelAudioMessage}
accessibilityLabel={I18n.t('Cancel_recording')}
accessibilityTraits='button'
onPress={this.cancelAudioMessage}
/>
style={styles.actionButton}
>
<Icon
size={22}
color='#f5455c'
name='clear'
/>
</BorderlessButton>
<Text key='currentTime' style={styles.textBoxInput}>{currentTime}</Text>
<Icon
style={[styles.actionButtons, { color: 'green' }]}
name='check'
key='check'
<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>);
}

View File

@ -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
style={styles.actionButtons}
name='close'
<BorderlessButton
onPress={this.editCancel}
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
style={styles.actionButtons}
onPress={() => this.openEmoji()}
<BorderlessButton
onPress={this.openEmoji}
accessibilityLabel={I18n.t('Open_emoji_selector')}
accessibilityTraits='button'
name='mood'
style={styles.actionButton}
testID='messagebox-open-emoji'
/>)
>
<Icon
size={22}
color='#1d74f5'
name='mood'
/>
</BorderlessButton>
)
: (
<Icon
onPress={() => this.closeEmoji()}
style={styles.actionButtons}
<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
style={[styles.actionButtons, { color: '#1D74F5' }]}
name='send'
key='sendIcon'
accessibilityLabel={I18n.t('Send message')}
accessibilityTraits='button'
onPress={() => this.submit(text)}
testID='messagebox-send-message'
/>);
icons.push(
<BorderlessButton
key='send-message'
onPress={() => this.submit(text)}
style={styles.actionButton}
testID='messagebox-send-message'
accessibilityLabel={I18n.t('Send message')}
accessibilityTraits='button'
>
<Image source={{ uri: 'composer_send' }} style={{ width: 23, height: 23 }} />
</BorderlessButton>
);
return icons;
}
icons.push(<Icon
style={[styles.actionButtons, { color: '#1D74F5', paddingHorizontal: 10 }]}
name='mic'
key='micIcon'
accessibilityLabel={I18n.t('Send audio message')}
accessibilityTraits='button'
onPress={() => this.recordAudioMessage()}
testID='messagebox-send-audio'
/>);
icons.push(<MyIcon
style={[styles.actionButtons, { color: '#2F343D', fontSize: 16 }]}
name='plus'
key='fileIcon'
accessibilityLabel={I18n.t('Message actions')}
accessibilityTraits='button'
onPress={this.toggleFilesActions}
testID='messagebox-actions'
/>);
icons.push(
<BorderlessButton
key='audio-message'
onPress={this.recordAudioMessage}
style={styles.actionButton}
testID='messagebox-send-audio'
accessibilityLabel={I18n.t('Send audio message')}
accessibilityTraits='button'
>
<Image source={{ uri: 'composer_mic' }} style={{ width: 16, height: 23 }} />
</BorderlessButton>
);
icons.push(
<BorderlessButton
key='file-message'
onPress={this.toggleFilesActions}
style={styles.actionButton}
testID='messagebox-actions'
accessibilityLabel={I18n.t('Message actions')}
accessibilityTraits='button'
>
<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}

View File

@ -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: {
color: '#2F343D',
fontSize: 20,
textAlign: 'center',
padding: 15,
paddingHorizontal: 12,
flex: 0
actionButton: {
alignItems: 'center',
justifyContent: 'center',
width: 60,
height: 56
},
mentionList: {
maxHeight: MENTION_HEIGHT * 4

View File

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

View File

@ -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;

View File

@ -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
}
}

View File

@ -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);

View File

@ -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"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 594 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -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"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 430 B

View File

@ -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"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 823 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -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>