Merge pull request #2245 from matrix-org/bwindels/memberlistmakeover
Redesign: memberlist basic makeover
This commit is contained in:
Bruno Windels
GitHub
commit
25b55b2801
14 changed files with 160 additions and 193 deletions
|
|
@ -60,7 +60,6 @@ input[type=text].error, input[type=password].error {
|
|||
}
|
||||
|
||||
input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
border: 1px solid $accent-color;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,11 +16,8 @@ limitations under the License.
|
|||
|
||||
.mx_FilePanel {
|
||||
order: 2;
|
||||
|
||||
flex: 1 1 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
background-color: $secondary-accent-color;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,11 +16,8 @@ limitations under the License.
|
|||
|
||||
.mx_NotificationPanel {
|
||||
order: 2;
|
||||
|
||||
flex: 1 1 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
background-color: $secondary-accent-color;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,19 +27,18 @@ limitations under the License.
|
|||
order: 1;
|
||||
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
flex: 0 0 70px;
|
||||
flex: 0 0 52px;
|
||||
}
|
||||
|
||||
/** Fixme - factor this out with the main header **/
|
||||
|
||||
.mx_RightPanel_headerButtonGroup {
|
||||
margin-top: 6px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: $primary-bg-color;
|
||||
margin-left: 0px;
|
||||
padding: 0 9px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton {
|
||||
|
|
@ -50,32 +49,34 @@ limitations under the License.
|
|||
padding-right: 5px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton object {
|
||||
pointer-events: none;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_highlight {
|
||||
width: 25px;
|
||||
height: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: $accent-color;
|
||||
opacity: 0.2;
|
||||
border-color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_RightPanel_headerButton_badge {
|
||||
font-size: 11px;
|
||||
color: $accent-color;
|
||||
font-size: 8px;
|
||||
border-radius: 8px;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
font-weight: bold;
|
||||
padding-bottom: 2px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 20px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_collapsebutton {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
height: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mx_RightPanel .mx_MemberList,
|
||||
|
|
@ -90,46 +91,3 @@ limitations under the License.
|
|||
order: 2;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer {
|
||||
order: 3;
|
||||
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
margin-right: 20px;
|
||||
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer .mx_RightPanel_invite {
|
||||
font-size: 14px;
|
||||
color: $primary-fg-color;
|
||||
padding-top: 13px;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RightPanel_invite .mx_RightPanel_icon object {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_RightPanel_invite .mx_RightPanel_message {
|
||||
padding-left: 10px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_RightPanel_footer {
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.mx_RightPanel_footer .mx_RightPanel_invite {
|
||||
line-height: 25px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,6 @@ limitations under the License.
|
|||
|
||||
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
|
||||
order: 2;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_RoomView_body .mx_RoomView_statusArea {
|
||||
|
|
@ -113,8 +112,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_RoomView_messageListWrapper {
|
||||
margin: auto;
|
||||
|
||||
min-height: 100%;
|
||||
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -17,15 +17,9 @@ limitations under the License.
|
|||
.mx_MemberList,
|
||||
.mx_GroupMemberList,
|
||||
.mx_GroupRoomList {
|
||||
height: 100%;
|
||||
|
||||
margin-top: 12px;
|
||||
margin-right: 20px;
|
||||
|
||||
background-color: $secondary-accent-color;
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
|
@ -46,54 +40,47 @@ limitations under the License.
|
|||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
.mx_MemberList form,
|
||||
.mx_GroupMemberList form,
|
||||
.mx_GroupRoomList form {
|
||||
margin: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mx_MemberList form > *:not(:first-child),
|
||||
.mx_GroupMemberList form > *:not(:first-child),
|
||||
.mx_GroupRoomList form > *:not(:first-child) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mx_MemberList_query,
|
||||
.mx_GroupMemberList_query,
|
||||
.mx_GroupRoomList_query {
|
||||
flex: 1 1 0;
|
||||
box-sizing: border-box;
|
||||
font-family: $font-family;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: 4px;
|
||||
padding: 9px;
|
||||
color: $primary-fg-color;
|
||||
background-color: $primary-bg-color;
|
||||
margin-left: 3px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
width: 189px;
|
||||
}
|
||||
|
||||
.mx_MemberList_query::-moz-placeholder,
|
||||
.mx_GroupMemberList_query::-moz-placeholder,
|
||||
.mx_GroupRoomList_query::-moz-placeholder {
|
||||
color: $primary-fg-color;
|
||||
opacity: 0.5;
|
||||
color: $input-darker-fg-color;
|
||||
background-color: $input-darker-bg-color;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mx_MemberList_query::-webkit-input-placeholder,
|
||||
.mx_GroupMemberList_query::-webkit-input-placeholder,
|
||||
.mx_GroupRoomList_query::-webkit-input-placeholder {
|
||||
color: $primary-fg-color;
|
||||
.mx_GroupRoomList_query::-webkit-input-placeholder,
|
||||
.mx_MemberList_query::-moz-placeholder,
|
||||
.mx_GroupMemberList_query::-moz-placeholder,
|
||||
.mx_GroupRoomList_query::-moz-placeholder {
|
||||
color: $input-darker-fg-color;
|
||||
opacity: 0.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mx_MemberList_joined {
|
||||
order: 2;
|
||||
flex: 1 0 0;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
.mx_MemberList_invited {
|
||||
order: 3;
|
||||
flex: 0 0 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
*/
|
||||
|
||||
.mx_GroupMemberList_invited h2,
|
||||
.mx_MemberList_invited h2 {
|
||||
.mx_MemberList h2, .mx_GroupMemberList h2 {
|
||||
text-transform: uppercase;
|
||||
color: $h3-color;
|
||||
font-weight: 600;
|
||||
|
|
@ -104,13 +91,37 @@ limitations under the License.
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* we have to have display: table in order for the horizontal wrapping to work */
|
||||
.mx_MemberList_wrapper {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_MemberList_outerWrapper {
|
||||
height: 0px;
|
||||
|
||||
}
|
||||
|
||||
.mx_MemberList_inviteIcon object {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_MemberList_inviteIcon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.mx_MemberList_invite {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
background-color: $button-bg-color;
|
||||
color: $button-fg-color;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* move text to left */
|
||||
.mx_MemberList_invite > :last-child {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -208,6 +208,10 @@ limitations under the License.
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_showPanel {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_voipButton {
|
||||
display: table-cell;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9999 3.30001C2.9999 5.02501 4.3499 6.37501 6.0749 6.37501C7.7999 6.45001 9.1499 5.02501 9.1499 3.30001C9.1499 1.57501 7.7999 0.225006 6.0749 0.225006C4.3499 0.225006 2.9999 1.57501 2.9999 3.30001ZM4.1249 3.30001C4.1249 2.25001 5.0249 1.35001 6.0749 1.35001C7.1999 1.35001 8.0249 2.25001 8.0249 3.30001C8.0249 4.35001 7.1249 5.25001 6.0749 5.25001C5.0249 5.25001 4.1249 4.35001 4.1249 3.30001Z" fill="black"/>
|
||||
<path d="M6.0749 6.97501C9.2249 6.97501 11.7749 9.52501 11.7749 12.675C11.7749 12.975 11.5499 13.275 11.1749 13.275C10.8749 13.275 10.5749 13.05 10.5749 12.675C10.4999 10.2 8.3249 8.25001 5.8499 8.32501C3.4499 8.40001 1.5749 10.35 1.4999 12.675C1.4999 12.975 1.2749 13.275 0.899902 13.275C0.524902 13.275 0.299902 13.05 0.299902 12.675C0.449902 9.52501 2.9249 6.97501 6.0749 6.97501Z" fill="black"/>
|
||||
<path d="M11.025 6.375C10.725 6.375 10.425 6.15 10.425 5.85C10.425 5.55 10.65 5.25 11.025 5.25H12V4.35C12 4.05 12.225 3.75 12.6 3.75C12.9 3.75 13.2 3.975 13.2 4.35V5.25H14.025C14.325 5.25 14.625 5.475 14.625 5.85C14.625 6.225 14.4 6.375 14.025 6.375H13.125V7.275C13.125 7.575 12.9 7.875 12.525 7.875C12.15 7.875 11.925 7.65 11.925 7.275V6.375H11.025Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9999 3.30001C2.9999 5.02501 4.3499 6.37501 6.0749 6.37501C7.7999 6.45001 9.1499 5.02501 9.1499 3.30001C9.1499 1.57501 7.7999 0.225006 6.0749 0.225006C4.3499 0.225006 2.9999 1.57501 2.9999 3.30001ZM4.1249 3.30001C4.1249 2.25001 5.0249 1.35001 6.0749 1.35001C7.1999 1.35001 8.0249 2.25001 8.0249 3.30001C8.0249 4.35001 7.1249 5.25001 6.0749 5.25001C5.0249 5.25001 4.1249 4.35001 4.1249 3.30001Z" fill="white"/>
|
||||
<path d="M6.0749 6.97501C9.2249 6.97501 11.7749 9.52501 11.7749 12.675C11.7749 12.975 11.5499 13.275 11.1749 13.275C10.8749 13.275 10.5749 13.05 10.5749 12.675C10.4999 10.2 8.3249 8.25001 5.8499 8.32501C3.4499 8.40001 1.5749 10.35 1.4999 12.675C1.4999 12.975 1.2749 13.275 0.899902 13.275C0.524902 13.275 0.299902 13.05 0.299902 12.675C0.449902 9.52501 2.9249 6.97501 6.0749 6.97501Z" fill="white"/>
|
||||
<path d="M11.025 6.375C10.725 6.375 10.425 6.15 10.425 5.85C10.425 5.55 10.65 5.25 11.025 5.25H12V4.35C12 4.05 12.225 3.75 12.6 3.75C12.9 3.75 13.2 3.975 13.2 4.35V5.25H14.025C14.325 5.25 14.625 5.475 14.625 5.85C14.625 6.225 14.4 6.375 14.025 6.375H13.125V7.275C13.125 7.575 12.9 7.875 12.525 7.875C12.15 7.875 11.925 7.65 11.925 7.275V6.375H11.025Z" fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
|
@ -62,6 +62,10 @@ $primary-hairline-color: #474747;
|
|||
// used for the border of input text fields
|
||||
$input-border-color: #3a3a3a;
|
||||
|
||||
$input-darker-bg-color: #c1c9d6;
|
||||
$input-darker-fg-color: #9fa9ba;
|
||||
$button-bg-color: #7ac9a1;
|
||||
$button-fg-color: white;
|
||||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #656565;
|
||||
|
||||
|
|
|
|||
|
|
@ -67,6 +67,11 @@ $primary-hairline-color: #e5e5e5;
|
|||
|
||||
// used for the border of input text fields
|
||||
$input-border-color: #f0f0f0;
|
||||
$input-darker-bg-color: rgba(193, 201, 214, 0.29);
|
||||
$input-darker-fg-color: #9fa9ba;
|
||||
|
||||
$button-bg-color: #7ac9a1;
|
||||
$button-fg-color: white;
|
||||
|
||||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #c7c7c7;
|
||||
|
|
@ -179,11 +184,11 @@ $progressbar-color: #000;
|
|||
/* align images in buttons (eg spinners) */
|
||||
vertical-align: middle;
|
||||
border: 0px;
|
||||
border-radius: 36px;
|
||||
border-radius: 4px;
|
||||
font-family: $font-family;
|
||||
font-size: 14px;
|
||||
color: $accent-fg-color;
|
||||
background-color: $accent-color;
|
||||
color: $button-fg-color;
|
||||
background-color: $button-bg-color;
|
||||
width: auto;
|
||||
padding: 7px;
|
||||
padding-left: 1.5em;
|
||||
|
|
@ -197,7 +202,7 @@ $progressbar-color: #000;
|
|||
}
|
||||
|
||||
@define-mixin mx_DialogButton_danger {
|
||||
background-color: $warning-color;
|
||||
background-color: $accent-color;
|
||||
}
|
||||
|
||||
@define-mixin mx_DialogButton_small {
|
||||
|
|
|
|||
|
|
@ -67,6 +67,10 @@ $primary-hairline-color: #e5e5e5;
|
|||
// used for the border of input text fields
|
||||
$input-border-color: #f0f0f0;
|
||||
|
||||
$input-darker-bg-color: #c1c9d6;
|
||||
$input-darker-fg-color: #9fa9ba;
|
||||
$button-bg-color: #7ac9a1;
|
||||
$button-fg-color: white;
|
||||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #c7c7c7;
|
||||
|
||||
|
|
|
|||
|
|
@ -49,19 +49,22 @@ class HeaderButton extends React.Component {
|
|||
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
|
||||
|
||||
const classes = classNames({
|
||||
mx_RightPanel_headerButton: true,
|
||||
mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
|
||||
})
|
||||
// will probably use this later on for notifications, etc ...
|
||||
/* <div className="mx_RightPanel_headerButton_badge">
|
||||
{ this.props.badge ? this.props.badge : <span> </span> }
|
||||
</div> */
|
||||
|
||||
return <AccessibleButton
|
||||
aria-label={this.props.title}
|
||||
aria-expanded={this.props.isHighlighted}
|
||||
title={this.props.title}
|
||||
className="mx_RightPanel_headerButton"
|
||||
className={classes}
|
||||
onClick={this.onClick} >
|
||||
|
||||
<div className="mx_RightPanel_headerButton_badge">
|
||||
{ this.props.badge ? this.props.badge : <span> </span> }
|
||||
</div>
|
||||
<TintableSvg src={this.props.iconSrc} width="25" height="25" />
|
||||
{ this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
|
||||
|
||||
<TintableSvg src={this.props.iconSrc} width="20" height="20" />
|
||||
</AccessibleButton>;
|
||||
}
|
||||
}
|
||||
|
|
@ -159,19 +162,6 @@ module.exports = React.createClass({
|
|||
});
|
||||
},
|
||||
|
||||
onInviteButtonClick: function() {
|
||||
if (this.context.matrixClient.isGuest()) {
|
||||
dis.dispatch({action: 'require_registration'});
|
||||
return;
|
||||
}
|
||||
|
||||
// call AddressPickerDialog
|
||||
dis.dispatch({
|
||||
action: 'view_invite',
|
||||
roomId: this.props.roomId,
|
||||
});
|
||||
},
|
||||
|
||||
onInviteToGroupButtonClick: function() {
|
||||
showGroupInviteDialog(this.props.groupId).then(() => {
|
||||
this.setState({
|
||||
|
|
@ -277,29 +267,6 @@ module.exports = React.createClass({
|
|||
|
||||
let membersBadge;
|
||||
let membersTitle = _t('Members');
|
||||
if ((this.state.phase === this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
|
||||
&& this.props.roomId
|
||||
) {
|
||||
const cli = this.context.matrixClient;
|
||||
const room = cli.getRoom(this.props.roomId);
|
||||
let isUserInRoom;
|
||||
if (room) {
|
||||
const numMembers = room.getJoinedMemberCount();
|
||||
membersTitle = _t('%(count)s Members', { count: numMembers });
|
||||
membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
|
||||
isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
|
||||
}
|
||||
|
||||
if (isUserInRoom) {
|
||||
inviteGroup =
|
||||
<AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
|
||||
<div className="mx_RightPanel_icon" >
|
||||
<TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
|
||||
</div>
|
||||
<div className="mx_RightPanel_message">{ _t('Invite to this room') }</div>
|
||||
</AccessibleButton>;
|
||||
}
|
||||
}
|
||||
|
||||
const isPhaseGroup = [
|
||||
this.Phase.GroupMemberInfo,
|
||||
|
|
@ -416,9 +383,6 @@ module.exports = React.createClass({
|
|||
</div>
|
||||
</div>
|
||||
{ panel }
|
||||
<div className="mx_RightPanel_footer">
|
||||
{ inviteGroup }
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ limitations under the License.
|
|||
import React from 'react';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import SdkConfig from '../../../SdkConfig';
|
||||
import dis from '../../../dispatcher';
|
||||
const MatrixClientPeg = require("../../../MatrixClientPeg");
|
||||
const sdk = require('../../../index');
|
||||
const rate_limited_func = require('../../../ratelimitedfunc');
|
||||
|
|
@ -420,42 +421,68 @@ module.exports = React.createClass({
|
|||
const TruncatedList = sdk.getComponent("elements.TruncatedList");
|
||||
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
|
||||
|
||||
let invitedSection = null;
|
||||
const cli = MatrixClientPeg.get();
|
||||
const room = cli.getRoom(this.props.roomId);
|
||||
let inviteButton;
|
||||
if (room.getMyMembership() === 'join') {
|
||||
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
|
||||
inviteButton =
|
||||
<AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
|
||||
<div className="mx_MemberList_inviteIcon" >
|
||||
<TintableSvg src="img/icon-invite-people.svg" width="16" height="16" />
|
||||
</div>
|
||||
<div>{ _t('Invite to this room') }</div>
|
||||
</AccessibleButton>;
|
||||
}
|
||||
|
||||
let invitedHeader;
|
||||
let invitedSection;
|
||||
if (this._getChildCountInvited() > 0) {
|
||||
invitedSection = (
|
||||
<div className="mx_MemberList_invited">
|
||||
<h2>{ _t("Invited") }</h2>
|
||||
<div className="mx_MemberList_wrapper">
|
||||
<TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtInvited}
|
||||
invitedHeader = <h2>{ _t("Invited") }</h2>;
|
||||
invitedSection = <TruncatedList className="mx_MemberList_section mx_MemberList_invited" truncateAt={this.state.truncateAtInvited}
|
||||
createOverflowElement={this._createOverflowTileInvited}
|
||||
getChildren={this._getChildrenInvited}
|
||||
getChildCount={this._getChildCountInvited}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
/>;
|
||||
}
|
||||
|
||||
const inputBox = (
|
||||
const filterAndButtons = (
|
||||
<form autoComplete="off">
|
||||
<input className="mx_MemberList_query" id="mx_MemberList_query" type="text"
|
||||
<input className="mx_MemberList_query" id="mx_MemberList_query" type="search"
|
||||
onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
|
||||
placeholder={_t('Filter room members')} />
|
||||
{ inviteButton }
|
||||
</form>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mx_MemberList">
|
||||
{ inputBox }
|
||||
<GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
|
||||
<TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtJoined}
|
||||
{ filterAndButtons }
|
||||
<GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_outerWrapper">
|
||||
<div className="mx_MemberList_wrapper">
|
||||
<TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
|
||||
createOverflowElement={this._createOverflowTileJoined}
|
||||
getChildren={this._getChildrenJoined}
|
||||
getChildCount={this._getChildCountJoined}
|
||||
/>
|
||||
getChildCount={this._getChildCountJoined} />
|
||||
{ invitedHeader }
|
||||
{ invitedSection }
|
||||
</div>
|
||||
</GeminiScrollbarWrapper>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
onInviteButtonClick: function() {
|
||||
if (MatrixClientPeg.get().isGuest()) {
|
||||
dis.dispatch({action: 'require_registration'});
|
||||
return;
|
||||
}
|
||||
|
||||
// call AddressPickerDialog
|
||||
dis.dispatch({
|
||||
action: 'view_invite',
|
||||
roomId: this.props.roomId,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -396,7 +396,7 @@ module.exports = React.createClass({
|
|||
let rightPanelButtons;
|
||||
if (this.props.collapsedRhs) {
|
||||
rightPanelButtons =
|
||||
<AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={_t('Show panel')}>
|
||||
<AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_showPanel" onClick={this.onShowRhsClick} title={_t('Show panel')}>
|
||||
<TintableSvg src="img/maximise.svg" width="10" height="16" />
|
||||
</AccessibleButton>;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue