Enhance conversation ui (#142)

* enhance conversation ui

* show selected matched name

* support hot key on recipients input

Author: embbnux

src/components/ComposeTextPanel/index.js

@@ -57,20 +57,6 @@ class ComposeTextPanel extends Component {
       this.props.cleanTypingToNumber();
     };
 
-    this.onReceiverInputKeyDown = (e) => {
-      if (e.key === ',' || e.key === ';' || e.key === 'Enter') {
-        e.preventDefault();
-        if (this.props.typingToNumber.length === 0) {
-          return;
-        }
-        this.props.addToNumber({
-          name: this.props.typingToNumber,
-          phoneNumber: this.props.typingToNumber,
-        });
-        this.props.cleanTypingToNumber();
-      }
-    };
-
     this.onReceiverInputKeyUp = (e) => {
       this.props.searchContact(e.currentTarget.value);
     };
@@ -156,7 +142,6 @@ class ComposeTextPanel extends Component {
               removeFromRecipients={this.removeFromRecipients}
               searchContactList={this.props.searchContactList}
               onKeyUp={this.onReceiverInputKeyUp}
-              onKeyDown={this.onReceiverInputKeyDown}
               formatContactPhone={this.props.formatContactPhone}
             />
           </div>

src/components/ContactDropdownList/index.js

@@ -5,8 +5,12 @@ import styles from './styles.scss';
 import phoneTypes from '../../lib/phoneTypes';
 
 function ContactItem(props) {
+  const className = classnames(
+    styles.contactItem,
+    props.active ? styles.active : null,
+  );
   return (
-    <li className={styles.contactItem}>
+    <li className={className} onMouseOver={props.onHover}>
       <a href="#select-contact-item" onClick={props.onClick}>
         <div>
           <span className={styles.name}>
@@ -38,10 +42,16 @@ ContactItem.propTypes = {
   entityType: PropTypes.string.isRequired,
   phoneType: PropTypes.string.isRequired,
   phoneNumber: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  onHover: PropTypes.func.isRequired,
 };
 
 function ContactDropdownList(props) {
-  const items = props.items;
+  let items = props.items;
+  // MAX 5
+  if (items.length > 5) {
+    items = items.slice(0, 5);
+  }
   let listClassName = null;
   let hiddenClassName = null;
   if (items.length === 0 || !props.visibility) {
@@ -51,13 +61,15 @@ function ContactDropdownList(props) {
   return (
     <ul className={listClassName}>
       {
-        items.map(item => (
+        items.map((item, index) => (
           <ContactItem
+            active={props.selectedIndex === index}
             name={item.name}
             entityType={item.entityType}
             phoneType={item.phoneType}
             phoneNumber={item.phoneNumber}
             formatContactPhone={props.formatContactPhone}
+            onHover={() => props.setSelectedIndex(index)}
             onClick={() => props.addToRecipients({
               name: item.name,
               phoneNumber: item.phoneNumber,
@@ -81,6 +93,8 @@ ContactDropdownList.propTypes = {
   })).isRequired,
   formatContactPhone: PropTypes.func.isRequired,
   addToRecipients: PropTypes.func.isRequired,
+  active: PropTypes.bool.isRequired,
+  setSelectedIndex: PropTypes.func.isRequired,
 };
 
 ContactDropdownList.defaultProps = {

src/components/ContactDropdownList/styles.scss

@@ -27,7 +27,7 @@
   border: 1px solid #efefef;
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0,0,0,.175);
-  max-height: 200px;
+  max-height: 265px;
   overflow-y: auto;
   overflow-x: hidden;
 
@@ -40,7 +40,7 @@
     }
   }
 
-  li:hover {
+  li.active {
     color: $rc-blue;
 
     .name {

src/components/ConversationMessageList/index.js

@@ -7,6 +7,7 @@ function MessageItem(props) {
   const messageClassName = classnames(
     styles.messageBody,
     props.direction === 'Outbound' ? styles.outbound : styles.inbound,
+    props.subject && props.subject.length > 500 ? styles.big : null,
   );
   const fromName = props.senderName && props.direction === 'Inbound' ?
     (

src/components/ConversationMessageList/styles.scss

@@ -42,7 +42,8 @@
   position: relative;
   display: inline-block;
   margin-bottom: 10px;
-  width: 60%;
+  min-width: 50%;
+  max-width: 60%;
   text-align: left;
   word-break: break-word;
   hyphens: auto;
@@ -115,6 +116,11 @@
   }
 }
 
+.messageBody.big {
+  width: 85%;
+  max-width: 85%;
+}
+
 .clear {
   clear: both;
   margin: 0;

src/components/ConversationPanel/styles.scss

@@ -86,7 +86,9 @@
 }
 
 .submitButton:disabled {
-  background-color: #888888!important;
+  background-color: #fff!important;
+  border: #c9c9c9 1px solid;
+  color: #a9a9a9;
 }
 
 .spinerContainer {

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

@@ -1,3 +1,3 @@
 export default {
-  selectMatchedName: 'Select a matching record'
+  selectMatchedName: 'Select a record'
 };

src/components/RecipientHeader/index.js

@@ -1,6 +1,8 @@
 import React, { PropTypes, Component } from 'react';
 import classnames from 'classnames';
 
+import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
+
 import styles from './styles.scss';
 import i18n from './i18n';
 
@@ -27,6 +29,17 @@ function MatchedNameList(props) {
   const matchedNames = props.matchedNames;
   return (
     <div className={props.className}>
+      {
+        this.props.isSelected ?
+          <RecipientName
+            name={i18n.getString('selectMatchedName', this.props.currentLocale)}
+            className={styles.noClick}
+            onClick={
+              () => null
+            }
+          /> :
+          null
+      }
       {
         matchedNames.map(matchedName => (
           <RecipientName
@@ -43,6 +56,8 @@ function MatchedNameList(props) {
 }
 
 MatchedNameList.propTypes = {
+  currentLocale: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
   className: PropTypes.string.isRequired,
   matchedNames: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
@@ -95,12 +110,14 @@ class RecipientHeader extends Component {
     }
     const phoneNumber = recipient.phoneNumber || recipient.extensionNumber;
     let matchedNames = this.context.getMatcherContactList(phoneNumber);
-    let defaultRecipient = i18n.getString('selectMatchedName', this.props.currentLocale);
+    let defaultRecipient = matchedNames.join('&');
     // if it have old data
+    let isSelected = false;
     if (recipient.matchedNames && recipient.matchedNames[0]) {
       const firstMatchedName = recipient.matchedNames[0];
       const isFind = matchedNames.find(name => name === firstMatchedName);
       if (isFind) {
+        isSelected = true;
         defaultRecipient = firstMatchedName;
       }
       const oldMatchedNames = recipient.matchedNames.slice().sort();
@@ -115,11 +132,16 @@ class RecipientHeader extends Component {
           onClick={this.toggleDropdown}
           className={styles.dropdownButton}
         />
-        {this.props.dropdownIcon}
+        <i
+          className={classnames(dynamicsFont.arrow, styles.dropdownIcon)}
+          onClick={this.toggleDropdown}
+        />
         <MatchedNameList
           matchedNames={matchedNames}
           className={dropdownClass}
           setDefaultMatchedName={this.setDefaultMatchedName}
+          isSelected={isSelected}
+          currentLocale={this.props.currentLocale}
         />
       </div>
     );
@@ -134,7 +156,6 @@ RecipientHeader.propTypes = {
     matchedNames: PropTypes.array,
   }).isRequired,
   currentLocale: PropTypes.string.isRequired,
-  dropdownIcon: PropTypes.node.isRequired,
   dropdownClassName: PropTypes.string.isRequired,
 };
 

src/components/RecipientHeader/styles.scss

@@ -26,6 +26,13 @@
   }
 }
 
+.noClick {
+  cursor: default;
+  &:hover {
+    background: transparent;
+  }
+}
+
 .active {
   display: block!important;
 }
@@ -37,3 +44,11 @@
     background: transparent;
   }
 }
+
+.dropdownIcon {
+  font-size: 12px;
+  position: absolute;
+  top: 12px;
+  right: 0;
+  cursor: pointer;
+}

src/components/RecipientsHeader/index.js

@@ -75,17 +75,13 @@ class RecipientsHeader extends Component {
     if (recipients.length === 0) {
       return null;
     }
-    const dropdownIcon = (
-      <i className={classnames(dynamicsFont.arrow, styles.dropdownIcon)} />
-    );
     let dropdownClass = styles.dropdownList;
     if (recipients.length === 1) {
       return (
         <h1 className={styles.container}>
           <RecipientHeader
             recipient={recipients[0]}
             currentLocale={this.props.currentLocale}
-            dropdownIcon={dropdownIcon}
             dropdownClassName={dropdownClass}
           />
         </h1>
@@ -101,7 +97,10 @@ class RecipientsHeader extends Component {
           name={this.context.getRecipientName(defaultRecipient)}
           onClick={this.toggleDropdown}
         />
-        {dropdownIcon}
+        <i
+          className={classnames(dynamicsFont.arrow, styles.dropdownIcon)}
+          onClick={this.toggleDropdown}
+        />
         <RecipientList
           recipients={recipients}
           className={dropdownClass}