diff --git a/app/containers/Avatar.js b/app/containers/Avatar.js
index 7d1b4005..3e49a100 100644
--- a/app/containers/Avatar.js
+++ b/app/containers/Avatar.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
import FastImage from 'react-native-fast-image';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import avatarInitialsAndColor from '../utils/avatarInitialsAndColor';
const styles = StyleSheet.create({
@@ -49,7 +48,8 @@ export default class Avatar extends React.PureComponent {
};
const avatarInitialsStyle = {
- fontSize: size / 2
+ fontSize: size / 1.6,
+ fontWeight: '800'
};
const avatarStyle = {
@@ -58,9 +58,11 @@ export default class Avatar extends React.PureComponent {
borderRadius
};
+ let image;
+
if (type === 'd') {
const uri = avatar || `${ baseUrl }/avatar/${ text }`;
- const image = uri && (
+ image = uri && (
);
- return (
-
- {this.state.showInitials &&
-
- {initials}
-
- }
- {image}
- {this.props.children}
- );
}
- const icon = {
- c: 'pound',
- p: 'lock',
- l: 'account'
- }[type];
-
return (
-
+ {this.state.showInitials &&
+
+ {initials}
+
+ }
+ {image}
+ {this.props.children}
);
}
diff --git a/app/containers/RoomTypeIcon.js b/app/containers/RoomTypeIcon.js
new file mode 100644
index 00000000..4450594c
--- /dev/null
+++ b/app/containers/RoomTypeIcon.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const styles = StyleSheet.create({
+ type: {
+ marginRight: 5,
+ marginTop: 3
+ }
+});
+
+const RoomTypeIcon = ({ type, size }) => {
+ const icon = {
+ c: 'pound',
+ p: 'lock',
+ l: 'account',
+ d: 'at'
+ }[type];
+ return ;
+};
+
+RoomTypeIcon.propTypes = {
+ type: PropTypes.string.isRequired,
+ size: PropTypes.number
+};
+
+RoomTypeIcon.defaultProps = {
+ size: 15
+};
+
+export default RoomTypeIcon;
diff --git a/app/presentation/RoomItem.js b/app/presentation/RoomItem.js
index 5529dd15..7674d95d 100644
--- a/app/presentation/RoomItem.js
+++ b/app/presentation/RoomItem.js
@@ -2,16 +2,15 @@ import React from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet, ViewPropTypes } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { connect } from 'react-redux';
import SimpleMarkdown from 'simple-markdown';
-import messagesStatus from '../constants/messagesStatus';
-
import Avatar from '../containers/Avatar';
import Status from '../containers/status';
import Touch from '../utils/touch/index'; //eslint-disable-line
import Markdown from '../containers/message/Markdown';
+import RoomTypeIcon from '../containers/RoomTypeIcon';
const styles = StyleSheet.create({
container: {
@@ -93,6 +92,10 @@ const styles = StyleSheet.create({
right: -3,
borderWidth: 3,
borderColor: '#fff'
+ },
+ type: {
+ marginRight: 5,
+ marginTop: 3
}
});
const markdownStyle = { block: { marginBottom: 0, flexWrap: 'wrap', flexDirection: 'row' } };
@@ -216,6 +219,16 @@ export default class RoomItem extends React.Component {
return `${ msg.slice(0, maxChars) }${ msg.replace(/:[a-z0-9]+:/gi, ':::').length > maxChars ? '...' : '' }`;
}
+ get type() {
+ const icon = {
+ c: 'pound',
+ p: 'lock',
+ l: 'account',
+ d: 'at'
+ }[this.props.type];
+ return ;
+ }
+
formatDate = date => moment(date).calendar(null, {
lastDay: '[Yesterday]',
sameDay: 'h:mm A',
@@ -225,7 +238,7 @@ export default class RoomItem extends React.Component {
render() {
const {
- favorite, unread, userMentions, name, _updatedAt, alert, status
+ favorite, unread, userMentions, name, _updatedAt, alert, type
} = this.props;
const date = this.formatDate(_updatedAt);
@@ -258,11 +271,11 @@ export default class RoomItem extends React.Component {
{this.icon}
+
{ name }
{_updatedAt ? { date } : null}
- {status === messagesStatus.ERROR ? : null }
1 ? usernameParts[0][0] + usernameParts[usernameParts.length - 1][0] : username.replace(/[^A-Za-z0-9]/g, '').substr(0, 2);
- initials = initials.toUpperCase();
+ const initials = username.replace(/[^A-Za-z0-9]/g, '').substr(0, 1).toUpperCase();
return { initials, color };
}
diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js
index 399da0b1..ab73b6e3 100644
--- a/app/views/RoomActionsView/index.js
+++ b/app/views/RoomActionsView/index.js
@@ -15,9 +15,10 @@ import database from '../../lib/realm';
import RocketChat from '../../lib/rocketchat';
import { leaveRoom } from '../../actions/room';
import { setLoading } from '../../actions/selectedUsers';
+import RoomTypeIcon from '../../containers/RoomTypeIcon';
const renderSeparator = () => ;
-const getRoomTitle = room => (room.t === 'd' ? room.fname : room.name);
+const getRoomTitle = room => (room.t === 'd' ? {room.fname} : {room.name});
@connect(state => ({
user_id: state.login.user.id,
diff --git a/app/views/RoomInfoView/index.js b/app/views/RoomInfoView/index.js
index fc25414f..0cebb9f4 100644
--- a/app/views/RoomInfoView/index.js
+++ b/app/views/RoomInfoView/index.js
@@ -13,11 +13,12 @@ import sharedStyles from '../Styles';
import database from '../../lib/realm';
import RocketChat from '../../lib/rocketchat';
import Touch from '../../utils/touch';
+import RoomTypeIcon from '../../containers/RoomTypeIcon';
const PERMISSION_EDIT_ROOM = 'edit-room';
const camelize = str => str.replace(/^(.)/, (match, chr) => chr.toUpperCase());
-
+const getRoomTitle = room => (room.t === 'd' ? {room.fname} : {room.name});
@connect(state => ({
baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
user: state.login.user,
@@ -116,8 +117,6 @@ export default class RoomInfoView extends LoggedView {
this.sub = result;
}
- getRoomTitle = room => (room.t === 'd' ? room.fname : room.name);
-
isDirect = () => this.state.room.t === 'd';
updateRoom = async() => {
@@ -178,7 +177,9 @@ export default class RoomInfoView extends LoggedView {
>
{t === 'd' ? : null}
- { this.getRoomTitle(room) }
+
+ { getRoomTitle(room) }
+
{!this.isDirect() && this.renderItem('description', room)}
diff --git a/app/views/RoomView/Header/index.js b/app/views/RoomView/Header/index.js
index d7cb05cb..89f4c2a4 100644
--- a/app/views/RoomView/Header/index.js
+++ b/app/views/RoomView/Header/index.js
@@ -11,6 +11,7 @@ import Avatar from '../../../containers/Avatar';
import { STATUS_COLORS } from '../../../constants/colors';
import styles from './styles';
import { closeRoom } from '../../../actions/room';
+import RoomTypeIcon from '../../../containers/RoomTypeIcon';
const title = (offline, connecting, authenticating, logged) => {
if (offline) {
@@ -148,7 +149,10 @@ export default class RoomHeaderView extends React.PureComponent {
}
- {this.state.room.name}
+
+
+ {this.state.room.name}
+
{ t && {t}}