diff --git a/android/app/src/main/res/drawable-hdpi/mention_header.png b/android/app/src/main/res/drawable-hdpi/mention_header.png
new file mode 100644
index 0000000000000000000000000000000000000000..01cc741aba1fe42dac06d65393003562cf1dc885
Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/mention_header.png differ
diff --git a/android/app/src/main/res/drawable-mdpi/mention_header.png b/android/app/src/main/res/drawable-mdpi/mention_header.png
new file mode 100644
index 0000000000000000000000000000000000000000..f278d456bd888125a7a26a3dd2dbd887f50a3d78
Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/mention_header.png differ
diff --git a/android/app/src/main/res/drawable-xhdpi/mention_header.png b/android/app/src/main/res/drawable-xhdpi/mention_header.png
new file mode 100644
index 0000000000000000000000000000000000000000..83f29f79c851c2ba5795986387e325c9639a4666
Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/mention_header.png differ
diff --git a/android/app/src/main/res/drawable-xxhdpi/mention_header.png b/android/app/src/main/res/drawable-xxhdpi/mention_header.png
new file mode 100644
index 0000000000000000000000000000000000000000..f20b27aea50b911f2490f635995ed1a014534212
Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/mention_header.png differ
diff --git a/android/app/src/main/res/drawable-xxxhdpi/mention_header.png b/android/app/src/main/res/drawable-xxxhdpi/mention_header.png
new file mode 100644
index 0000000000000000000000000000000000000000..930fe78f953e8cba3508ecc728c26b0f23159a76
Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/mention_header.png differ
diff --git a/app/containers/Button/index.js b/app/containers/Button/index.js
index b632abc58b4fa2d11f121fbb59ec447f086cfaf8..f7d610aa222f0c97503e3afa7e1dc21e4af97051 100644
--- a/app/containers/Button/index.js
+++ b/app/containers/Button/index.js
@@ -25,8 +25,7 @@ const styles = StyleSheet.create({
},
text: {
fontSize: 18,
- textAlign: 'center',
- fontWeight: '500'
+ textAlign: 'center'
},
background_primary: {
backgroundColor: colors.background_primary
@@ -54,7 +53,8 @@ export default class Button extends React.PureComponent {
onPress: PropTypes.func,
disabled: PropTypes.bool,
backgroundColor: PropTypes.string,
- loading: PropTypes.bool
+ loading: PropTypes.bool,
+ style: PropTypes.any
}
static defaultProps = {
@@ -67,7 +67,7 @@ export default class Button extends React.PureComponent {
render() {
const {
- title, type, onPress, disabled, backgroundColor, loading, ...otherProps
+ title, type, onPress, disabled, backgroundColor, loading, style, ...otherProps
} = this.props;
return (
<RectButton
@@ -75,9 +75,9 @@ export default class Button extends React.PureComponent {
enabled={!(disabled || loading)}
style={[
styles.container,
- styles.border,
backgroundColor ? { backgroundColor } : styles[`background_${ type }`],
- disabled && styles.disabled
+ disabled && styles.disabled,
+ style
]}
{...otherProps}
>
diff --git a/app/containers/MessageBox/UploadModal.js b/app/containers/MessageBox/UploadModal.js
index c33eb6b079116c30f5bf0b004ae9c9f2177e627f..aa4ec42e06bcdc54a5025dfbb919da15c4c10eb5 100644
--- a/app/containers/MessageBox/UploadModal.js
+++ b/app/containers/MessageBox/UploadModal.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import {
- View, Text, StyleSheet, Image, ScrollView, Platform
+ View, Text, StyleSheet, Image, ScrollView, Platform, TouchableHighlight
} from 'react-native';
import PropTypes from 'prop-types';
import Modal from 'react-native-modal';
@@ -10,20 +10,24 @@ import equal from 'deep-equal';
import TextInput from '../TextInput';
import Button from '../Button';
import I18n from '../../i18n';
+import sharedStyles from '../../views/Styles';
const cancelButtonColor = '#f7f8fa';
const styles = StyleSheet.create({
+ modal: {
+ alignItems: 'center'
+ },
titleContainer: {
flexDirection: 'row',
paddingHorizontal: 16,
paddingTop: 16
},
title: {
- fontWeight: 'bold'
+ ...sharedStyles.textBold
},
container: {
- height: Platform.OS === 'ios' ? 404 : 430,
+ height: 430,
backgroundColor: '#ffffff',
flexDirection: 'column'
},
@@ -43,9 +47,20 @@ const styles = StyleSheet.create({
padding: 16,
backgroundColor: '#f7f8fa'
},
- buttonMargin: {
- margin: 0
+ button: {
+ marginBottom: 0
+ },
+ androidButton: {
+ paddingHorizontal: 15,
+ justifyContent: 'center',
+ height: 48,
+ borderRadius: 2
+ },
+ androidButtonText: {
+ fontSize: 18,
+ textAlign: 'center'
}
+
});
@responsive
@@ -75,21 +90,65 @@ export default class UploadModal extends Component {
return null;
}
- _submit = () => {
+ submit = () => {
const { file, submit } = this.props;
const { name, description } = this.state;
submit({ ...file, name, description });
}
+ renderButtons = () => {
+ const { close } = this.props;
+ if (Platform.OS === 'ios') {
+ return (
+ <View style={styles.buttonContainer}>
+ <Button
+ title={I18n.t('Cancel')}
+ type='secondary'
+ backgroundColor={cancelButtonColor}
+ style={styles.button}
+ onPress={close}
+ />
+ <Button
+ title={I18n.t('Send')}
+ type='primary'
+ style={styles.button}
+ onPress={this.submit}
+ />
+ </View>
+ );
+ }
+ // FIXME: RNGH don't work well on Android modals: https://github.com/kmagiera/react-native-gesture-handler/issues/139
+ return (
+ <View style={styles.buttonContainer}>
+ <TouchableHighlight
+ onPress={close}
+ style={[styles.androidButton, { backgroundColor: cancelButtonColor }]}
+ underlayColor={cancelButtonColor}
+ activeOpacity={0.5}
+ >
+ <Text style={[styles.androidButtonText, { ...sharedStyles.textBold, color: '#1d74f5' }]}>{I18n.t('Cancel')}</Text>
+ </TouchableHighlight>
+ <TouchableHighlight
+ onPress={this.submit}
+ style={[styles.androidButton, { backgroundColor: '#1d74f5' }]}
+ underlayColor='#1d74f5'
+ activeOpacity={0.5}
+ >
+ <Text style={[styles.androidButtonText, { ...sharedStyles.textMedium, color: '#fff' }]}>{I18n.t('Send')}</Text>
+ </TouchableHighlight>
+ </View>
+ );
+ }
+
render() {
const { window: { width }, isVisible, close } = this.props;
const { name, description, file } = this.state;
return (
<Modal
isVisible={isVisible}
- style={{ alignItems: 'center' }}
- onBackdropPress={() => close()}
- onBackButtonPress={() => close()}
+ style={styles.modal}
+ onBackdropPress={close}
+ onBackButtonPress={close}
animationIn='fadeIn'
animationOut='fadeOut'
useNativeDriver
@@ -97,7 +156,7 @@ export default class UploadModal extends Component {
>
<View style={[styles.container, { width: width - 32 }]}>
<View style={styles.titleContainer}>
- <Text style={styles.title}>Upload file?</Text>
+ <Text style={styles.title}>{I18n.t('Upload_file_question_mark')}</Text>
</View>
<ScrollView style={styles.scrollView}>
@@ -113,21 +172,7 @@ export default class UploadModal extends Component {
onChangeText={value => this.setState({ description: value })}
/>
</ScrollView>
- <View style={styles.buttonContainer}>
- <Button
- title={I18n.t('Cancel')}
- type='secondary'
- backgroundColor={cancelButtonColor}
- margin={styles.buttonMargin}
- onPress={close}
- />
- <Button
- title={I18n.t('Send')}
- type='primary'
- margin={styles.buttonMargin}
- onPress={this._submit}
- />
- </View>
+ {this.renderButtons()}
</View>
</Modal>
);
diff --git a/app/containers/MessageBox/index.js b/app/containers/MessageBox/index.js
index 74377bd4b3cf987d4c38fefcf939701614960c6e..b92c68acd5011ce7a20ad81834d49c9e220d2c2a 100644
--- a/app/containers/MessageBox/index.js
+++ b/app/containers/MessageBox/index.js
@@ -40,7 +40,7 @@ const onlyUnique = function onlyUnique(value, index, self) {
const imagePickerConfig = {
cropping: true,
compressImageQuality: 0.8,
- cropperAvoidEmptySpaceAroundImage: false,
+ avoidEmptySpaceAroundImage: false,
cropperChooseText: I18n.t('Choose'),
cropperCancelText: I18n.t('Cancel')
};
diff --git a/app/i18n/locales/en.js b/app/i18n/locales/en.js
index 74563eed6af7fc1d66c52cf987457528d3612160..4158216333ec85bd079d875c6e6fb06bba8a9809 100644
--- a/app/i18n/locales/en.js
+++ b/app/i18n/locales/en.js
@@ -326,6 +326,7 @@ export default {
Unread_on_top: 'Unread on top',
Unstar: 'Unstar',
Uploading: 'Uploading',
+ Upload_file_question_mark: 'Upload file?',
User_added_by: 'User {{userAdded}} added by {{userBy}}',
User_has_been_key: 'User has been {{key}}!',
User_is_no_longer_role_by_: '{{user}} is no longer {{role}} by {{userBy}}',
diff --git a/app/i18n/locales/pt-BR.js b/app/i18n/locales/pt-BR.js
index 3232282b2efdf0801ca0ae5cd5d239c5bfa5eaa5..3f627b5616f51352ed1efeafb901ebb28440d682 100644
--- a/app/i18n/locales/pt-BR.js
+++ b/app/i18n/locales/pt-BR.js
@@ -325,6 +325,7 @@ export default {
Unread_on_top: 'Não lidas no topo',
Unstar: 'Remover favorito',
Uploading: 'Subindo arquivo',
+ Upload_file_question_mark: 'Enviar arquivo?',
User_added_by: 'Usuário {{userAdded}} adicionado por {{userBy}}',
User_has_been_key: 'Usuário foi {{key}}!',
User_is_no_longer_role_by_: '{{user}} não pertence mais à {{role}} por {{userBy}}',
diff --git a/app/views/RoomView/Header/index.js b/app/views/RoomView/Header/index.js
index 025b1540c9b3d33b2a13dffb1faabd1c9d357f24..813c145bce4fcb11978b4e3ca5fd9ba07c1ad8e2 100644
--- a/app/views/RoomView/Header/index.js
+++ b/app/views/RoomView/Header/index.js
@@ -9,44 +9,40 @@ import equal from 'deep-equal';
import I18n from '../../../i18n';
import { STATUS_COLORS } from '../../../constants/colors';
+import sharedStyles from '../../Styles';
const isIOS = () => Platform.OS === 'ios';
const TITLE_SIZE = 18;
-const ICON_SIZE = 20;
+const ICON_SIZE = 18;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
- backgroundColor: isIOS() ? 'transparent' : '#2F343D',
- height: 44
+ backgroundColor: isIOS() ? 'transparent' : '#2F343D'
},
titleContainer: {
flexDirection: 'row',
alignItems: 'center'
},
title: {
+ ...sharedStyles.textSemibold,
color: isIOS() ? '#0C0D0F' : '#fff',
- fontSize: TITLE_SIZE,
- fontWeight: '500'
+ fontSize: TITLE_SIZE
},
type: {
width: ICON_SIZE,
height: ICON_SIZE,
- marginRight: 5,
+ marginRight: 8,
tintColor: isIOS() ? '#9EA2A8' : '#fff'
},
typing: {
+ ...sharedStyles.textRegular,
color: isIOS() ? '#9EA2A8' : '#fff',
fontSize: 12
},
typingUsers: {
+ ...sharedStyles.textSemibold,
fontWeight: '600'
- },
- alignItemsFlexStart: {
- alignItems: 'flex-start'
- },
- alignItemsCenter: {
- alignItems: 'center'
}
});
@@ -114,7 +110,7 @@ export default class RoomHeaderView extends PureComponent {
return (
<Text style={styles.typing} numberOfLines={1}>
<Text style={styles.typingUsers}>{usersText} </Text>
- { usersTyping.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing') }
+ { usersTyping.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing') }...
</Text>
);
}
@@ -124,11 +120,11 @@ export default class RoomHeaderView extends PureComponent {
window, title, type, status, usersTyping
} = this.props;
const icon = {
- d: 'mention',
+ d: 'mention_header',
c: 'hashtag'
}[type] || 'lock';
const portrait = window.height > window.width;
- let height = 44;
+ let height = isIOS ? 44 : 60;
let scale = 1;
if (!portrait) {
@@ -144,8 +140,7 @@ export default class RoomHeaderView extends PureComponent {
<View
style={[
styles.container,
- portrait ? styles.alignItemsFlexStart : styles.alignItemsCenter,
- { maxWidth: window.width - 150, height }
+ { width: window.width - 150, height }
]}
>
<View style={styles.titleContainer}>
diff --git a/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/Contents.json b/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/Contents.json
new file mode 100644
index 0000000000000000000000000000000000000000..7a846eb54789fb07272f2281c90eb4b62e1d0e02
--- /dev/null
+++ b/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+ "images" : [
+ {
+ "idiom" : "universal",
+ "filename" : "mention_header.png",
+ "scale" : "1x"
+ },
+ {
+ "idiom" : "universal",
+ "filename" : "mention_header@2x.png",
+ "scale" : "2x"
+ },
+ {
+ "idiom" : "universal",
+ "filename" : "mention_header@3x.png",
+ "scale" : "3x"
+ }
+ ],
+ "info" : {
+ "version" : 1,
+ "author" : "xcode"
+ }
+}
\ No newline at end of file
diff --git a/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/mention_header.png b/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/mention_header.png
new file mode 100644
index 0000000000000000000000000000000000000000..f278d456bd888125a7a26a3dd2dbd887f50a3d78
Binary files /dev/null and b/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/mention_header.png differ
diff --git a/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/mention_header@2x.png b/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/mention_header@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..83f29f79c851c2ba5795986387e325c9639a4666
Binary files /dev/null and b/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/mention_header@2x.png differ
diff --git a/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/mention_header@3x.png b/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/mention_header@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..f20b27aea50b911f2490f635995ed1a014534212
Binary files /dev/null and b/ios/RocketChatRN/Images.xcassets/Icons/mention_header.imageset/mention_header@3x.png differ