From 604020dd596af19d850dfdeecbbb3135dc543961 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 5 Feb 2019 17:39:02 +0000 Subject: [PATCH] add selectable custom tags below tag panel --- res/css/_components.scss | 1 + res/css/structures/_CustomRoomTagPanel.scss | 48 +++++++ .../structures/CustomRoomTagPanel.js | 125 ++++++++++++++++++ src/components/structures/LeftPanel.js | 3 + 4 files changed, 177 insertions(+) create mode 100644 res/css/structures/_CustomRoomTagPanel.scss create mode 100644 src/components/structures/CustomRoomTagPanel.js diff --git a/res/css/_components.scss b/res/css/_components.scss index 3affbb628e..3923df0037 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/structures/_CustomRoomTagPanel.scss b/res/css/structures/_CustomRoomTagPanel.scss new file mode 100644 index 0000000000..16e3e98dac --- /dev/null +++ b/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; +} diff --git a/src/components/structures/CustomRoomTagPanel.js b/src/components/structures/CustomRoomTagPanel.js new file mode 100644 index 0000000000..5e6a1c14f3 --- /dev/null +++ b/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 (); + }); + + const classes = classNames('mx_CustomRoomTagPanel', { + mx_CustomRoomTagPanel_empty: this.state.tags.length === 0, + }); + + const clearButton = undefined; + + return
+
+ { clearButton } +
+
+ + {tags} + +
; + }, +}); + +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 ? + : +
); + return ( +
+ + { tip } +
+ ); + } +} + +export default CustomRoomTagPanel; diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 4b87159c35..0ae9b032d1 100644 --- a/src/components/structures/LeftPanel.js +++ b/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 = (
+
); } @@ -210,6 +212,7 @@ const LeftPanel = React.createClass({ onCleared={ this.onSearchCleared } collapsed={this.props.collapsed} />); + return (
{ tagPanelContainer }