Merge branches 'develop' and 't3chguy/m.relates_to' of github.com:matrix-org/matrix-react-sdk into t3chguy/m.relates_to

src/components/views/elements/DNDTagTile.js

@@ -25,6 +25,7 @@ export default function DNDTagTile(props) {
             key={props.tag}
             draggableId={props.tag}
             index={props.index}
+            type="draggable-TagTile"
         >
             { (provided, snapshot) => (
                 <div>

src/components/views/elements/TagTile.js

@@ -21,6 +21,7 @@ import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
+import ContextualMenu from '../../structures/ContextualMenu';
 
 import FlairStore from '../../../stores/FlairStore';
 
@@ -81,6 +82,35 @@ export default React.createClass({
         });
     },
 
+    onContextButtonClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Hide the (...) immediately
+        this.setState({ hover: false });
+
+        const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = elementRect.right + window.pageXOffset + 3;
+        const chevronOffset = 12;
+        let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
+        y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
+
+        const self = this;
+        ContextualMenu.createMenu(TagTileContextMenu, {
+            chevronOffset: chevronOffset,
+            left: x,
+            top: y,
+            tag: this.props.tag,
+            onFinished: function() {
+                self.setState({ menuDisplayed: false });
+            },
+        });
+        this.setState({ menuDisplayed: true });
+    },
+
     onMouseOver: function() {
         this.setState({hover: true});
     },
@@ -109,10 +139,15 @@ export default React.createClass({
         const tip = this.state.hover ?
             <RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
             <div />;
+        const contextButton = this.state.hover || this.state.menuDisplayed ?
+            <div className="mx_TagTile_context_button" onClick={this.onContextButtonClick}>
+                { "\u00B7\u00B7\u00B7" }
+            </div> : <div />;
         return <AccessibleButton className={className} onClick={this.onClick}>
             <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
                 <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
                 { tip }
+                { contextButton }
             </div>
         </AccessibleButton>;
     },