forked from matrix/element-web
Merge branch 'develop' into matthew/settings
This commit is contained in:
commit
ae02d8d30a
src
components/structures
skins/vector/css
vector
vector
|
@ -62,7 +62,7 @@ var LeftPanel = React.createClass({
|
|||
// audio/video not crap out
|
||||
var activeCall = CallHandler.getAnyActiveCall();
|
||||
var callForRoom = CallHandler.getCallForRoom(selectedRoomId);
|
||||
var showCall = (activeCall && !callForRoom);
|
||||
var showCall = (activeCall && activeCall.call_state === 'connected' && !callForRoom);
|
||||
this.setState({
|
||||
showCallElement: showCall
|
||||
});
|
||||
|
@ -87,7 +87,6 @@ var LeftPanel = React.createClass({
|
|||
render: function() {
|
||||
var RoomList = sdk.getComponent('rooms.RoomList');
|
||||
var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
|
||||
var IncomingCallBox = sdk.getComponent('voip.IncomingCallBox');
|
||||
|
||||
var collapseButton;
|
||||
var classes = "mx_LeftPanel";
|
||||
|
@ -100,7 +99,7 @@ var LeftPanel = React.createClass({
|
|||
}
|
||||
|
||||
var callPreview;
|
||||
if (this.state.showCallElement) {
|
||||
if (this.state.showCallElement && !this.props.collapsed) {
|
||||
var CallView = sdk.getComponent('voip.CallView');
|
||||
callPreview = (
|
||||
<CallView
|
||||
|
@ -112,7 +111,6 @@ var LeftPanel = React.createClass({
|
|||
return (
|
||||
<aside className={classes}>
|
||||
{ collapseButton }
|
||||
<IncomingCallBox />
|
||||
{ callPreview }
|
||||
<RoomList
|
||||
selectedRoom={this.props.selectedRoom}
|
||||
|
|
|
@ -61,19 +61,34 @@ var RoomSubList = React.createClass({
|
|||
tagName: React.PropTypes.string,
|
||||
editable: React.PropTypes.bool,
|
||||
order: React.PropTypes.string.isRequired,
|
||||
bottommost: React.PropTypes.bool,
|
||||
selectedRoom: React.PropTypes.string.isRequired,
|
||||
activityMap: React.PropTypes.object.isRequired,
|
||||
collapsed: React.PropTypes.bool.isRequired
|
||||
startAsHidden: React.PropTypes.bool,
|
||||
showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded
|
||||
|
||||
// TODO: Fix the name of this. This is too easily confused with the
|
||||
// "hidden" state which is the expanded (or not) view of the list of rooms.
|
||||
// What this prop *really* does is control whether the room name is displayed
|
||||
// so it should be named as such.
|
||||
collapsed: React.PropTypes.bool.isRequired,
|
||||
onHeaderClick: React.PropTypes.func,
|
||||
alwaysShowHeader: React.PropTypes.bool,
|
||||
incomingCall: React.PropTypes.object
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
hidden: false,
|
||||
hidden: this.props.startAsHidden || false,
|
||||
sortedList: [],
|
||||
};
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
onHeaderClick: function() {} // NOP
|
||||
};
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
this.sortList(this.props.list, this.props.order);
|
||||
},
|
||||
|
@ -85,7 +100,9 @@ var RoomSubList = React.createClass({
|
|||
},
|
||||
|
||||
onClick: function(ev) {
|
||||
this.setState({ hidden : !this.state.hidden });
|
||||
var isHidden = !this.state.hidden;
|
||||
this.setState({ hidden : isHidden });
|
||||
this.props.onHeaderClick(isHidden);
|
||||
},
|
||||
|
||||
tsOfNewestEvent: function(room) {
|
||||
|
@ -239,11 +256,24 @@ var RoomSubList = React.createClass({
|
|||
selected={ selected }
|
||||
unread={ self.props.activityMap[room.roomId] === 1 }
|
||||
highlight={ self.props.activityMap[room.roomId] === 2 }
|
||||
isInvite={ self.props.label === 'Invites' } />
|
||||
isInvite={ self.props.label === 'Invites' }
|
||||
incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null }
|
||||
/>
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
_getHeaderJsx: function() {
|
||||
return (
|
||||
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">
|
||||
{ this.props.collapsed ? '' : this.props.label }
|
||||
<img className="mx_RoomSubList_chevron"
|
||||
src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
|
||||
width="10" height="10" />
|
||||
</h2>
|
||||
);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var connectDropTarget = this.props.connectDropTarget;
|
||||
var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
|
||||
|
@ -259,8 +289,7 @@ var RoomSubList = React.createClass({
|
|||
|
||||
if (this.state.sortedList.length > 0 || this.props.editable) {
|
||||
var subList;
|
||||
var classes = "mx_RoomSubList" +
|
||||
(this.props.bottommost ? " mx_RoomSubList_bottommost" : "");
|
||||
var classes = "mx_RoomSubList";
|
||||
|
||||
if (!this.state.hidden) {
|
||||
subList = <div className={ classes }>
|
||||
|
@ -275,16 +304,17 @@ var RoomSubList = React.createClass({
|
|||
|
||||
return connectDropTarget(
|
||||
<div>
|
||||
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }
|
||||
<img className="mx_RoomSubList_chevron" src={ this.state.hidden ? "img/list-open.svg" : "img/list-close.svg" } width="10" height="10"/>
|
||||
</h2>
|
||||
{ this._getHeaderJsx() }
|
||||
{ subList }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else {
|
||||
var Loader = sdk.getComponent("elements.Spinner");
|
||||
return (
|
||||
<div className="mx_RoomSubList">
|
||||
{ this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined }
|
||||
{ (this.props.showSpinner && !this.state.hidden) ? <Loader /> : undefined }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -106,6 +106,11 @@ limitations under the License.
|
|||
padding: 4px;
|
||||
}
|
||||
|
||||
.mx_MessageTile_searchHighlight a {
|
||||
background-color: #76cfa6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mx_EventTile_sending {
|
||||
color: #ddd;
|
||||
}
|
||||
|
|
|
@ -127,7 +127,6 @@ limitations under the License.
|
|||
.mx_RoomHeader_searchStatus {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
overflow-y: hidden;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
|
|
@ -19,11 +19,12 @@ limitations under the License.
|
|||
border: 1px solid #a4a4a4;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 235px;
|
||||
top: 155px;
|
||||
padding: 6px;
|
||||
margin-top: -3px;
|
||||
margin-left: -20px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_chevron {
|
||||
|
@ -39,14 +40,13 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons {
|
||||
display: table-row;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_cell {
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
padding: 6px;
|
||||
width: 50%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_decline,
|
||||
|
@ -57,6 +57,7 @@ limitations under the License.
|
|||
line-height: 36px;
|
||||
border-radius: 36px;
|
||||
color: #fff;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_IncomingCallBox_buttons_decline {
|
||||
|
|
|
@ -17,6 +17,7 @@ limitations under the License.
|
|||
.mx_RoomList {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 12px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.mx_RoomList_expandButton {
|
||||
|
|
|
@ -20,11 +20,6 @@ limitations under the License.
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_bottommost {
|
||||
/* XXX: this should really be 100% of the RoomList height, but can't seem to get at it */
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.mx_RoomSubList_label {
|
||||
text-transform: uppercase;
|
||||
color: #3d3b39;
|
||||
|
|
|
@ -153,7 +153,8 @@ function loadApp() {
|
|||
onNewScreen={onNewScreen}
|
||||
registrationUrl={makeRegistrationUrl()}
|
||||
ConferenceHandler={VectorConferenceHandler}
|
||||
config={configJson} />,
|
||||
config={configJson}
|
||||
startingQueryParams={parseQsFromFragment(window.location)} />,
|
||||
document.getElementById('matrixchat')
|
||||
);
|
||||
}
|
||||
|
|
|
@ -27,6 +27,14 @@
|
|||
<meta name="theme-color" content="#ffffff">
|
||||
</head>
|
||||
<body style="height: 100%;">
|
||||
<section id="matrixchat" style="height: 100%;"></section>
|
||||
<script src="bundle.js"></script>
|
||||
<link rel="stylesheet" href="bundle.css">
|
||||
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
|
||||
<audio id="ringAudio" loop>
|
||||
<source src="media/ring.ogg" type="audio/ogg" />
|
||||
<source src="media/ring.mp3" type="audio/mpeg" />
|
||||
</audio>
|
||||
<audio id="ringbackAudio" loop>
|
||||
<source src="media/ringback.ogg" type="audio/ogg" />
|
||||
<source src="media/ringback.mp3" type="audio/mpeg" />
|
||||
|
@ -39,9 +47,5 @@
|
|||
<source src="media/busy.ogg" type="audio/ogg" />
|
||||
<source src="media/busy.mp3" type="audio/mpeg" />
|
||||
</audio>
|
||||
<section id="matrixchat" style="height: 100%;"></section>
|
||||
<script src="bundle.js"></script>
|
||||
<link rel="stylesheet" href="bundle.css">
|
||||
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue