Merge pull request #2520 from matrix-org/bwindels/redesign-smallfixes

redesign: small fixes

res/css/structures/_ContextualMenu.scss

@@ -43,10 +43,6 @@ limitations under the License.
     right: 8px;
 }
 
-.mx_ContextualMenu_noChevron {
-    border-radius: unset !important;
-}
-
 .mx_ContextualMenu_chevron_right {
     position: absolute;
     right: -8px;

res/css/views/context_menus/_TopLeftMenu.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_TopLeftMenu {
     min-width: 180px;
+    border-radius: 4px;
 
     .mx_TopLeftMenu_section:not(:last-child) {
         border-bottom: 1px solid $menu-border-color;
@@ -26,10 +27,32 @@ limitations under the License.
         margin: 5px 0;
         padding: 0;
 
+        li.mx_TopLeftMenu_icon_settings::after {
+            mask-image: url('$(res)/img/feather-icons/settings.svg');
+        }
+
+        li.mx_TopLeftMenu_icon_signout::after {
+            mask-image: url('$(res)/img/feather-icons/sign-out.svg');
+        }
+
+        li::after {
+            mask-repeat: no-repeat;
+            mask-position: 0 center;
+            mask-size: 16px;
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            content: "";
+            top: 5px;
+            left: 14px;
+            background-color: $primary-fg-color;
+        }
+
         li {
+            position: relative;
             cursor: pointer;
             white-space: nowrap;
-            padding: 5px 20px;
+            padding: 5px 20px 5px 43px;
         }
 
         li:hover {

res/css/views/elements/_ResizeHandle.scss

@@ -32,6 +32,11 @@ limitations under the License.
     cursor: row-resize;
 }
 
+.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+    margin: 0 -10px 0 0;
+    padding: 0 10px 0 0;
+}
+
 .mx_ResizeHandle > div {
     background: $panel-divider-color;
 }

res/img/feather-icons/sign-out.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
+        <path d="M5.667 15H2.556C1.696 15 1 14.304 1 13.444V2.556C1 1.696 1.696 1 2.556 1h3.11M11.111 11.889L15 8l-3.889-3.889M15 8H5.667"/>
+    </g>
+</svg>

src/components/structures/AutoHideScrollbar.js

@@ -102,10 +102,6 @@ export default class AutoHideScrollbar extends React.Component {
         installBodyClassesIfNeeded();
         this._needsOverflowListener =
             document.body.classList.contains("mx_scrollbar_nooverlay");
-        if (this._needsOverflowListener) {
-            this.containerRef.addEventListener("overflow", this.onOverflow);
-            this.containerRef.addEventListener("underflow", this.onUnderflow);
-        }
         this.checkOverflow();
     }
 
@@ -118,13 +114,6 @@ export default class AutoHideScrollbar extends React.Component {
         }
     }
 
-    componentWillUnmount() {
-        if (this._needsOverflowListener && this.containerRef) {
-            this.containerRef.removeEventListener("overflow", this.onOverflow);
-            this.containerRef.removeEventListener("underflow", this.onUnderflow);
-        }
-    }
-
     render() {
         return (<div
                     ref={this._collectContainerRef}

src/components/structures/RoomSubList.js

@@ -254,9 +254,9 @@ const RoomSubList = React.createClass({
                 badge = <div className={badgeClasses} onClick={this._onNotifBadgeClick}>
                     { FormattingUtils.formatCount(subListNotifCount) }
                 </div>;
-            } else if (this.props.isInvite) {
+            } else if (this.props.isInvite && this.props.list.length) {
                 // no notifications but highlight anyway because this is an invite badge
-                badge = <div className={badgeClasses} onClick={this._onInviteBadgeClick}>!</div>;
+                badge = <div className={badgeClasses} onClick={this._onInviteBadgeClick}>{this.props.list.length}</div>;
             }
         }
 

src/components/structures/TopLeftMenuButton.js

@@ -22,6 +22,7 @@ import AccessibleButton from '../views/elements/AccessibleButton';
 import BaseAvatar from '../views/avatars/BaseAvatar';
 import MatrixClientPeg from '../../MatrixClientPeg';
 import Avatar from '../../Avatar';
+import { _t } from '../../languageHandler';
 
 const AVATAR_SIZE = 28;
 
@@ -70,7 +71,14 @@ export default class TopLeftMenuButton extends React.Component {
     render() {
         const fallbackUserId = MatrixClientPeg.get().getUserId();
         const profileInfo = this.state.profileInfo;
-        const name = profileInfo ? profileInfo.name : fallbackUserId;
+        let name;
+        if (MatrixClientPeg.get().isGuest()) {
+            name = _t("Guest");
+        } else if (profileInfo) {
+            name = profileInfo.name;
+        } else {
+            name = fallbackUserId;
+        }
         let nameElement;
         if (!this.props.collapsed) {
             nameElement = <div className="mx_TopLeftMenuButton_name">

src/components/views/context_menus/TopLeftMenu.js

@@ -30,10 +30,10 @@ export class TopLeftMenu extends React.Component {
     render() {
         return <div className="mx_TopLeftMenu">
             <ul className="mx_TopLeftMenu_section">
-                <li onClick={this.openSettings}>{_t("Settings")}</li>
+                <li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
             </ul>
             <ul className="mx_TopLeftMenu_section">
-                <li onClick={this.signOut}>{_t("Sign out")}</li>
+                <li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
             </ul>
         </div>;
     }

src/components/views/rooms/RoomList.js

@@ -83,7 +83,7 @@ module.exports = React.createClass({
         this._layoutSections = [];
 
         const unfilteredOptions = {
-            allowWhitespace: true,
+            allowWhitespace: false,
             handleHeight: 1,
         };
         this._unfilteredlayout = new Layout((key, size) => {

src/i18n/strings/en_EN.json

@@ -430,9 +430,9 @@
     "Upload profile picture": "Upload profile picture",
     "Display Name": "Display Name",
     "Save": "Save",
+    "Flair": "Flair",
     "General": "General",
     "Room Addresses": "Room Addresses",
-    "Flair": "Flair",
     "URL Previews": "URL Previews",
     "Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?",
     "Success": "Success",
@@ -823,8 +823,6 @@
     "Failed to load group members": "Failed to load group members",
     "Filter community members": "Filter community members",
     "Invite to this community": "Invite to this community",
-    "Flair will appear if enabled in room settings": "Flair will appear if enabled in room settings",
-    "Flair will not appear": "Flair will not appear",
     "Are you sure you want to remove '%(roomName)s' from %(groupId)s?": "Are you sure you want to remove '%(roomName)s' from %(groupId)s?",
     "Removing a room from the community will also remove it from the community page.": "Removing a room from the community will also remove it from the community page.",
     "Failed to remove room from community": "Failed to remove room from community",
@@ -1339,6 +1337,7 @@
     "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
     "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",
     "Failed to load timeline position": "Failed to load timeline position",
+    "Guest": "Guest",
     "Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others",
     "Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s",
     "Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other",