Unverified Commit d6c6ac4a authored by Diego Mello's avatar Diego Mello Committed by GitHub
Browse files

Composer layout tweaked (#464)

* Composer layout tweaked

* Fix localization error

* Bump version to 1.3.2
parent 58974710
...@@ -102,7 +102,7 @@ android { ...@@ -102,7 +102,7 @@ android {
minSdkVersion 21 minSdkVersion 21
targetSdkVersion 27 targetSdkVersion 27
versionCode VERSIONCODE as Integer versionCode VERSIONCODE as Integer
versionName "1.3.1" versionName "1.3.2"
ndk { ndk {
abiFilters "armeabi-v7a", "x86" abiFilters "armeabi-v7a", "x86"
} }
......
...@@ -4,6 +4,8 @@ import { ...@@ -4,6 +4,8 @@ import {
View, SafeAreaView, Platform, PermissionsAndroid, Text View, SafeAreaView, Platform, PermissionsAndroid, Text
} from 'react-native'; } from 'react-native';
import { AudioRecorder, AudioUtils } from 'react-native-audio'; import { AudioRecorder, AudioUtils } from 'react-native-audio';
import { BorderlessButton } from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from './styles'; import styles from './styles';
import I18n from '../../i18n'; import I18n from '../../i18n';
...@@ -119,24 +121,32 @@ export default class extends React.PureComponent { ...@@ -119,24 +121,32 @@ export default class extends React.PureComponent {
testID='messagebox-recording' testID='messagebox-recording'
style={styles.textBox} 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')} accessibilityLabel={I18n.t('Cancel_recording')}
accessibilityTraits='button' accessibilityTraits='button'
onPress={this.cancelAudioMessage} style={styles.actionButton}
/> >
<Icon
size={22}
color='#f5455c'
name='clear'
/>
</BorderlessButton>
<Text key='currentTime' style={styles.textBoxInput}>{currentTime}</Text> <Text key='currentTime' style={styles.textBoxInput}>{currentTime}</Text>
<Icon <BorderlessButton
style={[styles.actionButtons, { color: 'green' }]} onPress={this.finishAudioMessage}
name='check'
key='check'
accessibilityLabel={I18n.t('Finish_recording')} accessibilityLabel={I18n.t('Finish_recording')}
accessibilityTraits='button' accessibilityTraits='button'
onPress={this.finishAudioMessage} style={styles.actionButton}
/> >
<Icon
size={22}
color='#2de0a5'
name='check'
/>
</BorderlessButton>
</View> </View>
</SafeAreaView>); </SafeAreaView>);
} }
......
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import {
View, TextInput, FlatList, Text, TouchableOpacity, Alert View, TextInput, FlatList, Text, TouchableOpacity, Alert, Image
} from 'react-native'; } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { emojify } from 'react-emojione'; import { emojify } from 'react-emojione';
import { KeyboardAccessoryView } from 'react-native-keyboard-input'; import { KeyboardAccessoryView } from 'react-native-keyboard-input';
import ImagePicker from 'react-native-image-crop-picker'; import ImagePicker from 'react-native-image-crop-picker';
import { BorderlessButton } from 'react-native-gesture-handler';
import { userTyping as userTypingAction } from '../../actions/room'; import { userTyping as userTypingAction } from '../../actions/room';
import { import {
...@@ -17,7 +18,6 @@ import { ...@@ -17,7 +18,6 @@ import {
} from '../../actions/messages'; } from '../../actions/messages';
import RocketChat from '../../lib/rocketchat'; import RocketChat from '../../lib/rocketchat';
import styles from './styles'; import styles from './styles';
import MyIcon from '../icons';
import database from '../../lib/realm'; import database from '../../lib/realm';
import Avatar from '../Avatar'; import Avatar from '../Avatar';
import CustomEmoji from '../EmojiPicker/CustomEmoji'; import CustomEmoji from '../EmojiPicker/CustomEmoji';
...@@ -182,35 +182,52 @@ export default class MessageBox extends React.PureComponent { ...@@ -182,35 +182,52 @@ export default class MessageBox extends React.PureComponent {
if (editing) { if (editing) {
return ( return (
<Icon <BorderlessButton
style={styles.actionButtons} onPress={this.editCancel}
name='close'
accessibilityLabel={I18n.t('Cancel_editing')} accessibilityLabel={I18n.t('Cancel_editing')}
accessibilityTraits='button' accessibilityTraits='button'
onPress={() => this.editCancel()} style={styles.actionButton}
testID='messagebox-cancel-editing' testID='messagebox-cancel-editing'
/> >
<Icon
size={22}
color='#1d74f5'
name='close'
/>
</BorderlessButton>
); );
} }
return !showEmojiKeyboard return !showEmojiKeyboard
? ( ? (
<Icon <BorderlessButton
style={styles.actionButtons} onPress={this.openEmoji}
onPress={() => this.openEmoji()}
accessibilityLabel={I18n.t('Open_emoji_selector')} accessibilityLabel={I18n.t('Open_emoji_selector')}
accessibilityTraits='button' accessibilityTraits='button'
name='mood' style={styles.actionButton}
testID='messagebox-open-emoji' testID='messagebox-open-emoji'
/>) >
<Icon
size={22}
color='#1d74f5'
name='mood'
/>
</BorderlessButton>
)
: ( : (
<Icon <BorderlessButton
onPress={() => this.closeEmoji()} onPress={this.closeEmoji}
style={styles.actionButtons}
accessibilityLabel={I18n.t('Close_emoji_selector')} accessibilityLabel={I18n.t('Close_emoji_selector')}
accessibilityTraits='button' accessibilityTraits='button'
name='keyboard' style={styles.actionButton}
testID='messagebox-close-emoji' testID='messagebox-close-emoji'
/>); >
<Icon
size={22}
color='#1d74f5'
name='keyboard'
/>
</BorderlessButton>
);
} }
get rightButtons() { get rightButtons() {
...@@ -218,35 +235,44 @@ export default class MessageBox extends React.PureComponent { ...@@ -218,35 +235,44 @@ export default class MessageBox extends React.PureComponent {
const icons = []; const icons = [];
if (text) { if (text) {
icons.push(<MyIcon icons.push(
style={[styles.actionButtons, { color: '#1D74F5' }]} <BorderlessButton
name='send' key='send-message'
key='sendIcon' onPress={() => this.submit(text)}
accessibilityLabel={I18n.t('Send message')} style={styles.actionButton}
accessibilityTraits='button' testID='messagebox-send-message'
onPress={() => this.submit(text)} accessibilityLabel={I18n.t('Send message')}
testID='messagebox-send-message' accessibilityTraits='button'
/>); >
<Image source={{ uri: 'composer_send' }} style={{ width: 23, height: 23 }} />
</BorderlessButton>
);
return icons; 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}
accessibilityLabel={I18n.t('Send audio message')} style={styles.actionButton}
accessibilityTraits='button' testID='messagebox-send-audio'
onPress={() => this.recordAudioMessage()} accessibilityLabel={I18n.t('Send audio message')}
testID='messagebox-send-audio' accessibilityTraits='button'
/>); >
icons.push(<MyIcon <Image source={{ uri: 'composer_mic' }} style={{ width: 16, height: 23 }} />
style={[styles.actionButtons, { color: '#2F343D', fontSize: 16 }]} </BorderlessButton>
name='plus' );
key='fileIcon' icons.push(
accessibilityLabel={I18n.t('Message actions')} <BorderlessButton
accessibilityTraits='button' key='file-message'
onPress={this.toggleFilesActions} onPress={this.toggleFilesActions}
testID='messagebox-actions' 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; return icons;
} }
...@@ -653,7 +679,7 @@ export default class MessageBox extends React.PureComponent { ...@@ -653,7 +679,7 @@ export default class MessageBox extends React.PureComponent {
underlineColorAndroid='transparent' underlineColorAndroid='transparent'
defaultValue='' defaultValue=''
multiline multiline
placeholderTextColor='#9EA2A8' placeholderTextColor='#9ea2a8'
testID='messagebox-input' testID='messagebox-input'
/> />
{this.rightButtons} {this.rightButtons}
......
...@@ -25,25 +25,26 @@ export default StyleSheet.create({ ...@@ -25,25 +25,26 @@ export default StyleSheet.create({
}, },
textBoxInput: { textBoxInput: {
textAlignVertical: 'center', textAlignVertical: 'center',
maxHeight: 120, maxHeight: 242,
flexGrow: 1, flexGrow: 1,
width: 1, width: 1,
// paddingVertical: 12, needs to be paddingTop/paddingBottom because of iOS/Android's TextInput differences on rendering // paddingVertical: 12, needs to be paddingTop/paddingBottom because of iOS/Android's TextInput differences on rendering
paddingTop: 12, paddingTop: 12,
paddingBottom: 12, paddingBottom: 12,
paddingLeft: 0, paddingLeft: 0,
paddingRight: 0 paddingRight: 0,
fontSize: 17,
letterSpacing: 0,
color: '#2f343d'
}, },
editing: { editing: {
backgroundColor: '#fff5df' 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: { mentionList: {
maxHeight: MENTION_HEIGHT * 4 maxHeight: MENTION_HEIGHT * 4
......
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import iconConfig from '../icons.json';
export default createIconSetFromIcoMoon(iconConfig);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment