From a0bb61642d3dbd28cb9192e2eaf98a56b58fef07 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Fri, 18 May 2018 13:41:47 -0300 Subject: [PATCH] Avatar initials and room type icon (#298) --- app/containers/Avatar.js | 38 ++++++++++++----------------- app/containers/RoomTypeIcon.js | 32 ++++++++++++++++++++++++ app/presentation/RoomItem.js | 23 +++++++++++++---- app/utils/avatarInitialsAndColor.js | 7 +----- app/views/RoomActionsView/index.js | 3 ++- app/views/RoomInfoView/index.js | 9 ++++--- app/views/RoomView/Header/index.js | 6 ++++- 7 files changed, 78 insertions(+), 40 deletions(-) create mode 100644 app/containers/RoomTypeIcon.js 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}}