add tooltip to actionMenu icons

src/components/ActionMenu/index.js

@@ -11,18 +11,20 @@ import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
 
 function ClickToDialButton({
   className,
-  currentLocale,
   onClickToDial,
   disableLinks,
   disableClickToDial,
   phoneNumber,
+  title,
 }) {
   return (
     <Button
       className={classnames(styles.call, className)}
       onClick={onClickToDial}
       disabled={disableLinks || disableClickToDial || !phoneNumber} >
-      <span className={dynamicsFont.call} />
+      <span
+        className={dynamicsFont.call}
+        title={title}/>
     </Button>
   );
 }
@@ -32,7 +34,6 @@ ClickToDialButton.propTypes = {
   disableLinks: PropTypes.bool,
   disableClickToDial: PropTypes.bool,
   phoneNumber: PropTypes.string,
-  currentLocale: PropTypes.string.isRequired,
 };
 ClickToDialButton.defaultProps = {
   className: undefined,
@@ -44,17 +45,19 @@ ClickToDialButton.defaultProps = {
 
 function ClickToSmsButton({
   className,
-  currentLocale,
   onClickToSms,
   disableLinks,
   phoneNumber,
+  title,
 }) {
   return (
     <Button
       className={classnames(styles.sms, className)}
       onClick={onClickToSms}
       disabled={disableLinks || !phoneNumber} >
-      <span className={dynamicsFont.composeText} />
+      <span
+        className={dynamicsFont.composeText}
+        title={title}/>
     </Button>
   );
 }
@@ -63,7 +66,6 @@ ClickToSmsButton.propTypes = {
   onClickToSms: PropTypes.func,
   disableLinks: PropTypes.bool,
   phoneNumber: PropTypes.string,
-  currentLocale: PropTypes.string.isRequired,
 };
 ClickToSmsButton.defaultProps = {
   className: undefined,
@@ -74,12 +76,13 @@ ClickToSmsButton.defaultProps = {
 
 function EntityButton({
   className,
-  currentLocale,
   onViewEntity,
   onCreateEntity,
   hasEntity,
   isCreating,
   disableLinks,
+  viewEntityTitle,
+  createEntityTitle,
 }) {
   // console.debug('isCreating', isCreating);
   const spinner = isCreating ?
@@ -91,14 +94,17 @@ function EntityButton({
     null;
   const icon = hasEntity ? dynamicsFont.record : dynamicsFont.addEntity;
   const onClick = hasEntity ? onViewEntity : onCreateEntity;
-
+  const title = hasEntity ? viewEntityTitle : createEntityTitle;
   return (
     <Button
       className={classnames(styles.entity, className)}
       onClick={onClick}
       disabled={disableLinks} >
 
-      <span className={icon} />
+      <span
+        className={icon}
+        title={title}
+      />
       {spinner}
     </Button>
   );
@@ -110,7 +116,6 @@ EntityButton.propTypes = {
   hasEntity: PropTypes.bool,
   isCreating: PropTypes.bool,
   disableLinks: PropTypes.bool,
-  currentLocale: PropTypes.string.isRequired,
 };
 EntityButton.defaultProps = {
   className: undefined,
@@ -171,6 +176,12 @@ export default class ActionMenu extends Component {
       disableLinks,
       disableClickToDial,
       stopPropagation,
+      addLogTitle,
+      editLogTitle,
+      callTitle,
+      textTitle,
+      createEntityTitle,
+      viewEntityTitle,
     } = this.props;
 
     const logButton = onLog ?
@@ -182,6 +193,8 @@ export default class ActionMenu extends Component {
           isLogged={isLogged}
           isLogging={isLogging}
           currentLocale={currentLocale}
+          addTitle={addLogTitle}
+          editTitle={editLogTitle}
         />
       ) :
       null;
@@ -193,15 +206,15 @@ export default class ActionMenu extends Component {
         onViewEntity={onViewEntity}
         hasEntity={hasEntity}
         disableLinks={disableLinks}
-        currentLocale={currentLocale}
+        viewEntityTitle={viewEntityTitle}
       />);
     } else if (!hasEntity && phoneNumber && onCreateEntity) {
       entityButton = (<EntityButton
         className={styles.baseGroup}
         onCreateEntity={this.openEntityModal}
         hasEntity={hasEntity}
         disableLinks={disableLinks}
-        currentLocale={currentLocale}
+        createEntityTitle={createEntityTitle}
       />);
     } else {
       entityButton = null;
@@ -227,6 +240,7 @@ export default class ActionMenu extends Component {
           disableLinks={disableLinks}
           disableClickToDial={disableClickToDial}
           currentLocale={currentLocale}
+          title={callTitle}
         />
       ) :
       null;
@@ -238,6 +252,7 @@ export default class ActionMenu extends Component {
           phoneNumber={phoneNumber}
           disableLinks={disableLinks}
           currentLocale={currentLocale}
+          title={textTitle}
         />
       ) :
       null;
@@ -300,6 +315,12 @@ ActionMenu.propTypes = {
   disableClickToDial: PropTypes.bool,
   stopPropagation: PropTypes.bool,
   captureClick: PropTypes.bool,
+  addLogTitle: PropTypes.string,
+  editLogTitle: PropTypes.string,
+  textTitle: PropTypes.string,
+  callTitle: PropTypes.string,
+  createEntityTitle: PropTypes.string,
+  viewEntityTitle: PropTypes.string,
 };
 ActionMenu.defaultProps = {
   className: undefined,
@@ -317,4 +338,10 @@ ActionMenu.defaultProps = {
   disableClickToDial: false,
   stopPropagation: false,
   captureClick: false,
+  addLogTitle: undefined,
+  editLogTitle: undefined,
+  textTitle: undefined,
+  callTitle: undefined,
+  createEntityTitle: undefined,
+  viewEntityTitle: undefined,
 };

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

@@ -10,4 +10,11 @@ export default {
   unknownNumber: 'Anonymous',
   unavailable: 'Unavailable',
   viewDetails: 'View Details',
+  addEntity: 'Create New',
+  addLog: 'Log',
+  text: 'Text',
+  call: 'Call',
+  missedCall: 'Missed',
+  inboundCall: 'Inbound',
+  outboundCall: 'Outbound',
 };

src/components/CallItem/index.js

@@ -32,7 +32,12 @@ function CallIcon({
   missed,
   active,
   ringing,
+  inboundTitle,
+  outboundTitle,
+  missedTitle,
 }) {
+  const title = missed ? missedTitle :
+    (direction === callDirections.inbound) ? inboundTitle : outboundTitle;
   return (
     <div className={styles.callIcon}>
       <span
@@ -41,7 +46,9 @@ function CallIcon({
           active && styles.activeCall,
           ringing && styles.ringing,
           missed && styles.missed,
-        )} />
+        )}
+        title={title}
+      />
     </div>
   );
 }
@@ -336,6 +343,9 @@ export default class CallItem extends Component {
           ringing={ringing}
           active={active}
           missed={missed}
+          inboundTitle={i18n.getString('inboundCall', currentLocale)}
+          outboundTitle={i18n.getString('outboundCall', currentLocale)}
+          missedTitle={i18n.getString('missedCall', currentLocale)}
         />
         <ContactDisplay
           className={classnames(
@@ -376,6 +386,12 @@ export default class CallItem extends Component {
           isLogging={isLogging || this.state.isLogging}
           isLogged={activityMatches.length > 0}
           isCreating={this.state.isCreating}
+          addLogTitle={i18n.getString('addLog', currentLocale)}
+          editLogTitle={i18n.getString('editLog', currentLocale)}
+          textTitle={i18n.getString('text', currentLocale)}
+          callTitle={i18n.getString('call', currentLocale)}
+          createEntityTitle={i18n.getString('addEntity', currentLocale)}
+          viewEntityTitle={i18n.getString('viewDetails', currentLocale)}
         />
       </div>
     );

src/components/LogButton/index.js

@@ -8,11 +8,12 @@ import styles from './styles.scss';
 
 export default function LogButton({
   className,
-  currentLocale,
   onLog,
   isLogged,
   disableLinks,
   isLogging,
+  addTitle,
+  editTitle,
 }) {
   const spinner = isLogging ?
     (
@@ -31,6 +32,10 @@ export default function LogButton({
         className={isLogged ?
           dynamicsFont.edit :
           dynamicsFont.callLog
+        }
+        title={isLogged ?
+          editTitle :
+          addTitle
         } />
       {spinner}
     </Button>
@@ -42,12 +47,15 @@ LogButton.propTypes = {
   isLogged: PropTypes.bool,
   disableLinks: PropTypes.bool,
   isLogging: PropTypes.bool,
-  currentLocale: PropTypes.string.isRequired,
+  viewTitle: PropTypes.string,
+  editTitle: PropTypes.string,
 };
 LogButton.defaultProps = {
   className: undefined,
   onLog: undefined,
   isLogged: false,
   disableLinks: false,
   isLogging: false,
+  addTitle: undefined,
+  editTitle: undefined,
 };

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

@@ -0,0 +1,9 @@
+export default {
+  addLog: 'Log',
+  editLog: 'Edit Log',
+  viewDetails: 'View Details',
+  addEntity: 'Create New',
+  call: 'Call',
+  conversation: 'Conversation',
+  groupConversation: 'Group Conversation',
+};

src/components/MessageItem/i18n/index.js

@@ -0,0 +1,4 @@
+import I18n from 'ringcentral-integration/lib/I18n';
+import loadLocale from './loadLocale';
+
+export default new I18n(loadLocale);

src/components/MessageItem/i18n/loadLocale.js

@@ -0,0 +1 @@
+/* loadLocale */

src/components/MessageItem/index.js

@@ -5,16 +5,21 @@ import ContactDisplay from '../ContactDisplay';
 import ActionMenu from '../ActionMenu';
 import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
 import styles from './styles.scss';
+import i18n from './i18n';
 
 function ConversationIcon({
   group,
+  conversationTitle,
+  groupConversationTitle,
 }) {
+  const title = group ? groupConversationTitle : conversationTitle;
   return (
     <div className={styles.conversationIcon}>
       <span
         className={classnames(
           group ? dynamicsFont.groupConversation : dynamicsFont.composeText
-        )} />
+        )}
+        title={title}/>
     </div>
   );
 }
@@ -214,7 +219,11 @@ export default class MessageItem extends Component {
         )}
         onClick={this.showConversationDetail}
       >
-        <ConversationIcon group={correspondents.length > 1} />
+        <ConversationIcon
+          group={correspondents.length > 1}
+          conversationTitle={i18n.getString('conversation', currentLocale)}
+          groupConversationTitle={i18n.getString('groupConversation', currentLocale)}
+        />
         <ContactDisplay
           className={classnames(
             styles.contactDisplay,
@@ -249,6 +258,11 @@ export default class MessageItem extends Component {
           isLogging={isLogging || this.state.isLogging}
           isLogged={conversationMatches.length > 0}
           isCreating={this.state.isCreating}
+          addLogTitle={i18n.getString('addLog', currentLocale)}
+          editLogTitle={i18n.getString('editLog', currentLocale)}
+          callTitle={i18n.getString('call', currentLocale)}
+          createEntityTitle={i18n.getString('addEntity', currentLocale)}
+          viewEntityTitle={i18n.getString('viewDetails', currentLocale)}
           stopPropagation
         />
       </div>