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 {
minSdkVersion 21
targetSdkVersion 27
versionCode VERSIONCODE as Integer
versionName "1.3.1"
versionName "1.3.2"
ndk {
abiFilters "armeabi-v7a", "x86"
}
......
......@@ -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>);
}
......
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
onPress={() => this.closeEmoji()}
style={styles.actionButtons}
size={22}
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
style={[styles.actionButtons, { color: '#1D74F5' }]}
name='send'
key='sendIcon'
accessibilityLabel={I18n.t('Send message')}
accessibilityTraits='button'
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()}
icons.push(
<BorderlessButton
key='audio-message'
onPress={this.recordAudioMessage}
style={styles.actionButton}
testID='messagebox-send-audio'
/>);
icons.push(<MyIcon
style={[styles.actionButtons, { color: '#2F343D', fontSize: 16 }]}
name='plus'
key='fileIcon'
accessibilityLabel={I18n.t('Message actions')}
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}
......
......@@ -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
......
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import iconConfig from '../icons.json';
export default createIconSetFromIcoMoon(iconConfig);
Supports Markdown
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