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 1/2] 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>
From 7a0c82a327b7df5e28160c10cfd89fb55ee9b798 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Fri, 16 Feb 2018 18:08:29 +0000
Subject: [PATCH 2/2] Fix click background to deselect
---
src/components/structures/TagPanel.js | 13 +++++--------
1 file changed, 5 insertions(+), 8 deletions(-)
diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 74b6656b79..d614588ccc 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -84,8 +84,6 @@ const TagPanel = React.createClass({
},
onClick(e) {
- // Ignore clicks on children
- if (e.target !== e.currentTarget) return;
dis.dispatch({action: 'deselect_tags'});
},
@@ -116,7 +114,11 @@ const TagPanel = React.createClass({
<img src="img/logos/riot-logo.svg" />
</AccessibleButton>
<div className="mx_TagPanel_divider" />
- <GeminiScrollbar autoShow={true} className="mx_TagPanel_scroller">
+ <GeminiScrollbar
+ className="mx_TagPanel_scroller"
+ autoShow={true}
+ onClick={this.onClick}
+ >
<Droppable
droppableId="tag-panel-droppable"
type="draggable-TagTile"
@@ -125,11 +127,6 @@ const TagPanel = React.createClass({
<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 }