PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Implement global filter to deselect all tags

Browse source 
and make TagPanel scrollable whilst we're at it.
This commit is contained in:
Luke Barnard 2018-02-16 17:43:24 +00:00
parent ad863afd6d
commit 113fc696d8
1 changed files with 32 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/components/structures/TagPanel.js
View file

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