From 53b590f55e57031abf7c006058146a0ab0ed382b Mon Sep 17 00:00:00 2001
From: Richard Lewis <richard@smetco.co.uk>
Date: Wed, 10 Jan 2018 20:27:43 +0000
Subject: [PATCH] Add stickers popover.

---
 package.json                                  |  1 +
 src/components/views/rooms/MessageComposer.js | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 943c443c59..24f5e3ef58 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "react-dnd-html5-backend": "^2.1.2",
     "react-dom": "^15.4.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
+    "react-simple-popover": "^0.2.2",
     "sanitize-html": "^1.14.1",
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 84091e8a68..64dd6cf4ba 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -23,7 +23,7 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import Autocomplete from './Autocomplete';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
-
+import Popover from 'react-simple-popover';
 
 export default class MessageComposer extends React.Component {
     constructor(props, context) {
@@ -42,6 +42,7 @@ export default class MessageComposer extends React.Component {
         this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
         this.onInputStateChanged = this.onInputStateChanged.bind(this);
         this.onEvent = this.onEvent.bind(this);
+        this.render = this.render.bind(this);
 
         this.state = {
             autocompleteQuery: '',
@@ -280,15 +281,27 @@ export default class MessageComposer extends React.Component {
                 </div>;
         }
 
-        // Apps
+        // Stickers
         if (this.state.showStickers) {
+            const children = <p>Stickers popover</p>;
             hideStickersButton =
                 <div
                     key="controls_hide_stickers"
                     className="mx_MessageComposer_stickers"
                     onClick={this.onHideStickersClick}
+                    ref='target'
                     title={_t("Hide Stickers")}>
                     <TintableSvg src="img/icons-hide-stickers.svg" width="35" height="35" />
+                    <Popover
+                        placement='top'
+                        container={this.refs.messageComposerInput}
+                        target={this.refs.stickersContainer}
+                        show={this.state.showStickers}
+                        onHide={this.onHideStickersClick}
+                        containerStyle={{}}
+                        style={{borderRadius: '5px'}}
+                        children={children}
+                    />
                 </div>;
         } else {
             showStickersButton =
@@ -300,6 +313,10 @@ export default class MessageComposer extends React.Component {
                     <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />
                 </div>;
         }
+        const stickersContainer = <div ref='stickersContainer' key='stickers'>
+            { showStickersButton }
+            { hideStickersButton }
+        </div>;
 
         const canSendMessages = this.props.room.currentState.maySendMessage(
             MatrixClientPeg.get().credentials.userId);
@@ -346,8 +363,7 @@ export default class MessageComposer extends React.Component {
                 hangupButton,
                 callButton,
                 videoCallButton,
-                showStickersButton,
-                hideStickersButton,
+                stickersContainer,
             );
         } else {
             controls.push(