mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
WIP for fixing the popovers
This commit is contained in:
parent
25a4f1fde0
commit
a2e7c4aa77
@ -68,6 +68,17 @@ limitations under the License.
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_MemberTile_hover {
|
||||
background-color: #f0f0f0;
|
||||
font-size: 12px;
|
||||
color: #747474;
|
||||
}
|
||||
|
||||
.mx_MemberTile_userId {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
.mx_MemberTile_nameWrapper {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
@ -77,19 +88,20 @@ limitations under the License.
|
||||
|
||||
.mx_MemberTile_nameSpan {
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_MemberTile_unavailable .mx_MemberTile_avatar,
|
||||
.mx_MemberTile_unavailable .mx_MemberTile_name,
|
||||
.mx_MemberTile_unavailable .mx_MemberTile_nameSpan
|
||||
{
|
||||
opacity: 0.75;
|
||||
opacity: 0.66;
|
||||
}
|
||||
|
||||
.mx_MemberTile_offline .mx_MemberTile_avatar,
|
||||
.mx_MemberTile_offline .mx_MemberTile_name,
|
||||
.mx_MemberTile_offline .mx_MemberTile_nameSpan
|
||||
{
|
||||
opacity: 0.5;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.mx_MemberTile_zalgo {
|
||||
|
BIN
skins/base/img/delete.png
Normal file
BIN
skins/base/img/delete.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1006 B |
@ -47,6 +47,33 @@ module.exports = React.createClass({
|
||||
this.setState({ 'hover': false });
|
||||
},
|
||||
|
||||
getDuration: function(time) {
|
||||
if (!time) return;
|
||||
var t = parseInt(time / 1000);
|
||||
var s = t % 60;
|
||||
var m = parseInt(t / 60) % 60;
|
||||
var h = parseInt(t / (60 * 60)) % 24;
|
||||
var d = parseInt(t / (60 * 60 * 24));
|
||||
if (t < 60) {
|
||||
if (t < 0) {
|
||||
return "0s";
|
||||
}
|
||||
return s + "s";
|
||||
}
|
||||
if (t < 60 * 60) {
|
||||
return m + "m";
|
||||
}
|
||||
if (t < 24 * 60 * 60) {
|
||||
return h + "h";
|
||||
}
|
||||
return d + "d ";
|
||||
},
|
||||
|
||||
getPrettyPresence: function(user) {
|
||||
var presence = user.presence;
|
||||
return presence.charAt(0).toUpperCase() + presence.slice(1);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var isMyUser = MatrixClientPeg.get().credentials.userId == this.props.member.userId;
|
||||
|
||||
@ -66,30 +93,43 @@ module.exports = React.createClass({
|
||||
}
|
||||
}
|
||||
mainClassName += presenceClass;
|
||||
if (this.state.hover) {
|
||||
mainClassName += " mx_MemberTile_hover";
|
||||
}
|
||||
|
||||
var name = this.props.member.name;
|
||||
if (isMyUser) name += " (me)";
|
||||
var leave = isMyUser ? <span className="mx_MemberTile_leave" onClick={this.onLeaveClick}>X</span> : null;
|
||||
var leave = isMyUser ? <img className="mx_MemberTile_leave" src="img/delete.png" width="10" height="10" onClick={this.onLeaveClick}/> : null;
|
||||
|
||||
var nameClass = this.state.hover ? "mx_MemberTile_nameSpan" : "mx_MemberTile_name";
|
||||
var nameClass = "mx_MemberTile_name";
|
||||
if (zalgo.test(name)) {
|
||||
nameClass += " mx_MemberTile_zalgo";
|
||||
}
|
||||
|
||||
var nameEl;
|
||||
if (this.state.hover) {
|
||||
var presence;
|
||||
// FIXME: make presence data update whenever User.presence changes...
|
||||
var active = this.props.member.user.lastActiveAgo || -1;
|
||||
if (active >= 0) {
|
||||
presence = <div className="mx_MemberTile_presence">{ this.getPrettyPresence(this.props.member.user) } for { this.getDuration(active) }</div>;
|
||||
}
|
||||
else {
|
||||
presence = <div className="mx_MemberTile_presence">{ this.getPrettyPresence(this.props.member.user) }</div>;
|
||||
}
|
||||
|
||||
nameEl =
|
||||
<div className="mx_MemberTile_nameWrapper">
|
||||
<div className="mx_MemberTile_details">
|
||||
<MemberInfo member={this.props.member} />
|
||||
<span className={nameClass}>{name}</span>
|
||||
{leave}
|
||||
<div className="mx_MemberTile_userId">{ this.props.member.userId }</div>
|
||||
{ presence }
|
||||
{ leave }
|
||||
</div>
|
||||
}
|
||||
else {
|
||||
nameEl =
|
||||
<div className={nameClass}>
|
||||
{name}
|
||||
{leave}
|
||||
{ name }
|
||||
</div>
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user