From ef26189addaffc1791d3ef335684a54872f4d597 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 5 Nov 2018 17:42:25 +0100
Subject: [PATCH] add dedicated menu button to room tile with new design

---
 res/css/views/rooms/_RoomTile.scss     | 34 ++++++++++++++++++--------
 src/components/views/rooms/RoomTile.js | 21 ++++++++--------
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index d7726d818d..2cda8360b1 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -26,6 +26,26 @@ limitations under the License.
     background-color: $secondary-accent-color;
 }
 
+.mx_RoomTile_menuButton {
+    display: none;
+    flex: 0 0 16px;
+    height: 16px;
+    background-image: url('../../img/icon_context.svg');
+    background-repeat: no-repeat;
+    background-position: right center;
+}
+
+// toggle menuButton and badge on hover/menu displayed
+.mx_RoomTile:hover, .mx_RoomTile_menuDisplayed {
+    .mx_RoomTile_menuButton {
+        display: block;
+    }
+
+    .mx_RoomTile_badge {
+        display: none;
+    }
+}
+
 .mx_RoomTile_tooltip {
     display: inline-block;
     position: relative;
@@ -88,6 +108,10 @@ limitations under the License.
         z-index: 3;
         border: 0.18em solid $secondary-accent-color;
     }
+
+    .mx_RoomTile_menuButton {
+        display: none;  //no design for this for now
+    }
 }
 
 .mx_RoomTile_badge {
@@ -99,12 +123,6 @@ limitations under the License.
     font-size: 12px;
 }
 
-
-.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
-.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge {
-    background-color: $neutral-badge-color;
-}
-
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
     background-color: $accent-color;
 }
@@ -144,10 +162,6 @@ limitations under the License.
     background-color: $roomtile-focused-bg-color;
 }
 
-.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
-    width: 140px;
-}
-
 .mx_RoomTile_arrow {
     position: absolute;
     right: 0px;
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 56b34c4385..faa08c7001 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/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 : '!';
+            const badgeContent = notificationCount ? limitedCount : '!';
+            badge = <div className={badgeClasses}>{ badgeContent }</div>;
         }
 
-        const badge = badgeContent ?
-            (<div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>) :
-            undefined;
-
         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 }