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 0000000000..1fe5d347db Binary files /dev/null and b/skins/base/img/chevron-right.png differ diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/DirectoryMenu.js index 461ec1c649..8ffb418014 100644 --- a/skins/base/views/molecules/DirectoryMenu.js +++ b/skins/base/views/molecules/DirectoryMenu.js @@ -29,6 +29,7 @@ module.exports = React.createClass({ displayName: 'DirectoryMenu', // mixins: [DirectoryMenuController], + // FIXME: should these onClicks be in the controller instead? onSettingsClick: function() { dis.dispatch({action: 'view_user_settings'}); }, diff --git a/skins/base/views/molecules/MemberInfo.js b/skins/base/views/molecules/MemberInfo.js new file mode 100644 index 0000000000..19e0dc4644 --- /dev/null +++ b/skins/base/views/molecules/MemberInfo.js @@ -0,0 +1,50 @@ +/* +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. +*/ + +'use strict'; + +var React = require('react'); + +var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); +//var MemberInfoController = require("../../../../src/controllers/molecules/MemberInfo"); + +module.exports = React.createClass({ + displayName: 'MemberInfo', + //mixins: [MemberInfoController], + + render: function() { + var power; + if (this.props.member) { + var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png"; + power = ; + } + + 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'); }