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;
+}
+