From c3ccfecb40df676fc6008b97a9ceaeda34e8035d Mon Sep 17 00:00:00 2001 From: RingCentral Integrations Team Date: Tue, 27 Jun 2017 23:02:46 +0800 Subject: [PATCH 1/2] enhancement tooltip ui --- .../CallingSettingsPanel/i18n/en-US.js | 12 +++-- src/components/CallingSettingsPanel/index.js | 48 +++++++++++++++---- .../CallingSettingsPanel/styles.scss | 9 ++++ 3 files changed, 55 insertions(+), 14 deletions(-) diff --git a/src/components/CallingSettingsPanel/i18n/en-US.js b/src/components/CallingSettingsPanel/i18n/en-US.js index 895f3b6085..585adfd794 100644 --- a/src/components/CallingSettingsPanel/i18n/en-US.js +++ b/src/components/CallingSettingsPanel/i18n/en-US.js @@ -16,10 +16,14 @@ export default { [`${callingOptions.softphone}Tooltip`]: `Use this option to make and receive calls using your {brand} for Desktop app.`, [`${callingOptions.myphone}Tooltip`]: 'Use this option to make calls using your {brand} phone.', + [`${callingOptions.myphone}Tooltip1`]: `For the call you make, + your {brand} phone will ring first then the party you called.`, [`${callingOptions.otherphone}Tooltip`]: `Use this option to make calls using your other phones - such as home or cell phones that you have added in your {brand} Extension. - For the call you make, this phone will ring first then the party you called.`, + such as home or cell phones that you have added in your {brand} Extension.`, + [`${callingOptions.otherphone}Tooltip1`]: `For the call you make, + this phone will ring first then the party you called.`, [`${callingOptions.customphone}Tooltip`]: `Use this option to make calls using any phone of - your choice by entering a valid phone number in the field below. - For the call you make, this phone will ring first then the party you called.`, + your choice by entering a valid phone number in the field below.`, + [`${callingOptions.customphone}Tooltip1`]: `For the call you make, + this phone will ring first then the party you called.`, }; diff --git a/src/components/CallingSettingsPanel/index.js b/src/components/CallingSettingsPanel/index.js index 2afdc538f2..546e9c60a9 100644 --- a/src/components/CallingSettingsPanel/index.js +++ b/src/components/CallingSettingsPanel/index.js @@ -95,10 +95,37 @@ export default class CallingSettingsPanel extends Component { ringoutPrompt: checked, }); } + + getTooltipContent() { + let contentKeys; + if (this.state.callWith === callingOptions.browser + || this.state.callWith === callingOptions.softphone + ) { + contentKeys = [`${this.state.callWith}Tooltip`]; + } else { + contentKeys = [`${this.state.callWith}Tooltip`, `${this.state.callWith}Tooltip1`]; + } + return ( +
+ { + contentKeys.map(contentKey => ( +
+ {formatMessage( + i18n.getString(contentKey, this.props.currentLocale), + { brand: this.props.brand } + )} +
+ )) + } +
+ ); + } + renderHandler = (option) => { const brand = this.props.brand; return formatMessage(i18n.getString(option, this.props.currentLocale), { brand }); } + render() { const { currentLocale, @@ -173,16 +200,7 @@ export default class CallingSettingsPanel extends Component { ) : null; - const toolTip = ( -
- { - formatMessage( - i18n.getString(`${this.state.callWith}Tooltip`, currentLocale), - { brand: this.props.brand } - ) - } -
- ); + const toolTip = this.getTooltipContent(); return (
} + getTooltipContainer={() => this.tooltipContainner} > @@ -220,6 +242,12 @@ export default class CallingSettingsPanel extends Component { disabled={disabled} titleEnabled /> +
{ + this.tooltipContainner = tooltipContainner; + }} + /> {ringout} diff --git a/src/components/CallingSettingsPanel/styles.scss b/src/components/CallingSettingsPanel/styles.scss index b4ba747602..aef3114e16 100644 --- a/src/components/CallingSettingsPanel/styles.scss +++ b/src/components/CallingSettingsPanel/styles.scss @@ -30,6 +30,15 @@ color: #848484; } +.tooltipContainner { + width: 100%; + height: 1px; + :global .rc-tooltip { + opacity: 1; + left: 0!important; + } +} + .ringoutHint { padding: 15px 0px; @include primary-font; From 38fb9ff3d6ccf807339628451774a2aeeede6a46 Mon Sep 17 00:00:00 2001 From: RingCentral Integrations Team Date: Wed, 28 Jun 2017 10:27:21 +0800 Subject: [PATCH 2/2] use single quotes --- .../CallingSettingsPanel/i18n/en-US.js | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/components/CallingSettingsPanel/i18n/en-US.js b/src/components/CallingSettingsPanel/i18n/en-US.js index 585adfd794..d1b7ebc7ab 100644 --- a/src/components/CallingSettingsPanel/i18n/en-US.js +++ b/src/components/CallingSettingsPanel/i18n/en-US.js @@ -11,19 +11,12 @@ export default { ringoutHint: 'Ring me at my location first, then connect the called party', myLocationLabel: 'My Location', press1ToStartCallLabel: 'Prompt me to dial 1 before connecting the call', - [`${callingOptions.browser}Tooltip`]: `Use this option to make and receive calls - using your computer’s microphone and speaker.`, - [`${callingOptions.softphone}Tooltip`]: `Use this option to make and receive calls - using your {brand} for Desktop app.`, + [`${callingOptions.browser}Tooltip`]: 'Use this option to make and receive calls using your computer’s microphone and speaker.', + [`${callingOptions.softphone}Tooltip`]: 'Use this option to make and receive calls using your {brand} for Desktop app.', [`${callingOptions.myphone}Tooltip`]: 'Use this option to make calls using your {brand} phone.', - [`${callingOptions.myphone}Tooltip1`]: `For the call you make, - your {brand} phone will ring first then the party you called.`, - [`${callingOptions.otherphone}Tooltip`]: `Use this option to make calls using your other phones - such as home or cell phones that you have added in your {brand} Extension.`, - [`${callingOptions.otherphone}Tooltip1`]: `For the call you make, - this phone will ring first then the party you called.`, - [`${callingOptions.customphone}Tooltip`]: `Use this option to make calls using any phone of - your choice by entering a valid phone number in the field below.`, - [`${callingOptions.customphone}Tooltip1`]: `For the call you make, - this phone will ring first then the party you called.`, + [`${callingOptions.myphone}Tooltip1`]: 'For the call you make, your {brand} phone will ring first then the party you called.', + [`${callingOptions.otherphone}Tooltip`]: 'Use this option to make calls using your other phones such as home or cell phones that you have added in your {brand} Extension.', + [`${callingOptions.otherphone}Tooltip1`]: 'For the call you make, this phone will ring first then the party you called.', + [`${callingOptions.customphone}Tooltip`]: 'Use this option to make calls using any phone of your choice by entering a valid phone number in the field below.', + [`${callingOptions.customphone}Tooltip1`]: 'For the call you make, this phone will ring first then the party you called.', };