From 8926992feb6549935c8f7a0d12a533df5d01962c Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 19 Jun 2019 14:45:01 +0100
Subject: [PATCH] Add react button to action bar

This adds a (temporarily non-functional) react button to the action bar.

Part of https://github.com/vector-im/riot-web/issues/9753
---
 res/css/views/messages/_MessageActionBar.scss     |  4 ++++
 res/img/react.svg                                 | 10 ++++++++++
 src/components/views/messages/MessageActionBar.js | 13 +++++++++++++
 src/i18n/strings/en_EN.json                       |  1 +
 4 files changed, 28 insertions(+)
 create mode 100644 res/img/react.svg

diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 685c2bb018..7ac0e95e81 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -67,6 +67,10 @@ limitations under the License.
     background-color: $message-action-bar-fg-color;
 }
 
+.mx_MessageActionBar_reactButton::after {
+    mask-image: url('$(res)/img/react.svg');
+}
+
 .mx_MessageActionBar_replyButton::after {
     mask-image: url('$(res)/img/reply.svg');
 }
diff --git a/res/img/react.svg b/res/img/react.svg
new file mode 100644
index 0000000000..dd23c41c2c
--- /dev/null
+++ b/res/img/react.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 18 17">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#2E2F32" fill-rule="nonzero" d="M13.6 14.5a7.875 7.875 0 1 1 2.183-3h-.818a7.125 7.125 0 1 0-2.62 3H13.6z"/>
+        <g stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round" stroke-width=".75">
+            <path d="M11.5 13h6M14.5 10v6"/>
+        </g>
+        <path stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M5.5 10s1.125 1.5 3 1.5 3-1.5 3-1.5"/>
+        <path stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.25 6.25h.008M10.75 6.25h.008"/>
+    </g>
+</svg>
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 80f0ba538c..3fb82febce 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -131,6 +131,16 @@ export default class MessageActionBar extends React.PureComponent {
         return SettingsStore.isFeatureEnabled("feature_message_editing");
     }
 
+    renderReactButton() {
+        if (!this.isReactionsEnabled()) {
+            return null;
+        }
+
+        return <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
+            title={_t("React")}
+        />;
+    }
+
     renderAgreeDimension() {
         if (!this.isReactionsEnabled()) {
             return null;
@@ -160,12 +170,14 @@ export default class MessageActionBar extends React.PureComponent {
     }
 
     render() {
+        let reactButton;
         let agreeDimensionReactionButtons;
         let likeDimensionReactionButtons;
         let replyButton;
         let editButton;
 
         if (isContentActionable(this.props.mxEvent)) {
+            reactButton = this.renderReactButton();
             agreeDimensionReactionButtons = this.renderAgreeDimension();
             likeDimensionReactionButtons = this.renderLikeDimension();
             replyButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
@@ -181,6 +193,7 @@ export default class MessageActionBar extends React.PureComponent {
         }
 
         return <div className="mx_MessageActionBar">
+            {reactButton}
             {agreeDimensionReactionButtons}
             {likeDimensionReactionButtons}
             {replyButton}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3edaaf6241..9564c45172 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -930,6 +930,7 @@
     "Error decrypting audio": "Error decrypting audio",
     "Agree or Disagree": "Agree or Disagree",
     "Like or Dislike": "Like or Dislike",
+    "React": "React",
     "Reply": "Reply",
     "Edit": "Edit",
     "Options": "Options",