Move stickers into stand-alone component.

src/components/views/rooms/MessageComposer.js

@@ -23,9 +23,7 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import Autocomplete from './Autocomplete';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
-import Popover, {ArrowContainer} from 'react-tiny-popover';
+import Stickerpack from './Stickerpack';
-import Widgets from '../../../utils/widgets';
-import AppTile from '../elements/AppTile';
 
 export default class MessageComposer extends React.Component {
     constructor(props, context) {
@@ -33,8 +31,6 @@ export default class MessageComposer extends React.Component {
         this.onCallClick = this.onCallClick.bind(this);
         this.onHangupClick = this.onHangupClick.bind(this);
         this.onUploadClick = this.onUploadClick.bind(this);
-        this.onShowStickersClick = this.onShowStickersClick.bind(this);
-        this.onHideStickersClick = this.onHideStickersClick.bind(this);
         this.onUploadFileSelected = this.onUploadFileSelected.bind(this);
         this.uploadFiles = this.uploadFiles.bind(this);
         this.onVoiceCallClick = this.onVoiceCallClick.bind(this);
@@ -46,6 +42,8 @@ export default class MessageComposer extends React.Component {
         this.onEvent = this.onEvent.bind(this);
         this.render = this.render.bind(this);
 
+        //
+
         this.state = {
             autocompleteQuery: '',
             selection: null,
@@ -56,7 +54,6 @@ export default class MessageComposer extends React.Component {
                 wordCount: 0,
             },
             showFormatting: SettingsStore.getValue('MessageComposer.showFormatting'),
-            showStickers: false,
         };
     }
 
@@ -193,14 +190,6 @@ export default class MessageComposer extends React.Component {
         // this._startCallApp(true);
     }
 
-    onShowStickersClick(ev) {
-        this.setState({showStickers: true});
-    }
-
-    onHideStickersClick(ev) {
-        this.setState({showStickers: false});
-    }
-
     onInputContentChanged(content: string, selection: {start: number, end: number}) {
         this.setState({
             autocompleteQuery: content,
@@ -270,7 +259,6 @@ export default class MessageComposer extends React.Component {
         let callButton;
         let videoCallButton;
         let hangupButton;
-        let stickersButton;
 
         // Call buttons
         if (this.props.callState && this.props.callState !== 'ended') {
@@ -289,103 +277,6 @@ export default class MessageComposer extends React.Component {
                 </div>;
         }
 
-        // Stickers
-        const popoverWidth = '300px';
-        const popoverHeight = '300px';
-        // TODO - Add support for stickerpacks from multiple app stores.
-        // Render content from multiple stickerpack sources, each within their own iframe, within the stickerpack UI element.
-        const stickerpackWidget = Widgets.getStickerpackWidgets()[0];
-
-        // Load stickerpack content
-        if (stickerpackWidget && stickerpackWidget.content && stickerpackWidget.content.url) {
-            this.state.stickersContent = <div
-                id='stickersContent'
-                className='mx_StickersContent'
-                style={{
-                    border: 'none',
-                    height: popoverHeight,
-                    width: popoverWidth,
-                }}
-            >
-                <AppTile
-                    id={stickerpackWidget.id}
-                    url={stickerpackWidget.content.url}
-                    name={stickerpackWidget.content.name}
-                    room={this.props.room}
-                    type={stickerpackWidget.content.type}
-                    fullWidth={true}
-                    userId={stickerpackWidget.sender || MatrixClientPeg.get().credentials.userId}
-                    creatorUserId={MatrixClientPeg.get().credentials.userId}
-                    waitForIframeLoad={true}
-                    show={true}
-                    showMenubar={false}
-                />
-            </div>;
-        } else {
-            // Default content to show if stickerpack widget not added
-            this.state.stickersContent = <p>Click here to add your first sitckerpack</p>;
-        }
-
-
-        if (this.state.showStickers) {
-            // Show hide-stickers button
-            stickersButton =
-                <div
-                    id='stickersButton'
-                    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" />
-                </div>;
-        } else {
-            // Show show-stickers button
-            stickersButton =
-                <div
-                    id='stickersButton'
-                    key="constrols_show_stickers"
-                    className="mx_MessageComposer_stickers"
-                    onClick={this.onShowStickersClick}
-                    title={_t("Show Stickers")}>
-                    <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />
-                </div>;
-        }
-
-        // Fall back to default highlight color if we can't compute one from the DOM
-        const highlightColor = document.getElementById('mx_theme_accentColor') ?
-          window.getComputedStyle(document.getElementById('mx_theme_accentColor')).color :
-          '#76CFA6';
-
-        const stickers = <Popover
-            isOpen={this.state.showStickers}
-            position={'top'}
-            padding={1}
-            key='stickersPopover'
-            content={({ position, targetRect, popoverRect }) => (
-                <ArrowContainer
-                    position={position}
-                    targetRect={targetRect}
-                    popoverRect={popoverRect}
-                    arrowColor={highlightColor}
-                    arrowSize={20}
-                >
-                    <div
-                        className='mx_PopoverOuterContainer'
-                        style={{
-                            border: `1px solid ${highlightColor}`,
-                        }}
-                    >
-                        { this.state.stickersContent }
-                    </div>
-                </ArrowContainer>
-            )}
-        >
-            <div id='popoverTarget'>
-                { stickersButton }
-            </div>
-        </Popover>;
-
         const canSendMessages = this.props.room.currentState.maySendMessage(
             MatrixClientPeg.get().credentials.userId);
 
@@ -431,7 +322,7 @@ export default class MessageComposer extends React.Component {
                 hangupButton,
                 callButton,
                 videoCallButton,
-                stickers,
+                <Stickerpack key='stickerpack_controls_button' />,
             );
         } else {
             controls.push(

src/components/views/rooms/Stickerpack.js

@@ -0,0 +1,139 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector 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.
+*/
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import Widgets from '../../../utils/widgets';
+import AppTile from '../elements/AppTile';
+import ContextualMenu from '../../structures/ContextualMenu';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
+
+
+export default class Stickerpack extends React.Component {
+    constructor(props) {
+        super(props);
+        this.onShowStickersClick = this.onShowStickersClick.bind(this);
+        this.onHideStickersClick = this.onHideStickersClick.bind(this);
+
+        this.defaultStickersContent = (<div className='mx_StickersContentPlaceholder'>
+            <p>You don't currently have any stickerpacks enabled</p>
+            <p>Click <a href=''>here</a> to add some!</p>
+        </div>);
+        this.popoverWidth = 300;
+        this.popoverHeight = 300;
+
+        this.state = {
+            stickersContent: this.defaultStickersContent,
+            showStickers: false,
+        };
+    }
+
+    onComponentDidMount() {
+        // Stickers
+        // TODO - Add support for stickerpacks from multiple app stores.
+        // Render content from multiple stickerpack sources, each within their own iframe, within the stickerpack UI element.
+        const stickerpackWidget = Widgets.getStickerpackWidgets()[0];
+        let stickersContent;
+
+        // Load stickerpack content
+        if (stickerpackWidget && stickerpackWidget.content && stickerpackWidget.content.url) {
+            stickersContent = <div
+                id='stickersContent'
+                className='mx_StickersContent'
+                style={{
+                    border: 'none',
+                    height: this.popoverHeight,
+                    width: this.popoverWidth,
+                }}
+            >
+                <AppTile
+                    id={stickerpackWidget.id}
+                    url={stickerpackWidget.content.url}
+                    name={stickerpackWidget.content.name}
+                    room={this.props.room}
+                    type={stickerpackWidget.content.type}
+                    fullWidth={true}
+                    userId={stickerpackWidget.sender || MatrixClientPeg.get().credentials.userId}
+                    creatorUserId={MatrixClientPeg.get().credentials.userId}
+                    waitForIframeLoad={true}
+                    show={true}
+                    showMenubar={false}
+                />
+            </div>;
+        } else {
+            // Default content to show if stickerpack widget not added
+            stickersContent = <p>Click here to add your first sitckerpack</p>;
+        }
+        this.setState({stickersContent});
+    }
+
+    onShowStickersClick(e) {
+        const GenericElementContextMenu = sdk.getComponent('context_menus.GenericElementContextMenu');
+        const buttonRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = buttonRect.right + window.pageXOffset - 40;
+        const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
+        // const self = this;
+        ContextualMenu.createMenu(GenericElementContextMenu, {
+            chevronOffset: 10,
+            chevronFace: 'bottom',
+            left: x,
+            top: y,
+            menuWidth: this.popoverWidth,
+            menuHeight: this.popoverHeight,
+            element: this.state.stickersContent,
+        });
+
+
+        this.setState({showStickers: true});
+    }
+
+    onHideStickersClick(ev) {
+        this.setState({showStickers: false});
+    }
+
+    render() {
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        let stickersButton;
+        if (this.state.showStickers) {
+            // Show hide-stickers button
+            stickersButton =
+                <div
+                    id='stickersButton'
+                    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" />
+                </div>;
+        } else {
+            // Show show-stickers button
+            stickersButton =
+                <div
+                    id='stickersButton'
+                    key="constrols_show_stickers"
+                    className="mx_MessageComposer_stickers"
+                    onClick={this.onShowStickersClick}
+                    title={_t("Show Stickers")}>
+                    <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />
+                </div>;
+        }
+        return stickersButton;
+    }
+}