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

Do read receipt avatars with absolute positioning: this should be a lot easier to animate. Also mess around with the MemberAvatar a bit so it's easier to style.

Browse Source
This commit is contained in:
David Baker 2015-11-10 17:44:59 +00:00
parent c9823d07fd
commit 9a6624d1c7
4 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/skins/vector/css/atoms/MemberAvatar.css
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MemberAvatar {
.mx_MemberAvatar_image {
z-index: 20;
border-radius: 20px;
}
@ -25,6 +25,6 @@ limitations under the License.
text-align: center;
}
.mx_MemberAvatar_wrapper {
.mx_MemberAvatar {
position: relative;
}

10
src/skins/vector/css/molecules/EventTile.css
View File

@ -130,15 +130,19 @@ limitations under the License.
}
.mx_EventTile_readAvatars {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
}
.mx_EventTile_readAvatars .mx_MemberAvatar {
margin-left: 1px;
margin-right: 1px;
vertical-align: middle;
position: absolute;
display: inline-block;
}
.mx_EventTile_readAvatarRemainder {
color: #acacac;
font-size: 12px;
position: absolute;
}

10
src/skins/vector/views/atoms/MemberAvatar.js
View File

@ -49,20 +49,22 @@ module.exports = React.createClass({
initial = this.props.member.name[1].toUpperCase();
return (
<span className="mx_MemberAvatar_wrapper">
<span className="mx_MemberAvatar" style={this.props.style}>
<span className="mx_MemberAvatar_initial"
style={{ fontSize: (this.props.width * 0.75) + "px",
width: this.props.width + "px",
lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
<img className="mx_MemberAvatar" src={this.state.imageUrl}
<img className="mx_MemberAvatar_image" src={this.state.imageUrl}
onError={this.onError} width={this.props.width} height={this.props.height} />
</span>
);
}
return (
<img className="mx_MemberAvatar" src={this.state.imageUrl}
<img className="mx_MemberAvatar mx_MemberAvatar_image" src={this.state.imageUrl}
onError={this.onError}
width={this.props.width} height={this.props.height} />
width={this.props.width} height={this.props.height}
style={this.props.style}
/>
);
}
});

18
src/skins/vector/views/molecules/EventTile.js
View File

@ -91,24 +91,32 @@ module.exports = React.createClass({
var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
var left = 0;
for (var i = 0; i < receipts.length; ++i) {
var member = room.getMember(receipts[i].userId);
// add to the start so the most recent is on the end (ie. ends up rightmost)
avatars.unshift(
<MemberAvatar key={member.userId} member={member} width={14} height={14} resizeMethod="crop" />
<MemberAvatar key={member.userId} member={member}
width={14} height={14} resizeMethod="crop"
style={ {left: left} }
/>
);
left -= 15;
if (i + 1 >= MAX_READ_AVATARS) {
break;
}
}
var remainder = receipts.length - MAX_READ_AVATARS;
var remText;
if (remainder > 0) {
avatars.unshift(
<span className="mx_EventTile_readAvatarRemainder">+{ remainder }</span>
);
remText = <span className="mx_EventTile_readAvatarRemainder" style={ {left: left} }>+{ remainder }</span>;
}
return <span className="mx_EventTile_readAvatars">{ avatars }</span>;
return <span className="mx_EventTile_readAvatars">
{remText}
{avatars}
</span>;
},
render: function() {