mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

Merge branch 'develop' into luke/feature-tag-panel-tile-context-menu

Browse source
This commit is contained in:
Luke Barnard 2018-02-13 17:00:19 +00:00
commit 11b0cc8211
6 changed files with 139 additions and 315 deletions
Download patch file Download diff file Expand all files Collapse all files

109
src/components/views/context_menus/RoomTileContextMenu.js
View file

@ -20,6 +20,7 @@ limitations under the License.
import Promise from 'bluebird';
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import sdk from 'matrix-react-sdk';
import { _t, _td } from 'matrix-react-sdk/lib/languageHandler';
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
@ -28,14 +29,15 @@ import DMRoomMap from 'matrix-react-sdk/lib/utils/DMRoomMap';
import * as Rooms from 'matrix-react-sdk/lib/Rooms';
import * as RoomNotifs from 'matrix-react-sdk/lib/RoomNotifs';
import Modal from 'matrix-react-sdk/lib/Modal';
import RoomListActions from 'matrix-react-sdk/lib/actions/RoomListActions';
module.exports = React.createClass({
displayName: 'RoomTileContextMenu',
propTypes: {
room: React.PropTypes.object.isRequired,
room: PropTypes.object.isRequired,
/* callback called when the menu is dismissed */
onFinished: React.PropTypes.func,
onFinished: PropTypes.func,
},
getInitialState() {
@ -45,7 +47,7 @@ module.exports = React.createClass({
isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)),
}
};
},
componentWillMount: function() {
@ -57,42 +59,16 @@ module.exports = React.createClass({
},
_toggleTag: function(tagNameOn, tagNameOff) {
var self = this;
const roomId = this.props.room.roomId;
var cli = MatrixClientPeg.get();
if (!cli.isGuest()) {
Promise.delay(500).then(function() {
if (tagNameOff !== null && tagNameOff !== undefined) {
cli.deleteRoomTag(roomId, tagNameOff).finally(function() {
// Close the context menu
if (self.props.onFinished) {
self.props.onFinished();
};
}).catch(function(err) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog('Failed to remove tag from room 1', '', ErrorDialog, {
title: _t('Failed to remove tag %(tagName)s from room', {tagName: tagNameOff}),
description: ((err && err.message) ? err.message : _t('Operation failed')),
});
});
}
if (!MatrixClientPeg.get().isGuest()) {
Promise.delay(500).then(() => {
dis.dispatch(RoomListActions.tagRoom(
MatrixClientPeg.get(),
this.props.room,
tagNameOff, tagNameOn,
undefined, 0,
), true);
if (tagNameOn !== null && tagNameOn !== undefined) {
// If the tag ordering meta data is required, it is added by
// the RoomSubList when it sorts its rooms
cli.setRoomTag(roomId, tagNameOn, {}).finally(function() {
// Close the context menu
if (self.props.onFinished) {
self.props.onFinished();
};
}).catch(function(err) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog('Failed to remove tag from room 2', '', ErrorDialog, {
title: _t('Failed to remove tag %(tagName)s from room', {tagName: tagNameOn}),
description: ((err && err.message) ? err.message : _t('Operation failed')),
});
});
}
this.props.onFinished();
});
}
},
@ -132,22 +108,22 @@ module.exports = React.createClass({
},
_onClickDM: function() {
if (MatrixClientPeg.get().isGuest()) return;
const newIsDirectMessage = !this.state.isDirectMessage;
this.setState({
isDirectMessage: newIsDirectMessage,
});
if (MatrixClientPeg.get().isGuest()) return;
Rooms.guessAndSetDMRoom(
this.props.room, newIsDirectMessage
this.props.room, newIsDirectMessage,
).delay(500).finally(() => {
// Close the context menu
if (this.props.onFinished) {
this.props.onFinished();
};
}
}, (err) => {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog('Failed to set Direct Message status of room', '', ErrorDialog, {
title: _t('Failed to set Direct Message status of room'),
description: ((err && err.message) ? err.message : _t('Operation failed')),
@ -165,7 +141,7 @@ module.exports = React.createClass({
// Close the context menu
if (this.props.onFinished) {
this.props.onFinished();
};
}
},
_onClickReject: function() {
@ -177,7 +153,7 @@ module.exports = React.createClass({
// Close the context menu
if (this.props.onFinished) {
this.props.onFinished();
};
}
},
_onClickForget: function() {
@ -185,8 +161,8 @@ module.exports = React.createClass({
MatrixClientPeg.get().forget(this.props.room.roomId).done(function() {
dis.dispatch({ action: 'view_next_room' });
}, function(err) {
var errCode = err.errcode || _td("unknown error code");
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
const errCode = err.errcode || _td("unknown error code");
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog('Failed to forget room', '', ErrorDialog, {
title: _t('Failed to forget room %(errCode)s', {errCode: errCode}),
description: ((err && err.message) ? err.message : _t('Operation failed')),
@ -196,20 +172,19 @@ module.exports = React.createClass({
// Close the context menu
if (this.props.onFinished) {
this.props.onFinished();
};
}
},
_saveNotifState: function(newState) {
if (MatrixClientPeg.get().isGuest()) return;
const oldState = this.state.roomNotifState;
const roomId = this.props.room.roomId;
var cli = MatrixClientPeg.get();
if (cli.isGuest()) return;
this.setState({
roomNotifState: newState,
});
RoomNotifs.setRoomNotifsState(this.props.room.roomId, newState).done(() => {
RoomNotifs.setRoomNotifsState(roomId, newState).done(() => {
// delay slightly so that the user can see their state change
// before closing the menu
return Promise.delay(500).then(() => {
@ -217,7 +192,7 @@ module.exports = React.createClass({
// Close the context menu
if (this.props.onFinished) {
this.props.onFinished();
};
}
});
}, (error) => {
// TODO: some form of error notification to the user
@ -247,22 +222,22 @@ module.exports = React.createClass({
},
_renderNotifMenu: function() {
var alertMeClasses = classNames({
const alertMeClasses = classNames({
'mx_RoomTileContextMenu_notif_field': true,
'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES_LOUD,
});
var allNotifsClasses = classNames({
const allNotifsClasses = classNames({
'mx_RoomTileContextMenu_notif_field': true,
'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES,
});
var mentionsClasses = classNames({
const mentionsClasses = classNames({
'mx_RoomTileContextMenu_notif_field': true,
'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.MENTIONS_ONLY,
});
var muteNotifsClasses = classNames({
const muteNotifsClasses = classNames({
'mx_RoomTileContextMenu_notif_field': true,
'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.MUTE,
});
@ -272,22 +247,22 @@ module.exports = React.createClass({
<div className="mx_RoomTileContextMenu_notif_picker" >
<img src="img/notif-slider.svg" width="20" height="107" />
</div>
<div className={ alertMeClasses } onClick={this._onClickAlertMe} >
<div className={alertMeClasses} onClick={this._onClickAlertMe} >
<img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
{ _t('All messages (noisy)') }
</div>
<div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
<div className={allNotifsClasses} onClick={this._onClickAllNotifs} >
<img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
{ _t('All messages') }
</div>
<div className={ mentionsClasses } onClick={this._onClickMentions} >
<div className={mentionsClasses} onClick={this._onClickMentions} >
<img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
{ _t('Mentions only') }
</div>
<div className={ muteNotifsClasses } onClick={this._onClickMute} >
<div className={muteNotifsClasses} onClick={this._onClickMute} >
<img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
{ _t('Mute') }
@ -322,7 +297,7 @@ module.exports = React.createClass({
return (
<div>
<div className="mx_RoomTileContextMenu_leave" onClick={ leaveClickHandler } >
<div className="mx_RoomTileContextMenu_leave" onClick={leaveClickHandler} >
<img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
{ leaveText }
</div>
@ -351,17 +326,17 @@ module.exports = React.createClass({
return (
<div>
<div className={ favouriteClasses } onClick={this._onClickFavourite} >
<div className={favouriteClasses} onClick={this._onClickFavourite} >
<img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_fave.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
{ _t('Favourite') }
</div>
<div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
<div className={lowPriorityClasses} onClick={this._onClickLowPriority} >
<img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_low.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
{ _t('Low Priority') }
</div>
<div className={ dmClasses } onClick={this._onClickDM} >
<div className={dmClasses} onClick={this._onClickDM} >
<img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_person.svg" width="15" height="15" />
<img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
{ _t('Direct Chat') }
@ -372,7 +347,7 @@ module.exports = React.createClass({
render: function() {
const myMember = this.props.room.getMember(
MatrixClientPeg.get().credentials.userId
MatrixClientPeg.get().credentials.userId,
);
// Can't set notif level or tags on non-join rooms
@ -389,5 +364,5 @@ module.exports = React.createClass({
{ this._renderRoomTagMenu() }
</div>
);
}
},
});

1
src/components/views/rooms/DNDRoomTile.js
View file

@ -41,6 +41,7 @@ export default class DNDRoomTile extends React.Component {
key={props.room.roomId}
draggableId={props.tagName + '_' + props.room.roomId}
index={props.index}
type="draggable-RoomTile"
>
{ (provided, snapshot) => {
return (