Merge remote-tracking branch 'origin/develop' into develop
This commit is contained in:
commit
7911df46a0
1 changed files with 99 additions and 10 deletions
|
@ -16,17 +16,16 @@ limitations under the License.
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var React = require('react');
|
import React from 'react';
|
||||||
var DragDropContext = require('react-dnd').DragDropContext;
|
import { DragDropContext } from 'react-dnd';
|
||||||
var HTML5Backend = require('react-dnd-html5-backend');
|
import HTML5Backend from 'react-dnd-html5-backend';
|
||||||
var sdk = require('matrix-react-sdk')
|
import KeyCode from 'matrix-react-sdk/lib/KeyCode';
|
||||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
import sdk from 'matrix-react-sdk';
|
||||||
|
import dis from 'matrix-react-sdk/lib/dispatcher';
|
||||||
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
|
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
|
||||||
|
import CallHandler from 'matrix-react-sdk/lib/CallHandler';
|
||||||
var VectorConferenceHandler = require('../../VectorConferenceHandler');
|
|
||||||
var CallHandler = require("matrix-react-sdk/lib/CallHandler");
|
|
||||||
|
|
||||||
import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
|
import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
|
||||||
|
import VectorConferenceHandler from '../../VectorConferenceHandler';
|
||||||
|
|
||||||
var LeftPanel = React.createClass({
|
var LeftPanel = React.createClass({
|
||||||
displayName: 'LeftPanel',
|
displayName: 'LeftPanel',
|
||||||
|
@ -42,6 +41,10 @@ var LeftPanel = React.createClass({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
componentWillMount: function() {
|
||||||
|
this.focusedElement = null;
|
||||||
|
},
|
||||||
|
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
this.dispatcherRef = dis.register(this.onAction);
|
this.dispatcherRef = dis.register(this.onAction);
|
||||||
},
|
},
|
||||||
|
@ -64,6 +67,91 @@ var LeftPanel = React.createClass({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_onFocus: function(ev) {
|
||||||
|
this.focusedElement = ev.target;
|
||||||
|
},
|
||||||
|
|
||||||
|
_onBlur: function(ev) {
|
||||||
|
this.focusedElement = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
_onKeyDown: function(ev) {
|
||||||
|
if (!this.focusedElement) return;
|
||||||
|
let handled = false;
|
||||||
|
|
||||||
|
switch (ev.keyCode) {
|
||||||
|
case KeyCode.UP:
|
||||||
|
this._onMoveFocus(true);
|
||||||
|
handled = true;
|
||||||
|
break;
|
||||||
|
case KeyCode.DOWN:
|
||||||
|
this._onMoveFocus(false);
|
||||||
|
handled = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (handled) {
|
||||||
|
ev.stopPropagation();
|
||||||
|
ev.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_onMoveFocus: function(up) {
|
||||||
|
var element = this.focusedElement;
|
||||||
|
|
||||||
|
// unclear why this isn't needed
|
||||||
|
// var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
|
||||||
|
// this.focusDirection = up;
|
||||||
|
|
||||||
|
var descending = false; // are we currently descending or ascending through the DOM tree?
|
||||||
|
var classes;
|
||||||
|
|
||||||
|
do {
|
||||||
|
var child = up ? element.lastElementChild : element.firstElementChild;
|
||||||
|
var sibling = up ? element.previousElementSibling : element.nextElementSibling;
|
||||||
|
|
||||||
|
if (descending) {
|
||||||
|
if (child) {
|
||||||
|
element = child;
|
||||||
|
}
|
||||||
|
else if (sibling) {
|
||||||
|
element = sibling;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
descending = false;
|
||||||
|
element = element.parentElement;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (sibling) {
|
||||||
|
element = sibling;
|
||||||
|
descending = true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
element = element.parentElement;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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_SearchBox_search") ||
|
||||||
|
classes.contains("mx_RoomSubList_ellipsis")));
|
||||||
|
|
||||||
|
if (element) {
|
||||||
|
element.focus();
|
||||||
|
this.focusedElement = element;
|
||||||
|
this.focusedDescending = descending;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
_recheckCallElement: function(selectedRoomId) {
|
_recheckCallElement: function(selectedRoomId) {
|
||||||
// if we aren't viewing a room with an ongoing call, but there is an
|
// if we aren't viewing a room with an ongoing call, but there is an
|
||||||
// active call, show the call element - we need to do this to make
|
// active call, show the call element - we need to do this to make
|
||||||
|
@ -126,7 +214,8 @@ var LeftPanel = React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className={classes} style={{ opacity: this.props.opacity }}>
|
<aside className={classes} style={{ opacity: this.props.opacity }}
|
||||||
|
onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
|
||||||
{ topBox }
|
{ topBox }
|
||||||
{ callPreview }
|
{ callPreview }
|
||||||
<RoomList
|
<RoomList
|
||||||
|
|
Loading…
Reference in a new issue