diff --git a/skins/base/css/common.css b/skins/base/css/common.css index d90ce11a..d6c5e091 100644 --- a/skins/base/css/common.css +++ b/skins/base/css/common.css @@ -43,9 +43,40 @@ html { overflow: -moz-scrollbars-none; } -/* FIXME: why is all the dialog stuff in here rather than in per-component files? */ +.mx_ContextualMenu_background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1.0; + z-index: 2000; +} -.mx_Dialog_Background { +.mx_ContextualMenu { + border: 1px solid #a9dbf4; + border-radius: 8px; + background-color: #fff; + color: #747474; + position: fixed; + z-index: 2001; + padding: 6px; +} + +.mx_ContextualMenu_chevron { + padding: 12px; + position: absolute; + right: -21px; + top: 0px; +} + +.mx_ContextualMenu_field { + padding: 3px 6px 3px 6px; + cursor: pointer; +} + + +.mx_Dialog_background { position: fixed; top: 0; left: 0; @@ -56,7 +87,7 @@ html { z-index: 2000; } -.mx_Dialog_Wrapper { +.mx_Dialog_wrapper { position: fixed; top: 0; left: 0; diff --git a/skins/base/css/molecules/MemberInfo.css b/skins/base/css/molecules/MemberInfo.css index 144212d7..52c48a79 100644 --- a/skins/base/css/molecules/MemberInfo.css +++ b/skins/base/css/molecules/MemberInfo.css @@ -14,60 +14,3 @@ 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: 0px; - z-index: 1000; - padding: 6px; -} - -.mx_MemberInfo_chevron { - padding: 12px; - position: absolute; - right: -21px; - top: 0px; -} - -/* - * a hacky shim to extend the hitmask of the overlay to overlap - * better with the main menu itself - */ -.mx_MemberInfo_shim { - position: absolute; - left: 212px; - width: 40px; - height: 100%; -} - -.mx_MemberInfo_avatar { - padding: 6px; -} - -.mx_MemberInfo_avatarImg { - border-radius: 128px; -} - -.mx_MemberInfo_field { - padding: 6px; - overflow: hidden; - text-overflow: ellipsis; -} - -.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/MemberTile.css b/skins/base/css/molecules/MemberTile.css index f296668f..a4310d20 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,33 @@ 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; + color: #747474; +} + +.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; +} + +/* .mx_MemberTile_nameWrapper { display: table-cell; vertical-align: middle; @@ -77,25 +109,22 @@ 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 { 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 4d2e7215..aab0def4 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/img/delete.png b/skins/base/img/delete.png new file mode 100644 index 00000000..8ff20a11 Binary files /dev/null and b/skins/base/img/delete.png differ diff --git a/skins/base/img/edit.png b/skins/base/img/edit.png new file mode 100644 index 00000000..2686885f Binary files /dev/null and b/skins/base/img/edit.png differ diff --git a/skins/base/views/molecules/ContextualMenu.js b/skins/base/views/molecules/ContextualMenu.js new file mode 100644 index 00000000..58c542ee --- /dev/null +++ b/skins/base/views/molecules/ContextualMenu.js @@ -0,0 +1,35 @@ +/* +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 classNames = require('classnames'); + +var dis = require("../../../../src/dispatcher"); + +var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); + +module.exports = React.createClass({ + displayName: 'ContextualMenu', + + render: function() { + return ( +