Merge pull request #6061 from kakajann/add-tooltip-for-user-avatar

Add a tooltip for profile avatar and online status icon
Expensify · Nov 1, 2021 · 0c44613 · 0c44613
2 parents 973dcf4 + 899d640
commit 0c44613
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 28 deletions.
diff --git 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,24 @@ 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,25 +95,29 @@ class AvatarWithIndicator extends PureComponent {
             <View
                 style={[this.props.size === 'large' ? styles.avatarLarge : styles.sidebarAvatar]}
             >
-                <Avatar
-                    imageStyles={[this.props.size === 'large' ? styles.avatarLarge : null]}
-                    source={this.props.source}
-                />
-                <Animated.View style={StyleSheet.flatten(indicatorStyles)}>
-                    {this.props.isSyncing && (
-                        <Icon
-                            src={Sync}
-                            fill={themeColors.textReversed}
-                            width={6}
-                            height={6}
-                        />
-                    )}
-                </Animated.View>
+                <Tooltip text={this.props.tooltipText}>
+                    <Avatar
+                        imageStyles={[this.props.size === 'large' ? styles.avatarLarge : null]}
+                        source={this.props.source}
+                    />
+                </Tooltip>
+                <Tooltip text={this.userStatus()} absolute>
+                    <Animated.View style={StyleSheet.flatten(indicatorStyles)}>
+                        {this.props.isSyncing && (
+                            <Icon
+                                src={Sync}
+                                fill={themeColors.textReversed}
+                                width={6}
+                                height={6}
+                            />
+                        )}
+                    </Animated.View>
+                </Tooltip>
             </View>
         );
     }
 }
 
 AvatarWithIndicator.defaultProps = defaultProps;
 AvatarWithIndicator.propTypes = propTypes;
-export default AvatarWithIndicator;
+export default withLocalize(AvatarWithIndicator);
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -233,6 +233,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
@@ -233,6 +233,9 @@ export default {
         setMyTimezoneAutomatically: 'Configura mi zona horaria automáticamente',
         timezone: 'Zona horaria',
         growlMessageOnSave: 'Tu perfil se ha guardado correctamente',
+        online: 'En línea',
+        offline: 'Desconectado',
+        syncing: 'Sincronizando',
     },
     addSecondaryLoginPage: {
         addPhoneNumber: 'Agregar número de teléfono',

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
@@ -213,19 +213,18 @@ class SidebarLinks extends React.Component {
                             <Icon src={MagnifyingGlass} />
                         </TouchableOpacity>
                     </Tooltip>
-                    <Tooltip text={this.props.translate('common.settings')}>
-                        <TouchableOpacity
-                            accessibilityLabel={this.props.translate('sidebarScreen.buttonMySettings')}
-                            accessibilityRole="button"
-                            onPress={this.props.onAvatarClick}
-                        >
-                            <AvatarWithIndicator
-                                source={this.props.myPersonalDetails.avatar}
-                                isActive={this.props.network && !this.props.network.isOffline}
-                                isSyncing={this.props.network && !this.props.network.isOffline && this.props.isSyncingData}
-                            />
-                        </TouchableOpacity>
-                    </Tooltip>
+                    <TouchableOpacity
+                        accessibilityLabel={this.props.translate('sidebarScreen.buttonMySettings')}
+                        accessibilityRole="button"
+                        onPress={this.props.onAvatarClick}
+                    >
+                        <AvatarWithIndicator
+                            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}
+                        />
+                    </TouchableOpacity>
                 </View>
                 <OptionsList
                     contentContainerStyles={[

diff --git a/src/pages/settings/InitialPage.js b/src/pages/settings/InitialPage.js
@@ -181,6 +181,7 @@ const InitialSettingsPage = ({
                                 size="large"
                                 source={myPersonalDetails.avatar}
                                 isActive={network.isOffline === false}
+                                tooltipText={myPersonalDetails.displayName}
                             />
                         </Pressable>