forked from matrix/element-web
Move the PinnedEventsPanel to the react-sdk
Signed-off-by: Travis Ralston <travpc@gmail.com>
This commit is contained in:
Travis Ralston
parent
2d5acfc0bc
commit
078ee54edf
|
|
@ -1,171 +0,0 @@
|
||||||
/*
|
|
||||||
Copyright 2017 Travis Ralston
|
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
you may not use this file except in compliance with the License.
|
|
||||||
You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var React = require('react');
|
|
||||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
|
||||||
var sdk = require('matrix-react-sdk');
|
|
||||||
var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
|
|
||||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
|
||||||
import { _t } from "matrix-react-sdk/lib/languageHandler";
|
|
||||||
import { EventTimeline } from "matrix-js-sdk";
|
|
||||||
|
|
||||||
const PinnedEventTile = React.createClass({
|
|
||||||
displayName: 'PinnedEventTile',
|
|
||||||
propTypes: {
|
|
||||||
mxRoom: React.PropTypes.object.isRequired,
|
|
||||||
mxEvent: React.PropTypes.object.isRequired,
|
|
||||||
onUnpinned: React.PropTypes.func,
|
|
||||||
},
|
|
||||||
onTileClicked: function() {
|
|
||||||
dis.dispatch({
|
|
||||||
action: 'view_room',
|
|
||||||
event_id: this.props.mxEvent.getId(),
|
|
||||||
highlighted: true,
|
|
||||||
room_id: this.props.mxEvent.getRoomId(),
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onUnpinClicked: function() {
|
|
||||||
const pinnedEvents = this.props.mxRoom.currentState.getStateEvents("m.room.pinned_events", "");
|
|
||||||
if (!pinnedEvents || !pinnedEvents.getContent().pinned) {
|
|
||||||
// Nothing to do: already unpinned
|
|
||||||
if (this.props.onUnpinned) this.props.onUnpinned();
|
|
||||||
} else {
|
|
||||||
const pinned = pinnedEvents.getContent().pinned;
|
|
||||||
const index = pinned.indexOf(this.props.mxEvent.getId());
|
|
||||||
if (index !== -1) {
|
|
||||||
pinned.splice(index, 1);
|
|
||||||
MatrixClientPeg.get().sendStateEvent(this.props.mxRoom.roomId, 'm.room.pinned_events', {pinned}, '').then(() => {
|
|
||||||
if (this.props.onUnpinned) this.props.onUnpinned();
|
|
||||||
});
|
|
||||||
} else if (this.props.onUnpinned) this.props.onUnpinned();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_canUnpin: function() {
|
|
||||||
return this.props.mxRoom.currentState.mayClientSendStateEvent('m.room.pinned_events', MatrixClientPeg.get());
|
|
||||||
},
|
|
||||||
render: function() {
|
|
||||||
const MessageEvent = sdk.getComponent("views.messages.MessageEvent");
|
|
||||||
const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
|
|
||||||
|
|
||||||
const sender = this.props.mxRoom.getMember(this.props.mxEvent.getSender());
|
|
||||||
const avatarSize = 40;
|
|
||||||
|
|
||||||
let unpinButton = null;
|
|
||||||
if (this._canUnpin()) {
|
|
||||||
unpinButton = <img src="img/cancel-red.svg" className="mx_PinnedEventTile_unpinButton" width="8" height="8"
|
|
||||||
onClick={this.onUnpinClicked} alt={_t('Unpin Message')} title={_t('Unpin Message')} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx_PinnedEventTile">
|
|
||||||
<div className="mx_PinnedEventTile_actions">
|
|
||||||
<AccessibleButton className="mx_PinnedEventTile_gotoButton mx_textButton" onClick={this.onTileClicked}>
|
|
||||||
{ _t("Jump to message") }
|
|
||||||
</AccessibleButton>
|
|
||||||
{ unpinButton }
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MemberAvatar member={sender} width={avatarSize} height={avatarSize} />
|
|
||||||
<span className="mx_PinnedEventTile_sender">
|
|
||||||
{sender.name}
|
|
||||||
</span>
|
|
||||||
<MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
module.exports = React.createClass({
|
|
||||||
displayName: 'PinnedEventsPanel',
|
|
||||||
propTypes: {
|
|
||||||
// The Room from the js-sdk we're going to show pinned events for
|
|
||||||
room: React.PropTypes.object.isRequired,
|
|
||||||
|
|
||||||
onCancelClick: React.PropTypes.func,
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
loading: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
componentDidMount: function() {
|
|
||||||
this._updatePinnedMessages();
|
|
||||||
},
|
|
||||||
|
|
||||||
_updatePinnedMessages: function() {
|
|
||||||
const pinnedEvents = this.props.room.currentState.getStateEvents("m.room.pinned_events", "");
|
|
||||||
if (!pinnedEvents || !pinnedEvents.getContent().pinned) {
|
|
||||||
this.setState({ loading: false, pinned: [] });
|
|
||||||
} else {
|
|
||||||
const promises = [];
|
|
||||||
const cli = MatrixClientPeg.get();
|
|
||||||
|
|
||||||
pinnedEvents.getContent().pinned.map(eventId => {
|
|
||||||
promises.push(cli.getEventTimeline(this.props.room.getUnfilteredTimelineSet(), eventId, 0).then(timeline => {
|
|
||||||
const event = timeline.getEvents().find(e => e.getId() === eventId);
|
|
||||||
return {eventId, timeline, event};
|
|
||||||
}).catch(err => {
|
|
||||||
console.error("Error looking up pinned event " + eventId + " in room " + this.props.room.roomId);
|
|
||||||
console.error(err);
|
|
||||||
return null; // return lack of context to avoid unhandled errors
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
Promise.all(promises).then(contexts => {
|
|
||||||
// Filter out the messages before we try to render them
|
|
||||||
const pinned = contexts.filter(context => {
|
|
||||||
if (!context) return false; // no context == not applicable for the room
|
|
||||||
if (context.event.getType() !== "m.room.message") return false;
|
|
||||||
if (context.event.isRedacted()) return false;
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setState({ loading: false, pinned });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_getPinnedTiles: function() {
|
|
||||||
if (this.state.pinned.length == 0) {
|
|
||||||
return <div>{ _t("No pinned messages.") }</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.state.pinned.map(context => {
|
|
||||||
return (<PinnedEventTile key={context.event.getId()} mxRoom={this.props.room} mxEvent={context.event} onUnpinned={this._updatePinnedMessages} />);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
let tiles = <div>{ _t("Loading...") }</div>;
|
|
||||||
if (this.state && !this.state.loading) {
|
|
||||||
tiles = this._getPinnedTiles();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx_PinnedEventsPanel">
|
|
||||||
<div className="mx_PinnedEventsPanel_body">
|
|
||||||
<AccessibleButton className="mx_PinnedEventsPanel_cancel" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
|
|
||||||
<h3 className="mx_PinnedEventsPanel_header">{_t("Pinned Messages")}</h3>
|
|
||||||
{ tiles }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -64,6 +64,7 @@
|
||||||
@import "./matrix-react-sdk/views/voip/_CallView.scss";
|
@import "./matrix-react-sdk/views/voip/_CallView.scss";
|
||||||
@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
|
@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
|
||||||
@import "./matrix-react-sdk/views/voip/_VideoView.scss";
|
@import "./matrix-react-sdk/views/voip/_VideoView.scss";
|
||||||
|
@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss";
|
||||||
@import "./vector-web/_fonts.scss";
|
@import "./vector-web/_fonts.scss";
|
||||||
@import "./vector-web/structures/_CompatibilityPage.scss";
|
@import "./vector-web/structures/_CompatibilityPage.scss";
|
||||||
@import "./vector-web/structures/_HomePage.scss";
|
@import "./vector-web/structures/_HomePage.scss";
|
||||||
|
|
@ -88,5 +89,4 @@
|
||||||
@import "./vector-web/views/rooms/_RoomDropTarget.scss";
|
@import "./vector-web/views/rooms/_RoomDropTarget.scss";
|
||||||
@import "./vector-web/views/rooms/_RoomTooltip.scss";
|
@import "./vector-web/views/rooms/_RoomTooltip.scss";
|
||||||
@import "./vector-web/views/rooms/_SearchBar.scss";
|
@import "./vector-web/views/rooms/_SearchBar.scss";
|
||||||
@import "./vector-web/views/rooms/_PinnedEventsPanel.scss";
|
|
||||||
@import "./vector-web/views/settings/_Notifications.scss";
|
@import "./vector-web/views/settings/_Notifications.scss";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue