From e59bfe16dc1a2f7eb859b8752897accdda589b2c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 24 Oct 2015 20:19:54 +0100 Subject: [PATCH] sort out the membership list --- src/skins/vector/css/molecules/EventTile.css | 2 +- src/skins/vector/css/molecules/MemberTile.css | 54 +++++------------- src/skins/vector/css/molecules/RoomHeader.css | 4 +- src/skins/vector/css/organisms/MemberList.css | 36 ++++++++++-- src/skins/vector/css/organisms/RightPanel.css | 19 ++++-- src/skins/vector/css/organisms/RoomList.css | 3 +- src/skins/vector/css/organisms/RoomView.css | 4 +- src/skins/vector/img/edit.png | Bin 498 -> 460 bytes src/skins/vector/img/member_chevron.png | Bin 0 -> 271 bytes .../vector/views/molecules/MemberTile.js | 14 ++--- .../vector/views/organisms/MemberList.js | 18 +----- .../vector/views/organisms/RightPanel.js | 13 +++++ 12 files changed, 88 insertions(+), 79 deletions(-) create mode 100644 src/skins/vector/img/member_chevron.png diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css index 0df5dcf4..cdb09848 100644 --- a/src/skins/vector/css/molecules/EventTile.css +++ b/src/skins/vector/css/molecules/EventTile.css @@ -91,7 +91,7 @@ limitations under the License. } .mx_EventTile_editButton { - clear: both; + clear: right; float: right; display: inline-block; visibility: hidden; diff --git a/src/skins/vector/css/molecules/MemberTile.css b/src/skins/vector/css/molecules/MemberTile.css index ca752541..24dc5dba 100644 --- a/src/skins/vector/css/molecules/MemberTile.css +++ b/src/skins/vector/css/molecules/MemberTile.css @@ -16,48 +16,22 @@ limitations under the License. .mx_MemberTile { display: table-row; - height: 49px; position: relative; + color: #454545; } .mx_MemberTile_avatar { display: table-cell; - padding-left: 14px; + padding-left: 3px; padding-right: 12px; - padding-top: 3px; - padding-bottom: 3px; + padding-top: 2px; + padding-bottom: 0px; vertical-align: middle; width: 36px; height: 36px; position: relative; } -.mx_MemberTile_inviteTile { - cursor: pointer; -} - -.mx_MemberTile_inviteEditing { - display: initial ! important; -} - -.mx_MemberTile_inviteEditing .mx_MemberTile_avatar { - display: none; -} - -.mx_MemberTile_inviteEditing .mx_MemberTile_name { - width: 200px; -} - -.mx_MemberTile_inviteEditing .mx_MemberTile_name input { - border-radius: 3px; - border: 1px solid #c7c7c7; - font-weight: 300; - font-size: 14px; - padding: 9px; - margin-top: 6px; - margin-left: 14px; -} - .mx_MemberTile_power { position: absolute; width: 44px; @@ -79,20 +53,18 @@ limitations under the License. vertical-align: middle; } -.mx_MemberTile_hover { - background-color: #f0f0f0; - font-size: 12px; - color: #747474; -} - .mx_MemberTile_userId { - font-weight: bold; + font-size: 14px; overflow: hidden; text-overflow: ellipsis; } -.mx_MemberTile_leave { - cursor: pointer; +.mx_MemberTile_presence { + font-size: 12px; + opacity: 0.5; +} + +.mx_MemberTile_chevron { margin-top: 8px; margin-right: -4px; margin-left: 6px; @@ -113,14 +85,14 @@ limitations under the License. .mx_MemberTile_unavailable .mx_MemberTile_avatar, .mx_MemberTile_unavailable .mx_MemberTile_name, -.mx_MemberTile_unavailable .mx_MemberTile_nameSpan +.mx_MemberTile_unavailable .mx_MemberTile_userId { opacity: 0.66; } .mx_MemberTile_offline .mx_MemberTile_avatar, .mx_MemberTile_offline .mx_MemberTile_name, -.mx_MemberTile_offline .mx_MemberTile_nameSpan +.mx_MemberTile_offline .mx_MemberTile_userId { opacity: 0.25; } diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/molecules/RoomHeader.css index 870ca6d9..80b7c436 100644 --- a/src/skins/vector/css/molecules/RoomHeader.css +++ b/src/skins/vector/css/molecules/RoomHeader.css @@ -20,7 +20,7 @@ limitations under the License. .mx_RoomHeader_wrapper { max-width: 960px; margin: auto; - height: 88px; + height: 83px; border-bottom: 1px solid #eeeeee; display: -webkit-box; @@ -89,7 +89,7 @@ limitations under the License. } .mx_RoomHeader_simpleHeader { - line-height: 88px; + line-height: 83px; color: #76cfa6; font-weight: 400; font-size: 20px; diff --git a/src/skins/vector/css/organisms/MemberList.css b/src/skins/vector/css/organisms/MemberList.css index 7320a127..4c323da9 100644 --- a/src/skins/vector/css/organisms/MemberList.css +++ b/src/skins/vector/css/organisms/MemberList.css @@ -44,12 +44,40 @@ limitations under the License. flex: 1 1 0px; } +.mx_MemberList_invite { + font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif; + border-radius: 3px; + border: 1px solid #f0f0f0; + padding: 9px; + color: #454545; + margin-left: 3px; + font-size: 16px; + margin-bottom: 6px; + width: 180px; +} + +.mx_MemberList_invite::-moz-placeholder { + color: #454545; + opacity: 0.5; +} +.mx_MessageList_invite::-webkit-input-placeholder { + color: #454545; + opacity: 0.5; +} + +.mx_MemberList_invited h2 { + text-transform: uppercase; + color: #3d3b39; + font-weight: 600; + font-size: 14px; + padding-left: 3px; + padding-right: 12px; + margin-top: 8px; + margin-bottom: 4px; +} + .mx_MemberList_wrapper { display: table; table-layout: fixed; width: 100%; } - -.mx_MemberList h2 { - margin: 14px; -} diff --git a/src/skins/vector/css/organisms/RightPanel.css b/src/skins/vector/css/organisms/RightPanel.css index 7e80e27e..a3aa8e23 100644 --- a/src/skins/vector/css/organisms/RightPanel.css +++ b/src/skins/vector/css/organisms/RightPanel.css @@ -33,29 +33,36 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 66px; - flex: 0 0 66px; + -webkit-flex: 0 0 83px; + flex: 0 0 83px; } /** Fixme - factor this out with the main header **/ .mx_RightPanel_headerButtonGroup { - margin-top: 18px; - height: 48px; + margin-top: 32px; float: left; background-color: #fff; - margin-right: 22px; + margin-left: 3px; } .mx_RightPanel_headerButton { cursor: pointer; - height: 48px; display: table-cell; vertical-align: middle; padding-left: 8px; padding-right: 8px; } +.mx_RightPanel_headerButton_highlight { + position: relative; + bottom: 0px; + left: -4px; + width: 25px; + height: 4px; + background-color: #76cfa6; +} + .mx_RightPanel .mx_MemberList { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; diff --git a/src/skins/vector/css/organisms/RoomList.css b/src/skins/vector/css/organisms/RoomList.css index bb1761bf..34ebd1db 100644 --- a/src/skins/vector/css/organisms/RoomList.css +++ b/src/skins/vector/css/organisms/RoomList.css @@ -20,7 +20,6 @@ limitations under the License. .mx_RoomList_invites, .mx_RoomList_recents { - margin-top: -12px; display: table; table-layout: fixed; width: 100%; @@ -40,4 +39,6 @@ limitations under the License. font-size: 14px; padding-left: 12px; padding-right: 12px; + margin-top: 8px; + margin-bottom: 4px; } diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index c1971c61..a64a9660 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -36,8 +36,8 @@ limitations under the License. -webkit-order: 1; order: 1; - -webkit-flex: 0 0 88px; - flex: 0 0 88px; + -webkit-flex: 0 0 83px; + flex: 0 0 83px; } .mx_RoomView_fileDropTarget { diff --git a/src/skins/vector/img/edit.png b/src/skins/vector/img/edit.png index 2686885f792ed69bdb88518bfe6850301719e7f0..6f373d3f3dc7dfbb4186e4347fad43920bd04279 100644 GIT binary patch literal 460 zcmV;-0WPx$hDk(0R45gVlCf&SP!xv$Tx)RmyQVlu+3ygXZ$ zrL^HmsMqUZu~x1@)$Ad4coqLoFF_9IaN%;hfg% zwLh6me3|*;FsY%IjNlq^Bl`Wme>@&xnr7IDXr|R_1!|}z6Qi@+?S9E9ADhkQk#kBU z5{Sp+@H`K$>tZw-VK^MlZQFiOD;Mr61F(c^m;46@h9CqPx$tVu*cR5%f(l)+BIKoEwfO92Z+Lr{4D6%!NV(UTtZDbRyF8YUWIV)P00Y@!!0 zCIz`G2_n)KOUu^%*OY950?|3N&CYy(XJ%(tqbXK1t>d$G^MmkYTF;*(&li78Hv5fv3;`jlz`kdE0p6&6#bX@=BbZ4cZ^78wt z-aEW*THVIyV8}TS;tW2-Ahu?H9YlnX2^?>>AIDFuBNhx;h%r1+&R!vvD`rF|W|-{- z^w9DMWg->~SRgtYi=J#O>rymMr{{4xZ+uhR4M-Dh+h0o(7_;M-puw;^XsiZrjHx24 zOB(Iwbr}f;EHoIl7`qdrLE|E4n+AnD2}ZI)L&uz`4pk5$RZ-4|C9N}SnrPL|AK~CFgUysPx#$w@>(R2Ug!V1NQ`ZEZFf8<}PTa+r*bjTf@BvtQ8B(Gf?M1hE+n4Go={n3(o} zIRF3uzy9mjFUKoauDk^CL4f(iix>ALB_$bwzyXLwnVFfrg@uLJyn6NOD_8-Dc>etP z0bGihK?*lf=Qk`cdh}%26 0) { - var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png"; - power = ; - } + // if (this.props.member && this.props.member.powerLevelNorm > 0) { + // var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png"; + // power = ; + // } var presenceClass = "mx_MemberTile_offline"; var mainClassName = "mx_MemberTile "; if (this.props.member.user) { @@ -140,7 +140,7 @@ module.exports = React.createClass({ var name = this.props.member.name; // if (isMyUser) name += " (me)"; // this does nothing other than introduce line wrapping and pain - var leave = isMyUser ? : null; + //var leave = isMyUser ? : null; var nameClass = "mx_MemberTile_name"; if (zalgo.test(name)) { @@ -161,8 +161,8 @@ module.exports = React.createClass({ nameEl =
- { leave } -
{ this.props.member.userId }
+ +
{ name }
{ presence }
} diff --git a/src/skins/vector/views/organisms/MemberList.js b/src/skins/vector/views/organisms/MemberList.js index 62414002..5745ae55 100644 --- a/src/skins/vector/views/organisms/MemberList.js +++ b/src/skins/vector/views/organisms/MemberList.js @@ -89,25 +89,13 @@ module.exports = React.createClass({ }, inviteTile: function() { - var classes = classNames({ - mx_MemberTile: true, - mx_MemberTile_inviteTile: true, - mx_MemberTile_inviteEditing: this.state.editing, - }); - - var EditableText = sdk.getComponent("atoms.EditableText"); if (this.state.inviting) { return ( ); } else { return ( -
-
-
- -
-
+ ); } }, @@ -117,7 +105,7 @@ module.exports = React.createClass({ var invitedMemberTiles = this.makeMemberTiles('invite'); if (invitedMemberTiles.length > 0) { invitedSection = ( -
+

Invited

{invitedMemberTiles} @@ -128,13 +116,13 @@ module.exports = React.createClass({ return (
+ {this.inviteTile()}
{this.makeMemberTiles('join')}
{invitedSection} - {this.inviteTile()}
); diff --git a/src/skins/vector/views/organisms/RightPanel.js b/src/skins/vector/views/organisms/RightPanel.js index 7208e808..d3c48a06 100644 --- a/src/skins/vector/views/organisms/RightPanel.js +++ b/src/skins/vector/views/organisms/RightPanel.js @@ -53,14 +53,27 @@ module.exports = React.createClass({ var buttonGroup; var panel; + var filesHighlight; + var membersHighlight; + if (!this.props.collapsed) { + if (this.state.phase == this.Phase.MemberList) { + membersHighlight =
; + } + else if (this.state.phase == this.Phase.FileList) { + filesHighlight =
; + } + } + if (this.props.roomId) { buttonGroup =
Files + { filesHighlight }
Members + { membersHighlight }
;