From 10c6f24a8325376c62db690e35f00c0949e46b38 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 10 Dec 2017 12:46:12 +0000
Subject: [PATCH] CSS and Context Menu tweaks for Rich Quoting/Replies

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 .../views/context_menus/MessageContextMenu.js |  4 +--
 .../views/rooms/_Autocomplete.scss            | 29 +++++++++++++++++--
 .../views/rooms/_EventTile.scss               |  4 +--
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index d8f9a4daa2..dfff031fc9 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -171,8 +171,8 @@ module.exports = React.createClass({
 
     onQuoteClick: function() {
         dis.dispatch({
-            action: 'quote',
-            text: this.props.eventTileOps.getInnerText(),
+            action: 'quote_event',
+            event: this.props.mxEvent,
         });
         this.closeMenu();
     },
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
index 6bf3f3b60a..8ce81c0dea 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
@@ -1,4 +1,17 @@
 .mx_Autocomplete {
+    position: absolute;
+    bottom: 0;
+    z-index: 1001;
+    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_Quoting {
     position: absolute;
     bottom: 0;
     z-index: 1000;
@@ -11,7 +24,7 @@
     overflow: auto
 }
 
-.mx_Autocomplete_ProviderSection {
+.mx_Autocomplete_ProviderSection, .mx_Quoting_section {
     border-bottom: 1px solid $primary-hairline-color;
 }
 
@@ -74,13 +87,25 @@
     outline: none;
 }
 
-.mx_Autocomplete_provider_name {
+.mx_Autocomplete_provider_name, .mx_Quoting_header {
     margin: 12px;
     color: $primary-fg-color;
     font-weight: 400;
     opacity: 0.4;
 }
 
+.mx_Quoting_title {
+    float: left;
+}
+
+.mx_Quoting_cancel {
+    float: right;
+}
+
+.mx_Quoting_clear {
+    clear: both;
+}
+
 /* styling for common completion elements */
 .mx_Autocomplete_Completion_subtitle {
     font-style: italic;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index cfc46e85ab..b4a4242025 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/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;
 }