Move Jitsi widget to bottom and fix keyboard navigation of left panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/structures/_LeftPanel.scss

@@ -48,12 +48,16 @@ limitations under the License.
 
 .mx_LeftPanel {
     flex: 1;
-    overflow-x: hidden;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     min-height: 0;
 }
 
+.mx_LeftPanel .mx_LeftPanel_Rooms {
+    flex: 1 1 0;
+}
+
 .mx_LeftPanel .mx_AppTile_mini {
     height: 132px;
 }

src/components/structures/LeftPanel.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,7 +20,7 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { MatrixClient } from 'matrix-js-sdk';
-import { KeyCode } from '../../Keyboard';
+import { Key } from '../../Keyboard';
 import sdk from '../../index';
 import dis from '../../dispatcher';
 import VectorConferenceHandler from '../../VectorConferenceHandler';
@@ -117,35 +118,21 @@ const LeftPanel = createReactClass({
 
     _onKeyDown: function(ev) {
         if (!this.focusedElement) return;
-        let handled = true;
 
-        switch (ev.keyCode) {
+        switch (ev.key) {
-            case KeyCode.TAB:
+            case Key.TAB:
-                this._onMoveFocus(ev.shiftKey);
+                this._onMoveFocus(ev, ev.shiftKey);
                 break;
-            case KeyCode.UP:
+            case Key.ARROW_UP:
-                this._onMoveFocus(true);
+                this._onMoveFocus(ev, true, true);
                 break;
-            case KeyCode.DOWN:
+            case Key.ARROW_DOWN:
-                this._onMoveFocus(false);
+                this._onMoveFocus(ev, false, true);
                 break;
-            case KeyCode.ENTER:
-                this._onMoveFocus(false);
-                if (this.focusedElement) {
-                    this.focusedElement.click();
-                }
-                break;
-            default:
-                handled = false;
-        }
-
-        if (handled) {
-            ev.stopPropagation();
-            ev.preventDefault();
         }
     },
 
-    _onMoveFocus: function(up) {
+    _onMoveFocus: function(ev, up, trap) {
         let element = this.focusedElement;
 
         // unclear why this isn't needed
@@ -179,29 +166,24 @@ const LeftPanel = createReactClass({
 
             if (element) {
                 classes = element.classList;
-                if (classes.contains("mx_LeftPanel")) { // we hit the top
-                    element = up ? element.lastElementChild : element.firstElementChild;
-                    descending = true;
-                }
             }
         } while (element && !(
             classes.contains("mx_RoomTile") ||
             classes.contains("mx_RoomSubList_label") ||
-            classes.contains("mx_textinput_search")));
+            classes.contains("mx_LeftPanel_filterRooms")));
 
         if (element) {
+            ev.stopPropagation();
+            ev.preventDefault();
             element.focus();
             this.focusedElement = element;
-            this.focusedDescending = descending;
+        } else if (trap) {
+            // if navigation is via up/down arrow-keys, trap in the widget so it doesn't send to composer
+            ev.stopPropagation();
+            ev.preventDefault();
         }
     },
 
-    onHideClick: function() {
-        dis.dispatch({
-            action: 'hide_left_panel',
-        });
-    },
-
     onSearch: function(term) {
         this.setState({ searchFilter: term });
     },
@@ -269,6 +251,7 @@ const LeftPanel = createReactClass({
         }
 
         const searchBox = (<SearchBox
+            className="mx_LeftPanel_filterRooms"
             enableRoomSearchFocus={true}
             blurredPlaceholder={ _t('Filter') }
             placeholder={ _t('Filter rooms…') }
@@ -286,20 +269,22 @@ const LeftPanel = createReactClass({
         return (
             <div className={containerClasses}>
                 { tagPanelContainer }
-                <aside className={"mx_LeftPanel dark-panel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+                <aside className="mx_LeftPanel dark-panel">
-                    <TopLeftMenuButton collapsed={ this.props.collapsed } />
+                    <TopLeftMenuButton collapsed={this.props.collapsed} />
                     { breadcrumbs }
-                    <div className="mx_LeftPanel_exploreAndFilterRow">
+                    <div className="mx_LeftPanel_Rooms" onKeyDown={this._onKeyDown} onFocus={this._onFocus} onBlur={this._onBlur}>
-                        { exploreButton }
+                        <div className="mx_LeftPanel_exploreAndFilterRow">
-                        { searchBox }
+                            { exploreButton }
+                            { searchBox }
+                        </div>
+                        <RoomList
+                            ref={this.collectRoomList}
+                            resizeNotifier={this.props.resizeNotifier}
+                            collapsed={this.props.collapsed}
+                            searchFilter={this.state.searchFilter}
+                            ConferenceHandler={VectorConferenceHandler} />
                     </div>
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
-                    <RoomList
-                        ref={this.collectRoomList}
-                        resizeNotifier={this.props.resizeNotifier}
-                        collapsed={this.props.collapsed}
-                        searchFilter={this.state.searchFilter}
-                        ConferenceHandler={VectorConferenceHandler} />
                 </aside>
             </div>
         );