mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 11:47:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

move filter member field to bottom of memberlist

Browse source 
reorganize styles as well
This commit is contained in:
Bruno Windels 2018-11-06 14:47:11 +01:00
parent f8f4dde3ec
commit 92e43ea181
2 changed files with 17 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
res/css/views/rooms/_MemberList.scss
View file

@ -40,20 +40,6 @@ limitations under the License.
flex: 1 1 0px; 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_MemberList_query,
.mx_GroupMemberList_query, .mx_GroupMemberList_query,
.mx_GroupRoomList_query { .mx_GroupRoomList_query {
@ -75,28 +61,24 @@ limitations under the License.
padding: 10px; padding: 10px;
} }
.mx_MemberList_inviteIcon object {
pointer-events: none;
}
.mx_MemberList_inviteIcon {
position: absolute;
top: 10px;
left: 10px;
}
.mx_MemberList_invite { .mx_MemberList_invite {
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
background-color: $button-bg-color; background-color: $button-bg-color;
color: $button-fg-color;
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 8px;
font-weight: 600; margin: 9px;
} display: flex;
/* move text to left */ span {
.mx_MemberList_invite > :last-child { margin: 0 auto;
margin-left: 25px; 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;
}
} }

19
src/components/views/rooms/MemberList.js
View file

@ -429,10 +429,7 @@ module.exports = React.createClass({
const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
inviteButton = inviteButton =
<AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}> <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
<div className="mx_MemberList_inviteIcon" > <span>{ _t('Invite to this room') }</span>
<TintableSvg src="img/icon-invite-people.svg" width="16" height="16" />
</div>
<div>{ _t('Invite to this room') }</div>
</AccessibleButton>; </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 ( return (
<div className="mx_MemberList dark-panel"> <div className="mx_MemberList dark-panel">
{ filterAndButtons } { inviteButton }
<GeminiScrollbarWrapper autoshow={true}> <GeminiScrollbarWrapper autoshow={true}>
<div className="mx_MemberList_wrapper"> <div className="mx_MemberList_wrapper">
<TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined} <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
@ -469,6 +457,9 @@ module.exports = React.createClass({
{ invitedSection } { invitedSection }
</div> </div>
</GeminiScrollbarWrapper> </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> </div>
); );
}, },