From 4d9fd37a13fa00032416132136a3d9ef4c156af0 Mon Sep 17 00:00:00 2001 From: Amal Nazeem Date: Tue, 6 Jul 2021 18:10:16 -0400 Subject: [PATCH 1/4] Add avatars based on svg icons for default rooms --- assets/images/armchair.svg | 4 ++++ src/components/Avatar.js | 1 + src/components/Icon/Expensicons.js | 2 ++ src/components/IconAvatar.js | 32 +++++++++++++++++++++++++++++ src/components/MultipleAvatars.js | 15 +++++++++++++- src/libs/OptionsListUtils.js | 4 ++-- src/pages/home/HeaderView.js | 1 + src/pages/home/sidebar/OptionRow.js | 1 + 8 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 assets/images/armchair.svg create mode 100644 src/components/IconAvatar.js diff --git a/assets/images/armchair.svg b/assets/images/armchair.svg new file mode 100644 index 000000000000..8f6720c53bc8 --- /dev/null +++ b/assets/images/armchair.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Avatar.js b/src/components/Avatar.js index b6c1277869ab..ea948c749ef7 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -2,6 +2,7 @@ import React, {PureComponent} from 'react'; import {Image, View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; +import armchair from '../../assets/images/armchair.svg' const propTypes = { /** Url source for the avatar */ diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index d41626c25810..fbd8304c761d 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -1,5 +1,6 @@ import Android from '../../../assets/images/android.svg'; import Apple from '../../../assets/images/apple.svg'; +import Armchair from '../../../assets/images/armchair.svg'; import ArrowRight from '../../../assets/images/arrow-right.svg'; import BackArrow from '../../../assets/images/back-left.svg'; import Bank from '../../../assets/images/bank.svg'; @@ -55,6 +56,7 @@ export { Android, Apple, ArrowRight, + Armchair, BackArrow, Bank, Building, diff --git a/src/components/IconAvatar.js b/src/components/IconAvatar.js new file mode 100644 index 000000000000..d0ad10ac41da --- /dev/null +++ b/src/components/IconAvatar.js @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import {Armchair} from './Icon/Expensicons'; +import variables from '../styles/variables'; + +const propTypes = { + /** The name of the icon to render. */ + icon: PropTypes.string.isRequired, +}; + +/** + * Get an icon based on the name provided + * @param {String} iconName + * @returns {Function} + */ +function getIconFromName(iconName) { + switch (iconName) { + case 'armchair': + default: + return Armchair; + } +} + +const IconAvatar = (props) => { + // PascalCase is required for React components, so capitalize the const here + const Icon = getIconFromName(props.icon); + return (); +}; + +IconAvatar.displayName = 'IconAvatar'; +IconAvatar.propTypes = propTypes; +export default IconAvatar; diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 4507e388ae41..f15e54e878e2 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -4,6 +4,7 @@ import {Image, View} from 'react-native'; import styles from '../styles/styles'; import Avatar from './Avatar'; import Text from './Text'; +import IconAvatar from './IconAvatar'; const propTypes = { /** Array of avatar URL */ @@ -15,16 +16,20 @@ const propTypes = { /** Style for Second Avatar */ // eslint-disable-next-line react/forbid-prop-types secondAvatarStyle: PropTypes.arrayOf(PropTypes.object), + + /** Whether we should be using an Icon for the Avatar */ + useIcon: PropTypes.bool, }; const defaultProps = { avatarImageURLs: [], size: 'default', secondAvatarStyle: [styles.secondAvatarHovered], + useIcon: false, }; const MultipleAvatars = ({ - avatarImageURLs, size, secondAvatarStyle, + avatarImageURLs, size, secondAvatarStyle, useIcon, }) => { const avatarContainerStyles = size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar; const singleAvatarStyles = size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar; @@ -37,6 +42,14 @@ const MultipleAvatars = ({ return null; } + if (useIcon) { + return ( + + + + ); + } + if (avatarImageURLs.length === 1) { return ( diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index b727b27b1b57..df1d719bd3fe 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -663,9 +663,9 @@ function getCurrencyListForSections(currencyOptions, searchValue) { * @returns {String} */ function getReportIcons(report, personalDetails) { + // Default rooms use icons names for their avatars if (isDefaultRoom(report)) { - // Placeholder image for default rooms soon to be updated - return [`${CONST.CLOUDFRONT_URL}/images/avatars/default_avatar_external.png`]; + return ['armchair']; } return _.map(report.participants, dmParticipant => ({ firstName: lodashGet(personalDetails, [dmParticipant, 'firstName'], ''), diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 212542039e79..85cecee775db 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -122,6 +122,7 @@ const HeaderView = (props) => { ) } From 5d1cdf9133a7e6011a58167e30702c801324e0d5 Mon Sep 17 00:00:00 2001 From: Amal Nazeem Date: Tue, 6 Jul 2021 18:15:41 -0400 Subject: [PATCH 2/4] remove unused import --- src/components/Avatar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index ea948c749ef7..b6c1277869ab 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -2,7 +2,6 @@ import React, {PureComponent} from 'react'; import {Image, View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; -import armchair from '../../assets/images/armchair.svg' const propTypes = { /** Url source for the avatar */ From a02c5cd99a6169dde951e393717855a19bb5651f Mon Sep 17 00:00:00 2001 From: Amal Nazeem Date: Thu, 8 Jul 2021 16:07:52 -0400 Subject: [PATCH 3/4] Update avatar logic for default rooms --- assets/images/avatars/room.svg | 16 +++++++++++++++ src/components/Avatar.js | 23 +++++++++++++-------- src/components/IconAvatar.js | 32 ----------------------------- src/components/MultipleAvatars.js | 19 +++++------------ src/libs/OptionsListUtils.js | 4 ++-- src/pages/ReportDetailsPage.js | 9 +++++--- src/pages/home/HeaderView.js | 2 +- src/pages/home/sidebar/OptionRow.js | 2 +- 8 files changed, 45 insertions(+), 62 deletions(-) create mode 100644 assets/images/avatars/room.svg delete mode 100644 src/components/IconAvatar.js diff --git a/assets/images/avatars/room.svg b/assets/images/avatars/room.svg new file mode 100644 index 000000000000..2bbe41c6d5f4 --- /dev/null +++ b/assets/images/avatars/room.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/src/components/Avatar.js b/src/components/Avatar.js index b6c1277869ab..841900b2b1dd 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -1,7 +1,8 @@ import React, {PureComponent} from 'react'; -import {Image, View} from 'react-native'; +import {Image, View, StyleSheet} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; +import RoomAvatar from '../../assets/images/avatars/room.svg'; const propTypes = { /** Url source for the avatar */ @@ -15,6 +16,9 @@ const propTypes = { /** Set the size of Avatar */ size: PropTypes.oneOf(['default', 'small']), + + /** Whether this avatar is for a default room */ + isDefaultChatRoom: PropTypes.bool, }; const defaultProps = { @@ -22,23 +26,24 @@ const defaultProps = { imageStyles: [], containerStyles: [], size: 'default', + isDefaultChatRoom: false, }; class Avatar extends PureComponent { render() { - if (!this.props.source) { + if (!this.props.source && !this.props.isDefaultChatRoom) { return null; } + const imageStyle = [ + this.props.size === 'small' ? styles.avatarSmall : styles.avatarNormal, + ...this.props.imageStyles, + ]; return ( - + {this.props.isDefaultChatRoom + ? + : } ); } diff --git a/src/components/IconAvatar.js b/src/components/IconAvatar.js deleted file mode 100644 index d0ad10ac41da..000000000000 --- a/src/components/IconAvatar.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {Armchair} from './Icon/Expensicons'; -import variables from '../styles/variables'; - -const propTypes = { - /** The name of the icon to render. */ - icon: PropTypes.string.isRequired, -}; - -/** - * Get an icon based on the name provided - * @param {String} iconName - * @returns {Function} - */ -function getIconFromName(iconName) { - switch (iconName) { - case 'armchair': - default: - return Armchair; - } -} - -const IconAvatar = (props) => { - // PascalCase is required for React components, so capitalize the const here - const Icon = getIconFromName(props.icon); - return (); -}; - -IconAvatar.displayName = 'IconAvatar'; -IconAvatar.propTypes = propTypes; -export default IconAvatar; diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index f15e54e878e2..079ac370928b 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -4,7 +4,6 @@ import {Image, View} from 'react-native'; import styles from '../styles/styles'; import Avatar from './Avatar'; import Text from './Text'; -import IconAvatar from './IconAvatar'; const propTypes = { /** Array of avatar URL */ @@ -17,19 +16,19 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types secondAvatarStyle: PropTypes.arrayOf(PropTypes.object), - /** Whether we should be using an Icon for the Avatar */ - useIcon: PropTypes.bool, + /** Whether this avatar is for a default room */ + isDefaultChatRoom: PropTypes.bool, }; const defaultProps = { avatarImageURLs: [], size: 'default', secondAvatarStyle: [styles.secondAvatarHovered], - useIcon: false, + isDefaultChatRoom: false, }; const MultipleAvatars = ({ - avatarImageURLs, size, secondAvatarStyle, useIcon, + avatarImageURLs, size, secondAvatarStyle, isDefaultChatRoom, }) => { const avatarContainerStyles = size === 'small' ? styles.emptyAvatarSmall : styles.emptyAvatar; const singleAvatarStyles = size === 'small' ? styles.singleAvatarSmall : styles.singleAvatar; @@ -42,18 +41,10 @@ const MultipleAvatars = ({ return null; } - if (useIcon) { - return ( - - - - ); - } - if (avatarImageURLs.length === 1) { return ( - + ); } diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index df1d719bd3fe..a88307f9301e 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -663,9 +663,9 @@ function getCurrencyListForSections(currencyOptions, searchValue) { * @returns {String} */ function getReportIcons(report, personalDetails) { - // Default rooms use icons names for their avatars + // Default rooms have a specific avatar so we can return any non-empty array if (isDefaultRoom(report)) { - return ['armchair']; + return ['']; } return _.map(report.participants, dmParticipant => ({ firstName: lodashGet(personalDetails, [dmParticipant, 'firstName'], ''), diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index 01c7ff98d9fe..c97e754bf922 100644 --- a/src/pages/ReportDetailsPage.js +++ b/src/pages/ReportDetailsPage.js @@ -3,8 +3,9 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; import _ from 'underscore'; -import {Image, Text, View} from 'react-native'; +import {Text, View} from 'react-native'; import lodashGet from 'lodash/get'; +import Avatar from '../components/Avatar'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; import ONYXKEYS from '../ONYXKEYS'; @@ -129,9 +130,11 @@ class ReportDetailsPage extends Component { - { ) } From 1d3d928a2f6b85ac5658191aabbb56fe186e2b46 Mon Sep 17 00:00:00 2001 From: Amal Nazeem Date: Thu, 8 Jul 2021 16:13:05 -0400 Subject: [PATCH 4/4] remove archmair icon we are no longer using --- assets/images/armchair.svg | 4 ---- src/components/Icon/Expensicons.js | 2 -- 2 files changed, 6 deletions(-) delete mode 100644 assets/images/armchair.svg diff --git a/assets/images/armchair.svg b/assets/images/armchair.svg deleted file mode 100644 index 8f6720c53bc8..000000000000 --- a/assets/images/armchair.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index fbd8304c761d..d41626c25810 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -1,6 +1,5 @@ import Android from '../../../assets/images/android.svg'; import Apple from '../../../assets/images/apple.svg'; -import Armchair from '../../../assets/images/armchair.svg'; import ArrowRight from '../../../assets/images/arrow-right.svg'; import BackArrow from '../../../assets/images/back-left.svg'; import Bank from '../../../assets/images/bank.svg'; @@ -56,7 +55,6 @@ export { Android, Apple, ArrowRight, - Armchair, BackArrow, Bank, Building,