Merge remote-tracking branch 'origin/develop' into develop
						commit
						bfad84a4d6
					
				| 
						 | 
				
			
			@ -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 (
 | 
			
		||||
            <AccessibleButton className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
 | 
			
		||||
            <AccessibleButton className={classes}
 | 
			
		||||
                              onClick={this.onClick}
 | 
			
		||||
                              onMouseEnter={this.onMouseEnter}
 | 
			
		||||
                              onMouseLeave={this.onMouseLeave}
 | 
			
		||||
                              onContextMenu={this.onContextMenu}
 | 
			
		||||
            >
 | 
			
		||||
                <div className="mx_RoomTile_avatar">
 | 
			
		||||
                    { av }
 | 
			
		||||
                </div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
 | 
			
		||||
        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
 | 
			
		||||
 | 
			
		||||
        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 = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
 | 
			
		||||
            dmIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return <AccessibleButton className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
 | 
			
		||||
        return <AccessibleButton tabIndex="0"
 | 
			
		||||
                                 className={classes}
 | 
			
		||||
                                 onClick={this.onClick}
 | 
			
		||||
                                 onMouseEnter={this.onMouseEnter}
 | 
			
		||||
                                 onMouseLeave={this.onMouseLeave}
 | 
			
		||||
                                 onContextMenu={this.onContextMenu}
 | 
			
		||||
        >
 | 
			
		||||
            <div className={avatarClasses}>
 | 
			
		||||
                <div className="mx_RoomTile_avatar_container">
 | 
			
		||||
                    <RoomAvatar room={this.props.room} width={24} height={24} />
 | 
			
		||||
                    { directMessageIndicator }
 | 
			
		||||
                    { dmIndicator }
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div className="mx_RoomTile_nameContainer">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue