Merge pull request #2269 from matrix-org/bwindels/roomlistpolish

Redesign: room list visual polish

src/components/structures/AutoHideScrollbar.js

@@ -112,7 +112,9 @@ export default class AutoHideScrollbar extends React.Component {
                     ref={this._collectContainerRef}
                     className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
                 >
-            { this.props.children }
+            <div className="mx_AutoHideScrollbar_offset">
+                { this.props.children }
+            </div>
         </div>);
     }
 }

src/components/structures/LeftPanel.js

@@ -151,8 +151,7 @@ const LeftPanel = React.createClass({
             }
         } while (element && !(
             classes.contains("mx_RoomTile") ||
-            classes.contains("mx_SearchBox_search") ||
-            classes.contains("mx_RoomSubList_ellipsis")));
+            classes.contains("mx_SearchBox_search")));
 
         if (element) {
             element.focus();

src/components/structures/RoomSubList.js

@@ -243,9 +243,8 @@ const RoomSubList = React.createClass({
         const subListNotifCount = subListNotifications[0];
         const subListNotifHighlight = subListNotifications[1];
 
-
         let badge;
-        if (this.state.hidden) {
+        if (!this.props.collapsed) {
             const badgeClasses = classNames({
                 'mx_RoomSubList_badge': true,
                 'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
@@ -285,9 +284,7 @@ const RoomSubList = React.createClass({
         let addRoomButton;
         if (this.props.onAddRoom) {
             addRoomButton = (
-                <AccessibleButton onClick={ this.props.onAddRoom } className="mx_RoomSubList_addRoom">
-                    +
-                </AccessibleButton>
+                <AccessibleButton onClick={ this.props.onAddRoom } className="mx_RoomSubList_addRoom" />
             );
         }
 
@@ -307,7 +304,7 @@ const RoomSubList = React.createClass({
             <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
                 <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
                     { chevron }
-                    { this.props.collapsed ? '' : this.props.label }
+                    <span>{this.props.label}</span>
                     { incomingCall }
                 </AccessibleButton>
                 { badge }

src/components/views/rooms/RoomTile.js

@@ -220,7 +220,7 @@ module.exports = React.createClass({
         this.setState( { badgeHover: false } );
     },
 
-    onBadgeClicked: function(e) {
+    onOpenMenu: function(e) {
         // Prevent the RoomTile onClick event firing as well
         e.stopPropagation();
         // Only allow non-guests to access the context menu
@@ -276,19 +276,14 @@ module.exports = React.createClass({
         if (name == undefined || name == null) name = '';
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
-        let badgeContent;
 
-        if (this.state.badgeHover || this.state.menuDisplayed) {
-            badgeContent = "\u00B7\u00B7\u00B7";
-        } else if (badges) {
+        let badge;
+        if (badges) {
             const limitedCount = FormattingUtils.formatCount(notificationCount);
-            badgeContent = notificationCount ? limitedCount : '!';
-        } else {
-            badgeContent = '\u200B';
+            const badgeContent = notificationCount ? limitedCount : '!';
+            badge = <div className={badgeClasses}>{ badgeContent }</div>;
         }
 
-        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
-
         const EmojiText = sdk.getComponent('elements.EmojiText');
         let label;
         let tooltip;
@@ -317,6 +312,11 @@ module.exports = React.createClass({
         //    incomingCallBox = <IncomingCallBox incomingCall={ this.props.incomingCall }/>;
         //}
 
+        let contextMenuButton;
+        if (!MatrixClientPeg.get().isGuest()) {
+            contextMenuButton = <AccessibleButton className="mx_RoomTile_menuButton" onClick={this.onOpenMenu} />;
+        }
+
         const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
         let dmIndicator;
@@ -338,6 +338,7 @@ module.exports = React.createClass({
                 </div>
             </div>
             { label }
+            { contextMenuButton }
             { badge }
             { /* { incomingCallBox } */ }
             { tooltip }