Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Permalink pins to their original events

Browse Source 
Signed-off-by: Travis Ralston <travpc@gmail.com>
This commit is contained in:
Travis Ralston 2017-09-28 16:59:22 -06:00
parent 5daa16ab53
commit fa5a23e0df
2 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/views/rooms/PinnedEventsPanel.js
View File

@ -20,9 +20,43 @@ var React = require('react');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var sdk = require('matrix-react-sdk'); var sdk = require('matrix-react-sdk');
var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); 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 { _t } from "matrix-react-sdk/lib/languageHandler";
import { EventTimeline } from "matrix-js-sdk"; 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 (
<div className="mx_PinnedEventTile" onClick={this.onTileClicked}>
<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({ module.exports = React.createClass({
displayName: 'PinnedEventsPanel', displayName: 'PinnedEventsPanel',
propTypes: { propTypes: {
@ -59,31 +93,17 @@ module.exports = React.createClass({
}, },
_getPinnedTiles: function() { _getPinnedTiles: function() {
const MessageEvent = sdk.getComponent("views.messages.MessageEvent");
const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
if (this.state.pinned.length == 0) { if (this.state.pinned.length == 0) {
return <div>No pinned messages.</div>; return <div>No pinned messages.</div>;
} }
return this.state.pinned.map(pinnedEvent => { return this.state.pinned.map(pinnedEvent => {
const event = pinnedEvent.timeline.getEvents().find(e => e.getId() === pinnedEvent.eventId); 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 // Don't show non-messages. Technically users can pin state/custom events, but we won't
// support those events. // support those events.
if (event.getType() !== "m.room.message") return ''; if (event.getType() !== "m.room.message") return '';
return (<PinnedEventTile key={event.getId()} mxRoom={this.props.room} mxEvent={event} />);
return (
<div key={"pinnedEvent_" + pinnedEvent.eventId} className="mx_PinnedEventsPanel_pinnedEvent">
<MemberAvatar member={sender} width={avatarSize} height={avatarSize} />
<span className="mx_PinnedEventsPanel_sender">
{sender.name}
</span>
<MessageEvent mxEvent={event} className="mx_PinnedEventsPanel_body" />
</div>
);
}); });
}, },

10
src/skins/vector/css/vector-web/views/rooms/_PinnedEventsPanel.scss
View File

@ -29,7 +29,7 @@ limitations under the License.
padding-bottom: 15px; padding-bottom: 15px;
} }
.mx_PinnedEventsPanel_pinnedEvent { .mx_PinnedEventTile {
min-height: 40px; min-height: 40px;
margin-bottom: 5px; margin-bottom: 5px;
cursor: pointer; cursor: pointer;
@ -37,25 +37,25 @@ limitations under the License.
border-radius: 5px; // for the hover border-radius: 5px; // for the hover
} }
.mx_PinnedEventsPanel_pinnedEvent:hover { .mx_PinnedEventTile:hover {
background-color: $event-selected-color; background-color: $event-selected-color;
} }
.mx_PinnedEventsPanel_pinnedEvent .mx_PinnedEventsPanel_sender { .mx_PinnedEventTile .mx_PinnedEventTile_sender {
color: #868686; color: #868686;
font-size: 0.8em; font-size: 0.8em;
vertical-align: top; vertical-align: top;
display: block; display: block;
} }
.mx_PinnedEventsPanel_pinnedEvent .mx_EventTile_content { .mx_PinnedEventTile .mx_EventTile_content {
margin-left: 50px; margin-left: 50px;
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
} }
.mx_PinnedEventsPanel_pinnedEvent .mx_BaseAvatar { .mx_PinnedEventTile .mx_BaseAvatar {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }