Show/hide apps panel and misc formatting and lint fixes

pull/21833/head
Richard Lewis 2017-05-17 21:15:57 +01:00
parent 95988bd5ec
commit 7e1de2ac35
3 changed files with 45 additions and 28 deletions

View File

@ -43,7 +43,7 @@ import KeyCode from '../../KeyCode';
import UserProvider from '../../autocomplete/UserProvider';
var DEBUG = false;
const DEBUG = false;
if (DEBUG) {
// using bind means that we get to keep useful line numbers in the console
@ -133,6 +133,7 @@ module.exports = React.createClass({
callState: null,
guestsCanJoin: false,
canPeek: false,
showApps: false,
// error object, as from the matrix client/server API
// If we failed to load information about the room,
@ -168,7 +169,7 @@ module.exports = React.createClass({
onClickCompletes: true,
onStateChange: (isCompleting) => {
this.forceUpdate();
}
},
});
if (this.props.roomAddress[0] == '#') {
@ -434,9 +435,14 @@ module.exports = React.createClass({
this._updateConfCallNotification();
this.setState({
callState: callState
callState: callState,
});
break;
case 'appsDrawer':
this.setState({
showApps: payload.show ? true : false,
});
break;
}
},
@ -1638,7 +1644,8 @@ module.exports = React.createClass({
draggingFile={this.state.draggingFile}
displayConfCallNotification={this.state.displayConfCallNotification}
maxHeight={this.state.auxPanelMaxHeight}
onResize={this.onChildResize} >
onResize={this.onChildResize}
showApps={this.state.showApps} >
{ aux }
</AuxPanel>
);
@ -1651,8 +1658,14 @@ module.exports = React.createClass({
if (canSpeak) {
messageComposer =
<MessageComposer
room={this.state.room} onResize={this.onChildResize} uploadFile={this.uploadFile}
callState={this.state.callState} tabComplete={this.tabComplete} opacity={ this.props.opacity }/>;
room={this.state.room}
onResize={this.onChildResize}
uploadFile={this.uploadFile}
callState={this.state.callState}
tabComplete={this.tabComplete}
opacity={ this.props.opacity }
showApps={ this.state.showApps }
/>;
}
// TODO: Why aren't we storing the term/scope/count in this format

View File

@ -14,11 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
var React = require('react');
var MatrixClientPeg = require("../../../MatrixClientPeg");
var sdk = require('../../../index');
var dis = require("../../../dispatcher");
var ObjectUtils = require('../../../ObjectUtils');
const React = require('react');
const MatrixClientPeg = require("../../../MatrixClientPeg");
const sdk = require('../../../index');
const dis = require("../../../dispatcher");
const ObjectUtils = require('../../../ObjectUtils');
const AppsDrawer = require('./AppsDrawer');
module.exports = React.createClass({
displayName: 'AuxPanel',
@ -68,10 +69,10 @@ module.exports = React.createClass({
},
render: function() {
var CallView = sdk.getComponent("voip.CallView");
var TintableSvg = sdk.getComponent("elements.TintableSvg");
const CallView = sdk.getComponent("voip.CallView");
const TintableSvg = sdk.getComponent("elements.TintableSvg");
var fileDropTarget = null;
let fileDropTarget = null;
if (this.props.draggingFile) {
fileDropTarget = (
<div className="mx_RoomView_fileDropTarget">
@ -85,19 +86,18 @@ module.exports = React.createClass({
);
}
var conferenceCallNotification = null;
let conferenceCallNotification = null;
if (this.props.displayConfCallNotification) {
var supportedText, joinText;
let supportedText;
let joinText;
if (!MatrixClientPeg.get().supportsVoip()) {
supportedText = " (unsupported)";
}
else {
} else {
joinText = (<span>
Join as <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}}
href="#">voice</a> or <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video'); }}
href="#">video</a>.
</span>);
}
conferenceCallNotification = (
<div className="mx_RoomView_ongoingConfCallNotification">
@ -106,7 +106,7 @@ module.exports = React.createClass({
);
}
var callView = (
const callView = (
<CallView ref="callView" room={this.props.room}
ConferenceHandler={this.props.conferenceHandler}
onResize={this.props.onResize}
@ -114,8 +114,14 @@ module.exports = React.createClass({
/>
);
let appsDrawer = null;
if(this.props.showApps) {
appsDrawer = <AppsDrawer ref="appsDrawer" room={this.props.room} />;
}
return (
<div className="mx_RoomView_auxPanel" style={{maxHeight: this.props.maxHeight}} >
{ appsDrawer }
{ fileDropTarget }
{ callView }
{ conferenceCallNotification }

View File

@ -164,18 +164,16 @@ export default class MessageComposer extends React.Component {
}
onShowAppsClick(ev) {
console.warn("Showing apps");
dis.dispatch({
action: 'showApps',
room_id: this.props.room.roomId,
action: 'appsDrawer',
show: true,
});
}
onHideAppsClick(ev) {
console.warn("Hiding apps");
dis.dispatch({
action: 'hideApps',
room_id: this.props.room.roomId,
action: 'appsDrawer',
show: false,
});
}
@ -278,7 +276,7 @@ export default class MessageComposer extends React.Component {
}
// Apps
if (this.props.showAppsState && this.props.showAppsState == 'visible') {
if (this.props.showApps) {
hideAppsButton =
<div key="controls_hide_apps" className="mx_MessageComposer_apps" onClick={this.onHideAppsClick} title="Hide Apps">
<TintableSvg src="img/icons-apps-active.svg" width="35" height="35"/>
@ -431,5 +429,5 @@ MessageComposer.propTypes = {
opacity: React.PropTypes.number,
// string representing the current room app drawer state
showAppsState: React.PropTypes.string,
showApps: React.PropTypes.bool,
};