From f0b4058b13c52fcb1b4869c05385e25c5fd61ec3 Mon Sep 17 00:00:00 2001 From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> Date: Thu, 11 May 2023 15:09:58 +0100 Subject: [PATCH 1/9] Truncate long names --- src/components/AvatarWithDisplayName.js | 2 +- src/components/MoneyRequestHeader.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 3be660ab09c5..558adf18a2be 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -53,7 +53,7 @@ const AvatarWithDisplayName = (props) => { return ( {Boolean(props.report && title) && ( - + {isExpenseReport ? ( { {props.translate('common.to')} - + - + Date: Thu, 11 May 2023 20:08:49 +0100 Subject: [PATCH 2/9] fix avatar background, position and border radius --- src/components/AvatarWithDisplayName.js | 2 ++ src/styles/StyleUtils.js | 2 +- src/styles/styles.js | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 558adf18a2be..62a4caf098c1 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -8,6 +8,7 @@ import participantPropTypes from './participantPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; import SubscriptAvatar from './SubscriptAvatar'; import * as ReportUtils from '../libs/ReportUtils'; import Avatar from './Avatar'; @@ -56,6 +57,7 @@ const AvatarWithDisplayName = (props) => { {isExpenseReport ? ( Date: Thu, 11 May 2023 22:39:52 +0100 Subject: [PATCH 3/9] fix MoneyRequestHeader padding --- src/components/MoneyRequestHeader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index f7f739b81d3c..f3dc6eff7d97 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -73,7 +73,7 @@ const MoneyRequestHeader = (props) => { shouldShowBackButton={props.isSmallScreenWidth} onBackButtonPress={() => Navigation.navigate(ROUTES.HOME)} /> - + {props.translate('common.to')} From c554f5dc88e82af1f5a7022c33e9840d2efae4d2 Mon Sep 17 00:00:00 2001 From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> Date: Fri, 12 May 2023 19:20:47 +0100 Subject: [PATCH 4/9] Removed redundant border radius in Avatar --- src/components/Avatar.js | 10 ++++++++-- src/components/MultipleAvatars.js | 2 +- src/components/SubscriptAvatar.js | 32 +++++++++++++++---------------- src/styles/StyleUtils.js | 27 ++++++++++++++++++++------ src/styles/styles.js | 6 ------ 5 files changed, 45 insertions(+), 32 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 9bdd0049aef3..3efe0d4052d1 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -21,6 +21,10 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types imageStyles: PropTypes.arrayOf(PropTypes.object), + /** Additional styles to pass to Icon */ + // eslint-disable-next-line react/forbid-prop-types + iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object), + /** Extra styles to pass to View wrapper */ containerStyles: stylePropTypes, @@ -48,6 +52,7 @@ const propTypes = { const defaultProps = { source: null, imageStyles: [], + iconAdditionalStyles: [], containerStyles: [], size: CONST.AVATAR_SIZE.DEFAULT, fill: themeColors.icon, @@ -68,9 +73,9 @@ function Avatar(props) { const isWorkspace = props.type === CONST.ICON_TYPE_WORKSPACE; const iconSize = StyleUtils.getAvatarSize(props.size); - const imageStyle = [StyleUtils.getAvatarStyle(props.size), ...props.imageStyles, StyleUtils.getAvatarBorderRadius(props.size, props.type)]; + const imageStyle = props.imageStyles ? [StyleUtils.getAvatarStyle(props.size), ...props.imageStyles, StyleUtils.getAvatarBorderRadius(props.size, props.type)] : []; - const iconStyle = [StyleUtils.getAvatarStyle(props.size), styles.bgTransparent, ...props.imageStyles]; + const iconStyle = props.imageStyles ? [StyleUtils.getAvatarStyle(props.size), styles.bgTransparent, ...props.imageStyles] : null; const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name).fill : props.fill; const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(props.name) : props.fallbackIcon; @@ -91,6 +96,7 @@ function Avatar(props) { StyleUtils.getAvatarBorderStyle(props.size, props.type), isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name) : {}, imageError ? StyleUtils.getBackgroundColorStyle(themeColors.fallbackIconColor) : {}, + ...props.iconAdditionalStyles, ]} /> diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 9b4d10c5c8e8..58bc12f48402 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -80,7 +80,7 @@ const MultipleAvatars = (props) => { } const oneAvatarSize = StyleUtils.getAvatarStyle(props.size); - const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(props.size); + const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(props.size).borderWidth; const overlapSize = oneAvatarSize.width / 3; if (props.shouldStackHorizontally) { diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js index d9f6b5246cb3..65c016e29ff3 100644 --- a/src/components/SubscriptAvatar.js +++ b/src/components/SubscriptAvatar.js @@ -63,23 +63,21 @@ const SubscriptAvatar = (props) => { type={props.mainAvatar.type} /> - - - - - + + + ); }; diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 5e15250be12d..537c88564fe8 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -33,11 +33,11 @@ const workspaceColorOptions = [ const avatarBorderSizes = { [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: variables.componentBorderRadiusSmall, [CONST.AVATAR_SIZE.MID_SUBSCRIPT]: variables.componentBorderRadiusSmall, - [CONST.AVATAR_SIZE.SUBSCRIPT]: variables.componentBorderRadiusSmall, + [CONST.AVATAR_SIZE.SUBSCRIPT]: variables.componentBorderRadiusMedium, [CONST.AVATAR_SIZE.SMALLER]: variables.componentBorderRadiusMedium, [CONST.AVATAR_SIZE.SMALL]: variables.componentBorderRadiusMedium, [CONST.AVATAR_SIZE.HEADER]: variables.componentBorderRadiusMedium, - [CONST.AVATAR_SIZE.DEFAULT]: variables.componentBorderRadiusMedium, + [CONST.AVATAR_SIZE.DEFAULT]: variables.componentBorderRadiusNormal, [CONST.AVATAR_SIZE.MEDIUM]: variables.componentBorderRadiusLarge, [CONST.AVATAR_SIZE.LARGE]: variables.componentBorderRadiusLarge, [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.componentBorderRadiusRounded, @@ -85,7 +85,7 @@ function getAvatarStyle(size) { /** * Get Font size of '+1' text on avatar overlay * @param {String} size - * @returns {Number} + * @returns {Object} */ function getAvatarExtraFontSizeStyle(size) { const AVATAR_SIZES = { @@ -107,12 +107,12 @@ function getAvatarExtraFontSizeStyle(size) { /** * Get Bordersize of Avatar based on avatar size * @param {String} size - * @returns {Number} + * @returns {Object} */ function getAvatarBorderWidth(size) { const AVATAR_SIZES = { [CONST.AVATAR_SIZE.DEFAULT]: 3, - [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: 2, + [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: 1, [CONST.AVATAR_SIZE.MID_SUBSCRIPT]: 2, [CONST.AVATAR_SIZE.SUBSCRIPT]: 2, [CONST.AVATAR_SIZE.SMALL]: 3, @@ -121,7 +121,9 @@ function getAvatarBorderWidth(size) { [CONST.AVATAR_SIZE.MEDIUM]: 3, [CONST.AVATAR_SIZE.LARGE_BORDERED]: 4, }; - return AVATAR_SIZES[size]; + return { + borderWidth: AVATAR_SIZES[size], + }; } /** @@ -349,6 +351,18 @@ function getBackgroundColorStyle(backgroundColor) { }; } +/** + * Returns a style with the specified borderColor + * + * @param {String} borderColor + * @returns {Object} + */ +function getBorderColorStyle(borderColor) { + return { + borderColor, + }; +} + /** * Returns the width style for the wordmark logo on the sign in page * @@ -1132,6 +1146,7 @@ export { getAutoGrowHeightInputStyle, getBackgroundAndBorderStyle, getBackgroundColorStyle, + getBorderColorStyle, getBackgroundColorWithOpacityStyle, getBadgeColorStyle, getButtonBackgroundColorStyle, diff --git a/src/styles/styles.js b/src/styles/styles.js index e0003a1114e5..9151efff0ba5 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1780,18 +1780,12 @@ const styles = { position: 'absolute', right: -6, bottom: -6, - borderWidth: 2, - borderRadius: 18, - borderColor: 'transparent', }, secondAvatarSubscriptCompact: { position: 'absolute', bottom: -1, right: -1, - borderWidth: 1, - borderRadius: 18, - borderColor: 'transparent', }, leftSideLargeAvatar: { From a49b6b6ac389711777f648cc9498ec54d49223ec Mon Sep 17 00:00:00 2001 From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> Date: Fri, 12 May 2023 19:31:23 +0100 Subject: [PATCH 5/9] because consistency matters --- src/components/Avatar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Avatar.js b/src/components/Avatar.js index 3efe0d4052d1..b2d90bddee17 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -73,9 +73,9 @@ function Avatar(props) { const isWorkspace = props.type === CONST.ICON_TYPE_WORKSPACE; const iconSize = StyleUtils.getAvatarSize(props.size); - const imageStyle = props.imageStyles ? [StyleUtils.getAvatarStyle(props.size), ...props.imageStyles, StyleUtils.getAvatarBorderRadius(props.size, props.type)] : []; + const imageStyle = props.imageStyles ? [StyleUtils.getAvatarStyle(props.size), ...props.imageStyles, StyleUtils.getAvatarBorderRadius(props.size, props.type)] : undefined; - const iconStyle = props.imageStyles ? [StyleUtils.getAvatarStyle(props.size), styles.bgTransparent, ...props.imageStyles] : null; + const iconStyle = props.imageStyles ? [StyleUtils.getAvatarStyle(props.size), styles.bgTransparent, ...props.imageStyles] : undefined; const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name).fill : props.fill; const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(props.name) : props.fallbackIcon; From 2070cebd3bf7882d3b8478ba7d88751e3f68aef6 Mon Sep 17 00:00:00 2001 From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> Date: Sat, 13 May 2023 22:44:24 +0100 Subject: [PATCH 6/9] render ReportActionItemCreated only if report is a chat report --- src/libs/ReportUtils.js | 11 +++++++++++ src/pages/home/report/ReportActionItemCreated.js | 6 +++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 7b0fd560ffe1..b8dbaca2107e 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -108,6 +108,16 @@ function getReportParticipantsTitle(logins) { ); } +/** + * Checks if a report is a chat report. + * + * @param {Object} report + * @returns {Boolean} + */ +function isChatReport(report) { + return lodashGet(report, 'type') === CONST.REPORT.TYPE.CHAT; +} + /** * Checks if a report is an Expense report. * @@ -2071,6 +2081,7 @@ export { getAllPolicyReports, getIOUReportActionMessage, getDisplayNameForParticipant, + isChatReport, isExpenseReport, isIOUReport, isTaskReport, diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 5508b983bc82..5fcda0903e75 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -36,12 +36,12 @@ const defaultProps = { }; const ReportActionItemCreated = (props) => { - const icons = ReportUtils.getIcons(props.report, props.personalDetails); - - if (ReportUtils.isMoneyRequestReport(props.report.reportID) || ReportUtils.isTaskReport(props.report)) { + if (!ReportUtils.isChatReport(props.report)) { return null; } + const icons = ReportUtils.getIcons(props.report, props.personalDetails); + return ( Date: Mon, 15 May 2023 14:14:35 +0100 Subject: [PATCH 7/9] Fixed Avatar size --- src/components/MoneyRequestHeader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 8ce88bdf7a46..ac7908677d68 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -79,7 +79,7 @@ const MoneyRequestHeader = (props) => { source={payeeAvatar} type={isExpenseReport ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR} name={payeeName} - size={CONST.AVATAR_SIZE.HEADER} + size={CONST.AVATAR_SIZE.DEFAULT} /> Date: Mon, 15 May 2023 17:18:29 +0100 Subject: [PATCH 8/9] Reduced section titles height --- src/styles/variables.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables.js b/src/styles/variables.js index 109c1dc410c3..8ffd2c750154 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -83,7 +83,7 @@ export default { popoverMenuShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.06)', optionRowHeight: 64, optionRowHeightCompact: 52, - optionsListSectionHeaderHeight: getValueUsingPixelRatio(54, 60), + optionsListSectionHeaderHeight: getValueUsingPixelRatio(32, 38), overlayOpacity: 0.6, lineHeightSmall: getValueUsingPixelRatio(14, 16), lineHeightNormal: getValueUsingPixelRatio(16, 21), From ff1d770ce166583fc400ca10540f3e4cfccd8dce Mon Sep 17 00:00:00 2001 From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> Date: Tue, 16 May 2023 18:15:34 +0100 Subject: [PATCH 9/9] fix failing test --- tests/ui/UnreadIndicatorsTest.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index 027a75dc99d9..0b848a5722e5 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -153,6 +153,7 @@ function signInAndGetAppWithUnreadChat() { lastVisibleActionCreated: reportAction9CreatedDate, lastMessageText: 'Test', participants: [USER_B_EMAIL], + type: CONST.REPORT.TYPE.CHAT, }); const createdReportActionID = NumberUtils.rand64(); Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${REPORT_ID}`, {