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 ( +