Add network selector that doesn't do anything yet

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');

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 (
             <div className="mx_RoomDirectory">
                 <SimpleRoomHeader title="Directory" />
                 <div className="mx_RoomDirectory_list">
-                    <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
+                    <div className="mx_RoomDirectory_listheader">
+                        <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
+                        <NetworkDropdown />
+                    </div>
                     <GeminiScrollbar className="mx_RoomDirectory_tableWrapper">
                         <table ref="directory_table" className="mx_RoomDirectory_table">
                             <tbody>

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 = <img src={this.networkIcons[network]} />;
+            spanClass = 'mx_NetworkDropdown_menu_network';
+        }
+
+        return <div key={network} className="mx_NetworkDropdown_networkoption" onClick={this.onNetworkClick.bind(this, network)}>
+            {icon}
+            <span className={spanClass}>{name}</span>
+        </div>;
+    }
+
+    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 = <div className="mx_NetworkDropdown_menu">
+                {menuOptions}
+            </div>;
+        }
+
+        return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
+            <div className="mx_NetworkDropdown_input" onClick={this.onClick}>
+                {currentValue}
+                <span className="mx_NetworkDropdown_arrow"></span>
+                {menu}
+            </div>
+        </div>;
+    }
+}
+

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 {

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