Skip to content

Commit

Permalink
Merge pull request #4661 from mananjadhav/feat/tooltip-icon-button
Browse files Browse the repository at this point in the history
  • Loading branch information
@iwiznia
iwiznia authored Aug 24, 2021
2 parents 8a5cf2d + 011bf1b commit ab18ee8
Show file tree
Hide file tree
Showing 9 changed files with 181 additions and 128 deletions.
79 changes: 41 additions & 38 deletions src/components/AvatarWithImagePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
import styles from '../styles/styles';
import themeColors from '../styles/themes/default';
import AttachmentPicker from './AttachmentPicker';
import Tooltip from './Tooltip';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
import variables from '../styles/variables';

Expand Down Expand Up @@ -99,45 +100,47 @@ class AvatarWithImagePicker extends React.Component {
const additionalStyles = _.isArray(this.props.style) ? this.props.style : [this.props.style];
return (
<View style={[styles.alignItemsCenter, ...additionalStyles]}>
<View style={[styles.pRelative, styles.avatarLarge]}>
{this.props.avatarURL
? (
<Avatar
containerStyles={styles.avatarLarge}
imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
source={this.props.avatarURL}
/>
)
: (
<DefaultAvatar />
)}
<AttachmentPicker>
{({openPicker}) => (
<>
<Pressable
style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}
onPress={() => this.setState({isMenuVisible: true})}
>
<Icon
src={Pencil}
width={variables.iconSizeSmall}
height={variables.iconSizeSmall}
fill={themeColors.iconReversed}
/>
</Pressable>
<PopoverMenu
isVisible={this.state.isMenuVisible}
onClose={() => this.setState({isMenuVisible: false})}
onItemSelected={() => this.setState({isMenuVisible: false})}
menuItems={this.createMenuItems(openPicker)}
anchorPosition={this.props.anchorPosition}
animationIn="fadeInDown"
animationOut="fadeOutUp"
<Tooltip text={this.props.translate('avatarWithImagePicker.editImage')}>
<View style={[styles.pRelative, styles.avatarLarge]}>
{this.props.avatarURL
? (
<Avatar
containerStyles={styles.avatarLarge}
imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
source={this.props.avatarURL}
/>
</>
)}
</AttachmentPicker>
</View>
)
: (
<DefaultAvatar />
)}
<AttachmentPicker>
{({openPicker}) => (
<>
<Pressable
style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}
onPress={() => this.setState({isMenuVisible: true})}
>
<Icon
src={Pencil}
width={variables.iconSizeSmall}
height={variables.iconSizeSmall}
fill={themeColors.iconReversed}
/>
</Pressable>
<PopoverMenu
isVisible={this.state.isMenuVisible}
onClose={() => this.setState({isMenuVisible: false})}
onItemSelected={() => this.setState({isMenuVisible: false})}
menuItems={this.createMenuItems(openPicker)}
anchorPosition={this.props.anchorPosition}
animationIn="fadeInDown"
animationOut="fadeOutUp"
/>
</>
)}
</AttachmentPicker>
</View>
</Tooltip>
</View>
);
}
Expand Down
36 changes: 22 additions & 14 deletions src/components/HeaderWithCloseButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Icon from './Icon';
import {Close, Download, BackArrow} from './Icon/Expensicons';
import compose from '../libs/compose';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
import Tooltip from './Tooltip';
import InboxCallButton from './InboxCallButton';

const propTypes = {
Expand Down Expand Up @@ -66,36 +67,43 @@ const HeaderWithCloseButton = props => (
]}
>
{props.shouldShowBackButton && (
<TouchableOpacity
onPress={props.onBackButtonPress}
style={[styles.touchableButtonImage]}
>
<Icon src={BackArrow} />
</TouchableOpacity>
<Tooltip text={props.translate('common.back')}>
<TouchableOpacity
onPress={props.onBackButtonPress}
style={[styles.touchableButtonImage]}
>
<Icon src={BackArrow} />
</TouchableOpacity>
</Tooltip>
)}
<Header title={props.title} />
<View style={[styles.reportOptions, styles.flexRow]}>
{
props.shouldShowDownloadButton && (
<Tooltip text={props.translate('common.download')}>

<TouchableOpacity
onPress={props.onDownloadButtonPress}
style={[styles.touchableButtonImage]}
>
<Icon src={Download} />
</TouchableOpacity>
</Tooltip>
)
}

{props.shouldShowInboxCallButton && <InboxCallButton taskID={props.inboxCallTaskID} />}

<TouchableOpacity
onPress={props.onCloseButtonPress}
style={[styles.touchableButtonImage]}
accessibilityRole="button"
accessibilityLabel={props.translate('common.close')}
>
<Icon src={Close} />
</TouchableOpacity>
<Tooltip text={props.translate('common.close')}>
<TouchableOpacity
onPress={props.onCloseButtonPress}
style={[styles.touchableButtonImage]}
accessibilityRole="button"
accessibilityLabel={props.translate('common.close')}
>
<Icon src={Close} />
</TouchableOpacity>
</Tooltip>
</View>
</View>
</View>
Expand Down
39 changes: 21 additions & 18 deletions src/components/VideoChatButtonAndMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
import compose from '../libs/compose';
import Navigation from '../libs/Navigation/Navigation';
import ROUTES from '../ROUTES';
import Tooltip from './Tooltip';

const propTypes = {
...withLocalizePropTypes,
Expand Down Expand Up @@ -95,24 +96,26 @@ class VideoChatButtonAndMenu extends Component {
ref={el => this.videoChatIconWrapper = el}
onLayout={this.measureVideoChatIconPosition}
>
<Pressable
onPress={() => {
// If this is the Concierge chat, we'll open the modal for requesting a setup call instead
if (this.props.isConcierge) {
Navigation.navigate(ROUTES.getRequestCallRoute('NewExpensifyConciergeDM'));
return;
}
this.toggleVideoChatMenu();
}}
style={[styles.touchableButtonImage, styles.mr0]}
>
<Icon
src={Phone}
fill={(this.props.isConcierge || this.state.isVideoChatMenuActive)
? themeColors.heading
: themeColors.icon}
/>
</Pressable>
<Tooltip text={this.props.translate('videoChatButtonAndMenu.tooltip')}>
<Pressable
onPress={() => {
// If this is the Concierge chat, we'll open the modal for requesting a setup call instead
if (this.props.isConcierge) {
Navigation.navigate(ROUTES.getRequestCallRoute('NewExpensifyConciergeDM'));
return;
}
this.toggleVideoChatMenu();
}}
style={[styles.touchableButtonImage, styles.mr0]}
>
<Icon
src={Phone}
fill={(this.props.isConcierge || this.state.isVideoChatMenuActive)
? themeColors.heading
: themeColors.icon}
/>
</Pressable>
</Tooltip>
</View>
<Popover
onClose={this.toggleVideoChatMenu}
Expand Down
9 changes: 9 additions & 0 deletions src/languages/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ export default {
contacts: 'Contacts',
recents: 'Recents',
close: 'Close',
download: 'Download',
pin: 'Pin',
unPin: 'Unpin',
back: 'Back',
saveAndContinue: 'Save & Continue',
settings: 'Settings',
termsOfService: 'Terms of Service',
Expand Down Expand Up @@ -103,6 +107,7 @@ export default {
nameEmailOrPhoneNumber: 'Name, email, or phone number',
},
videoChatButtonAndMenu: {
tooltip: 'Video Chat',
zoom: 'Zoom',
googleMeet: 'Google Meet',
},
Expand All @@ -115,6 +120,7 @@ export default {
phrase4: 'Welcome back to the New Expensify! Please enter your password.',
},
reportActionCompose: {
addAction: 'Actions',
sendAttachment: 'Send Attachment',
addAttachment: 'Add Attachment',
writeSomething: 'Write something...',
Expand All @@ -123,6 +129,7 @@ export default {
fileUploadFailed: 'Upload Failed. File is not supported.',
roomIsArchived: 'This chat room has been deleted',
localTime: ({user, time}) => `It's ${time} for ${user}`,
emoji: 'Emoji',
},
reportActionContextMenu: {
copyToClipboard: 'Copy to Clipboard',
Expand All @@ -146,6 +153,7 @@ export default {
multipleUsers: 'Multiple users',
},
sidebarScreen: {
fabAction: 'New Chat',
newChat: 'New Chat',
newGroup: 'New Group',
headerChat: 'Chats',
Expand Down Expand Up @@ -196,6 +204,7 @@ export default {
avatarWithImagePicker: {
uploadPhoto: 'Upload Photo',
removePhoto: 'Remove Photo',
editImage: 'Edit Photo',
},
profilePage: {
profile: 'Profile',
Expand Down
9 changes: 9 additions & 0 deletions src/languages/es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ export default {
contacts: 'Contactos',
recents: 'Recientes',
close: 'Cerrar',
download: 'Descargar',
pin: 'Fijar',
unPin: 'Desfijar',
back: 'Volver',
saveAndContinue: 'Guardar y Continuar',
settings: 'Configuración',
termsOfService: 'Términos de servicio',
Expand Down Expand Up @@ -103,6 +107,7 @@ export default {
nameEmailOrPhoneNumber: 'Nombre, email o número de teléfono',
},
videoChatButtonAndMenu: {
tooltip: 'Videollamada',
zoom: 'Zoom',
googleMeet: 'Google Meet',
},
Expand All @@ -115,6 +120,7 @@ export default {
phrase4: '¡Bienvenido de vuelta al Nuevo Expensify! Por favor, introduce tu contraseña.',
},
reportActionCompose: {
addAction: 'Acción',
sendAttachment: 'Enviar adjunto',
addAttachment: 'Agregar Archivo Adjunto',
writeSomething: 'Escribe algo...',
Expand All @@ -123,6 +129,7 @@ export default {
fileUploadFailed: 'Subida fallida. El archivo no es compatible.',
roomIsArchived: 'Esta sala de chat ha sido eliminada',
localTime: ({user, time}) => `Son las ${time} para ${user}`,
emoji: 'Emoji',
},
reportActionContextMenu: {
copyToClipboard: 'Copiar al Portapapeles',
Expand All @@ -146,6 +153,7 @@ export default {
multipleUsers: 'Varios usuarios',
},
sidebarScreen: {
fabAction: 'Nuevo Chat',
newChat: 'Nuevo Chat',
newGroup: 'Nuevo Grupo',
headerChat: 'Chats',
Expand Down Expand Up @@ -196,6 +204,7 @@ export default {
avatarWithImagePicker: {
uploadPhoto: 'Subir Foto',
removePhoto: 'Eliminar Foto',
editImage: 'Editar Foto',
},
profilePage: {
profile: 'Perfil',
Expand Down
30 changes: 18 additions & 12 deletions src/pages/home/HeaderView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
import CONST from '../../CONST';
import {getDefaultRoomSubtitle, isDefaultRoom, isArchivedRoom} from '../../libs/reportUtils';
import Text from '../../components/Text';
import Tooltip from '../../components/Tooltip';

const propTypes = {
/** Toggles the navigationMenu open and closed */
Expand Down Expand Up @@ -96,12 +97,14 @@ const HeaderView = (props) => {
<View style={[styles.appContentHeader]} nativeID="drag-area">
<View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
{props.isSmallScreenWidth && (
<Pressable
onPress={props.onNavigationMenuButtonClicked}
style={[styles.LHNToggle]}
>
<Icon src={BackArrow} />
</Pressable>
<Tooltip text={props.translate('common.back')}>
<Pressable
onPress={props.onNavigationMenuButtonClicked}
style={[styles.LHNToggle]}
>
<Icon src={BackArrow} />
</Pressable>
</Tooltip>
)}
{props.report && props.report.reportName && (
<View
Expand Down Expand Up @@ -158,13 +161,16 @@ const HeaderView = (props) => {
{props.report.hasOutstandingIOU && (
<IOUBadge iouReportID={props.report.iouReportID} />
)}

<VideoChatButtonAndMenu isConcierge={isConcierge} />
<Pressable
onPress={() => togglePinnedState(props.report)}
style={[styles.touchableButtonImage, styles.mr0]}
>
<Icon src={Pin} fill={props.report.isPinned ? themeColors.heading : themeColors.icon} />
</Pressable>
<Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
<Pressable
onPress={() => togglePinnedState(props.report)}
style={[styles.touchableButtonImage, styles.mr0]}
>
<Icon src={Pin} fill={props.report.isPinned ? themeColors.heading : themeColors.icon} />
</Pressable>
</Tooltip>
</View>
</View>
)}
Expand Down
Loading

0 comments on commit ab18ee8

Please sign in to comment.