From 2121ddc295508aee1c5d5733752c47b52b03e362 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 20 Jul 2015 01:51:58 +0100 Subject: [PATCH] add a MemberInfo list overlay as a mini user-profile page --- skins/base/css/molecules/MemberInfo.css | 61 ++++++++++++++++++++ skins/base/css/molecules/RoomTile.css | 14 ++--- skins/base/css/organisms/MemberList.css | 2 +- skins/base/img/chevron-right.png | Bin 0 -> 181 bytes skins/base/views/molecules/DirectoryMenu.js | 1 + skins/base/views/molecules/MemberInfo.js | 50 ++++++++++++++++ skins/base/views/molecules/MemberTile.js | 30 +++++++++- src/ComponentBroker.js | 3 +- 8 files changed, 146 insertions(+), 15 deletions(-) create mode 100644 skins/base/css/molecules/MemberInfo.css create mode 100644 skins/base/img/chevron-right.png create mode 100644 skins/base/views/molecules/MemberInfo.js diff --git a/skins/base/css/molecules/MemberInfo.css b/skins/base/css/molecules/MemberInfo.css new file mode 100644 index 0000000000..324423056d --- /dev/null +++ b/skins/base/css/molecules/MemberInfo.css @@ -0,0 +1,61 @@ +/* +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. +*/ + +.mx_MemberInfo { + text-align: center; + border: 1px solid #a9dbf4; + border-radius: 8px; + background-color: #fff; + position: absolute; + width: 200px; + margin-left: -295px; + margin-top: -12px; + z-index: 1000; + padding: 6px; +} + +.mx_MemberInfo_chevron { + padding: 12px; + position: absolute; + right: -21px; + top: 0px; +} + +.mx_MemberInfo_avatar { + padding: 6px; +} + +.mx_MemberInfo_avatarImg { + border-radius: 128px; +} + +.mx_MemberInfo_field { + padding: 6px; + font-weight: bold; +} + +.mx_MemberInfo_button { + vertical-align: middle; + max-width: 100px; + height: 36px; + background-color: #50e3c2; + line-height: 36px; + border-radius: 36px; + color: #fff; + margin: auto; + margin-top: 6px; + margin-bottom: 6px; +} diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css index 43f05440b5..d43945c377 100644 --- a/skins/base/css/molecules/RoomTile.css +++ b/skins/base/css/molecules/RoomTile.css @@ -82,16 +82,12 @@ limitations under the License. bottom: 3px; } -.mx_RoomTile_unread { - font-weight: bold; -} - -.mx_RoomTile_highlight { - font-weight: bold; -} - -.mx_RoomTile_invited { +.mx_RoomTile_unread, +.mx_RoomTile_highlight, +.mx_RoomTile_invited +{ font-weight: bold; + color: #000; } .mx_RoomTile_selected { diff --git a/skins/base/css/organisms/MemberList.css b/skins/base/css/organisms/MemberList.css index f65fec8114..b56e3f1180 100644 --- a/skins/base/css/organisms/MemberList.css +++ b/skins/base/css/organisms/MemberList.css @@ -39,7 +39,7 @@ limitations under the License. .mx_MemberList_wrapper { display: table; table-layout: fixed; - width: 100%; + width: 100%; } .mx_MemberList h2 { diff --git a/skins/base/img/chevron-right.png b/skins/base/img/chevron-right.png new file mode 100644 index 0000000000000000000000000000000000000000..1fe5d347db3d0c807a90859f33760b8858b06ff1 GIT binary patch literal 181 zcmeAS@N?(olHy`uVBq!ia0vp^oIotV!3HFcc!W9wDajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_d9Md6+; + } + + return ( +
+ +
+ +
+
{this.props.member.userId}
+
Presence: {this.props.member.presence}
+
Last active: {this.props.member.last_active_ago}
+
Start chat
+
+ ); + } +}); diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js index 84609932e4..4e00f2af23 100644 --- a/skins/base/views/molecules/MemberTile.js +++ b/skins/base/views/molecules/MemberTile.js @@ -19,11 +19,27 @@ limitations under the License. var React = require('react'); var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); +var ComponentBroker = require('../../../../src/ComponentBroker'); var MemberTileController = require("../../../../src/controllers/molecules/MemberTile"); +var MemberInfo = ComponentBroker.get('molecules/MemberInfo'); module.exports = React.createClass({ displayName: 'MemberTile', mixins: [MemberTileController], + + // XXX: should these be in the controller? + getInitialState: function() { + return { 'hover': false }; + }, + + mouseEnter: function(e) { + this.setState({ 'hover': true }); + }, + + mouseLeave: function(e) { + this.setState({ 'hover': false }); + }, + render: function() { var power; if (this.props.member) { @@ -32,9 +48,17 @@ module.exports = React.createClass({ } return ( -
-
{ power }
-
{this.props.member.name}
+
+
+ + { power } +
+
+ { this.state.hover ? : null } + {this.props.member.name} +
); } diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index db1915ea29..342a53935c 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -107,6 +107,5 @@ require('../skins/base/views/molecules/voip/MCallInviteTile'); require('../skins/base/views/molecules/voip/MCallAnswerTile'); require('../skins/base/views/molecules/voip/MCallHangupTile'); require('../skins/base/views/molecules/EventAsTextTile'); - - +require('../skins/base/views/molecules/MemberInfo'); }