forwarding UI prettier and more usable

css/base.css

@@ -2535,6 +2535,13 @@ ul.tabbar li.active > a {
   content: '';
 }
 
+#send-message-panel #reply-quote-preview {
+  width: 100%;
+}
+#send-message-panel #reply-quote-preview .reply-quote {
+  margin-bottom: 0.35rem;
+}
+
 .mention {
   font-weight: bolder;
 }

src/config.js

@@ -95,6 +95,8 @@ export const MESSAGE_PREVIEW_LENGTH = 80;
 
 // Length of a quote in quoted reply (for outgoing messages).
 export const QUOTED_REPLY_LENGTH = 30;
+// Length of a preview of a forwarded message.
+export const FORWARDED_PREVIEW_LENGTH = 128;
 
 // Link for "Contact Us".
 export const LINK_CONTACT_US = 'email:support@tinode.co';

src/views/messages-view.jsx

@@ -216,12 +216,12 @@ class MessagesView extends React.Component {
       const topic = nextProps.tinode.getTopic(nextProps.topic);
 
       let reply = null;
-      if (nextProps.forwardedMessage) {
+      if (nextProps.forwardMessage) {
         // We are forwarding a message. Show preview.
-        const preview = nextProps.forwardedMessage.preview;
+        const preview = nextProps.forwardMessage.preview;
         reply = {
           content: preview,
-          forwarded: nextProps.forwardedMessage.head.forwarded,
+          forwarded: nextProps.forwardMessage.head.forwarded,
           seq: null
         };
       }
@@ -677,10 +677,10 @@ class MessagesView extends React.Component {
   // sendMessage sends the message with an optional subscription to topic first.
   sendMessage(msg, uploadCompletionPromise, uploader) {
     let head;
-    if (this.props.forwardedMessage) {
+    if (this.props.forwardMessage) {
       // We are forwarding a message.
-      msg = this.props.forwardedMessage.msg;
+      msg = this.props.forwardMessage.msg;
-      head = this.props.forwardedMessage.head;
+      head = this.props.forwardMessage.head;
       this.handleCancelReply();
     } else if (this.state.reply && this.state.reply.content) {
       // We are replying to a message in this topic.
@@ -844,6 +844,8 @@ class MessagesView extends React.Component {
   }
 
   handlePickReply(seq, content, forwarded, senderId, senderName) {
+    console.log("handlePickReply", seq, content, forwarded, senderId, senderName, new Error("stacktrace"));
+
     this.setState({reply: null});
 
     if (!seq || !content) {
@@ -1105,12 +1107,12 @@ class MessagesView extends React.Component {
               :
               <SendMessage
                 tinode={this.props.tinode}
-                noInput={this.props.forwardedMessage != null}
+                noInput={!!this.props.forwardMessage}
                 disabled={!this.state.isWriter}
                 onKeyPress={this.sendKeyPress}
                 onSendMessage={this.sendMessage}
-                onAttachFile={this.props.forwardedMessage == null ? this.handleAttachFile : null}
+                onAttachFile={this.props.forwardMessage ? null : this.handleAttachFile}
-                onAttachImage={this.props.forwardedMessage == null ? this.handleAttachImage : null}
+                onAttachImage={this.props.forwardMessage ? null : this.handleAttachImage}
                 onError={this.props.onError}
                 reply={this.state.reply}
                 onQuoteClick={this.handleQuoteClick}

src/views/tinode-web.jsx

@@ -1453,7 +1453,7 @@ class TinodeWeb extends React.Component {
         Tinode.Drafty.forwardedContent(params.content) :
         typeof params.content == 'string' ?
             Tinode.Drafty.init(params.content) : params.content;
-    const preview = Tinode.Drafty.preview(content, QUOTED_REPLY_LENGTH,
+    const preview = Tinode.Drafty.preview(content, FORWARDED_PREVIEW_LENGTH,
                                           undefined, params.forwarded != null);
     const msg = Tinode.Drafty.append(
         Tinode.Drafty.appendLineBreak(
@@ -1644,7 +1644,7 @@ class TinodeWeb extends React.Component {
           <ForwardDialog
             tinode={this.tinode}
             contacts={this.state.chatList}
-            topicSelected={this.props.topicSelected}
+            topicSelected={this.state.topicSelected}
             myUserId={this.state.myUserId}
 
             hide={this.handleHideForwardDialog}
@@ -1752,8 +1752,7 @@ class TinodeWeb extends React.Component {
           serverAddress={this.state.serverAddress}
           applicationVisible={this.state.applicationVisible}
 
-          // Show the forwareded message if the user has selected a topic to forward this message to.
+          forwardMessage={this.state.forwardMessage}
-          forwardedMessage={this.state.forwardMessage && !this.state.forwardMessage.head.forwarded.startsWith(this.stateTopicSelected) ? this.state.forwardMessage : null}
           onCancelForwardMessage={this.handleHideForwardDialog}
 
           errorText={this.state.errorText}

src/widgets/chat-message.jsx

@@ -78,6 +78,7 @@ class BaseChatMessage extends React.PureComponent {
       menuItems.push('menu_item_reply');
       menuItems.push('menu_item_forward');
     }
+
     this.props.showContextMenu({
       seq: this.props.seq,
       content: this.props.content,

src/widgets/context-menu.jsx

@@ -191,9 +191,7 @@ class ContextMenu extends React.Component {
       'menu_item_forward': {
         id: 'menu_item_forward',
         title: formatMessage(messages.forward),
-        handler: (params, errorHandler) => {
+        handler: () => {} /* the action is taken directly in tinode-web */
-          return this.forwardMessage(params, errorHandler);
-        }
       },
       'topic_unmute': {
         id: 'topic_unmute',
@@ -439,12 +437,6 @@ class ContextMenu extends React.Component {
     params.pickReply(params.seq, params.content, params.forwarded, params.userFrom, params.userName, errorHandler);
   }
 
-  forwardMessage(params, errorHandler) {
-    //params.pickReply({ seq: params.seq, content: params.content });
-    //this.props.
-    console.log('forwarding msg ', params);
-  }
-
   render() {
     const menu = [];
     let count = 0;

src/widgets/forward-dialog.jsx

@@ -50,8 +50,11 @@ export default class ForwardDialog extends React.Component {
 
   render() {
     let contacts = this.state.query != null ? this.props.searchResults : this.props.contacts;
-    // Filter out contacts without a 'W' permission.
+    // Filter out contacts without a 'W' or 'J' permissions as well as the current topic.
-    contacts = contacts.filter((c) => { return c.acs.isJoiner() && c.acs.isWriter(); });
+    contacts = contacts.filter((c) => {
+      console.log(c.name, this.props.topicSelected);
+      return (c.name != this.props.topicSelected) && c.acs.isJoiner() && c.acs.isWriter();
+    });
 
     return (
       <div className="alert-container">

src/widgets/send-message.jsx

@@ -177,17 +177,17 @@ class SendMessage extends React.PureComponent {
         formatMessage(messages[this.props.messagePrompt]) :
         formatMessage(messages.type_new_message));
 
+    const quote =
+      (<div id="reply-quote-preview">
+        <div className="cancel">
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
+        </div>
+        {this.state.quote}
+      </div>);
+
     return (
       <div id="send-message-wrapper">
-        {this.state.quote ?
+        {this.state.quote && !this.props.noInput ? quote : null}
-          <div id="reply-quote-preview">
-            <div className="cancel">
-              <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
-            </div>
-            {this.state.quote}
-          </div>
-        :
-        null}
         <div id="send-message-panel">
           {!this.props.disabled ?
             <>
@@ -203,7 +203,7 @@ class SendMessage extends React.PureComponent {
                 :
                 null}
               {this.props.noInput ?
-                <div className="hr thin" /> :
+                (this.state.quote ? quote : <div className="hr thin" />) :
                 <textarea id="sendMessage" placeholder={prompt}
                   value={this.state.message} onChange={this.handleMessageTyping}
                   onKeyPress={this.handleKeyPress}

umd/index.dev.js

@@ -3489,11 +3489,11 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       const topic = nextProps.tinode.getTopic(nextProps.topic);
       let reply = null;
 
-      if (nextProps.forwardedMessage) {
+      if (nextProps.forwardMessage) {
-        const preview = nextProps.forwardedMessage.preview;
+        const preview = nextProps.forwardMessage.preview;
         reply = {
           content: preview,
-          forwarded: nextProps.forwardedMessage.head.forwarded,
+          forwarded: nextProps.forwardMessage.head.forwarded,
           seq: null
         };
       }
@@ -3990,9 +3990,9 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   sendMessage(msg, uploadCompletionPromise, uploader) {
     let head;
 
-    if (this.props.forwardedMessage) {
+    if (this.props.forwardMessage) {
-      msg = this.props.forwardedMessage.msg;
+      msg = this.props.forwardMessage.msg;
-      head = this.props.forwardedMessage.head;
+      head = this.props.forwardMessage.head;
       this.handleCancelReply();
     } else if (this.state.reply && this.state.reply.content) {
       head = {
@@ -4145,6 +4145,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   }
 
   handlePickReply(seq, content, forwarded, senderId, senderName) {
+    console.log("handlePickReply", seq, content, forwarded, senderId, senderName, new Error("stacktrace"));
     this.setState({
       reply: null
     });
@@ -4441,12 +4442,12 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           onAction: this.handleNewChatAcceptance
         }) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_13__["default"], {
           tinode: this.props.tinode,
-          noInput: this.props.forwardedMessage != null,
+          noInput: !!this.props.forwardMessage,
           disabled: !this.state.isWriter,
           onKeyPress: this.sendKeyPress,
           onSendMessage: this.sendMessage,
-          onAttachFile: this.props.forwardedMessage == null ? this.handleAttachFile : null,
+          onAttachFile: this.props.forwardMessage ? null : this.handleAttachFile,
-          onAttachImage: this.props.forwardedMessage == null ? this.handleAttachImage : null,
+          onAttachImage: this.props.forwardMessage ? null : this.handleAttachImage,
           onError: this.props.onError,
           reply: this.state.reply,
           onQuoteClick: this.handleQuoteClick,
@@ -6951,7 +6952,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     }) : null, this.state.forwardDialogVisible ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_forward_dialog_jsx__WEBPACK_IMPORTED_MODULE_7__["default"], {
       tinode: this.tinode,
       contacts: this.state.chatList,
-      topicSelected: this.props.topicSelected,
+      topicSelected: this.state.topicSelected,
       myUserId: this.state.myUserId,
       hide: this.handleHideForwardDialog,
       onInitFind: this.tnInitFind,
@@ -7052,7 +7053,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       serverVersion: this.state.serverVersion,
       serverAddress: this.state.serverAddress,
       applicationVisible: this.state.applicationVisible,
-      forwardedMessage: this.state.forwardMessage && !this.state.forwardMessage.head.forwarded.startsWith(this.stateTopicSelected) ? this.state.forwardMessage : null,
+      forwardMessage: this.state.forwardMessage,
       onCancelForwardMessage: this.handleHideForwardDialog,
       errorText: this.state.errorText,
       errorLevel: this.state.errorLevel,
@@ -8911,9 +8912,7 @@ class ContextMenu extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
       'menu_item_forward': {
         id: 'menu_item_forward',
         title: formatMessage(messages.forward),
-        handler: (params, errorHandler) => {
+        handler: () => {}
-          return this.forwardMessage(params, errorHandler);
-        }
       },
       'topic_unmute': {
         id: 'topic_unmute',
@@ -9145,10 +9144,6 @@ class ContextMenu extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
     params.pickReply(params.seq, params.content, params.forwarded, params.userFrom, params.userName, errorHandler);
   }
 
-  forwardMessage(params, errorHandler) {
-    console.log('forwarding msg ', params);
-  }
-
   render() {
     const menu = [];
     let count = 0;
@@ -9738,7 +9733,8 @@ class ForwardDialog extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
   render() {
     let contacts = this.state.query != null ? this.props.searchResults : this.props.contacts;
     contacts = contacts.filter(c => {
-      return c.acs.isJoiner() && c.acs.isWriter();
+      console.log(c.name, this.props.topicSelected);
+      return c.name != this.props.topicSelected && c.acs.isJoiner() && c.acs.isWriter();
     });
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "alert-container"
@@ -11842,9 +11838,7 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       formatMessage
     } = this.props.intl;
     const prompt = this.props.disabled ? formatMessage(messages.messaging_disabled) : this.props.messagePrompt ? formatMessage(messages[this.props.messagePrompt]) : formatMessage(messages.type_new_message);
-    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    const quote = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      id: "send-message-wrapper"
-    }, this.state.quote ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "reply-quote-preview"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "cancel"
@@ -11856,7 +11850,10 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       }
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons gray"
-    }, "close"))), this.state.quote) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }, "close"))), this.state.quote);
+    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      id: "send-message-wrapper"
+    }, this.state.quote && !this.props.noInput ? quote : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "send-message-panel"
     }, !this.props.disabled ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, this.props.onAttachFile ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",
@@ -11876,7 +11873,7 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       title: "Attach file"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons secondary"
-    }, "attach_file"))) : null, this.props.noInput ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }, "attach_file"))) : null, this.props.noInput ? this.state.quote ? quote : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "hr thin"
     }) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", {
       id: "sendMessage",