add selectable custom tags below tag panel

res/css/_components.scss

@@ -4,6 +4,7 @@
 @import "./structures/_CompatibilityPage.scss";
 @import "./structures/_ContextualMenu.scss";
 @import "./structures/_CreateRoom.scss";
+@import "./structures/_CustomRoomTagPanel.scss";
 @import "./structures/_FilePanel.scss";
 @import "./structures/_GroupView.scss";
 @import "./structures/_HomePage.scss";

res/css/structures/_CustomRoomTagPanel.scss

@@ -0,0 +1,48 @@
+/*
+Copyright 2019 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LeftPanel_tagPanelContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_CustomRoomTagPanel {
+    background-color: $tagpanel-bg-color;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    color: white
+}
+
+.mx_CustomRoomTagPanel li.selected {
+    background-color: red;
+}
+
+.mx_CustomRoomTagPanel .mx_AccessibleButton {
+    margin: 9px 0;
+}
+
+.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
+    box-sizing: border-box;
+    width: 40px;
+    height: 40px;
+}
+
+.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image {
+    border: 3px solid $warning-color;
+    border-radius: 40px;
+}

src/components/structures/CustomRoomTagPanel.js

@@ -0,0 +1,125 @@
+/*
+Copyright 2017, 2018 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import CustomRoomTagStore from '../../stores/CustomRoomTagStore';
+import AutoHideScrollbar from './AutoHideScrollbar';
+import sdk from '../../index';
+import dis from '../../dispatcher';
+import classNames from 'classnames';
+
+
+const CustomRoomTagPanel = React.createClass({
+    displayName: 'CustomRoomTagPanel',
+
+    getInitialState() {
+        return {
+            tags: CustomRoomTagStore.getSortedTags(),
+        };
+    },
+
+    componentWillMount: function() {
+        this._tagStoreToken = CustomRoomTagStore.addListener(() => {
+            this.setState({tags: CustomRoomTagStore.getSortedTags()});
+        });
+    },
+
+    componentWillUnmount() {
+        if (this._tagStoreToken) {
+            this._tagStoreToken.remove();
+        }
+    },
+
+    onClearFilterClick(ev) {
+        dis.dispatch({action: 'deselect_custom_room_tags'});
+    },
+
+    render() {
+        console.log("CustomRoomTagPanel", this.state.tags);
+        const tags = this.state.tags.map((tag) => {
+            return (<CustomRoomTagTile tag={tag} key={tag.name} />);
+        });
+
+        const classes = classNames('mx_CustomRoomTagPanel', {
+            mx_CustomRoomTagPanel_empty: this.state.tags.length === 0,
+        });
+
+        const clearButton = undefined;
+
+        return <div className={classes}>
+            <div className="mx_CustomRoomTagPanel_clearButton_container">
+                { clearButton }
+            </div>
+            <div className="mx_CustomRoomTagPanel_divider" />
+            <AutoHideScrollbar className="mx_CustomRoomTagPanel_scroller">
+                {tags}
+            </AutoHideScrollbar>
+        </div>;
+    },
+});
+
+class CustomRoomTagTile extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {hover: false};
+        this.onClick = this.onClick.bind(this);
+        this.onMouseOut = this.onMouseOut.bind(this);
+        this.onMouseOver = this.onMouseOver.bind(this);
+    }
+
+    onMouseOver() {
+        this.setState({hover: true});
+    }
+
+    onMouseOut() {
+        this.setState({hover: false});
+    }
+
+    onClick() {
+        dis.dispatch({action: 'select_custom_room_tag', tag: this.props.tag.name});
+    }
+
+    render() {
+        console.log("rendering CustomRoomTagTile", this.props.tag.name);
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
+
+        const tag = this.props.tag;
+        const avatarHeight = 40;
+        const className = classNames({
+            CustomRoomTagPanel_tileSelected: tag.selected,
+        });
+        const name = tag.name;
+
+        const tip = (this.state.hover ?
+            <RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
+            <div />);
+        return (<AccessibleButton className={className} onClick={this.onClick}>
+                    <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                        <BaseAvatar
+                            name={name}
+                            idName={name}
+                            width={avatarHeight}
+                            height={avatarHeight}
+                        />
+                        { tip }
+                    </div>
+                </AccessibleButton>);
+    }
+}
+
+export default CustomRoomTagPanel;

src/components/structures/LeftPanel.js

@@ -183,6 +183,7 @@ const LeftPanel = React.createClass({
     render: function() {
         const RoomList = sdk.getComponent('rooms.RoomList');
         const TagPanel = sdk.getComponent('structures.TagPanel');
+        const CustomRoomTagPanel = sdk.getComponent('structures.CustomRoomTagPanel');
         const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
         const SearchBox = sdk.getComponent('structures.SearchBox');
         const CallPreview = sdk.getComponent('voip.CallPreview');
@@ -192,6 +193,7 @@ const LeftPanel = React.createClass({
         if (tagPanelEnabled) {
             tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
                 <TagPanel />
+                <CustomRoomTagPanel />
                 <TagPanelButtons />
             </div>);
         }
@@ -210,6 +212,7 @@ const LeftPanel = React.createClass({
             onCleared={ this.onSearchCleared }
             collapsed={this.props.collapsed} />);
 
+
         return (
             <div className={containerClasses}>
                 { tagPanelContainer }