From a2e7c4aa770f34ba32bdeb634c2dae495de627b5 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 14 Aug 2015 19:15:41 +0100
Subject: [PATCH] WIP for fixing the popovers

---
 skins/base/css/molecules/MemberTile.css  |  16 ++++++-
 skins/base/img/delete.png                | Bin 0 -> 1006 bytes
 skins/base/views/molecules/MemberTile.js |  54 ++++++++++++++++++++---
 3 files changed, 61 insertions(+), 9 deletions(-)
 create mode 100644 skins/base/img/delete.png

diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css
index f296668f..bd622018 100644
--- a/skins/base/css/molecules/MemberTile.css
+++ b/skins/base/css/molecules/MemberTile.css
@@ -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 {
diff --git a/skins/base/img/delete.png b/skins/base/img/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ff20a116d4340453072e38604cd8de5c894f30a
GIT binary patch
literal 1006
zcmaJ=PfXKL7_T^tkfCTeh<bP_9>BQ%-B#LAacehOvJx_uxPvBk?SnPYzS2He;il0<
zO;8dO!@;vhuaX$!#e*JDkH$npNIY}#rUzfgHas|c==<K6@Av!u{ocd5+3Q1t=Lac@
z8Y<1`6>`S*;K>u@zbSlrLyl2gsNs3EfSYCjsho}K5R_bV5mumSudjT7QxtW4+^N=Z
z%_u7tav3v@VItQjXo{Mej(pQvf*91{qT{Lb!Rxm)aBP*nkuf;K*I>h$*$CkL#%$Hv
zSh8fBp1umEB83pR5St)!m%UJlRJz5h5Ic6WG-!q3C6zubs%Fdq4FwQnm~6`8vJ#MF
zhR;Y+TDk%Rj?b{1$ckJ_5S28iqy^CaXp$|k7nF)#Z0903m2P0{D=gb=Hkqc#pkR^Z
zWm#r9ffa-liAaU(9yX(t7mjrpbQoHJ<6{STAZ9e{Xcen8sr0Y~*YDDLVS7wuU~FXi
zEYEOpOPxT&_<yMDcB4aFfk*ZJlQ^ud`;e``5UmClS=_={oXS_U0Gb#DRfLv1Q=Drc
zjKT);fu^;l2F4B3a=h3%(Lx!9Qu0D<dKN6{DouD8$FY@SK35R3lcJc@WS%c%<a|Dz
z%kt^ToXlyGUhH6XWUac;!yT-BgiZIv#)5Etl39m=vj**AfLzdOTyc8W!uRBBW9{Cx
z2tBbZDTa;L``5ZVE~25>?24CMy7Gq}(R@I}ePQijpFE74B|TS-zSf_gN+grX%(dUo
zj!D}e6PJWLJN*ytuT1ofzDxYrt0Z4-4wQy(@sFO?K9}F$ySzv3pS7DJKRmGQ?@XNe
twp;#k@$v3%d2+;zw)&sYBd7Zk=cpIoM}G;mt)KA=EEQ(;m-*Xw{{X0DIb#3-

literal 0
HcmV?d00001

diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js
index bd184051..244a9b6f 100644
--- a/skins/base/views/molecules/MemberTile.js
+++ b/skins/base/views/molecules/MemberTile.js
@@ -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>
         }