Merge pull request from matrix-org/bwindels/memberqueryfield

Redesign: move member query field to bottom of member list
This commit is contained in:
Bruno Windels 2018-11-07 12:29:53 +00:00 committed by GitHub
commit b0032b247d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 27 additions and 56 deletions

View file

@ -17,7 +17,6 @@ limitations under the License.
.mx_FilePanel {
order: 2;
flex: 1 1 0;
background-color: $secondary-accent-color;
overflow-y: auto;
}

View file

@ -46,7 +46,6 @@ limitations under the License.
}
.mx_LeftPanel {
background-color: $secondary-accent-color;
flex: 1;
overflow-x: hidden;
display: flex;

View file

@ -17,7 +17,6 @@ limitations under the License.
.mx_NotificationPanel {
order: 2;
flex: 1 1 0;
background-color: $secondary-accent-color;
overflow-y: auto;
}

View file

@ -37,7 +37,6 @@ limitations under the License.
.mx_RoomSubList_label {
flex: 1;
cursor: pointer;
background-color: $secondary-accent-color;
display: flex;
align-items: center;
padding: 0 6px;

View file

@ -15,7 +15,6 @@ limitations under the License.
*/
.mx_MemberInfo {
background-color: $secondary-accent-color;
display: flex;
flex-direction: column;
flex: 1;

View file

@ -17,7 +17,6 @@ limitations under the License.
.mx_MemberList,
.mx_GroupMemberList,
.mx_GroupRoomList {
background-color: $secondary-accent-color;
flex: 1;
display: flex;
flex-direction: column;
@ -40,20 +39,6 @@ limitations under the License.
flex: 1 1 0px;
}
.mx_MemberList form,
.mx_GroupMemberList form,
.mx_GroupRoomList form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.mx_MemberList form > *,
.mx_GroupMemberList form > *,
.mx_GroupRoomList form > * {
margin: 9px;
}
.mx_MemberList_query,
.mx_GroupMemberList_query,
.mx_GroupRoomList_query {
@ -75,28 +60,24 @@ limitations under the License.
padding: 10px;
}
.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;
}
margin: 9px;
display: flex;
/* move text to left */
.mx_MemberList_invite > :last-child {
margin-left: 25px;
span {
margin: 0 auto;
background-image: url('../../img/icon-invite-people.svg');
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
font-weight: 600;
color: $button-fg-color;
}
}

View file

@ -37,7 +37,6 @@ limitations under the License.
}
.mx_RoomList_emptySubListTip_container {
background-color: $secondary-accent-color;
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;

View file

@ -23,7 +23,6 @@ limitations under the License.
margin: 0;
padding: 0 8px 0 10px;
position: relative;
background-color: $secondary-accent-color;
}
.mx_RoomTile_menuButton {

View file

@ -180,7 +180,7 @@ $lightbox-border-color: #ffffff;
// unused?
$progressbar-color: #000;
// form elements
/*** form elements ***/
// .mx_textinput is a container for a text input
// + some other controls like buttons, ...
@ -220,6 +220,11 @@ input[type=search] {
min-width: 0;
}
/*** panels ***/
.dark-panel {
background-color: $secondary-accent-color;
}
.dark-panel {
:not(.mx_textinput) > input[type=text],
:not(.mx_textinput) > input[type=search],

View file

@ -213,6 +213,7 @@ export default class RightPanel extends React.Component {
const classes = classNames("mx_RightPanel", "mx_fadable", {
"collapsed": this.props.collapsed,
"mx_fadable_faded": this.props.disabled,
"dark-panel": true,
});
return (

View file

@ -163,7 +163,7 @@ export default React.createClass({
</div> : <div />;
return (
<div className="mx_MemberList dark-panel">
<div className="mx_MemberList">
{ inputBox }
<GeminiScrollbarWrapper autoshow={true}>
{ joined }

View file

@ -131,7 +131,7 @@ export default React.createClass({
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
const TruncatedList = sdk.getComponent("elements.TruncatedList");
return (
<div className="mx_GroupRoomList dark-panel">
<div className="mx_GroupRoomList">
{ inputBox }
<GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
<TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}

View file

@ -429,10 +429,7 @@ module.exports = React.createClass({
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>
<span>{ _t('Invite to this room') }</span>
</AccessibleButton>;
}
@ -447,18 +444,9 @@ module.exports = React.createClass({
/>;
}
const filterAndButtons = (
<form autoComplete="off">
<input className="mx_MemberList_query mx_textinput_icon mx_textinput_search" 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 dark-panel">
{ filterAndButtons }
<div className="mx_MemberList">
{ inviteButton }
<GeminiScrollbarWrapper autoshow={true}>
<div className="mx_MemberList_wrapper">
<TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
@ -469,6 +457,9 @@ module.exports = React.createClass({
{ invitedSection }
</div>
</GeminiScrollbarWrapper>
<input className="mx_MemberList_query mx_textinput_icon mx_textinput_search" id="mx_MemberList_query" type="text"
onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
placeholder={_t('Filter room members')} />
</div>
);
},