From 43b87e1f8279bc22fc652b3315065a8b540524bd Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 15 Sep 2016 11:29:27 +0100 Subject: [PATCH] Add network selector that doesn't do anything yet --- src/component-index.js | 1 + src/components/structures/RoomDirectory.js | 8 +- .../views/directory/NetworkDropdown.js | 152 ++++++++++++++++++ .../vector-web/structures/RoomDirectory.css | 17 +- .../views/directory/NetworkDropdown.css | 76 +++++++++ 5 files changed, 249 insertions(+), 5 deletions(-) create mode 100644 src/components/views/directory/NetworkDropdown.js create mode 100644 src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css diff --git a/src/component-index.js b/src/component-index.js index a2ee1ad4eb..ec597609a7 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -38,6 +38,7 @@ module.exports.components['views.context_menus.MessageContextMenu'] = require('. module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu'); module.exports.components['views.context_menus.RoomTagContextMenu'] = require('./components/views/context_menus/RoomTagContextMenu'); module.exports.components['views.dialogs.ChangelogDialog'] = require('./components/views/dialogs/ChangelogDialog'); +module.exports.components['views.directory.NetworkDropdown'] = require('./components/views/directory/NetworkDropdown'); module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView'); module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner'); module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar'); diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index e4a8524b90..a60f96d66a 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -276,12 +276,16 @@ module.exports = React.createClass({ ); } - var SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader'); + const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader'); + const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown'); return (
- +
+ + +
diff --git a/src/components/views/directory/NetworkDropdown.js b/src/components/views/directory/NetworkDropdown.js new file mode 100644 index 0000000000..eacb0fff2a --- /dev/null +++ b/src/components/views/directory/NetworkDropdown.js @@ -0,0 +1,152 @@ +/* +Copyright 2016 OpenMarket 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'; + +export default class NetworkDropdown extends React.Component { + constructor() { + super(); + + this.dropdownRootElement = null; + this.ignoreEvent = null; + + this.onClick = this.onClick.bind(this); + this.onRootClick = this.onRootClick.bind(this); + this.onDocumentClick = this.onDocumentClick.bind(this); + this.onNetworkClick = this.onNetworkClick.bind(this); + this.collectRoot = this.collectRoot.bind(this); + + this.state = { + expanded: false, + selectedNetwork: 'all', + }; + + this.networks = [ + 'matrix_org', + 'freenode', + 'gitter', + ]; + + this.networkNames = { + 'matrix_org': 'matrix.org', + 'freenode': 'Freenode', + 'gitter': 'Gitter', + }; + + this.networkIcons = { + 'matrix_org': '//matrix.org/favicon.ico', + 'freenode': '//matrix.org/_matrix/media/v1/download/matrix.org/DHLHpDDgWNNejFmrewvwEAHX', + 'gitter': '//gitter.im/favicon.ico', + }; + } + + componentWillMount() { + // Listen for all clicks on the document so we can close the + // menu when the user clicks somewhere else + document.addEventListener('click', this.onDocumentClick, false); + } + + componentWillUnmount() { + document.removeEventListener('click', this.onDocumentClick, false); + } + + onDocumentClick(ev) { + // Close the dropdown if the user clicks anywhere that isn't + // within our root element + if (ev !== this.ignoreEvent) { + this.setState({ + expanded: false, + }); + } + } + + onRootClick(ev) { + // This captures any clicks that happen within our elements, + // such that we can then ignore them when they're seen by the + // click listener on the document handler, ie. not close the + // dropdown immediately after opening it. + // NB. We can't just stopPropagation() because then the event + // doesn't reach the React onClick(). + this.ignoreEvent = ev; + } + + onClick(ev) { + this.setState({ + expanded: !this.state.expanded, + }); + } + + onNetworkClick(network, ev) { + this.setState({ + expanded: false, + selectedNetwork: network, + }); + } + + collectRoot(e) { + if (this.dropdownRootElement) { + this.dropdownRootElement.removeEventListener('click', this.onRootClick, false); + } + if (e) { + e.addEventListener('click', this.onRootClick, false); + } + this.dropdownRootElement = e; + } + + _optionForNetwork(network) { + let icon; + let name; + let spanClass; + + if (network == 'all') { + name = 'All networks'; + spanClass = 'mx_NetworkDropdown_menu_all'; + } else { + name = this.networkNames[network]; + icon = ; + spanClass = 'mx_NetworkDropdown_menu_network'; + } + + return
+ {icon} + {name} +
; + } + + render() { + const currentValue = this._optionForNetwork(this.state.selectedNetwork); + + let menu; + if (this.state.expanded) { + const menuOptions = [this._optionForNetwork('all')]; + for (const network of this.networks) { + menuOptions.push(this._optionForNetwork(network)); + } + menu =
+ {menuOptions} +
; + } + + return
+
+ {currentValue} + + {menu} +
+
; + } +} + diff --git a/src/skins/vector/css/vector-web/structures/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/RoomDirectory.css index 2f75724d54..b4a2394593 100644 --- a/src/skins/vector/css/vector-web/structures/RoomDirectory.css +++ b/src/skins/vector/css/vector-web/structures/RoomDirectory.css @@ -46,15 +46,26 @@ limitations under the License. -webkit-flex-direction: column; } +.mx_RoomDirectory_listheader { + display: table; + width: 100%; + margin-top: 12px; + margin-bottom: 12px; + border-spacing: 5px; +} + .mx_RoomDirectory_input { - margin: auto; + display: table-cell; border-radius: 3px; border: 1px solid #c7c7c7; font-weight: 300; font-size: 13px; padding: 9px; - margin-top: 12px; - margin-bottom: 12px; +} + +.mx_RoomDirectory_listheader .mx_NetworkDropdown { + display: table-cell; + width: 100%; } .mx_RoomDirectory_tableWrapper { diff --git a/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css b/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css new file mode 100644 index 0000000000..6380a7a155 --- /dev/null +++ b/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css @@ -0,0 +1,76 @@ +/* +Copyright 2015, 2016 OpenMarket 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_NetworkDropdown { + position: relative; +} + +.mx_NetworkDropdown_input { + position: relative; + border-radius: 3px; + border: 1px solid #c7c7c7; + font-weight: 300; + font-size: 13px; + margin-top: 12px; + margin-bottom: 12px; +} + +.mx_NetworkDropdown_arrow { + border-color: #4a4a4a transparent transparent; + border-style: solid; + border-width: 5px 5px 0; + display: block; + height: 0; + position: absolute; + right: 10px; + top: 14px; + width: 0 +} + +.mx_NetworkDropdown_networkoption { + height: 35px; + line-height: 35px; + padding-left: 8px; + padding-right: 8px; +} + +.mx_NetworkDropdown_networkoption img { + margin: 5px; + width: 25px; + vertical-align: middle; +} + +.mx_NetworkDropdown_menu { + position: absolute; + left: -1px; + right: -1px; + top: 100%; + z-index: 2; + margin: 0; + padding: 0px; + border-radius: 3px; + border: 1px solid #76cfa6; + background-color: white; +} + +.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover { + background-color: #ddd; +} + +.mx_NetworkDropdown_menu_network { + font-weight: bold; +} +