Skip to content

Commit 2b6e13d

Browse files
alvitaalvita
authored
add tooltip to actionMenu icons (#327)
1 parent 7779191 commit 2b6e13d

File tree

9 files changed

+140
-109
lines changed

9 files changed

+140
-109
lines changed

‎src/components/ActionMenu/index.js‎

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,20 @@ import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
1111

1212
function ClickToDialButton({
1313
className,
14-
currentLocale,
1514
onClickToDial,
1615
disableLinks,
1716
disableClickToDial,
1817
phoneNumber,
18+
title,
1919
}) {
2020
return (
2121
<Button
2222
className={classnames(styles.call, className)}
2323
onClick={onClickToDial}
2424
disabled={disableLinks || disableClickToDial || !phoneNumber} >
25-
<span className={dynamicsFont.call} />
25+
<span
26+
className={dynamicsFont.call}
27+
title={title}/>
2628
</Button>
2729
);
2830
}
@@ -32,7 +34,6 @@ ClickToDialButton.propTypes = {
3234
disableLinks: PropTypes.bool,
3335
disableClickToDial: PropTypes.bool,
3436
phoneNumber: PropTypes.string,
35-
currentLocale: PropTypes.string.isRequired,
3637
};
3738
ClickToDialButton.defaultProps = {
3839
className: undefined,
@@ -44,17 +45,19 @@ ClickToDialButton.defaultProps = {
4445

4546
function ClickToSmsButton({
4647
className,
47-
currentLocale,
4848
onClickToSms,
4949
disableLinks,
5050
phoneNumber,
51+
title,
5152
}) {
5253
return (
5354
<Button
5455
className={classnames(styles.sms, className)}
5556
onClick={onClickToSms}
5657
disabled={disableLinks || !phoneNumber} >
57-
<span className={dynamicsFont.composeText} />
58+
<span
59+
className={dynamicsFont.composeText}
60+
title={title}/>
5861
</Button>
5962
);
6063
}
@@ -63,7 +66,6 @@ ClickToSmsButton.propTypes = {
6366
onClickToSms: PropTypes.func,
6467
disableLinks: PropTypes.bool,
6568
phoneNumber: PropTypes.string,
66-
currentLocale: PropTypes.string.isRequired,
6769
};
6870
ClickToSmsButton.defaultProps = {
6971
className: undefined,
@@ -74,12 +76,13 @@ ClickToSmsButton.defaultProps = {
7476

7577
function EntityButton({
7678
className,
77-
currentLocale,
7879
onViewEntity,
7980
onCreateEntity,
8081
hasEntity,
8182
isCreating,
8283
disableLinks,
84+
viewEntityTitle,
85+
createEntityTitle,
8386
}) {
8487
// console.debug('isCreating', isCreating);
8588
const spinner = isCreating ?
@@ -91,14 +94,17 @@ function EntityButton({
9194
null;
9295
const icon = hasEntity ? dynamicsFont.record : dynamicsFont.addEntity;
9396
const onClick = hasEntity ? onViewEntity : onCreateEntity;
94-
97+
const title = hasEntity ? viewEntityTitle : createEntityTitle;
9598
return (
9699
<Button
97100
className={classnames(styles.entity, className)}
98101
onClick={onClick}
99102
disabled={disableLinks} >
100103

101-
<span className={icon} />
104+
<span
105+
className={icon}
106+
title={title}
107+
/>
102108
{spinner}
103109
</Button>
104110
);
@@ -110,7 +116,6 @@ EntityButton.propTypes = {
110116
hasEntity: PropTypes.bool,
111117
isCreating: PropTypes.bool,
112118
disableLinks: PropTypes.bool,
113-
currentLocale: PropTypes.string.isRequired,
114119
};
115120
EntityButton.defaultProps = {
116121
className: undefined,
@@ -171,6 +176,12 @@ export default class ActionMenu extends Component {
171176
disableLinks,
172177
disableClickToDial,
173178
stopPropagation,
179+
addLogTitle,
180+
editLogTitle,
181+
callTitle,
182+
textTitle,
183+
createEntityTitle,
184+
viewEntityTitle,
174185
} = this.props;
175186

176187
const logButton = onLog ?
@@ -182,6 +193,8 @@ export default class ActionMenu extends Component {
182193
isLogged={isLogged}
183194
isLogging={isLogging}
184195
currentLocale={currentLocale}
196+
addTitle={addLogTitle}
197+
editTitle={editLogTitle}
185198
/>
186199
) :
187200
null;
@@ -193,15 +206,15 @@ export default class ActionMenu extends Component {
193206
onViewEntity={onViewEntity}
194207
hasEntity={hasEntity}
195208
disableLinks={disableLinks}
196-
currentLocale={currentLocale}
209+
viewEntityTitle={viewEntityTitle}
197210
/>);
198211
} else if (!hasEntity && phoneNumber && onCreateEntity) {
199212
entityButton = (<EntityButton
200213
className={styles.baseGroup}
201214
onCreateEntity={this.openEntityModal}
202215
hasEntity={hasEntity}
203216
disableLinks={disableLinks}
204-
currentLocale={currentLocale}
217+
createEntityTitle={createEntityTitle}
205218
/>);
206219
} else {
207220
entityButton = null;
@@ -227,6 +240,7 @@ export default class ActionMenu extends Component {
227240
disableLinks={disableLinks}
228241
disableClickToDial={disableClickToDial}
229242
currentLocale={currentLocale}
243+
title={callTitle}
230244
/>
231245
) :
232246
null;
@@ -238,6 +252,7 @@ export default class ActionMenu extends Component {
238252
phoneNumber={phoneNumber}
239253
disableLinks={disableLinks}
240254
currentLocale={currentLocale}
255+
title={textTitle}
241256
/>
242257
) :
243258
null;
@@ -300,6 +315,12 @@ ActionMenu.propTypes = {
300315
disableClickToDial: PropTypes.bool,
301316
stopPropagation: PropTypes.bool,
302317
captureClick: PropTypes.bool,
318+
addLogTitle: PropTypes.string,
319+
editLogTitle: PropTypes.string,
320+
textTitle: PropTypes.string,
321+
callTitle: PropTypes.string,
322+
createEntityTitle: PropTypes.string,
323+
viewEntityTitle: PropTypes.string,
303324
};
304325
ActionMenu.defaultProps = {
305326
className: undefined,
@@ -317,4 +338,10 @@ ActionMenu.defaultProps = {
317338
disableClickToDial: false,
318339
stopPropagation: false,
319340
captureClick: false,
341+
addLogTitle: undefined,
342+
editLogTitle: undefined,
343+
textTitle: undefined,
344+
callTitle: undefined,
345+
createEntityTitle: undefined,
346+
viewEntityTitle: undefined,
320347
};

‎src/components/CallItem/i18n/en-US.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,11 @@ export default {
1010
unknownNumber: 'Anonymous',
1111
unavailable: 'Unavailable',
1212
viewDetails: 'View Details',
13+
addEntity: 'Create New',
14+
addLog: 'Log',
15+
text: 'Text',
16+
call: 'Call',
17+
missedCall: 'Missed',
18+
inboundCall: 'Inbound',
19+
outboundCall: 'Outbound',
1320
};

‎src/components/CallItem/index.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,12 @@ function CallIcon({
3232
missed,
3333
active,
3434
ringing,
35+
inboundTitle,
36+
outboundTitle,
37+
missedTitle,
3538
}) {
39+
const title = missed ? missedTitle :
40+
(direction === callDirections.inbound) ? inboundTitle : outboundTitle;
3641
return (
3742
<div className={styles.callIcon}>
3843
<span
@@ -41,7 +46,9 @@ function CallIcon({
4146
active && styles.activeCall,
4247
ringing && styles.ringing,
4348
missed && styles.missed,
44-
)} />
49+
)}
50+
title={title}
51+
/>
4552
</div>
4653
);
4754
}
@@ -336,6 +343,9 @@ export default class CallItem extends Component {
336343
ringing={ringing}
337344
active={active}
338345
missed={missed}
346+
inboundTitle={i18n.getString('inboundCall', currentLocale)}
347+
outboundTitle={i18n.getString('outboundCall', currentLocale)}
348+
missedTitle={i18n.getString('missedCall', currentLocale)}
339349
/>
340350
<ContactDisplay
341351
className={classnames(
@@ -376,6 +386,12 @@ export default class CallItem extends Component {
376386
isLogging={isLogging || this.state.isLogging}
377387
isLogged={activityMatches.length > 0}
378388
isCreating={this.state.isCreating}
389+
addLogTitle={i18n.getString('addLog', currentLocale)}
390+
editLogTitle={i18n.getString('editLog', currentLocale)}
391+
textTitle={i18n.getString('text', currentLocale)}
392+
callTitle={i18n.getString('call', currentLocale)}
393+
createEntityTitle={i18n.getString('addEntity', currentLocale)}
394+
viewEntityTitle={i18n.getString('viewDetails', currentLocale)}
379395
/>
380396
</div>
381397
);

‎src/components/LogButton/index.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ import styles from './styles.scss';
88

99
export default function LogButton({
1010
className,
11-
currentLocale,
1211
onLog,
1312
isLogged,
1413
disableLinks,
1514
isLogging,
15+
addTitle,
16+
editTitle,
1617
}) {
1718
const spinner = isLogging ?
1819
(
@@ -31,6 +32,10 @@ export default function LogButton({
3132
className={isLogged ?
3233
dynamicsFont.edit :
3334
dynamicsFont.callLog
35+
}
36+
title={isLogged ?
37+
editTitle :
38+
addTitle
3439
} />
3540
{spinner}
3641
</Button>
@@ -42,12 +47,15 @@ LogButton.propTypes = {
4247
isLogged: PropTypes.bool,
4348
disableLinks: PropTypes.bool,
4449
isLogging: PropTypes.bool,
45-
currentLocale: PropTypes.string.isRequired,
50+
viewTitle: PropTypes.string,
51+
editTitle: PropTypes.string,
4652
};
4753
LogButton.defaultProps = {
4854
className: undefined,
4955
onLog: undefined,
5056
isLogged: false,
5157
disableLinks: false,
5258
isLogging: false,
59+
addTitle: undefined,
60+
editTitle: undefined,
5361
};

‎src/components/MessageItem/i18n/en-US.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
addLog: 'Log',
3+
editLog: 'Edit Log',
4+
viewDetails: 'View Details',
5+
addEntity: 'Create New',
6+
call: 'Call',
7+
conversation: 'Conversation',
8+
groupConversation: 'Group Conversation',
9+
};

‎src/components/MessageItem/i18n/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import I18n from 'ringcentral-integration/lib/I18n';
2+
import loadLocale from './loadLocale';
3+
4+
export default new I18n(loadLocale);

‎src/components/MessageItem/i18n/loadLocale.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* loadLocale */

‎src/components/MessageItem/index.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,21 @@ import ContactDisplay from '../ContactDisplay';
55
import ActionMenu from '../ActionMenu';
66
import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
77
import styles from './styles.scss';
8+
import i18n from './i18n';
89

910
function ConversationIcon({
1011
group,
12+
conversationTitle,
13+
groupConversationTitle,
1114
}) {
15+
const title = group ? groupConversationTitle : conversationTitle;
1216
return (
1317
<div className={styles.conversationIcon}>
1418
<span
1519
className={classnames(
1620
group ? dynamicsFont.groupConversation : dynamicsFont.composeText
17-
)} />
21+
)}
22+
title={title}/>
1823
</div>
1924
);
2025
}
@@ -214,7 +219,11 @@ export default class MessageItem extends Component {
214219
)}
215220
onClick={this.showConversationDetail}
216221
>
217-
<ConversationIcon group={correspondents.length > 1} />
222+
<ConversationIcon
223+
group={correspondents.length > 1}
224+
conversationTitle={i18n.getString('conversation', currentLocale)}
225+
groupConversationTitle={i18n.getString('groupConversation', currentLocale)}
226+
/>
218227
<ContactDisplay
219228
className={classnames(
220229
styles.contactDisplay,
@@ -249,6 +258,11 @@ export default class MessageItem extends Component {
249258
isLogging={isLogging || this.state.isLogging}
250259
isLogged={conversationMatches.length > 0}
251260
isCreating={this.state.isCreating}
261+
addLogTitle={i18n.getString('addLog', currentLocale)}
262+
editLogTitle={i18n.getString('editLog', currentLocale)}
263+
callTitle={i18n.getString('call', currentLocale)}
264+
createEntityTitle={i18n.getString('addEntity', currentLocale)}
265+
viewEntityTitle={i18n.getString('viewDetails', currentLocale)}
252266
stopPropagation
253267
/>
254268
</div>

0 commit comments

Comments
 (0)