Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #2270 from matrix-org/bwindels/memberqueryfield
Browse files Browse the repository at this point in the history
Redesign: move member query field to bottom of member list
  • Loading branch information
bwindels authored Nov 7, 2018
2 parents 9e95a14 + 883126a commit b0032b2
Show file tree
Hide file tree
Showing 13 changed files with 27 additions and 56 deletions.
1 change: 0 additions & 1 deletion res/css/structures/_FilePanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ limitations under the License.
.mx_FilePanel {
order: 2;
flex: 1 1 0;
background-color: $secondary-accent-color;
overflow-y: auto;
}

Expand Down
1 change: 0 additions & 1 deletion res/css/structures/_LeftPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ limitations under the License.
}

.mx_LeftPanel {
background-color: $secondary-accent-color;
flex: 1;
overflow-x: hidden;
display: flex;
Expand Down
1 change: 0 additions & 1 deletion res/css/structures/_NotificationPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ limitations under the License.
.mx_NotificationPanel {
order: 2;
flex: 1 1 0;
background-color: $secondary-accent-color;
overflow-y: auto;
}

Expand Down
1 change: 0 additions & 1 deletion res/css/structures/_RoomSubList.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion res/css/views/rooms/_MemberInfo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ limitations under the License.
*/

.mx_MemberInfo {
background-color: $secondary-accent-color;
display: flex;
flex-direction: column;
flex: 1;
Expand Down
43 changes: 12 additions & 31 deletions res/css/views/rooms/_MemberList.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;

span {
margin: 0 auto;
background-image: url('../../img/icon-invite-people.svg');
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;

/* move text to left */
.mx_MemberList_invite > :last-child {
margin-left: 25px;
font-weight: 600;
color: $button-fg-color;
}
}
1 change: 0 additions & 1 deletion res/css/views/rooms/_RoomList.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion res/css/views/rooms/_RoomTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 6 additions & 1 deletion res/themes/dharma/css/_dharma.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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, ...
Expand Down Expand Up @@ -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],
Expand Down
1 change: 1 addition & 0 deletions src/components/structures/RightPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/groups/GroupMemberList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/groups/GroupRoomList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
21 changes: 6 additions & 15 deletions src/components/views/rooms/MemberList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}

Expand All @@ -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}
Expand All @@ -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>
);
},
Expand Down

0 comments on commit b0032b2

Please sign in to comment.