Implement Rich Quoting/Replies

src/components/views/context_menus/MessageContextMenu.js

@@ -16,15 +16,16 @@ limitations under the License.
 
 'use strict';
 
-const React = require('react');
+import React from 'react';
 
-const MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-const dis = require('matrix-react-sdk/lib/dispatcher');
-const sdk = require('matrix-react-sdk');
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import dis from 'matrix-react-sdk/lib/dispatcher';
+import sdk from 'matrix-react-sdk';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-const Modal = require('matrix-react-sdk/lib/Modal');
-const Resend = require("matrix-react-sdk/lib/Resend");
+import Modal from 'matrix-react-sdk/lib/Modal';
+import Resend from "matrix-react-sdk/lib/Resend";
 import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
+import {makeEventPermalink} from 'matrix-react-sdk/lib/matrix-to';
 
 module.exports = React.createClass({
     displayName: 'MessageContextMenu',
@@ -107,15 +108,14 @@ module.exports = React.createClass({
             onFinished: (proceed) => {
                 if (!proceed) return;
 
-                MatrixClientPeg.get().redactEvent(
-                    this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
-                ).catch(function(e) {
+                const cli = MatrixClientPeg.get();
+                cli.redactEvent(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()).catch(function(e) {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     // display error message stating you couldn't delete this.
                     const code = e.errcode || e.statusCode;
                     Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
                         title: _t('Error'),
-                        description: _t('You cannot delete this message. (%(code)s)', {code: code})
+                        description: _t('You cannot delete this message. (%(code)s)', {code}),
                     });
                 }).done();
             },
@@ -138,12 +138,12 @@ module.exports = React.createClass({
 
     onPinClick: function() {
         MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '')
-            .catch(e => {
+            .catch((e) => {
                 // Intercept the Event Not Found error and fall through the promise chain with no event.
                 if (e.errcode === "M_NOT_FOUND") return null;
                 throw e;
             })
-            .then(event => {
+            .then((event) => {
                 const eventIds = (event ? event.pinned : []) || [];
                 if (!eventIds.includes(this.props.mxEvent.getId())) {
                     // Not pinned - add
@@ -153,7 +153,8 @@ module.exports = React.createClass({
                     eventIds.splice(eventIds.indexOf(this.props.mxEvent.getId()), 1);
                 }
 
-                MatrixClientPeg.get().sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
+                const cli = MatrixClientPeg.get();
+                cli.sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
             });
         this.closeMenu();
     },
@@ -177,19 +178,26 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    onReplyClick: function() {
+        dis.dispatch({
+            action: 'quote_event',
+            event: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
     render: function() {
         const eventStatus = this.props.mxEvent.status;
         let resendButton;
         let redactButton;
         let cancelButton;
         let forwardButton;
         let pinButton;
-        let viewSourceButton;
         let viewClearSourceButton;
         let unhidePreviewButton;
-        let permalinkButton;
         let externalURLButton;
         let quoteButton;
+        let replyButton;
 
         if (eventStatus === 'not_sent') {
             resendButton = (
@@ -227,14 +235,14 @@ module.exports = React.createClass({
                 if (this.state.canPin) {
                     pinButton = (
                         <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
-                            {this._isPinned() ? _t('Unpin Message') : _t('Pin Message')}
+                            { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
                         </div>
                     );
                 }
             }
         }
 
-        viewSourceButton = (
+        const viewSourceButton = (
             <div className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
                 { _t('View Source') }
             </div>
@@ -259,10 +267,10 @@ module.exports = React.createClass({
         }
 
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
-        permalinkButton = (
+        const permalinkButton = (
             <div className="mx_MessageContextMenu_field">
-                <a href={ "https://matrix.to/#/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
-                  target="_blank" rel="noopener" onClick={ this.closeMenu }>{ _t('Permalink') }</a>
+                <a href={makeEventPermalink(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId())}
+                  target="_blank" rel="noopener" onClick={this.closeMenu}>{ _t('Permalink') }</a>
             </div>
         );
 
@@ -272,32 +280,41 @@ module.exports = React.createClass({
                     { _t('Quote') }
                 </div>
             );
+
+            if (SettingsStore.isFeatureEnabled("feature_rich_quoting")) {
+                replyButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onReplyClick}>
+                        { _t('Reply') }
+                    </div>
+                );
+            }
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        if( typeof(this.props.mxEvent.event.content.external_url) === "string") {
-          externalURLButton = (
-              <div className="mx_MessageContextMenu_field">
-                  <a href={ this.props.mxEvent.event.content.external_url }
-                    rel="noopener" target="_blank" onClick={ this.closeMenu }>{ _t('Source URL') }</a>
-              </div>
-          );
+        if (typeof(this.props.mxEvent.event.content.external_url) === "string") {
+            externalURLButton = (
+                <div className="mx_MessageContextMenu_field">
+                    <a href={this.props.mxEvent.event.content.external_url}
+                       rel="noopener" target="_blank" onClick={this.closeMenu}>{ _t('Source URL') }</a>
+                </div>
+            );
         }
 
 
         return (
             <div>
-                {resendButton}
-                {redactButton}
-                {cancelButton}
-                {forwardButton}
-                {pinButton}
-                {viewSourceButton}
-                {viewClearSourceButton}
-                {unhidePreviewButton}
-                {permalinkButton}
-                {quoteButton}
-                {externalURLButton}
+                { resendButton }
+                { redactButton }
+                { cancelButton }
+                { forwardButton }
+                { pinButton }
+                { viewSourceButton }
+                { viewClearSourceButton }
+                { unhidePreviewButton }
+                { permalinkButton }
+                { quoteButton }
+                { replyButton }
+                { externalURLButton }
             </div>
         );
     },

src/i18n/strings/en_EN.json

@@ -217,5 +217,6 @@
     "Contributing code to Matrix and Riot": "Contributing code to Matrix and Riot",
     "Dev chat for the Riot/Web dev team": "Dev chat for the Riot/Web dev team",
     "Dev chat for the Dendrite dev team": "Dev chat for the Dendrite dev team",
-    "Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators"
+    "Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators",
+    "Reply": "Reply"
 }

src/skins/vector/css/_components.scss

@@ -39,6 +39,7 @@
 @import "./matrix-react-sdk/views/elements/_RichText.scss";
 @import "./matrix-react-sdk/views/elements/_RoleButton.scss";
 @import "./matrix-react-sdk/views/elements/_ToolTipButton.scss";
+@import "./matrix-react-sdk/views/elements/_Quote.scss";
 @import "./matrix-react-sdk/views/groups/_GroupPublicityToggle.scss";
 @import "./matrix-react-sdk/views/groups/_GroupRoomList.scss";
 @import "./matrix-react-sdk/views/groups/_GroupUserSettings.scss";
@@ -70,6 +71,7 @@
 @import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
 @import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
 @import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
+@import "./matrix-react-sdk/views/rooms/_QuotePreview.scss";
 @import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
 @import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
 @import "./matrix-react-sdk/views/voip/_CallView.scss";

src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss

@@ -0,0 +1,26 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Quote .mx_DateSeparator {
+    font-size: 1em !important;
+    margin-bottom: 0;
+    padding-bottom: 1px;
+    bottom: -5px;
+}
+
+.mx_Quote_show {
+    cursor: pointer;
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss

@@ -1,7 +1,7 @@
 .mx_Autocomplete {
     position: absolute;
     bottom: 0;
-    z-index: 1000;
+    z-index: 1001;
     width: 100%;
     border: 1px solid $primary-hairline-color;
     background: $primary-bg-color;
@@ -90,3 +90,4 @@
 .mx_Autocomplete_Completion_description {
     color: gray;
 }
+

src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss

@@ -109,7 +109,7 @@ limitations under the License.
 /* this is used for the tile for the event which is selected via the URL.
  * TODO: ultimately we probably want some transition on here.
  */
-.mx_EventTile_selected .mx_EventTile_line {
+.mx_EventTile_selected > .mx_EventTile_line {
     border-left: $accent-color 5px solid;
     padding-left: 60px;
     background-color: $event-selected-color;
@@ -209,7 +209,7 @@ limitations under the License.
     visibility: visible;
 }
 
-.mx_EventTile_selected .mx_MessageTimestamp {
+.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
     left: 3px;
     width: auto;
 }

src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss

@@ -0,0 +1,35 @@
+.mx_QuotePreview {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    border: 1px solid $primary-hairline-color;
+    background: $primary-bg-color;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_QuotePreview_section {
+    border-bottom: 1px solid $primary-hairline-color;
+}
+
+.mx_QuotePreview_header {
+    margin: 12px;
+    color: $primary-fg-color;
+    font-weight: 400;
+    opacity: 0.4;
+}
+
+.mx_QuotePreview_title {
+    float: left;
+}
+
+.mx_QuotePreview_cancel {
+    float: right;
+}
+
+.mx_QuotePreview_clear {
+    clear: both;
+}