gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

sort out the membership list

This commit is contained in:
Matthew Hodgson 2015-10-24 20:19:54 +01:00
parent e718cad053
commit e59bfe16dc
12 changed files with 88 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/skins/vector/css/molecules/EventTile.css
View File

@ -91,7 +91,7 @@ limitations under the License.
}
.mx_EventTile_editButton {
clear: both;
clear: right;
float: right;
display: inline-block;
visibility: hidden;

54
src/skins/vector/css/molecules/MemberTile.css
View File

@ -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;
}

4
src/skins/vector/css/molecules/RoomHeader.css
View File

@ -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;

36
src/skins/vector/css/organisms/MemberList.css
View File

@ -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;
}

19
src/skins/vector/css/organisms/RightPanel.css
View File

@ -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;

3
src/skins/vector/css/organisms/RoomList.css
View File

@ -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;
}

4
src/skins/vector/css/organisms/RoomView.css
View File

@ -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 {

BIN
src/skins/vector/img/edit.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 498 B

After

Width:  |  Height:  |  Size: 460 B

BIN
src/skins/vector/img/member_chevron.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 271 B

14
src/skins/vector/views/molecules/MemberTile.js
View File

@ -119,10 +119,10 @@ module.exports = React.createClass({
var isMyUser = MatrixClientPeg.get().credentials.userId == this.props.member.userId;
var 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 = <img src={ img } className="mx_MemberTile_power" width="44" height="44" alt=""/>;
}
// if (this.props.member && this.props.member.powerLevelNorm > 0) {
// var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
// power = <img src={ img } className="mx_MemberTile_power" width="44" height="44" alt=""/>;
// }
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 ? <img className="mx_MemberTile_leave" src="img/delete.png" width="10" height="10" onClick={this.onLeaveClick}/> : null;
//var leave = isMyUser ? <img className="mx_MemberTile_leave" src="img/delete.png" width="10" height="10" onClick={this.onLeaveClick}/> : null;
var nameClass = "mx_MemberTile_name";
if (zalgo.test(name)) {
@ -161,8 +161,8 @@ module.exports = React.createClass({
nameEl =
<div className="mx_MemberTile_details">
{ leave }
<div className="mx_MemberTile_userId">{ this.props.member.userId }</div>
<img className="mx_MemberTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
<div className="mx_MemberTile_userId">{ name }</div>
{ presence }
</div>
}

18
src/skins/vector/views/organisms/MemberList.js
View File

@ -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 (
<Loader />
);
} else {
return (
<div className={ classes } onClick={ this.onClickInvite } >
<div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="36" height="36" alt=""/></div>
<div className="mx_MemberTile_name">
<EditableText ref="invite" label="Invite" placeHolder="@user:domain.com" initialValue="" onValueChanged={this.onPopulateInvite}/>
</div>
</div>
<input className="mx_MemberList_invite" ref="invite" placeholder="Invite another user" onSubmit={this.onPopulateInvite}/>
);
}
},
@ -117,7 +105,7 @@ module.exports = React.createClass({
var invitedMemberTiles = this.makeMemberTiles('invite');
if (invitedMemberTiles.length > 0) {
invitedSection = (
<div>
<div className="mx_MemberList_invited">
<h2>Invited</h2>
<div className="mx_MemberList_wrapper">
{invitedMemberTiles}
@ -128,13 +116,13 @@ module.exports = React.createClass({
return (
<div className="mx_MemberList">
<div className="mx_MemberList_border">
{this.inviteTile()}
<div>
<div className="mx_MemberList_wrapper">
{this.makeMemberTiles('join')}
</div>
</div>
{invitedSection}
{this.inviteTile()}
</div>
</div>
);

13
src/skins/vector/views/organisms/RightPanel.js
View File

@ -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 = <div className="mx_RightPanel_headerButton_highlight"></div>;
}
else if (this.state.phase == this.Phase.FileList) {
filesHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
}
}
if (this.props.roomId) {
buttonGroup =
<div className="mx_RightPanel_headerButtonGroup">
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
<img src="img/file.png" width="17" height="22" title="Files" alt="Files"/>
{ filesHighlight }
</div>
<div className="mx_RightPanel_headerButton" onClick={ this.onMemberListButtonClick }>
<img src="img/members.png" width="17" height="22" title="Members" alt="Members"/>
{ membersHighlight }
</div>
</div>;