diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index f692a1d6..a8fc2642 100755 --- a/src/js/components/ContextMenu.js +++ b/src/js/components/ContextMenu.js @@ -21,18 +21,21 @@ class ContextMenu extends React.Component{ this.state = { submenu_expanded: false } - this.handleScroll = this.handleScroll.bind(this) - this.handleClick = this.handleClick.bind(this) + this.handleScroll = this.handleScroll.bind(this); + this.handleMouseDown = this.handleMouseDown.bind(this); + this.handleTouchEnd = this.handleTouchEnd.bind(this); } componentDidMount(){ - window.addEventListener("scroll", this.handleScroll, false) - window.addEventListener("click", this.handleClick, false) + window.addEventListener("scroll", this.handleScroll, false); + window.addEventListener("mousedown", this.handleMouseDown, false); + window.addEventListener("touchend", this.handleTouchEnd, false); } componentWillUnmount(){ - window.removeEventListener("scroll", this.handleScroll, false) - window.removeEventListener("click", this.handleClick, false) + window.removeEventListener("scroll", this.handleScroll, false); + window.removeEventListener("mousedown", this.handleMouseDown, false); + window.removeEventListener("touchend", this.handleTouchEnd, false); } componentWillReceiveProps(nextProps){ @@ -74,8 +77,16 @@ class ContextMenu extends React.Component{ } } + handleTouchEnd(e){ + this.handleClick(e); + } + + handleMouseDown(e){ + this.handleClick(e); + } + handleClick(e){ - // if we click outside of the context menu or context menu trigger, kill it + // if we click (touch or mouse) outside of the context menu or context menu trigger, kill it if ($(e.target).closest('.context-menu').length <= 0 && $(e.target).closest('.context-menu-trigger').length <= 0){ this.props.uiActions.hideContextMenu() } diff --git a/src/js/components/ContextMenuTrigger.js b/src/js/components/ContextMenuTrigger.js index 3994d5aa..982d18da 100755 --- a/src/js/components/ContextMenuTrigger.js +++ b/src/js/components/ContextMenuTrigger.js @@ -8,6 +8,18 @@ export default class ContextMenuTrigger extends React.Component{ super(props); } + handleMouseDown(e){ + e.preventDefault(); + e.stopPropagation(); + this.props.onTrigger(e); + } + + handleTouchEnd(e){ + e.preventDefault(); + e.stopPropagation(); + this.props.onTrigger(e); + } + render(){ var className = 'context-menu-trigger' if (this.props.className){ @@ -15,8 +27,8 @@ export default class ContextMenuTrigger extends React.Component{ } return ( this.props.onTrigger(e)} - onTouchEnd={e => this.props.onTrigger(e)}> + onMouseDown={e => this.handleMouseDown(e)} + onTouchEnd={e => this.handleTouchEnd(e)}> diff --git a/src/scss/components/_tooltip.scss b/src/scss/components/_tooltip.scss index 898d44f8..03ca215e 100755 --- a/src/scss/components/_tooltip.scss +++ b/src/scss/components/_tooltip.scss @@ -13,12 +13,12 @@ padding: 5px 8px; color: $white; font-size: 11px; - line-height: 11px; - top: -24px; + line-height: 12px; + bottom: 37px; left: 1px; z-index: 97; border-radius: 3px; - white-space: nowrap; + white-space: wrap; &:first-letter { text-transform: uppercase; @@ -42,7 +42,7 @@ &:hover { .tooltip { opacity: 1; - top: -22px; + bottom: 35px; } } @@ -51,7 +51,7 @@ padding: 8px 12px; font-size: 12px; line-height: 14px; - top: -50px; + bottom: 50px; } } } \ No newline at end of file