Merge pull request #2245 from matrix-org/bwindels/memberlistmakeover

Redesign: memberlist basic makeover

res/css/_common.scss

@@ -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;
 }

res/css/structures/_FilePanel.scss

@@ -16,11 +16,8 @@ limitations under the License.
 
 .mx_FilePanel {
     order: 2;
-
     flex: 1 1 0;
-
+    background-color: $secondary-accent-color;
-    width: 100%;
-
     overflow-y: auto;
 }
 

res/css/structures/_NotificationPanel.scss

@@ -16,11 +16,8 @@ limitations under the License.
 
 .mx_NotificationPanel {
     order: 2;
-
     flex: 1 1 0;
-
+    background-color: $secondary-accent-color;
-    width: 100%;
-
     overflow-y: auto;
 }
 

res/css/structures/_RightPanel.scss

@@ -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;
+    border-color: $accent-color;
-    height: 5px;
-    border-radius: 5px;
-    background-color: $accent-color;
-    opacity: 0.2;
 }
 
 .mx_RightPanel_headerButton_badge {
-    font-size: 11px;
+    font-size: 8px;
-    color: $accent-color;
+    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;
-    }
-}

res/css/structures/_RoomView.scss

@@ -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;

res/css/views/rooms/_MemberList.scss

@@ -17,15 +17,9 @@ limitations under the License.
 .mx_MemberList,
 .mx_GroupMemberList,
 .mx_GroupRoomList {
-    height: 100%;
+    background-color: $secondary-accent-color;
-
-    margin-top: 12px;
-    margin-right: 20px;
-
     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-radius: 4px;
-    border: 1px solid $input-border-color;
     padding: 9px;
-    color: $primary-fg-color;
+    color: $input-darker-fg-color;
-    background-color: $primary-bg-color;
+    background-color: $input-darker-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;
     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 {
+.mx_GroupRoomList_query::-webkit-input-placeholder,
-    color: $primary-fg-color;
+.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 {
+.mx_MemberList h2, .mx_GroupMemberList h2 {
-    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 {
     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;
+    padding: 10px;
-    table-layout: fixed;
-    width: 100%;
 }
 
 .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;
+}
+

res/css/views/rooms/_RoomHeader.scss

@@ -208,6 +208,10 @@ limitations under the License.
     pointer-events: none;
 }
 
+.mx_RoomHeader_showPanel {
+    height: 16px;
+}
+
 .mx_RoomHeader_voipButton {
     display: table-cell;
 }

res/img/icon-invite-people.svg

@@ -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 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="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="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="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="white"/>
 </svg>

res/themes/dark/css/_dark.scss

@@ -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;
 

res/themes/dharma/css/_dharma.scss

@@ -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;
+    color: $button-fg-color;
-    background-color: $accent-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 {

res/themes/light/css/_base.scss

@@ -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;
 

src/components/structures/RightPanel.js

@@ -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>&nbsp;</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} >
-
+                <TintableSvg src={this.props.iconSrc} width="20" height="20" />
-                <div className="mx_RightPanel_headerButton_badge">
-                    { this.props.badge ? this.props.badge : <span>&nbsp;</span> }
-                </div>
-                <TintableSvg src={this.props.iconSrc} width="25" height="25" />
-                { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
-
             </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>
         );
     },

src/components/views/rooms/MemberList.js

@@ -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();
-        if (this._getChildCountInvited() > 0) {
+        const room = cli.getRoom(this.props.roomId);
-            invitedSection = (
+        let inviteButton;
-                <div className="mx_MemberList_invited">
+        if (room.getMyMembership() === 'join') {
-                    <h2>{ _t("Invited") }</h2>
+            const TintableSvg = sdk.getComponent("elements.TintableSvg");
-                    <div className="mx_MemberList_wrapper">
+            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-                        <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtInvited}
+            inviteButton =
-                                createOverflowElement={this._createOverflowTileInvited}
+                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
-                                getChildren={this._getChildrenInvited}
+                    <div className="mx_MemberList_inviteIcon" >
-                                getChildCount={this._getChildCountInvited}
+                        <TintableSvg src="img/icon-invite-people.svg" width="16" height="16" />
-                        />
                     </div>
-                </div>
+                    <div>{ _t('Invite to this room') }</div>
-            );
+                </AccessibleButton>;
         }
 
-        const inputBox = (
+        let invitedHeader;
+        let invitedSection;
+        if (this._getChildCountInvited() > 0) {
+            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}
+                />;
+        }
+
+        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 }
+                { filterAndButtons }
-                <GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
+                <GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_outerWrapper">
-                    <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtJoined}
+                    <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 }
+                        { 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,
+        });
+    },
 });

src/components/views/rooms/RoomHeader.js

@@ -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>;
         }