UI tweaking for message forwarding

css/base.css

@@ -342,27 +342,37 @@ div.alert-container {
   align-items: center;
   width: 100%;
   height: 100%;
-  background: rgba(0,0,0,0.33);
+  background: rgba(240,240,240,0.85);
   z-index: 3;
 }
 div.alert {
+  position: relative;
   background-color: white;
   box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
   padding: 1rem;
-  border-radius: 4px;
+  border-radius: 0.3rem;
   margin: auto 2rem auto 2rem;
-  width: content;
+  width: fit-content;
   min-width: 16rem;
   max-width: 24rem;
 }
-div.alert .title {
+div.alert-container .title {
   color: #2196f3;
   font-size: 1.2rem;
   font-weight: 500;
   width: 100%;
   padding: 0 0 0.35rem 0;
 }
-div.alert .content {
+
+div.alert-container .title.with-control {
+  display: flex;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+  align-items: center;
+  flex: none;
+  justify-content: space-between;
+}
+
+div.alert-container .content {
   padding: 0.5rem 0 0.5rem 0;
 }
 /* END Alert */
@@ -2530,15 +2540,16 @@ ul.tabbar li.active > a {
 }
 
 /* Message forwarding. */
-
+.forward-dialog {
-.forward-menu {
+  position: relative;
-  position: absolute;
-  z-index: 4;
-  max-height: 80%;
-  border-radius: 0.2rem;
-  padding-top: 0.35rem;
-  padding-bottom: 0.35rem;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
-  background-color: white;
   overflow: auto;
+  background-color: white;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+  margin: auto 1rem auto 1rem;
+  width: fit-content;
+  min-width: 16rem;
+  max-width: 24rem;
+  max-height: 80%;
 }

src/i18n/de.json

@@ -1340,5 +1340,11 @@
     "description": "Forward message",
     "missing": true,
     "obsolete": false
+  },
+  "forward_to": {
+    "translation": "",
+    "defaultMessage": "Forward to",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1396,5 +1396,11 @@
     "description": "Forward message",
     "missing": false,
     "obsolete": false
+  },
+  "forward_to": {
+    "translation": "Forward to",
+    "defaultMessage": "Forward to",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1340,5 +1340,11 @@
     "description": "Forward message",
     "missing": true,
     "obsolete": false
+  },
+  "forward_to": {
+    "translation": "",
+    "defaultMessage": "Forward to",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -231,6 +231,9 @@
     "defaultMessage": "Forgot password?",
     "description": "Link to Reset password form"
   },
+  "forward_to": {
+    "defaultMessage": "Forward to"
+  },
   "full_name_prompt": {
     "defaultMessage": "Full name, e.g. John Doe",
     "description": "Input placeholder for person's full name"

src/i18n/ko.json

@@ -1340,5 +1340,11 @@
     "description": "Forward message",
     "missing": true,
     "obsolete": false
+  },
+  "forward_to": {
+    "translation": "",
+    "defaultMessage": "Forward to",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1340,5 +1340,11 @@
     "description": "Forward message",
     "missing": true,
     "obsolete": false
+  },
+  "forward_to": {
+    "translation": "",
+    "defaultMessage": "Forward to",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1340,5 +1340,11 @@
     "description": "Forward message",
     "missing": true,
     "obsolete": false
+  },
+  "forward_to": {
+    "translation": "",
+    "defaultMessage": "Forward to",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1340,5 +1340,11 @@
     "description": "Forward message",
     "missing": true,
     "obsolete": false
+  },
+  "forward_to": {
+    "translation": "",
+    "defaultMessage": "Forward to",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1340,5 +1340,11 @@
     "description": "Forward message",
     "missing": true,
     "obsolete": false
+  },
+  "forward_to": {
+    "translation": "",
+    "defaultMessage": "Forward to",
+    "missing": true,
+    "obsolete": false
   }
 }

src/views/messages-view.jsx

@@ -852,10 +852,9 @@ class MessagesView extends React.Component {
 
     content = forwarded ?
         Drafty.forwardedContent(content) :
-        typeof content == 'string' ?
+        typeof content == 'string' ? Drafty.init(content) : content;
-            Drafty.init(content) : content;
     if (Drafty.isValid(content)) {
-      content = Drafty.preview(content, QUOTED_REPLY_LENGTH, undefined, forwarded != null);
+      content = Drafty.preview(content, QUOTED_REPLY_LENGTH, undefined, !forwarded);
     } else {
       // /!\ invalid content.
       content = Drafty.append(Drafty.init('\u26A0 '),

src/views/tinode-web.jsx

@@ -9,7 +9,7 @@ import Tinode from 'tinode-sdk';
 
 import Alert from '../widgets/alert.jsx';
 import ContextMenu from '../widgets/context-menu.jsx';
-import ForwardMenu from '../widgets/forward-menu.jsx';
+import ForwardDialog from '../widgets/forward-dialog.jsx';
 
 import InfoView from './info-view.jsx';
 import MessagesView from './messages-view.jsx';
@@ -142,8 +142,8 @@ class TinodeWeb extends React.Component {
     this.handleResetPassword = this.handleResetPassword.bind(this);
     this.handleContextMenuAction = this.handleContextMenuAction.bind(this);
 
-    this.handleShowForwardMenu = this.handleShowForwardMenu.bind(this);
+    this.handleShowForwardDialog = this.handleShowForwardDialog.bind(this);
-    this.handleHideForwardMenu = this.handleHideForwardMenu.bind(this);
+    this.handleHideForwardDialog = this.handleHideForwardDialog.bind(this);
 
     this.sendMessageToTopic = this.sendMessageToTopic.bind(this);
   }
@@ -203,9 +203,8 @@ class TinodeWeb extends React.Component {
       contextMenuParams: null,
       contextMenuItems: [],
 
-      forwardMenuVisible: false,
+      forwardDialogVisible: false,
-      forwardMenuBounds: null,
+      forwardDialogClickAt: null,
-      forwardMenuClickAt: null,
       forwardMessage: null,
 
       // Modal alert dialog.
@@ -563,7 +562,7 @@ class TinodeWeb extends React.Component {
       errorLevel: err && err.message ? 'err' : 'warn',
       loginDisabled: false,
       contextMenuVisible: false,
-      forwardMenuVisible: false,
+      forwardDialogVisible: false,
       serverVersion: "no connection"
     });
   }
@@ -1445,7 +1444,7 @@ class TinodeWeb extends React.Component {
     });
   }
 
-  handleShowForwardMenu(params) {
+  handleShowForwardDialog(params) {
     if (this.state.sidePanelSelected == 'newtpk') {
       // If the Find panel is active, close it.
       this.handleSidepanelCancel();
@@ -1466,9 +1465,7 @@ class TinodeWeb extends React.Component {
       forwarded: params.topicName + ':' + params.seq
     };
     this.setState({
-      forwardMenuVisible: true,
+      forwardDialogVisible: true,
-      forwardMenuBounds: this.selfRef.current.getBoundingClientRect(),
-      forwardMenuClickAt: {x: params.x, y: params.y},
       forwardMessage: { head: head, msg: msg, preview: msgPreview }
     });
   }
@@ -1513,11 +1510,9 @@ class TinodeWeb extends React.Component {
     });
   }
 
-  handleHideForwardMenu(keepForwardedMessage) {
+  handleHideForwardDialog(keepForwardedMessage) {
     this.setState({
-      forwardMenuVisible: false,
+      forwardDialogVisible: false,
-      forwardMenuBounds: null,
-      forwardMenuClickAt: null,
       forwardMessage: keepForwardedMessage ? this.state.forwardMessage : null
     });
   }
@@ -1530,7 +1525,7 @@ class TinodeWeb extends React.Component {
         });
       }
     } else if (action == 'menu_item_forward') {
-      this.handleShowForwardMenu(params);
+      this.handleShowForwardDialog(params);
     }
   }
 
@@ -1646,21 +1641,18 @@ class TinodeWeb extends React.Component {
           :
           null
         }
-        {this.state.forwardMenuVisible ?
+        {this.state.forwardDialogVisible ?
-          <ForwardMenu
+          <ForwardDialog
             tinode={this.tinode}
-            bounds={this.state.forwardMenuBounds}
-            clickAt={this.state.forwardMenuClickAt}
-
             contacts={this.state.chatList}
             topicSelected={this.props.topicSelected}
             myUserId={this.state.myUserId}
 
-            hide={this.handleHideForwardMenu}
+            hide={this.handleHideForwardDialog}
             onInitFind={this.tnInitFind}
             searchResults={this.state.searchResults}
             onSearchContacts={this.handleSearchContacts}
-            onCreateTopic={this.handleStartTopicRequest}
+            onTopicSelected={this.handleStartTopicRequest}
           />
           :
           null
@@ -1763,7 +1755,7 @@ class TinodeWeb extends React.Component {
 
           // Show the forwareded message if the user has selected a topic to forward this message to.
           forwardedMessage={this.state.forwardMessage && !this.state.forwardMessage.head.forwarded.startsWith(this.stateTopicSelected) ? this.state.forwardMessage : null}
-          onCancelForwardMessage={this.handleHideForwardMenu}
+          onCancelForwardMessage={this.handleHideForwardDialog}
 
           errorText={this.state.errorText}
           errorLevel={this.state.errorLevel}

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';
+export default class ForwardDialog extends React.Component {
-import { REM_SIZE } from '../config.js';
-
-export default class ForwardMenu 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="alert-container">
-        <div className="flex-column">
+        <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}>
+          {this.state.search ?
-            <i className="material-icons">close</i>
+            <a href="#" onClick={this.handleClear}><i className="material-icons">highlight_off</i></a>
-          </a>
+            :
+            <span><i className="material-icons">&nbsp;</i></span>}
         </div>
       </div>
     );