From 113fc696d885eec3ce55ed67cade8a81b4bd96b1 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Fri, 16 Feb 2018 17:43:24 +0000
Subject: [PATCH] Implement global filter to deselect all tags

and make TagPanel scrollable whilst we're at it.
---
 src/components/structures/TagPanel.js | 51 +++++++++++++++++----------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 6e3bcf521b..74b6656b79 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk';
+import GeminiScrollbar from 'react-gemini-scrollbar';
 import TagOrderStore from '../../stores/TagOrderStore';
 
 import GroupActions from '../../actions/GroupActions';
@@ -93,9 +94,14 @@ const TagPanel = React.createClass({
         dis.dispatch({action: 'view_create_group'});
     },
 
+    onLogoClick(ev) {
+        dis.dispatch({action: 'deselect_tags'});
+    },
+
     render() {
         const GroupsButton = sdk.getComponent('elements.GroupsButton');
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -106,25 +112,32 @@ const TagPanel = React.createClass({
             />;
         });
         return <div className="mx_TagPanel">
-            <Droppable
-                droppableId="tag-panel-droppable"
-                type="draggable-TagTile"
-            >
-                { (provided, snapshot) => (
-                    <div
-                        className="mx_TagPanel_tagTileContainer"
-                        ref={provided.innerRef}
-                        // react-beautiful-dnd has a bug that emits a click to the parent
-                        // of draggables upon dropping
-                        //   https://github.com/atlassian/react-beautiful-dnd/issues/273
-                        // so we use onMouseDown here as a workaround.
-                        onMouseDown={this.onClick}
-                    >
-                        { tags }
-                        { provided.placeholder }
-                    </div>
-                ) }
-            </Droppable>
+            <AccessibleButton className="mx_TagPanel_logo" onClick={this.onLogoClick}>
+                <img src="img/logos/riot-logo.svg" />
+            </AccessibleButton>
+            <div className="mx_TagPanel_divider" />
+            <GeminiScrollbar autoShow={true} className="mx_TagPanel_scroller">
+                <Droppable
+                    droppableId="tag-panel-droppable"
+                    type="draggable-TagTile"
+                >
+                    { (provided, snapshot) => (
+                            <div
+                                className="mx_TagPanel_tagTileContainer"
+                                ref={provided.innerRef}
+                                // react-beautiful-dnd has a bug that emits a click to the parent
+                                // of draggables upon dropping
+                                //   https://github.com/atlassian/react-beautiful-dnd/issues/273
+                                // so we use onMouseDown here as a workaround.
+                                onMouseDown={this.onClick}
+                            >
+                                { tags }
+                                { provided.placeholder }
+                            </div>
+                    ) }
+                </Droppable>
+            </GeminiScrollbar>
+            <div className="mx_TagPanel_divider" />
             <div className="mx_TagPanel_createGroupButton">
                 <GroupsButton tooltip={true} />
             </div>