2015-11-27 13:42:03 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-11-27 13:42:03 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
import React from 'react';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import sdk from '../../../index';
|
2017-05-25 13:39:08 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2017-07-01 16:13:32 +03:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
|
|
|
import Modal from "../../../Modal";
|
|
|
|
import dis from "../../../dispatcher";
|
|
|
|
import RateLimitedFunc from '../../../ratelimitedfunc';
|
|
|
|
|
|
|
|
import * as linkify from 'linkifyjs';
|
|
|
|
import linkifyElement from 'linkifyjs/element';
|
|
|
|
import linkifyMatrix from '../../../linkify-matrix';
|
2017-01-25 01:41:52 +03:00
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
2017-08-09 13:44:24 +03:00
|
|
|
import ManageIntegsButton from '../elements/ManageIntegsButton';
|
2017-01-25 19:05:39 +03:00
|
|
|
import {CancelButton} from './SimpleRoomHeader';
|
2016-01-11 15:46:12 +03:00
|
|
|
|
|
|
|
linkifyMatrix(linkify);
|
|
|
|
|
2015-11-27 13:42:03 +03:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'RoomHeader',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
room: React.PropTypes.object,
|
2016-03-01 21:23:57 +03:00
|
|
|
oobData: React.PropTypes.object,
|
2015-11-27 13:42:03 +03:00
|
|
|
editing: React.PropTypes.bool,
|
2016-04-12 20:01:49 +03:00
|
|
|
saving: React.PropTypes.bool,
|
2017-05-11 19:35:06 +03:00
|
|
|
inRoom: React.PropTypes.bool,
|
2016-09-13 14:18:22 +03:00
|
|
|
collapsedRhs: React.PropTypes.bool,
|
2015-11-27 13:42:03 +03:00
|
|
|
onSettingsClick: React.PropTypes.func,
|
2017-09-29 00:32:51 +03:00
|
|
|
onPinnedClick: React.PropTypes.func,
|
2015-11-27 13:42:03 +03:00
|
|
|
onSaveClick: React.PropTypes.func,
|
2015-12-13 16:49:28 +03:00
|
|
|
onSearchClick: React.PropTypes.func,
|
|
|
|
onLeaveClick: React.PropTypes.func,
|
2017-08-06 12:29:43 +03:00
|
|
|
onCancelClick: React.PropTypes.func,
|
2015-11-27 13:42:03 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
editing: false,
|
2017-05-11 19:35:06 +03:00
|
|
|
inRoom: false,
|
2015-11-27 13:42:03 +03:00
|
|
|
onSaveClick: function() {},
|
2017-09-12 17:48:13 +03:00
|
|
|
onCancelClick: null,
|
2015-11-27 13:42:03 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2016-03-29 18:31:13 +03:00
|
|
|
componentDidMount: function() {
|
2017-07-01 16:13:32 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
2016-03-29 18:31:13 +03:00
|
|
|
cli.on("RoomState.events", this._onRoomStateEvents);
|
2016-04-15 11:59:23 +03:00
|
|
|
|
|
|
|
// When a room name occurs, RoomState.events is fired *before*
|
|
|
|
// room.name is updated. So we have to listen to Room.name as well as
|
|
|
|
// RoomState.events.
|
|
|
|
if (this.props.room) {
|
|
|
|
this.props.room.on("Room.name", this._onRoomNameChange);
|
|
|
|
}
|
2016-03-29 18:31:13 +03:00
|
|
|
},
|
|
|
|
|
2016-01-11 15:46:12 +03:00
|
|
|
componentDidUpdate: function() {
|
|
|
|
if (this.refs.topic) {
|
|
|
|
linkifyElement(this.refs.topic, linkifyMatrix.options);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-03-29 18:31:13 +03:00
|
|
|
componentWillUnmount: function() {
|
2016-04-15 11:59:23 +03:00
|
|
|
if (this.props.room) {
|
|
|
|
this.props.room.removeListener("Room.name", this._onRoomNameChange);
|
|
|
|
}
|
2017-07-01 16:13:32 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
2016-03-29 18:31:13 +03:00
|
|
|
if (cli) {
|
|
|
|
cli.removeListener("RoomState.events", this._onRoomStateEvents);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_onRoomStateEvents: function(event, state) {
|
2017-07-01 16:13:32 +03:00
|
|
|
if (!this.props.room || event.getRoomId() !== this.props.room.roomId) {
|
2016-03-29 18:31:13 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// redisplay the room name, topic, etc.
|
2016-10-26 15:09:53 +03:00
|
|
|
this._rateLimitedUpdate();
|
2016-03-29 18:31:13 +03:00
|
|
|
},
|
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
_rateLimitedUpdate: new RateLimitedFunc(function() {
|
|
|
|
/* eslint-disable babel/no-invalid-this */
|
2016-10-26 15:09:53 +03:00
|
|
|
this.forceUpdate();
|
|
|
|
}, 500),
|
|
|
|
|
2016-04-15 11:59:23 +03:00
|
|
|
_onRoomNameChange: function(room) {
|
|
|
|
this.forceUpdate();
|
|
|
|
},
|
|
|
|
|
2016-01-15 17:22:17 +03:00
|
|
|
onAvatarPickerClick: function(ev) {
|
|
|
|
if (this.refs.file_label) {
|
|
|
|
this.refs.file_label.click();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onAvatarSelected: function(ev) {
|
2017-07-01 16:13:32 +03:00
|
|
|
const changeAvatar = this.refs.changeAvatar;
|
2016-01-15 17:22:17 +03:00
|
|
|
if (!changeAvatar) {
|
|
|
|
console.error("No ChangeAvatar found to upload image to!");
|
|
|
|
return;
|
|
|
|
}
|
2016-01-22 14:48:26 +03:00
|
|
|
changeAvatar.onFileSelected(ev).catch(function(err) {
|
2017-07-01 16:13:32 +03:00
|
|
|
const errMsg = (typeof err === "string") ? err : (err.error || "");
|
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2017-03-13 01:59:41 +03:00
|
|
|
console.error("Failed to set avatar: " + errMsg);
|
2017-08-10 15:49:11 +03:00
|
|
|
Modal.createTrackedDialog('Failed to set avatar', '', ErrorDialog, {
|
2017-05-23 17:16:31 +03:00
|
|
|
title: _t("Error"),
|
2017-05-27 20:20:35 +03:00
|
|
|
description: _t("Failed to set avatar."),
|
2016-01-15 17:22:17 +03:00
|
|
|
});
|
2016-01-22 14:48:26 +03:00
|
|
|
}).done();
|
2016-04-15 11:59:23 +03:00
|
|
|
},
|
2016-01-15 17:22:17 +03:00
|
|
|
|
2017-10-14 05:57:15 +03:00
|
|
|
onAvatarRemoveClick: function() {
|
|
|
|
MatrixClientPeg.get().sendStateEvent(this.props.room.roomId, 'm.room.avatar', {url: null}, '');
|
|
|
|
},
|
|
|
|
|
2016-09-13 21:00:35 +03:00
|
|
|
onShowRhsClick: function(ev) {
|
|
|
|
dis.dispatch({ action: 'show_right_panel' });
|
2016-09-13 15:12:45 +03:00
|
|
|
},
|
|
|
|
|
2016-03-29 17:21:16 +03:00
|
|
|
/**
|
|
|
|
* After editing the settings, get the new name for the room
|
|
|
|
*
|
2017-07-01 16:13:32 +03:00
|
|
|
* @return {?string} newName or undefined if we didn't let the user edit the room name
|
2016-03-29 17:21:16 +03:00
|
|
|
*/
|
|
|
|
getEditedName: function() {
|
2017-07-01 16:13:32 +03:00
|
|
|
let newName;
|
2016-03-29 17:21:16 +03:00
|
|
|
if (this.refs.nameEditor) {
|
|
|
|
newName = this.refs.nameEditor.getRoomName();
|
|
|
|
}
|
|
|
|
return newName;
|
2016-01-10 15:56:45 +03:00
|
|
|
},
|
|
|
|
|
2016-03-29 17:21:16 +03:00
|
|
|
/**
|
|
|
|
* After editing the settings, get the new topic for the room
|
|
|
|
*
|
2017-07-01 16:13:32 +03:00
|
|
|
* @return {?string} newTopic or undefined if we didn't let the user edit the room topic
|
2016-03-29 17:21:16 +03:00
|
|
|
*/
|
|
|
|
getEditedTopic: function() {
|
2017-07-01 16:13:32 +03:00
|
|
|
let newTopic;
|
2016-03-29 17:21:16 +03:00
|
|
|
if (this.refs.topicEditor) {
|
|
|
|
newTopic = this.refs.topicEditor.getTopic();
|
|
|
|
}
|
|
|
|
return newTopic;
|
2015-11-27 13:42:03 +03:00
|
|
|
},
|
2016-01-05 06:34:52 +03:00
|
|
|
|
2015-11-27 13:42:03 +03:00
|
|
|
render: function() {
|
2017-07-01 16:13:32 +03:00
|
|
|
const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
|
|
|
|
const ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
|
|
|
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
2016-08-11 05:25:12 +03:00
|
|
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
2015-11-27 13:42:03 +03:00
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
let name = null;
|
|
|
|
let searchStatus = null;
|
|
|
|
let topicElement = null;
|
|
|
|
let cancelButton = null;
|
|
|
|
let spinner = null;
|
|
|
|
let saveButton = null;
|
|
|
|
let settingsButton = null;
|
2017-09-29 00:32:51 +03:00
|
|
|
let pinnedEventsButton = null;
|
2017-07-01 16:13:32 +03:00
|
|
|
|
|
|
|
let canSetRoomName;
|
|
|
|
let canSetRoomAvatar;
|
|
|
|
let canSetRoomTopic;
|
2016-03-29 14:51:46 +03:00
|
|
|
if (this.props.editing) {
|
|
|
|
// calculate permissions. XXX: this should be done on mount or something
|
2017-07-01 16:13:32 +03:00
|
|
|
const userId = MatrixClientPeg.get().credentials.userId;
|
2016-03-29 14:51:46 +03:00
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
canSetRoomName = this.props.room.currentState.maySendStateEvent('m.room.name', userId);
|
|
|
|
canSetRoomAvatar = this.props.room.currentState.maySendStateEvent('m.room.avatar', userId);
|
|
|
|
canSetRoomTopic = this.props.room.currentState.maySendStateEvent('m.room.topic', userId);
|
2016-03-29 14:51:46 +03:00
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
saveButton = (
|
2017-06-02 12:18:31 +03:00
|
|
|
<AccessibleButton className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t("Save") }
|
2017-06-02 12:18:31 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
);
|
2017-04-21 14:56:59 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.onCancelClick) {
|
2017-09-28 13:21:06 +03:00
|
|
|
cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
|
2016-03-29 14:51:46 +03:00
|
|
|
}
|
|
|
|
|
2016-04-12 20:01:49 +03:00
|
|
|
if (this.props.saving) {
|
2017-07-01 16:13:32 +03:00
|
|
|
const Spinner = sdk.getComponent("elements.Spinner");
|
2017-09-28 13:21:06 +03:00
|
|
|
spinner = <div className="mx_RoomHeader_spinner"><Spinner /></div>;
|
2016-04-12 20:01:49 +03:00
|
|
|
}
|
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
if (canSetRoomName) {
|
|
|
|
const RoomNameEditor = sdk.getComponent("rooms.RoomNameEditor");
|
2017-01-20 17:22:27 +03:00
|
|
|
name = <RoomNameEditor ref="nameEditor" room={this.props.room} />;
|
2017-07-01 16:13:32 +03:00
|
|
|
} else {
|
2016-03-29 14:51:46 +03:00
|
|
|
// don't display the search count until the search completes and
|
|
|
|
// gives us a valid (possibly zero) searchCount.
|
2017-07-01 16:13:32 +03:00
|
|
|
if (this.props.searchInfo &&
|
|
|
|
this.props.searchInfo.searchCount !== undefined &&
|
|
|
|
this.props.searchInfo.searchCount !== null) {
|
|
|
|
searchStatus = <div className="mx_RoomHeader_searchStatus">
|
|
|
|
{ _t("(~%(count)s results)", { count: this.props.searchInfo.searchCount }) }
|
|
|
|
</div>;
|
2016-01-15 18:51:40 +03:00
|
|
|
}
|
|
|
|
|
2016-03-29 14:51:46 +03:00
|
|
|
// XXX: this is a bit inefficient - we could just compare room.name for 'Empty room'...
|
2017-07-01 16:13:32 +03:00
|
|
|
let settingsHint = false;
|
|
|
|
const members = this.props.room ? this.props.room.getJoinedMembers() : undefined;
|
2016-03-29 14:51:46 +03:00
|
|
|
if (members) {
|
|
|
|
if (members.length === 1 && members[0].userId === MatrixClientPeg.get().credentials.userId) {
|
2017-07-03 21:13:07 +03:00
|
|
|
const nameEvent = this.props.room.currentState.getStateEvents('m.room.name', '');
|
|
|
|
if (!nameEvent || !nameEvent.getContent().name) {
|
2016-03-29 14:51:46 +03:00
|
|
|
settingsHint = true;
|
2016-01-21 03:16:10 +03:00
|
|
|
}
|
|
|
|
}
|
2016-03-29 14:51:46 +03:00
|
|
|
}
|
2016-01-21 03:16:10 +03:00
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
let roomName = _t("Join Room");
|
2016-03-29 14:51:46 +03:00
|
|
|
if (this.props.oobData && this.props.oobData.name) {
|
|
|
|
roomName = this.props.oobData.name;
|
|
|
|
} else if (this.props.room) {
|
|
|
|
roomName = this.props.room.name;
|
|
|
|
}
|
2016-03-01 21:23:57 +03:00
|
|
|
|
2017-05-12 23:20:56 +03:00
|
|
|
const emojiTextClasses = classNames('mx_RoomHeader_nametext', { mx_RoomHeader_settingsHint: settingsHint });
|
2017-05-12 23:06:36 +03:00
|
|
|
name =
|
|
|
|
<div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
|
2017-06-03 18:52:45 +03:00
|
|
|
<EmojiText dir="auto" element="div" className={emojiTextClasses} title={roomName}>{ roomName }</EmojiText>
|
2017-05-12 23:06:36 +03:00
|
|
|
{ searchStatus }
|
|
|
|
</div>;
|
2016-03-29 14:51:46 +03:00
|
|
|
}
|
2016-01-10 15:56:45 +03:00
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
if (canSetRoomTopic) {
|
|
|
|
const RoomTopicEditor = sdk.getComponent("rooms.RoomTopicEditor");
|
|
|
|
topicElement = <RoomTopicEditor ref="topicEditor" room={this.props.room} />;
|
2016-03-29 14:51:46 +03:00
|
|
|
} else {
|
2017-07-01 16:13:32 +03:00
|
|
|
let topic;
|
2016-03-29 17:21:16 +03:00
|
|
|
if (this.props.room) {
|
2017-07-01 16:13:32 +03:00
|
|
|
const ev = this.props.room.currentState.getStateEvents('m.room.topic', '');
|
2016-03-29 17:21:16 +03:00
|
|
|
if (ev) {
|
|
|
|
topic = ev.getContent().topic;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (topic) {
|
2017-07-01 16:13:32 +03:00
|
|
|
topicElement =
|
2017-09-28 13:21:06 +03:00
|
|
|
<div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
|
2016-03-29 17:21:16 +03:00
|
|
|
}
|
2016-03-29 14:51:46 +03:00
|
|
|
}
|
2015-11-27 13:42:03 +03:00
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
let roomAvatar = null;
|
|
|
|
if (canSetRoomAvatar) {
|
2016-03-29 14:51:46 +03:00
|
|
|
roomAvatar = (
|
|
|
|
<div className="mx_RoomHeader_avatarPicker">
|
2017-09-28 13:21:06 +03:00
|
|
|
<div onClick={this.onAvatarPickerClick}>
|
2016-03-29 14:51:46 +03:00
|
|
|
<ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={48} height={48} />
|
2016-03-01 21:23:57 +03:00
|
|
|
</div>
|
2016-03-29 14:51:46 +03:00
|
|
|
<div className="mx_RoomHeader_avatarPicker_edit">
|
|
|
|
<label htmlFor="avatarInput" ref="file_label">
|
|
|
|
<img src="img/camera.svg"
|
2017-10-14 05:57:15 +03:00
|
|
|
alt={_t("Upload avatar")} title={_t("Upload avatar")}
|
|
|
|
width="17" height="15" />
|
2016-03-29 14:51:46 +03:00
|
|
|
</label>
|
2017-09-28 13:21:06 +03:00
|
|
|
<input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
|
2016-03-01 21:23:57 +03:00
|
|
|
</div>
|
2017-10-14 05:57:15 +03:00
|
|
|
<div className="mx_RoomHeader_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
|
|
|
|
<img src="img/cancel.svg" width="10"
|
|
|
|
alt={_t("Remove avatar")} title={_t("Remove avatar")} />
|
|
|
|
</div>
|
2016-03-29 14:51:46 +03:00
|
|
|
</div>
|
|
|
|
);
|
2017-07-01 16:13:32 +03:00
|
|
|
} else if (this.props.room || (this.props.oobData && this.props.oobData.name)) {
|
2016-03-29 14:51:46 +03:00
|
|
|
roomAvatar = (
|
|
|
|
<div onClick={this.props.onSettingsClick}>
|
|
|
|
<RoomAvatar room={this.props.room} width={48} height={48} oobData={this.props.oobData} />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2015-11-27 13:42:03 +03:00
|
|
|
|
2016-07-13 18:02:18 +03:00
|
|
|
if (this.props.onSettingsClick) {
|
2017-07-01 16:13:32 +03:00
|
|
|
settingsButton =
|
2017-06-08 16:08:51 +03:00
|
|
|
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}>
|
2017-09-28 13:21:06 +03:00
|
|
|
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
|
2017-01-13 19:25:26 +03:00
|
|
|
</AccessibleButton>;
|
2016-07-13 18:02:18 +03:00
|
|
|
}
|
|
|
|
|
2017-09-29 00:32:51 +03:00
|
|
|
if (this.props.onPinnedClick) {
|
|
|
|
pinnedEventsButton =
|
|
|
|
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}>
|
|
|
|
<TintableSvg src="img/icons-pin.svg" width="16" height="16" />
|
|
|
|
</AccessibleButton>;
|
|
|
|
}
|
|
|
|
|
2016-08-10 18:34:49 +03:00
|
|
|
// var leave_button;
|
|
|
|
// if (this.props.onLeaveClick) {
|
|
|
|
// leave_button =
|
|
|
|
// <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
|
|
|
|
// <TintableSvg src="img/leave.svg" width="26" height="20"/>
|
|
|
|
// </div>;
|
|
|
|
// }
|
2015-12-16 19:06:29 +03:00
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
let forgetButton;
|
2016-03-29 14:51:46 +03:00
|
|
|
if (this.props.onForgetClick) {
|
2017-07-01 16:13:32 +03:00
|
|
|
forgetButton =
|
2017-09-28 13:21:06 +03:00
|
|
|
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={_t("Forget room")}>
|
|
|
|
<TintableSvg src="img/leave.svg" width="26" height="20" />
|
2017-01-13 19:25:26 +03:00
|
|
|
</AccessibleButton>;
|
2016-03-29 14:51:46 +03:00
|
|
|
}
|
2015-12-13 16:49:28 +03:00
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
let searchButton;
|
2017-05-11 19:35:06 +03:00
|
|
|
if (this.props.onSearchClick && this.props.inRoom) {
|
2017-07-01 16:13:32 +03:00
|
|
|
searchButton =
|
2017-09-28 13:21:06 +03:00
|
|
|
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={_t("Search")}>
|
|
|
|
<TintableSvg src="img/icons-search.svg" width="35" height="35" />
|
2017-05-11 19:35:06 +03:00
|
|
|
</AccessibleButton>;
|
|
|
|
}
|
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
let rightPanelButtons;
|
2016-09-13 14:18:22 +03:00
|
|
|
if (this.props.collapsedRhs) {
|
2017-07-01 16:13:32 +03:00
|
|
|
rightPanelButtons =
|
2017-09-28 13:21:06 +03:00
|
|
|
<AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={_t('Show panel')}>
|
|
|
|
<TintableSvg src="img/maximise.svg" width="10" height="16" />
|
2017-01-24 23:55:10 +03:00
|
|
|
</AccessibleButton>;
|
2016-04-15 20:45:40 +03:00
|
|
|
}
|
|
|
|
|
2017-07-01 16:13:32 +03:00
|
|
|
let rightRow;
|
2017-08-17 20:10:50 +03:00
|
|
|
let manageIntegsButton;
|
2017-09-18 15:34:33 +03:00
|
|
|
if(this.props.room && this.props.room.roomId && this.props.inRoom) {
|
2017-08-17 20:10:50 +03:00
|
|
|
manageIntegsButton = <ManageIntegsButton
|
|
|
|
roomId={this.props.room.roomId}
|
|
|
|
/>;
|
|
|
|
}
|
2017-08-06 12:01:48 +03:00
|
|
|
|
2016-03-29 14:51:46 +03:00
|
|
|
if (!this.props.editing) {
|
2017-07-01 16:13:32 +03:00
|
|
|
rightRow =
|
2016-03-29 14:51:46 +03:00
|
|
|
<div className="mx_RoomHeader_rightRow">
|
2017-07-01 16:13:32 +03:00
|
|
|
{ settingsButton }
|
2017-09-29 00:32:51 +03:00
|
|
|
{ pinnedEventsButton }
|
2017-08-17 20:10:50 +03:00
|
|
|
{ manageIntegsButton }
|
2017-07-01 16:13:32 +03:00
|
|
|
{ forgetButton }
|
|
|
|
{ searchButton }
|
|
|
|
{ rightPanelButtons }
|
2016-03-29 14:51:46 +03:00
|
|
|
</div>;
|
|
|
|
}
|
2016-01-10 15:56:45 +03:00
|
|
|
|
2015-11-27 13:42:03 +03:00
|
|
|
return (
|
2017-09-28 13:21:06 +03:00
|
|
|
<div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
|
2017-07-01 16:13:32 +03:00
|
|
|
<div className="mx_RoomHeader_wrapper">
|
|
|
|
<div className="mx_RoomHeader_leftRow">
|
|
|
|
<div className="mx_RoomHeader_avatar">
|
|
|
|
{ roomAvatar }
|
|
|
|
</div>
|
|
|
|
<div className="mx_RoomHeader_info">
|
|
|
|
{ name }
|
|
|
|
{ topicElement }
|
|
|
|
</div>
|
|
|
|
</div>
|
2017-09-28 13:21:06 +03:00
|
|
|
{ spinner }
|
|
|
|
{ saveButton }
|
|
|
|
{ cancelButton }
|
|
|
|
{ rightRow }
|
2017-07-01 16:13:32 +03:00
|
|
|
</div>
|
2015-11-27 13:42:03 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|