mirror of
https://github.com/element-hq/element-web
synced 2024-10-25 12:16:00 +03:00
Merge branch 'develop' into skindex-nextgen
This commit is contained in:
commit
ef0cf1f28e
13 changed files with 47 additions and 120 deletions
|
@ -24,7 +24,9 @@ module.exports = {
|
||||||
MatrixClientPeg.get().getHomeserverUrl(),
|
MatrixClientPeg.get().getHomeserverUrl(),
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
resizeMethod
|
resizeMethod,
|
||||||
|
false,
|
||||||
|
false
|
||||||
);
|
);
|
||||||
if (!url) {
|
if (!url) {
|
||||||
// member can be null here currently since on invites, the JS SDK
|
// member can be null here currently since on invites, the JS SDK
|
||||||
|
@ -36,18 +38,12 @@ module.exports = {
|
||||||
},
|
},
|
||||||
|
|
||||||
defaultAvatarUrlForString: function(s) {
|
defaultAvatarUrlForString: function(s) {
|
||||||
|
var images = [ '76cfa6', '50e2c2', 'f4c371' ];
|
||||||
var total = 0;
|
var total = 0;
|
||||||
for (var i = 0; i < s.length; ++i) {
|
for (var i = 0; i < s.length; ++i) {
|
||||||
total += s.charCodeAt(i);
|
total += s.charCodeAt(i);
|
||||||
}
|
}
|
||||||
switch (total % 3) {
|
return 'img/' + images[total % images.length] + '.png';
|
||||||
case 0:
|
|
||||||
return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9QjNbxSKP4eagAFnTseHFErFYLBaLxWKxWCwWi8Vi8cX4CzAABSwCRWJw31gAAAAASUVORK5CYII=";
|
|
||||||
case 1:
|
|
||||||
return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9chOaxgCP4eagAFk9seHFErFYLBaLxWKxWCwWi8Vi8cX4CzAAtKMCks/JG8MAAAAASUVORK5CYII=";
|
|
||||||
case 2:
|
|
||||||
return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9YzNayQCP4eagADldseHFErFYLBaLxWKxWCwWi8Vi8cX4CzAAyiACeHwPiu4AAAAASUVORK5CYII=";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -43,10 +43,7 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
defaultAvatarUrl: function(member, width, height, resizeMethod) {
|
defaultAvatarUrl: function(member, width, height, resizeMethod) {
|
||||||
if (this.skinnedDefaultAvatarUrl) {
|
return Avatar.defaultAvatarUrlForString(member.userId);
|
||||||
return this.skinnedDefaultAvatarUrl(member, width, height, resizeMethod);
|
|
||||||
}
|
|
||||||
return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9QjNbxSKP4eagAFnTseHFErFYLBaLxWKxWCwWi8Vi8cX4CzAABSwCRWJw31gAAAAASUVORK5CYII=";
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onError: function(ev) {
|
onError: function(ev) {
|
||||||
|
@ -60,22 +57,10 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
_computeUrl: function() {
|
_computeUrl: function() {
|
||||||
var url = this.props.member.getAvatarUrl(
|
return Avatar.avatarUrlForMember(this.props.member,
|
||||||
MatrixClientPeg.get().getHomeserverUrl(),
|
this.props.width,
|
||||||
this.props.width,
|
this.props.height,
|
||||||
this.props.height,
|
this.props.resizeMethod);
|
||||||
this.props.resizeMethod,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
if (!url) {
|
|
||||||
url = this.defaultAvatarUrl(
|
|
||||||
this.props.member,
|
|
||||||
this.props.width,
|
|
||||||
this.props.height,
|
|
||||||
this.props.resizeMethod
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return url;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
refreshUrl: function() {
|
refreshUrl: function() {
|
||||||
|
@ -95,21 +80,6 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
///////////////
|
///////////////
|
||||||
|
|
||||||
|
|
||||||
avatarUrlForMember: function(member) {
|
|
||||||
return Avatar.avatarUrlForMember(
|
|
||||||
member,
|
|
||||||
this.props.member,
|
|
||||||
this.props.width,
|
|
||||||
this.props.height,
|
|
||||||
this.props.resizeMethod
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
skinnedDefaultAvatarUrl: function(member, width, height, resizeMethod) {
|
|
||||||
return Avatar.defaultAvatarUrlForString(member.userId);
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
// XXX: recalculates default avatar url constantly
|
// XXX: recalculates default avatar url constantly
|
||||||
if (this.state.imageUrl === this.defaultAvatarUrl(this.props.member)) {
|
if (this.state.imageUrl === this.defaultAvatarUrl(this.props.member)) {
|
||||||
|
@ -122,9 +92,9 @@ module.exports = React.createClass({
|
||||||
return (
|
return (
|
||||||
<span className="mx_MemberAvatar" {...this.props}>
|
<span className="mx_MemberAvatar" {...this.props}>
|
||||||
<span className="mx_MemberAvatar_initial" aria-hidden="true"
|
<span className="mx_MemberAvatar_initial" aria-hidden="true"
|
||||||
style={{ fontSize: (this.props.width * 0.75) + "px",
|
style={{ fontSize: (this.props.width * 0.65) + "px",
|
||||||
width: this.props.width + "px",
|
width: this.props.width + "px",
|
||||||
lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
|
lineHeight: this.props.height + "px" }}>{ initial }</span>
|
||||||
<img className="mx_MemberAvatar_image" src={this.state.imageUrl} title={this.props.member.name}
|
<img className="mx_MemberAvatar_image" src={this.state.imageUrl} title={this.props.member.name}
|
||||||
onError={this.onError} width={this.props.width} height={this.props.height} />
|
onError={this.onError} width={this.props.width} height={this.props.height} />
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -15,6 +15,7 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
var MatrixClientPeg = require('../../../MatrixClientPeg');
|
var MatrixClientPeg = require('../../../MatrixClientPeg');
|
||||||
|
var Avatar = require('../../../Avatar');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'RoomAvatar',
|
displayName: 'RoomAvatar',
|
||||||
|
@ -134,12 +135,7 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
getFallbackAvatar: function() {
|
getFallbackAvatar: function() {
|
||||||
var images = [ '76cfa6', '50e2c2', 'f4c371' ];
|
return Avatar.defaultAvatarUrlForString(this.props.room.roomId);
|
||||||
var total = 0;
|
|
||||||
for (var i = 0; i < this.props.room.roomId.length; ++i) {
|
|
||||||
total += this.props.room.roomId.charCodeAt(i);
|
|
||||||
}
|
|
||||||
return 'img/' + images[total % images.length] + '.png';
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
|
@ -159,9 +155,9 @@ module.exports = React.createClass({
|
||||||
return (
|
return (
|
||||||
<span>
|
<span>
|
||||||
<span className="mx_RoomAvatar_initial" aria-hidden="true"
|
<span className="mx_RoomAvatar_initial" aria-hidden="true"
|
||||||
style={{ fontSize: (this.props.width * 0.75) + "px",
|
style={{ fontSize: (this.props.width * 0.65) + "px",
|
||||||
width: this.props.width + "px",
|
width: this.props.width + "px",
|
||||||
lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
|
lineHeight: this.props.height + "px" }}>{ initial }</span>
|
||||||
<img className="mx_RoomAvatar" src={this.state.imageUrl}
|
<img className="mx_RoomAvatar" src={this.state.imageUrl}
|
||||||
onError={this.onError} style={style} />
|
onError={this.onError} style={style} />
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -21,7 +21,7 @@ var filesize = require('filesize');
|
||||||
var MatrixClientPeg = require('../../../MatrixClientPeg');
|
var MatrixClientPeg = require('../../../MatrixClientPeg');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'MFileMessage',
|
displayName: 'MFileBody',
|
||||||
|
|
||||||
presentableTextForFile: function(content) {
|
presentableTextForFile: function(content) {
|
||||||
var linkText = 'Attachment';
|
var linkText = 'Attachment';
|
|
@ -24,7 +24,7 @@ var Modal = require('../../../Modal');
|
||||||
var sdk = require('../../../index');
|
var sdk = require('../../../index');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'MImageMessage',
|
displayName: 'MImageBody',
|
||||||
|
|
||||||
thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
|
thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
|
||||||
if (!fullWidth || !fullHeight) {
|
if (!fullWidth || !fullHeight) {
|
|
@ -1,52 +0,0 @@
|
||||||
/*
|
|
||||||
Copyright 2015 OpenMarket Ltd
|
|
||||||
|
|
||||||
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 sdk = require('../../../index');
|
|
||||||
var TextForEvent = require('../../../TextForEvent');
|
|
||||||
|
|
||||||
module.exports = React.createClass({
|
|
||||||
displayName: 'MRoomMemberEvent',
|
|
||||||
|
|
||||||
getMemberEventText: function() {
|
|
||||||
return TextForEvent.textForEvent(this.props.mxEvent);
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
// XXX: for now, just cheekily borrow the css from message tile...
|
|
||||||
var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
|
|
||||||
var text = this.getMemberEventText();
|
|
||||||
if (!text) return <div/>;
|
|
||||||
var MessageTimestamp = sdk.getComponent('messages.MessageTimestamp');
|
|
||||||
var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
|
|
||||||
return (
|
|
||||||
<div className="mx_MessageTile mx_MessageTile_notice">
|
|
||||||
<div className="mx_MessageTile_avatar">
|
|
||||||
<MemberAvatar member={this.props.mxEvent.sender} />
|
|
||||||
</div>
|
|
||||||
{ timestamp }
|
|
||||||
<span className="mx_SenderProfile"></span>
|
|
||||||
<span className="mx_MessageTile_content">
|
|
||||||
{ text }
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
|
@ -24,7 +24,7 @@ var Modal = require('../../../Modal');
|
||||||
var sdk = require('../../../index');
|
var sdk = require('../../../index');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'MVideoMessage',
|
displayName: 'MVideoBody',
|
||||||
|
|
||||||
thumbScale: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
|
thumbScale: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
|
||||||
if (!fullWidth || !fullHeight) {
|
if (!fullWidth || !fullHeight) {
|
|
@ -20,7 +20,7 @@ var React = require('react');
|
||||||
var sdk = require('../../../index');
|
var sdk = require('../../../index');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'Message',
|
displayName: 'MessageEvent',
|
||||||
|
|
||||||
statics: {
|
statics: {
|
||||||
needsSenderProfile: function() {
|
needsSenderProfile: function() {
|
||||||
|
@ -29,15 +29,15 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
var UnknownMessageTile = sdk.getComponent('messages.UnknownMessage');
|
var UnknownMessageTile = sdk.getComponent('messages.UnknownBody');
|
||||||
|
|
||||||
var tileTypes = {
|
var tileTypes = {
|
||||||
'm.text': sdk.getComponent('messages.TextualMessage'),
|
'm.text': sdk.getComponent('messages.TextualBody'),
|
||||||
'm.notice': sdk.getComponent('messages.TextualMessage'),
|
'm.notice': sdk.getComponent('messages.TextualBody'),
|
||||||
'm.emote': sdk.getComponent('messages.TextualMessage'),
|
'm.emote': sdk.getComponent('messages.TextualBody'),
|
||||||
'm.image': sdk.getComponent('messages.MImageMessage'),
|
'm.image': sdk.getComponent('messages.MImageBody'),
|
||||||
'm.file': sdk.getComponent('messages.MFileMessage'),
|
'm.file': sdk.getComponent('messages.MFileBody'),
|
||||||
'm.video': sdk.getComponent('messages.MVideoMessage')
|
'm.video': sdk.getComponent('messages.MVideoBody')
|
||||||
};
|
};
|
||||||
|
|
||||||
var content = this.props.mxEvent.getContent();
|
var content = this.props.mxEvent.getContent();
|
|
@ -26,7 +26,7 @@ var linkifyMatrix = require('../../../linkify-matrix');
|
||||||
linkifyMatrix(linkify);
|
linkifyMatrix(linkify);
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'TextualMessage',
|
displayName: 'TextualBody',
|
||||||
|
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
linkifyElement(this.refs.content, linkifyMatrix.options);
|
linkifyElement(this.refs.content, linkifyMatrix.options);
|
|
@ -19,7 +19,7 @@ limitations under the License.
|
||||||
var React = require('react');
|
var React = require('react');
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'UnknownMessage',
|
displayName: 'UnknownBody',
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
var content = this.props.mxEvent.getContent();
|
var content = this.props.mxEvent.getContent();
|
|
@ -37,7 +37,7 @@ try {
|
||||||
}
|
}
|
||||||
|
|
||||||
var eventTileTypes = {
|
var eventTileTypes = {
|
||||||
'm.room.message': 'messages.Message',
|
'm.room.message': 'messages.MessageEvent',
|
||||||
'm.room.member' : 'messages.TextualEvent',
|
'm.room.member' : 'messages.TextualEvent',
|
||||||
'm.call.invite' : 'messages.TextualEvent',
|
'm.call.invite' : 'messages.TextualEvent',
|
||||||
'm.call.answer' : 'messages.TextualEvent',
|
'm.call.answer' : 'messages.TextualEvent',
|
||||||
|
@ -48,6 +48,17 @@ var eventTileTypes = {
|
||||||
|
|
||||||
var MAX_READ_AVATARS = 5;
|
var MAX_READ_AVATARS = 5;
|
||||||
|
|
||||||
|
// Our component structure for EventTiles on the timeline is:
|
||||||
|
//
|
||||||
|
// .-EventTile------------------------------------------------.
|
||||||
|
// | MemberAvatar (SenderProfile) TimeStamp |
|
||||||
|
// | .-{Message,Textual}Event---------------. Read Avatars |
|
||||||
|
// | | .-MFooBody-------------------. | |
|
||||||
|
// | | | (only if MessageEvent) | | |
|
||||||
|
// | | '----------------------------' | |
|
||||||
|
// | '--------------------------------------' |
|
||||||
|
// '----------------------------------------------------------'
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'Event',
|
displayName: 'Event',
|
||||||
|
|
|
@ -34,6 +34,12 @@ var sdk = require('../../../index');
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'MemberInfo',
|
displayName: 'MemberInfo',
|
||||||
|
|
||||||
|
getDefaultProps: function() {
|
||||||
|
return {
|
||||||
|
onFinished: function() {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
// work out the current state
|
// work out the current state
|
||||||
if (this.props.member) {
|
if (this.props.member) {
|
||||||
|
|
Loading…
Reference in a new issue