Merge pull request #2270 from matrix-org/bwindels/memberqueryfield
Redesign: move member query field to bottom of member list
This commit is contained in:
commit
b0032b247d
13 changed files with 27 additions and 56 deletions
res
css
structures
views/rooms
themes/dharma/css
src/components
|
@ -17,7 +17,6 @@ limitations under the License.
|
|||
.mx_FilePanel {
|
||||
order: 2;
|
||||
flex: 1 1 0;
|
||||
background-color: $secondary-accent-color;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
|
@ -46,7 +46,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_LeftPanel {
|
||||
background-color: $secondary-accent-color;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
|
|
|
@ -17,7 +17,6 @@ limitations under the License.
|
|||
.mx_NotificationPanel {
|
||||
order: 2;
|
||||
flex: 1 1 0;
|
||||
background-color: $secondary-accent-color;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -15,7 +15,6 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_MemberInfo {
|
||||
background-color: $secondary-accent-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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],
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 }
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue