From 64bcf6fd7e20f562a6553742a8e9c0489fabea91 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 12 Jun 2018 11:13:04 +0100
Subject: [PATCH] allow ContextualMenu to run without background, for tooltips
& fix copy
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/ContextualMenu.js | 24 ++++++++++++--------
src/components/views/messages/TextualBody.js | 4 ++--
2 files changed, 16 insertions(+), 12 deletions(-)
diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index daac294d12..d6a11ca974 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,12 +16,10 @@ limitations under the License.
*/
-'use strict';
-
-const classNames = require('classnames');
-const React = require('react');
-const ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
+import classNames from 'classnames';
// Shamelessly ripped off Modal.js. There's probably a better way
// of doing reusable widgets like dialog boxes & menus where we go and
@@ -61,7 +60,12 @@ export default class ContextualMenu extends React.Component {
// If true, insert an invisible screen-sized element behind the
// menu that when clicked will close it.
hasBackground: PropTypes.bool,
- }
+
+ // The component to render as the context menu
+ elementClass: PropTypes.element.isRequired,
+ // on resize callback
+ windowResize: PropTypes.func
+ };
render() {
const position = {};
@@ -112,7 +116,7 @@ export default class ContextualMenu extends React.Component {
`;
}
- const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace}></div>;
+ const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace} />;
const className = 'mx_ContextualMenu_wrapper';
const menuClasses = classNames({
@@ -158,13 +162,13 @@ export default class ContextualMenu extends React.Component {
{ chevron }
<ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
</div>
- { props.hasBackground && <div className="mx_ContextualMenu_background" onClick={props.closeMenu}></div> }
+ { props.hasBackground && <div className="mx_ContextualMenu_background" onClick={props.closeMenu} /> }
<style>{ chevronCSS }</style>
</div>;
}
}
-export function createMenu(ElementClass, props) {
+export function createMenu(ElementClass, props, hasBackground=true) {
const closeMenu = function(...args) {
ReactDOM.unmountComponentAtNode(getOrCreateContainer());
@@ -175,8 +179,8 @@ export function createMenu(ElementClass, props) {
// We only reference closeMenu once per call to createMenu
const menu = <ContextualMenu
+ hasBackground={hasBackground}
{...props}
- hasBackground={true}
elementClass={ElementClass}
closeMenu={closeMenu} // eslint-disable-line react/jsx-no-bind
windowResize={closeMenu} // eslint-disable-line react/jsx-no-bind
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index bc2a715d31..018754411c 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -336,8 +336,8 @@ module.exports = React.createClass({
left: x,
top: y,
message: successful ? _t('Copied!') : _t('Failed to copy'),
- });
- e.target.onmouseout = close;
+ }, false);
+ e.target.onmouseleave = close;
};
p.appendChild(button);
});