From 4c3a723aa8c7dc219e8699a1a9315648d162b756 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 2 Feb 2017 18:42:03 +0000
Subject: [PATCH] make TopRightMenu more intuitive

should fix https://github.com/vector-im/riot-web/issues/2827
---
 src/components/structures/RightPanel.js       | 45 +++++--------------
 src/components/structures/SearchBox.js        |  4 +-
 .../vector-web/structures/_RightPanel.scss    | 11 ++++-
 3 files changed, 23 insertions(+), 37 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index d1622e5f41..1adc31649e 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -69,45 +69,21 @@ module.exports = React.createClass({
     },
 
     onMemberListButtonClick: function() {
-        if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
-            this.setState({ phase: this.Phase.MemberList });
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_right_panel',
-            });
-        }
+        this.setState({ phase: this.Phase.MemberList });
     },
 
     onFileListButtonClick: function() {
-        if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) {
-            this.setState({ phase: this.Phase.FilePanel });
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_right_panel',
-            });
-        }
+        this.setState({ phase: this.Phase.FilePanel });
     },
 
     onNotificationListButtonClick: function() {
-        if (this.props.collapsed || this.state.phase !== this.Phase.NotificationPanel) {
-            this.setState({ phase: this.Phase.NotificationPanel });
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_right_panel',
-            });
-        }
+        this.setState({ phase: this.Phase.NotificationPanel });
+    },
+
+    onCollapseClick: function() {
+        dis.dispatch({
+            action: 'hide_right_panel',
+        });
     },
 
     onInviteButtonClick: function() {
@@ -235,6 +211,9 @@ module.exports = React.createClass({
                             <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
                             { notificationsHighlight }
                         </div>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title="Hide panel" onClick={ this.onCollapseClick }>
+                            <TintableSvg src="img/minimise.svg" width="10" height="16"/>
+                        </div>
                     </div>;
         }
 
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index 7fc5100049..20181f75b4 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -68,13 +68,13 @@ module.exports = React.createClass({
         if (this.props.collapsed) {
             toggleCollapse =
                 <div className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt="&lt;"/>
+                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/>
                 </div>
         }
         else {
             toggleCollapse =
                 <div className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
-                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="&lt;"/>
+                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/>
                 </div>
         }
 
diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
index 91034e633d..c0872e82d7 100644
--- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -34,14 +34,15 @@ limitations under the License.
 
 .mx_RightPanel_headerButtonGroup {
     margin-top: 6px;
-    float: left;
+    display: flex;
+    width: 100%;
     background-color: $primary-bg-color;
     margin-left: 0px;
 }
 
 .mx_RightPanel_headerButton {
     cursor: pointer;
-    display: table-cell;
+    flex: 0;
     vertical-align: top;
     padding-left: 4px;
     padding-right: 5px;
@@ -69,6 +70,12 @@ limitations under the License.
     padding-bottom: 2px;
 }
 
+.mx_RightPanel_collapsebutton {
+    flex: 1;
+    text-align: right;
+    margin-top: 20px;
+}
+
 .mx_RightPanel .mx_MemberList,
 .mx_RightPanel .mx_MemberInfo,
 .mx_RightPanel_blank {