From 2f0a3c10459083a71ffc2beb22a9317974e2370d Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Mon, 18 Oct 2021 23:20:28 +0530 Subject: [PATCH 1/9] Added ellipses to reporting indicator for a long user name --- src/languages/en.js | 2 +- src/languages/es.js | 2 +- src/pages/home/report/ReportTypingIndicator.js | 16 ++++------------ src/styles/styles.js | 4 ++++ 4 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 60f45635c347..df92b4199e1b 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -160,7 +160,7 @@ export default { newMsg: ({count}) => `${count} new message${count > 1 ? 's' : ''}`, }, reportTypingIndicator: { - isTyping: 'is typing...', + isTyping: 'is typing', areTyping: 'are typing...', multipleUsers: 'Multiple users', }, diff --git a/src/languages/es.js b/src/languages/es.js index 97e07a8b1d04..d87ad64da850 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -160,7 +160,7 @@ export default { newMsg: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`, }, reportTypingIndicator: { - isTyping: 'está escribiendo...', + isTyping: 'está escribiendo', areTyping: 'están escribiendo...', multipleUsers: 'Varios usuarios', }, diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 9e25d5627483..a818e63b6f5c 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -53,33 +53,25 @@ class ReportTypingIndicator extends React.Component { return ; case 1: return ( - + {getDisplayName(this.state.usersTyping[0])} - {` ${this.props.translate('reportTypingIndicator.isTyping')}`} - - ); - case 2: - return ( - - {getDisplayName(this.state.usersTyping[0])} - {` ${this.props.translate('common.and')} `} - {getDisplayName(this.state.usersTyping[1])} - {` ${this.props.translate('reportTypingIndicator.areTyping')}`} + {` ${this.props.translate('reportTypingIndicator.isTyping')}`} ); diff --git a/src/styles/styles.js b/src/styles/styles.js index c07b9a059165..e043982300bc 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2095,6 +2095,10 @@ const styles = { fontFamily: fontFamily.GTA, flex: 1, }, + + reportingTypingIndicatorText: { + maxWidth: 300, + }, }; const baseCodeTagStyles = { From f7ab275410a5b754e3171e4115008cd08360d122 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Tue, 19 Oct 2021 00:01:10 +0530 Subject: [PATCH 2/9] Modified styling based on screen width --- .../home/report/ReportTypingIndicator.js | 7 +++++-- src/styles/styles.js | 21 +++++++++++++++---- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index a818e63b6f5c..b8b69bd12b49 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -5,9 +5,10 @@ import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import compose from '../../../libs/compose'; import ONYXKEYS from '../../../ONYXKEYS'; -import styles from '../../../styles/styles'; +import styles, {getTypingIndicatorTextStyle} from '../../../styles/styles'; import {getDisplayName} from '../../../libs/actions/PersonalDetails'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import Text from '../../../components/Text'; const propTypes = { @@ -15,6 +16,7 @@ const propTypes = { userTypingStatuses: PropTypes.objectOf(PropTypes.bool), ...withLocalizePropTypes, + ...windowDimensionsPropTypes, }; const defaultProps = { @@ -58,7 +60,7 @@ class ReportTypingIndicator extends React.Component { style={[ styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset, - styles.reportingTypingIndicatorText, + getTypingIndicatorTextStyle(this.props.isSmallScreenWidth), ]} numberOfLines={1} > @@ -100,6 +102,7 @@ ReportTypingIndicator.displayName = 'ReportTypingIndicator'; export default compose( withLocalize, + withWindowDimensions, withOnyx({ userTypingStatuses: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`, diff --git a/src/styles/styles.js b/src/styles/styles.js index e043982300bc..24faf106048b 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2095,10 +2095,6 @@ const styles = { fontFamily: fontFamily.GTA, flex: 1, }, - - reportingTypingIndicatorText: { - maxWidth: 300, - }, }; const baseCodeTagStyles = { @@ -2183,6 +2179,22 @@ const webViewStyles = { }, }; +/** + * Return typing indicator text style + * @param {Boolean} isSmallScreenWidth + * + * @returns {Object} + */ +function getTypingIndicatorTextStyle(isSmallScreenWidth) { + return isSmallScreenWidth + ? { + maxWidth: 200, + } + : { + maxWidth: 500, + }; +} + /** * Takes safe area insets and returns padding to use for a View * @@ -2465,4 +2477,5 @@ export { getModalPaddingStyles, getFontFamilyMonospace, getEmojiPickerStyle, + getTypingIndicatorTextStyle, }; From 1c4426908122b7de37c858919b4bae47b9985266 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Wed, 20 Oct 2021 00:30:18 +0530 Subject: [PATCH 3/9] Removed typing styles and added ellipses back --- src/languages/en.js | 2 +- src/languages/es.js | 2 +- src/pages/home/report/ReportTypingIndicator.js | 3 +-- src/styles/styles.js | 17 ----------------- 4 files changed, 3 insertions(+), 21 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index df92b4199e1b..60f45635c347 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -160,7 +160,7 @@ export default { newMsg: ({count}) => `${count} new message${count > 1 ? 's' : ''}`, }, reportTypingIndicator: { - isTyping: 'is typing', + isTyping: 'is typing...', areTyping: 'are typing...', multipleUsers: 'Multiple users', }, diff --git a/src/languages/es.js b/src/languages/es.js index d87ad64da850..97e07a8b1d04 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -160,7 +160,7 @@ export default { newMsg: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`, }, reportTypingIndicator: { - isTyping: 'está escribiendo', + isTyping: 'está escribiendo...', areTyping: 'están escribiendo...', multipleUsers: 'Varios usuarios', }, diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index b8b69bd12b49..f3769e518136 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -5,7 +5,7 @@ import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import compose from '../../../libs/compose'; import ONYXKEYS from '../../../ONYXKEYS'; -import styles, {getTypingIndicatorTextStyle} from '../../../styles/styles'; +import styles from '../../../styles/styles'; import {getDisplayName} from '../../../libs/actions/PersonalDetails'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; @@ -60,7 +60,6 @@ class ReportTypingIndicator extends React.Component { style={[ styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset, - getTypingIndicatorTextStyle(this.props.isSmallScreenWidth), ]} numberOfLines={1} > diff --git a/src/styles/styles.js b/src/styles/styles.js index 24faf106048b..c07b9a059165 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2179,22 +2179,6 @@ const webViewStyles = { }, }; -/** - * Return typing indicator text style - * @param {Boolean} isSmallScreenWidth - * - * @returns {Object} - */ -function getTypingIndicatorTextStyle(isSmallScreenWidth) { - return isSmallScreenWidth - ? { - maxWidth: 200, - } - : { - maxWidth: 500, - }; -} - /** * Takes safe area insets and returns padding to use for a View * @@ -2477,5 +2461,4 @@ export { getModalPaddingStyles, getFontFamilyMonospace, getEmojiPickerStyle, - getTypingIndicatorTextStyle, }; From 19b76f9fec5aa21a5580516a2fa6b979fe74702c Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Wed, 20 Oct 2021 00:35:56 +0530 Subject: [PATCH 4/9] Added flex shrink 0 for typing... text --- src/pages/home/report/ReportTypingIndicator.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index f3769e518136..2d08c032f544 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -68,9 +68,8 @@ class ReportTypingIndicator extends React.Component { {` ${this.props.translate('reportTypingIndicator.isTyping')}`} From 642c07c8af0dc862d262eee2ee74b5269e88d7ba Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Wed, 20 Oct 2021 04:15:37 +0530 Subject: [PATCH 5/9] Removed windowDimensions --- src/pages/home/report/ReportTypingIndicator.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 2d08c032f544..ebc418857ae8 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -8,7 +8,6 @@ import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; import {getDisplayName} from '../../../libs/actions/PersonalDetails'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import Text from '../../../components/Text'; const propTypes = { @@ -16,7 +15,6 @@ const propTypes = { userTypingStatuses: PropTypes.objectOf(PropTypes.bool), ...withLocalizePropTypes, - ...windowDimensionsPropTypes, }; const defaultProps = { @@ -100,7 +98,6 @@ ReportTypingIndicator.displayName = 'ReportTypingIndicator'; export default compose( withLocalize, - withWindowDimensions, withOnyx({ userTypingStatuses: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`, From b865cc6864696ee8ef229e59408b130160774cb4 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Wed, 20 Oct 2021 09:37:36 +0530 Subject: [PATCH 6/9] Stretch email to take up space --- src/pages/home/report/ReportTypingIndicator.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index ebc418857ae8..c3c29d94861d 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -58,6 +58,7 @@ class ReportTypingIndicator extends React.Component { style={[ styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset, + styles.flex1, ]} numberOfLines={1} > From ff10cfb5e8e970cd9d7901f8dbe245b2b9dfdbf2 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Wed, 27 Oct 2021 23:37:59 +0530 Subject: [PATCH 7/9] Modified logic for flex --- .../home/report/ReportTypingIndicator.js | 40 ++++++++++--------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index c3c29d94861d..7208ef1cfbd2 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -54,29 +54,31 @@ class ReportTypingIndicator extends React.Component { case 1: return ( - - {getDisplayName(this.state.usersTyping[0])} - - - {` ${this.props.translate('reportTypingIndicator.isTyping')}`} - + + + {getDisplayName(this.state.usersTyping[0])} + + + + + {` ${this.props.translate('reportTypingIndicator.isTyping')}`} + + + ); default: return ( - + Date: Wed, 27 Oct 2021 23:45:34 +0530 Subject: [PATCH 8/9] Removed unwanted code --- src/pages/home/report/ReportTypingIndicator.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 7208ef1cfbd2..00793521e376 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -73,12 +73,11 @@ class ReportTypingIndicator extends React.Component { {` ${this.props.translate('reportTypingIndicator.isTyping')}`} - ); default: return ( - + Date: Fri, 29 Oct 2021 16:00:23 +0530 Subject: [PATCH 9/9] styling fixes --- src/pages/home/report/ReportTypingIndicator.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 00793521e376..33e8971014ed 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -56,20 +56,14 @@ class ReportTypingIndicator extends React.Component { {getDisplayName(this.state.usersTyping[0])} - + {` ${this.props.translate('reportTypingIndicator.isTyping')}`}