From 4c720587a7c552381f18248e54780455707a1a2b Mon Sep 17 00:00:00 2001 From: kakajann Date: Tue, 26 Oct 2021 09:28:37 +0500 Subject: [PATCH 1/7] add tooltip for user avatar and status --- src/components/AvatarWithIndicator.js | 59 +++++++++++++++++++------- src/languages/en.js | 3 ++ src/languages/es.js | 3 ++ src/pages/home/sidebar/SidebarLinks.js | 25 ++++++----- src/pages/settings/InitialPage.js | 2 + 5 files changed, 64 insertions(+), 28 deletions(-) diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index bec25774a386..c10c033f9761 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -9,6 +9,8 @@ import styles from '../styles/styles'; import Icon from './Icon'; import {Sync} from './Icon/Expensicons'; import SpinningIndicatorAnimation from '../styles/animation/SpinningIndicatorAnimation'; +import Tooltip from './Tooltip'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; const propTypes = { /** Is user active? */ @@ -22,12 +24,18 @@ const propTypes = { // Whether we show the sync indicator isSyncing: PropTypes.bool, + + /** To show a tooltip on hover */ + tooltipText: PropTypes.string, + + ...withLocalizePropTypes, }; const defaultProps = { isActive: false, size: 'default', isSyncing: false, + tooltipText: '', }; class AvatarWithIndicator extends PureComponent { @@ -55,6 +63,23 @@ class AvatarWithIndicator extends PureComponent { this.animation.stop(); } + /** + * Returns user status as text + * @returns {String} + */ + userStatus() { + if (this.props.isSyncing) { + return this.props.translate('profilePage.syncing'); + } + + if (this.props.isActive) { + return this.props.translate('profilePage.online'); + } + + if (!this.props.isActive) { + return this.props.translate('profilePage.offline'); + } + } render() { const indicatorStyles = [ @@ -69,20 +94,24 @@ class AvatarWithIndicator extends PureComponent { - - - {this.props.isSyncing && ( - - )} - + + + + + + {this.props.isSyncing && ( + + )} + + ); } @@ -91,4 +120,4 @@ class AvatarWithIndicator extends PureComponent { AvatarWithIndicator.defaultProps = defaultProps; AvatarWithIndicator.propTypes = propTypes; AvatarWithIndicator.displayName = 'AvatarWithIndicator'; -export default AvatarWithIndicator; +export default withLocalize(AvatarWithIndicator); diff --git a/src/languages/en.js b/src/languages/en.js index ffe591357422..87728df9b24b 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -231,6 +231,9 @@ export default { setMyTimezoneAutomatically: 'Set my timezone automatically', timezone: 'Timezone', growlMessageOnSave: 'Your profile was successfully saved', + online: 'Online', + offline: 'Offline', + syncing: 'Syncing', }, addSecondaryLoginPage: { addPhoneNumber: 'Add phone number', diff --git a/src/languages/es.js b/src/languages/es.js index 56c3d288a566..68004f8c4990 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -231,6 +231,9 @@ export default { setMyTimezoneAutomatically: 'Configura mi zona horaria automáticamente', timezone: 'Zona horaria', growlMessageOnSave: 'Tu perfil se ha guardado correctamente', + online: 'Online', + offline: 'Offline', + syncing: 'Syncing', }, addSecondaryLoginPage: { addPhoneNumber: 'Agregar número de teléfono', diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index b3a4101371a1..4a5f9b4ef163 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -152,19 +152,18 @@ class SidebarLinks extends React.Component { - - - - - + + + From 9ba543a6b9e7a225f4d4bacf65e5ebb059ede2b8 Mon Sep 17 00:00:00 2001 From: kakajann Date: Tue, 26 Oct 2021 09:41:03 +0500 Subject: [PATCH 2/7] remove unused Tooltip import --- src/pages/settings/InitialPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/InitialPage.js b/src/pages/settings/InitialPage.js index 34ddecb073fa..c3e06d701721 100755 --- a/src/pages/settings/InitialPage.js +++ b/src/pages/settings/InitialPage.js @@ -29,7 +29,6 @@ import compose from '../../libs/compose'; import CONST from '../../CONST'; import DateUtils from '../../libs/DateUtils'; import Permissions from '../../libs/Permissions'; -import Tooltip from '../../components/Tooltip'; const propTypes = { /* Onyx Props */ From bc7787a9379024560bd891d32c6e69ba9a3921e1 Mon Sep 17 00:00:00 2001 From: kakajann Date: Tue, 26 Oct 2021 19:14:54 +0500 Subject: [PATCH 3/7] fix minor code styling --- src/pages/home/sidebar/SidebarLinks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 1ae4a0154fba..c8225e3ddde5 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -222,7 +222,7 @@ class SidebarLinks extends React.Component { source={this.props.myPersonalDetails.avatar} isActive={this.props.network && !this.props.network.isOffline} isSyncing={this.props.network && !this.props.network.isOffline && this.props.isSyncingData} - tooltipText={`${this.props.myPersonalDetails.displayName}`} + tooltipText={this.props.myPersonalDetails.displayName} /> From e566d0f745759db54112ae431bcd914ff0df2472 Mon Sep 17 00:00:00 2001 From: kakajann Date: Tue, 26 Oct 2021 19:15:52 +0500 Subject: [PATCH 4/7] change spanish translation for syncing --- src/languages/es.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/es.js b/src/languages/es.js index cb6c04da7928..a7560bc87c4d 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -233,7 +233,7 @@ export default { growlMessageOnSave: 'Tu perfil se ha guardado correctamente', online: 'Online', offline: 'Offline', - syncing: 'Syncing', + syncing: 'Sincronizando', }, addSecondaryLoginPage: { addPhoneNumber: 'Agregar número de teléfono', From 30546dc28c1b462720712cb5740d5f372229d03f Mon Sep 17 00:00:00 2001 From: kakajann Date: Tue, 26 Oct 2021 19:48:38 +0500 Subject: [PATCH 5/7] trigger github actions From be02ee5585539f212d1e4d0503f8d025d50dfb59 Mon Sep 17 00:00:00 2001 From: Kakajann Dortguly Date: Wed, 27 Oct 2021 23:01:02 +0500 Subject: [PATCH 6/7] update Spanish translations Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com> --- src/languages/es.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/es.js b/src/languages/es.js index a7560bc87c4d..c2a33cb33ea8 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -231,8 +231,8 @@ export default { setMyTimezoneAutomatically: 'Configura mi zona horaria automáticamente', timezone: 'Zona horaria', growlMessageOnSave: 'Tu perfil se ha guardado correctamente', - online: 'Online', - offline: 'Offline', + online: 'En línea', + offline: 'Desconectado', syncing: 'Sincronizando', }, addSecondaryLoginPage: { From 899d640953c4f732e48f83da27f1ede9916a3071 Mon Sep 17 00:00:00 2001 From: Kakajann Dortguly Date: Wed, 27 Oct 2021 23:54:55 +0500 Subject: [PATCH 7/7] update JSDoc of userStatus function Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com> --- src/components/AvatarWithIndicator.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js index 9f5356b3c35e..399bd610121c 100644 --- a/src/components/AvatarWithIndicator.js +++ b/src/components/AvatarWithIndicator.js @@ -65,6 +65,7 @@ class AvatarWithIndicator extends PureComponent { /** * Returns user status as text + * * @returns {String} */ userStatus() {