UI tweaking for message forwarding

src/widgets/forward-dialog.jsx

@@ -1,15 +1,13 @@
 // Forward Menu: message forwarding popup/dropdown menu.
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import Tinode from 'tinode-sdk';
 
 import ContactList from './contact-list.jsx';
 import SearchContacts from './search-contacts.jsx';
 
-import HashNavigation from '../lib/navigation.js';
-import { REM_SIZE } from '../config.js';
-
-export default class ForwardMenu extends React.Component {
+export default class ForwardDialog extends React.Component {
   constructor(props) {
     super(props);
 
@@ -17,36 +15,17 @@ export default class ForwardMenu extends React.Component {
       query: null
     };
 
-    this.selfRef = React.createRef();
-    this.handlePageClick = this.handlePageClick.bind(this);
     this.handleEscapeKey = this.handleEscapeKey.bind(this);
+    this.handleClose = this.handleClose.bind(this);
 
     this.handleSearchContacts = this.handleSearchContacts.bind(this);
     this.handleContactSelected = this.handleContactSelected.bind(this);
   }
 
   componentDidMount() {
-    document.addEventListener('mousedown', this.handlePageClick, false);
-    document.addEventListener('keyup', this.handleEscapeKey, false);
-
     this.props.onInitFind();
   }
 
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handlePageClick, false);
-    document.removeEventListener('keyup', this.handleEscapeKey, false);
-  }
-
-  handlePageClick(e) {
-    if (this.selfRef.current.contains(e.target)) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    // Not forwarding the message.
-    this.props.hide(false);
-  }
-
   handleEscapeKey(e) {
     if (e.keyCode === 27) {
       // Not forwarding the message.
@@ -54,13 +33,18 @@ export default class ForwardMenu extends React.Component {
     }
   }
 
+  handleClose(e) {
+    e.preventDefault();
+    this.props.hide(false);
+  }
+
   handleSearchContacts(query) {
     this.setState({ query: Tinode.isNullValue(query) ? null : query });
     this.props.onSearchContacts(query);
   }
 
   handleContactSelected(uid) {
-    this.props.onCreateTopic(uid);
+    this.props.onTopicSelected(uid);
     this.props.hide(true);
   }
 
@@ -68,26 +52,15 @@ export default class ForwardMenu extends React.Component {
     let contacts = this.state.query != null ? this.props.searchResults : this.props.contacts;
     // Filter out contacts without a 'W' permission.
     contacts = contacts.filter((c) => { return c.acs.isJoiner() && c.acs.isWriter(); });
-    // Ensure that menu is inside the app-container.
-    const hSize = 20 * REM_SIZE;
-    // Total vertical size is rougly 4rem x (#contacts + 1 search box).
-    const vSize = REM_SIZE * 4 * (1 + contacts.length);
-    const left = (this.props.bounds.right - this.props.clickAt.x < hSize) ?
-        (this.props.clickAt.x - this.props.bounds.left - hSize) :
-        (this.props.clickAt.x - this.props.bounds.left);
-    const top = (this.props.bounds.bottom - this.props.clickAt.y < vSize) ?
-        Math.max(this.props.clickAt.y - this.props.bounds.top - vSize, this.props.bounds.top + 70) :
-        (this.props.clickAt.y - this.props.bounds.top);
-
-    const style = {
-      left: left + 'px',
-      top: top + 'px',
-      maxWidth: hSize + 'px'
-    };
 
     return (
-      <div className="forward-menu" style={style} ref={this.selfRef}>
-        <div className="flex-column">
+      <div className="alert-container">
+        <div className="forward-dialog">
+          <div className="title with-control">
+            <div><FormattedMessage id="forward_to" defaultMessage="Forward to"
+              desription="Title of the contact selector dialog when forwarding a message" /></div>
+            <div><a href="#" onClick={this.handleClose}><i className="material-icons">close</i></a></div>
+          </div>
           <SearchContacts
             onSearchContacts={this.handleSearchContacts} />
           <ContactList

src/widgets/search-contacts.jsx

@@ -64,9 +64,10 @@ export default class SearchContacts extends React.PureComponent {
               value={this.state.search} onChange={this.handleSearchChange}
               onKeyDown={this.handleKeyDown} required autoFocus />
           }</FormattedMessage>
-          <a href="#" onClick={this.handleClear}>
-            <i className="material-icons">close</i>
-          </a>
+          {this.state.search ?
+            <a href="#" onClick={this.handleClear}><i className="material-icons">highlight_off</i></a>
+            :
+            <span><i className="material-icons">&nbsp;</i></span>}
         </div>
       </div>
     );