diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css index bd622018bc..a4310d206b 100644 --- a/skins/base/css/molecules/MemberTile.css +++ b/skins/base/css/molecules/MemberTile.css @@ -15,13 +15,14 @@ limitations under the License. */ .mx_MemberTile { - cursor: pointer; display: table-row; height: 49px; + position: relative; } .mx_MemberTile_avatar { display: table-cell; + padding-left: 14px; padding-right: 12px; padding-top: 3px; padding-bottom: 3px; @@ -31,6 +32,10 @@ limitations under the License. position: relative; } +.mx_MemberTile_inviteTile { + cursor: pointer; +} + .mx_MemberTile_inviteEditing { display: initial ! important; } @@ -50,14 +55,14 @@ limitations under the License. font-size: 14px; padding: 9px; margin-top: 6px; + margin-left: 14px; } .mx_MemberTile_power { - z-index: 10; position: absolute; width: 48px; height: 48px; - left: -4px; + left: 10px; top: -1px; } @@ -68,6 +73,12 @@ limitations under the License. text-overflow: ellipsis; } +.mx_MemberTile_details { + display: table-cell; + padding-right: 14px; + vertical-align: middle; +} + .mx_MemberTile_hover { background-color: #f0f0f0; font-size: 12px; @@ -76,6 +87,16 @@ limitations under the License. .mx_MemberTile_userId { font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; +} + +.mx_MemberTile_leave { + cursor: pointer; + margin-top: 8px; + margin-right: -4px; + margin-left: 6px; + float: right; } /* @@ -107,7 +128,3 @@ limitations under the License. .mx_MemberTile_zalgo { font-family: Helvetica, Arial, Sans-Serif; } - -.mx_MemberTile_leave { - float: right; -} diff --git a/skins/base/css/organisms/MemberList.css b/skins/base/css/organisms/MemberList.css index 4d2e7215dc..aab0def49a 100644 --- a/skins/base/css/organisms/MemberList.css +++ b/skins/base/css/organisms/MemberList.css @@ -42,7 +42,6 @@ limitations under the License. border: 1px solid #a9dbf4; overflow-y: auto; border-radius: 8px; - padding: 20px 14px 14px 24px; background-color: #fff; order: 1; @@ -57,5 +56,5 @@ limitations under the License. } .mx_MemberList h2 { - margin-top: 0px; + margin: 14px; } diff --git a/skins/base/views/atoms/EditableText.js b/skins/base/views/atoms/EditableText.js index 38aa5c8d87..d4aa285790 100644 --- a/skins/base/views/atoms/EditableText.js +++ b/skins/base/views/atoms/EditableText.js @@ -33,7 +33,6 @@ module.exports = React.createClass({ }, onClickDiv: function() { - console.log("onClickDiv triggered"); this.setState({ phase: this.Phases.Edit, }) diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js index 244a9b6fb7..6e3cb85982 100644 --- a/skins/base/views/molecules/MemberTile.js +++ b/skins/base/views/molecules/MemberTile.js @@ -70,8 +70,12 @@ module.exports = React.createClass({ }, getPrettyPresence: function(user) { + if (!user) return "Unknown"; var presence = user.presence; - return presence.charAt(0).toUpperCase() + presence.slice(1); + if (presence === "online") return "Online"; + if (presence === "unavailable") return "Idle"; // XXX: is this actually right? + if (presence === "offline") return "Offline"; + return "Unknown"; }, render: function() { @@ -110,7 +114,7 @@ module.exports = React.createClass({ if (this.state.hover) { var presence; // FIXME: make presence data update whenever User.presence changes... - var active = this.props.member.user.lastActiveAgo || -1; + var active = this.props.member.user ? (this.props.member.user.lastActiveAgo || -1) : -1; if (active >= 0) { presence =