mirror of https://github.com/vector-im/riot-web
Merge remote-tracking branch 'origin/develop' into develop
commit
bfad84a4d6
|
@ -1,5 +1,6 @@
|
||||||
/*
|
/*
|
||||||
Copyright 2017, 2018 New Vector Ltd
|
Copyright 2017, 2018 New Vector Ltd
|
||||||
|
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with 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 sdk from '../../../index';
|
||||||
import dis from '../../../dispatcher';
|
import dis from '../../../dispatcher';
|
||||||
import AccessibleButton from '../elements/AccessibleButton';
|
import AccessibleButton from '../elements/AccessibleButton';
|
||||||
import * as ContextualMenu from "../../structures/ContextualMenu";
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
||||||
|
import {createMenu} from "../../structures/ContextualMenu";
|
||||||
|
|
||||||
export default React.createClass({
|
export default React.createClass({
|
||||||
displayName: 'GroupInviteTile',
|
displayName: 'GroupInviteTile',
|
||||||
|
@ -66,29 +68,11 @@ export default React.createClass({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
onBadgeClicked: function(e) {
|
_showContextMenu: function(x, y, chevronOffset) {
|
||||||
// Prevent the RoomTile onClick event firing as well
|
const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
// Only allow none guests to access the context menu
|
createMenu(GroupInviteTileContextMenu, {
|
||||||
if (this.context.matrixClient.isGuest()) return;
|
chevronOffset,
|
||||||
|
|
||||||
// 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,
|
|
||||||
left: x,
|
left: x,
|
||||||
top: y,
|
top: y,
|
||||||
group: this.props.group,
|
group: this.props.group,
|
||||||
|
@ -99,6 +83,38 @@ export default React.createClass({
|
||||||
this.setState({ menuDisplayed: true });
|
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() {
|
render: function() {
|
||||||
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
||||||
const EmojiText = sdk.getComponent('elements.EmojiText');
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
||||||
|
@ -139,7 +155,12 @@ export default React.createClass({
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
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">
|
<div className="mx_RoomTile_avatar">
|
||||||
{ av }
|
{ av }
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
/*
|
/*
|
||||||
Copyright 2015, 2016 OpenMarket Ltd
|
Copyright 2015, 2016 OpenMarket Ltd
|
||||||
Copyright 2017 New Vector Ltd
|
Copyright 2017 New Vector Ltd
|
||||||
|
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with 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.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
const React = require('react');
|
import React from 'react';
|
||||||
const ReactDOM = require("react-dom");
|
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
const classNames = require('classnames');
|
import classNames from 'classnames';
|
||||||
import dis from '../../../dispatcher';
|
import dis from '../../../dispatcher';
|
||||||
const MatrixClientPeg = require('../../../MatrixClientPeg');
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||||
import DMRoomMap from '../../../utils/DMRoomMap';
|
import DMRoomMap from '../../../utils/DMRoomMap';
|
||||||
const sdk = require('../../../index');
|
import sdk from '../../../index';
|
||||||
const ContextualMenu = require('../../structures/ContextualMenu');
|
import {createMenu} from '../../structures/ContextualMenu';
|
||||||
const RoomNotifs = require('../../../RoomNotifs');
|
import * as RoomNotifs from '../../../RoomNotifs';
|
||||||
const FormattingUtils = require('../../../utils/FormattingUtils');
|
import * as FormattingUtils from '../../../utils/FormattingUtils';
|
||||||
import AccessibleButton from '../elements/AccessibleButton';
|
import AccessibleButton from '../elements/AccessibleButton';
|
||||||
import ActiveRoomObserver from '../../../ActiveRoomObserver';
|
import ActiveRoomObserver from '../../../ActiveRoomObserver';
|
||||||
import RoomViewStore from '../../../stores/RoomViewStore';
|
import RoomViewStore from '../../../stores/RoomViewStore';
|
||||||
|
@ -72,16 +71,12 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
_shouldShowMentionBadge: function() {
|
_shouldShowMentionBadge: function() {
|
||||||
return this.state.notifState != RoomNotifs.MUTE;
|
return this.state.notifState !== RoomNotifs.MUTE;
|
||||||
},
|
},
|
||||||
|
|
||||||
_isDirectMessageRoom: function(roomId) {
|
_isDirectMessageRoom: function(roomId) {
|
||||||
const dmRooms = DMRoomMap.shared().getUserIdForRoomId(roomId);
|
const dmRooms = DMRoomMap.shared().getUserIdForRoomId(roomId);
|
||||||
if (dmRooms) {
|
return Boolean(dmRooms);
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onRoomTimeline: function(ev, room) {
|
onRoomTimeline: function(ev, room) {
|
||||||
|
@ -99,7 +94,7 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
onAccountData: function(accountDataEvent) {
|
onAccountData: function(accountDataEvent) {
|
||||||
if (accountDataEvent.getType() == 'm.push_rules') {
|
if (accountDataEvent.getType() === 'm.push_rules') {
|
||||||
this.setState({
|
this.setState({
|
||||||
notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
|
notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
|
||||||
});
|
});
|
||||||
|
@ -187,6 +182,32 @@ module.exports = React.createClass({
|
||||||
this.badgeOnMouseLeave();
|
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() {
|
badgeOnMouseEnter: function() {
|
||||||
// Only allow non-guests to access the context menu
|
// Only allow non-guests to access the context menu
|
||||||
// and only change it if it needs to change
|
// and only change it if it needs to change
|
||||||
|
@ -200,14 +221,16 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
onBadgeClicked: function(e) {
|
onBadgeClicked: function(e) {
|
||||||
// Only allow none guests to access the context menu
|
// Prevent the RoomTile onClick event firing as well
|
||||||
if (!MatrixClientPeg.get().isGuest()) {
|
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 the badge is clicked, then no longer show tooltip
|
||||||
if (this.props.collapsed) {
|
if (this.props.collapsed) {
|
||||||
this.setState({ hover: false });
|
this.setState({ hover: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
|
|
||||||
const elementRect = e.target.getBoundingClientRect();
|
const elementRect = e.target.getBoundingClientRect();
|
||||||
|
|
||||||
// The window X and Y offsets are to adjust position when zoomed in to page
|
// The window X and Y offsets are to adjust position when zoomed in to page
|
||||||
|
@ -216,21 +239,7 @@ module.exports = React.createClass({
|
||||||
let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
|
let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
|
||||||
y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
|
y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
|
||||||
|
|
||||||
const self = this;
|
this._showContextMenu(x, y, chevronOffset);
|
||||||
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();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
|
@ -250,7 +259,7 @@ module.exports = React.createClass({
|
||||||
'mx_RoomTile_unread': this.props.unread,
|
'mx_RoomTile_unread': this.props.unread,
|
||||||
'mx_RoomTile_unreadNotify': notifBadges,
|
'mx_RoomTile_unreadNotify': notifBadges,
|
||||||
'mx_RoomTile_highlight': mentionBadges,
|
'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_menuDisplayed': this.state.menuDisplayed,
|
||||||
'mx_RoomTile_noBadges': !badges,
|
'mx_RoomTile_noBadges': !badges,
|
||||||
'mx_RoomTile_transparent': this.props.transparent,
|
'mx_RoomTile_transparent': this.props.transparent,
|
||||||
|
@ -268,7 +277,6 @@ module.exports = React.createClass({
|
||||||
let name = this.state.roomName;
|
let name = this.state.roomName;
|
||||||
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
|
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
|
||||||
|
|
||||||
let badge;
|
|
||||||
let badgeContent;
|
let badgeContent;
|
||||||
|
|
||||||
if (this.state.badgeHover || this.state.menuDisplayed) {
|
if (this.state.badgeHover || this.state.menuDisplayed) {
|
||||||
|
@ -280,7 +288,7 @@ module.exports = React.createClass({
|
||||||
badgeContent = '\u200B';
|
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');
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
||||||
let label;
|
let label;
|
||||||
|
@ -312,16 +320,22 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
|
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
|
||||||
|
|
||||||
let directMessageIndicator;
|
let dmIndicator;
|
||||||
if (this._isDirectMessageRoom(this.props.room.roomId)) {
|
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={avatarClasses}>
|
||||||
<div className="mx_RoomTile_avatar_container">
|
<div className="mx_RoomTile_avatar_container">
|
||||||
<RoomAvatar room={this.props.room} width={24} height={24} />
|
<RoomAvatar room={this.props.room} width={24} height={24} />
|
||||||
{ directMessageIndicator }
|
{ dmIndicator }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_RoomTile_nameContainer">
|
<div className="mx_RoomTile_nameContainer">
|
||||||
|
|
Loading…
Reference in New Issue