diff --git a/src/components/views/rooms/PinnedEventsPanel.js b/src/components/views/rooms/PinnedEventsPanel.js
index 4e5efdd3..a5d5d2ed 100644
--- a/src/components/views/rooms/PinnedEventsPanel.js
+++ b/src/components/views/rooms/PinnedEventsPanel.js
@@ -20,9 +20,43 @@ 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,
+ },
+ onTileClicked: function() {
+ dis.dispatch({
+ action: 'view_room',
+ event_id: this.props.mxEvent.getId(),
+ highlighted: true,
+ room_id: this.props.mxEvent.getRoomId(),
+ });
+ },
+ 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;
+
+ return (
+
+
+
+ {sender.name}
+
+
+
+ );
+ }
+});
+
module.exports = React.createClass({
displayName: 'PinnedEventsPanel',
propTypes: {
@@ -59,31 +93,17 @@ module.exports = React.createClass({
},
_getPinnedTiles: function() {
- const MessageEvent = sdk.getComponent("views.messages.MessageEvent");
- const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
-
if (this.state.pinned.length == 0) {
return No pinned messages.
;
}
return this.state.pinned.map(pinnedEvent => {
const event = pinnedEvent.timeline.getEvents().find(e => e.getId() === pinnedEvent.eventId);
- const sender = this.props.room.getMember(event.getSender());
- const avatarSize = 40;
// Don't show non-messages. Technically users can pin state/custom events, but we won't
// support those events.
if (event.getType() !== "m.room.message") return '';
-
- return (
-
-
-
- {sender.name}
-
-
-
- );
+ return ();
});
},
diff --git a/src/skins/vector/css/vector-web/views/rooms/_PinnedEventsPanel.scss b/src/skins/vector/css/vector-web/views/rooms/_PinnedEventsPanel.scss
index 883eaa26..133fa703 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_PinnedEventsPanel.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_PinnedEventsPanel.scss
@@ -29,7 +29,7 @@ limitations under the License.
padding-bottom: 15px;
}
-.mx_PinnedEventsPanel_pinnedEvent {
+.mx_PinnedEventTile {
min-height: 40px;
margin-bottom: 5px;
cursor: pointer;
@@ -37,25 +37,25 @@ limitations under the License.
border-radius: 5px; // for the hover
}
-.mx_PinnedEventsPanel_pinnedEvent:hover {
+.mx_PinnedEventTile:hover {
background-color: $event-selected-color;
}
-.mx_PinnedEventsPanel_pinnedEvent .mx_PinnedEventsPanel_sender {
+.mx_PinnedEventTile .mx_PinnedEventTile_sender {
color: #868686;
font-size: 0.8em;
vertical-align: top;
display: block;
}
-.mx_PinnedEventsPanel_pinnedEvent .mx_EventTile_content {
+.mx_PinnedEventTile .mx_EventTile_content {
margin-left: 50px;
position: relative;
top: 0;
left: 0;
}
-.mx_PinnedEventsPanel_pinnedEvent .mx_BaseAvatar {
+.mx_PinnedEventTile .mx_BaseAvatar {
float: left;
margin-right: 10px;
}