diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js index 4d5f3c6f3a..25dba130f9 100644 --- a/src/components/views/groups/GroupInviteTile.js +++ b/src/components/views/groups/GroupInviteTile.js @@ -1,5 +1,6 @@ /* Copyright 2017, 2018 New Vector Ltd +Copyright 2018 Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -20,8 +21,9 @@ import { MatrixClient } from 'matrix-js-sdk'; import sdk from '../../../index'; import dis from '../../../dispatcher'; import AccessibleButton from '../elements/AccessibleButton'; -import * as ContextualMenu from "../../structures/ContextualMenu"; import classNames from 'classnames'; +import MatrixClientPeg from "../../../MatrixClientPeg"; +import {createMenu} from "../../structures/ContextualMenu"; export default React.createClass({ displayName: 'GroupInviteTile', @@ -66,29 +68,11 @@ export default React.createClass({ }); }, - onBadgeClicked: function(e) { - // Prevent the RoomTile onClick event firing as well - e.stopPropagation(); + _showContextMenu: function(x, y, chevronOffset) { + const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu'); - // Only allow none guests to access the context menu - if (this.context.matrixClient.isGuest()) return; - - // If the badge is clicked, then no longer show tooltip - if (this.props.collapsed) { - this.setState({ hover: false }); - } - - const RoomTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu'); - 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 - - ContextualMenu.createMenu(RoomTileContextMenu, { - chevronOffset: chevronOffset, + createMenu(GroupInviteTileContextMenu, { + chevronOffset, left: x, top: y, group: this.props.group, @@ -99,6 +83,38 @@ export default React.createClass({ this.setState({ menuDisplayed: true }); }, + onContextMenu: function(e) { + // Prevent the RoomTile onClick event firing as well + e.preventDefault(); + // Only allow non-guests to access the context menu + if (MatrixClientPeg.get().isGuest()) return; + + const chevronOffset = 12; + this._showContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset); + }, + + onBadgeClicked: function(e) { + // Prevent the RoomTile onClick event firing as well + e.stopPropagation(); + // Only allow non-guests to access the context menu + if (MatrixClientPeg.get().isGuest()) return; + + // If the badge is clicked, then no longer show tooltip + if (this.props.collapsed) { + this.setState({ hover: false }); + } + + 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 + + this._showContextMenu(x, y, chevronOffset); + }, + render: function() { const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); const EmojiText = sdk.getComponent('elements.EmojiText'); @@ -139,7 +155,12 @@ export default React.createClass({ }); return ( - +
{ av }
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 11eb2090f2..ee7f8a76c7 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -1,6 +1,7 @@ /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2017 New Vector Ltd +Copyright 2018 Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,19 +16,17 @@ See the License for the specific language governing permissions and limitations under the License. */ -'use strict'; -const React = require('react'); -const ReactDOM = require("react-dom"); +import React from 'react'; import PropTypes from 'prop-types'; -const classNames = require('classnames'); +import classNames from 'classnames'; import dis from '../../../dispatcher'; -const MatrixClientPeg = require('../../../MatrixClientPeg'); +import MatrixClientPeg from '../../../MatrixClientPeg'; import DMRoomMap from '../../../utils/DMRoomMap'; -const sdk = require('../../../index'); -const ContextualMenu = require('../../structures/ContextualMenu'); -const RoomNotifs = require('../../../RoomNotifs'); -const FormattingUtils = require('../../../utils/FormattingUtils'); +import sdk from '../../../index'; +import {createMenu} from '../../structures/ContextualMenu'; +import * as RoomNotifs from '../../../RoomNotifs'; +import * as FormattingUtils from '../../../utils/FormattingUtils'; import AccessibleButton from '../elements/AccessibleButton'; import ActiveRoomObserver from '../../../ActiveRoomObserver'; import RoomViewStore from '../../../stores/RoomViewStore'; @@ -72,16 +71,12 @@ module.exports = React.createClass({ }, _shouldShowMentionBadge: function() { - return this.state.notifState != RoomNotifs.MUTE; + return this.state.notifState !== RoomNotifs.MUTE; }, _isDirectMessageRoom: function(roomId) { const dmRooms = DMRoomMap.shared().getUserIdForRoomId(roomId); - if (dmRooms) { - return true; - } else { - return false; - } + return Boolean(dmRooms); }, onRoomTimeline: function(ev, room) { @@ -99,7 +94,7 @@ module.exports = React.createClass({ }, onAccountData: function(accountDataEvent) { - if (accountDataEvent.getType() == 'm.push_rules') { + if (accountDataEvent.getType() === 'm.push_rules') { this.setState({ notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId), }); @@ -187,6 +182,32 @@ module.exports = React.createClass({ this.badgeOnMouseLeave(); }, + _showContextMenu: function(x, y, chevronOffset) { + const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu'); + + createMenu(RoomTileContextMenu, { + chevronOffset, + left: x, + top: y, + room: this.props.room, + onFinished: () => { + this.setState({ menuDisplayed: false }); + this.props.refreshSubList(); + }, + }); + this.setState({ menuDisplayed: true }); + }, + + onContextMenu: function(e) { + // Prevent the RoomTile onClick event firing as well + e.preventDefault(); + // Only allow non-guests to access the context menu + if (MatrixClientPeg.get().isGuest()) return; + + const chevronOffset = 12; + this._showContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset); + }, + badgeOnMouseEnter: function() { // Only allow non-guests to access the context menu // and only change it if it needs to change @@ -200,37 +221,25 @@ module.exports = React.createClass({ }, onBadgeClicked: function(e) { - // Only allow none guests to access the context menu - if (!MatrixClientPeg.get().isGuest()) { - // If the badge is clicked, then no longer show tooltip - if (this.props.collapsed) { - this.setState({ hover: false }); - } - - const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu'); - 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(RoomTileContextMenu, { - chevronOffset: chevronOffset, - left: x, - top: y, - room: this.props.room, - onFinished: function() { - self.setState({ menuDisplayed: false }); - self.props.refreshSubList(); - }, - }); - this.setState({ menuDisplayed: true }); - } // Prevent the RoomTile onClick event firing as well e.stopPropagation(); + // Only allow non-guests to access the context menu + if (MatrixClientPeg.get().isGuest()) return; + + // If the badge is clicked, then no longer show tooltip + if (this.props.collapsed) { + this.setState({ hover: false }); + } + + 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 + + this._showContextMenu(x, y, chevronOffset); }, render: function() { @@ -250,7 +259,7 @@ module.exports = React.createClass({ 'mx_RoomTile_unread': this.props.unread, 'mx_RoomTile_unreadNotify': notifBadges, 'mx_RoomTile_highlight': mentionBadges, - 'mx_RoomTile_invited': (me && me.membership == 'invite'), + 'mx_RoomTile_invited': (me && me.membership === 'invite'), 'mx_RoomTile_menuDisplayed': this.state.menuDisplayed, 'mx_RoomTile_noBadges': !badges, 'mx_RoomTile_transparent': this.props.transparent, @@ -268,7 +277,6 @@ module.exports = React.createClass({ let name = this.state.roomName; name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon - let badge; let badgeContent; if (this.state.badgeHover || this.state.menuDisplayed) { @@ -280,7 +288,7 @@ module.exports = React.createClass({ badgeContent = '\u200B'; } - badge =
{ badgeContent }
; + const badge =
{ badgeContent }
; const EmojiText = sdk.getComponent('elements.EmojiText'); let label; @@ -312,16 +320,22 @@ module.exports = React.createClass({ const RoomAvatar = sdk.getComponent('avatars.RoomAvatar'); - let directMessageIndicator; + let dmIndicator; if (this._isDirectMessageRoom(this.props.room.roomId)) { - directMessageIndicator = dm; + dmIndicator = dm; } - return + return
- { directMessageIndicator } + { dmIndicator }