Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Support m.room.tombstone events #2124

Merged
merged 3 commits into from
Aug 29, 2018
Merged

Support m.room.tombstone events #2124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7f8cd20
Support m.room.tombstone events
dbkr Aug 21, 2018
c54578d
Forgot the image file
dbkr Aug 21, 2018
42bb8e4
Add image dimensions
dbkr Aug 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions res/css/views/rooms/_MessageComposer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2018 New Vector Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand All @@ -22,6 +23,29 @@ limitations under the License.
position: relative;
}

.mx_MessageComposer_replaced_wrapper {
margin-left: auto;
margin-right: auto;
}

.mx_MessageComposer_replaced_valign {
height: 60px;
display: table-cell;
vertical-align: middle;
}

.mx_MessageComposer_roomReplaced_icon {
float: left;
margin-right: 20px;
margin-top: 5px;
width: 31px;
height: 31px;
}

.mx_MessageComposer_roomReplaced_header {
font-weight: bold;
}

.mx_MessageComposer_autocomplete_wrapper {
position: relative;
height: 0;
Expand Down
13 changes: 13 additions & 0 deletions res/img/room_replaced.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 49 additions & 2 deletions src/components/views/rooms/MessageComposer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 New Vector Ltd
Copyright 2017, 2018 New Vector Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand All @@ -25,6 +25,7 @@ import dis from '../../../dispatcher';
import RoomViewStore from '../../../stores/RoomViewStore';
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
import Stickerpicker from './Stickerpicker';
import { makeRoomPermalink } from '../../../matrix-to';

const formatButtonList = [
_td("bold"),
Expand All @@ -51,7 +52,9 @@ export default class MessageComposer extends React.Component {
this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
this.onInputStateChanged = this.onInputStateChanged.bind(this);
this.onEvent = this.onEvent.bind(this);
this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
this._onTombstoneClick = this._onTombstoneClick.bind(this);

this.state = {
inputState: {
Expand All @@ -61,6 +64,7 @@ export default class MessageComposer extends React.Component {
},
showFormatting: SettingsStore.getValue('MessageComposer.showFormatting'),
isQuoting: Boolean(RoomViewStore.getQuotingEvent()),
tombstone: this._getRoomTombstone(),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we put this in the parent of the composer (RoomView or a new in-between component)? Apart from where it appears on the screen, it's not really related to composing messages.

Copy link
Contributor

@bwindels bwindels Aug 21, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With "this", I mean the whole tombstone code and show-a-message-instead-of-composer logic, not just this particular method.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, although actually MessageComposer is kind of already a (probably badly named) wrapper around MessageComposerInput which is the actual text field. We'd also have to split out the avatar & room encryption icon as we still want these displayed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, ok, that does sound painful. Better leave it as it is then.

};
}

Expand All @@ -70,12 +74,14 @@ export default class MessageComposer extends React.Component {
// marked as encrypted.
// XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
MatrixClientPeg.get().on("event", this.onEvent);
MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
}

componentWillUnmount() {
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("event", this.onEvent);
MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
}
if (this._roomStoreToken) {
this._roomStoreToken.remove();
Expand All @@ -88,6 +94,18 @@ export default class MessageComposer extends React.Component {
this.forceUpdate();
}

_onRoomStateEvents(ev, state) {
if (ev.getRoomId() !== this.props.room.roomId) return;

if (ev.getType() === 'm.room.tombstone') {
this.setState({tombstone: this._getRoomTombstone()});
}
}

_getRoomTombstone() {
return this.props.room.currentState.getStateEvents('m.room.tombstone', '');
}

_onRoomViewStoreUpdate() {
const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
if (this.state.isQuoting === isQuoting) return;
Expand Down Expand Up @@ -207,6 +225,17 @@ export default class MessageComposer extends React.Component {
this.messageComposerInput.enableRichtext(!this.state.inputState.isRichTextEnabled);
}

_onTombstoneClick(ev) {
ev.preventDefault();

const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
dis.dispatch({
action: 'view_room',
highlighted: true,
room_id: replacementRoomId,
});
}

render() {
const me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
const uploadInputStyle = {display: 'none'};
Expand Down Expand Up @@ -262,7 +291,7 @@ export default class MessageComposer extends React.Component {
</div>;
}

const canSendMessages = this.props.room.currentState.maySendMessage(
const canSendMessages = !this.state.tombstone && this.props.room.currentState.maySendMessage(
MatrixClientPeg.get().credentials.userId);

if (canSendMessages) {
Expand Down Expand Up @@ -322,6 +351,24 @@ export default class MessageComposer extends React.Component {
callButton,
videoCallButton,
);
} else if (this.state.tombstone) {
const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];

const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
controls.push(<div className="mx_MessageComposer_replaced_wrapper">
<div className="mx_MessageComposer_replaced_valign">
<img className="mx_MessageComposer_roomReplaced_icon" src="img/room_replaced.svg" />
<span className="mx_MessageComposer_roomReplaced_header">
{_t("This room has been replaced and is no longer active.")}
</span><br />
<a href={makeRoomPermalink(replacementRoomId)}
className="mx_MessageComposer_roomReplaced_link"
onClick={this._onTombstoneClick}
>
{_t("The conversation continues here.")}
</a>
</div>
</div>);
} else {
controls.push(
<div key="controls_error" className="mx_MessageComposer_noperm_error">
Expand Down
2 changes: 2 additions & 0 deletions src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,6 +393,8 @@
"At this time it is not possible to reply with a file so this will be sent without being a reply.": "At this time it is not possible to reply with a file so this will be sent without being a reply.",
"Upload Files": "Upload Files",
"Are you sure you want to upload the following files?": "Are you sure you want to upload the following files?",
"This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.",
"The conversation continues here.": "The conversation continues here.",
"Encrypted room": "Encrypted room",
"Unencrypted room": "Unencrypted room",
"Hangup": "Hangup",
Expand Down