Merge branch 'develop' into matthew/settings

src/components/structures/LeftPanel.js

@@ -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}

src/components/structures/RoomSubList.js

@@ -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" +
+            var classes = "mx_RoomSubList";
-                          (this.props.bottommost ? " mx_RoomSubList_bottommost" : "");
 
             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 }
+                    { this._getHeaderJsx() }
-                        <img className="mx_RoomSubList_chevron" src={ this.state.hidden ? "img/list-open.svg" : "img/list-close.svg" } width="10" height="10"/>
-                    </h2>
                     { 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>
             );
         }

src/skins/vector/css/molecules/EventTile.css

@@ -106,6 +106,11 @@ limitations under the License.
     padding: 4px;
 }
 
+.mx_MessageTile_searchHighlight a {
+    background-color: #76cfa6;
+    color: #fff;    
+}
+
 .mx_EventTile_sending {
     color: #ddd;
 }

src/skins/vector/css/molecules/RoomHeader.css

@@ -127,7 +127,6 @@ limitations under the License.
 .mx_RoomHeader_searchStatus {
     display: inline-block;
     font-weight: normal;
-    overflow-y: hidden;
     opacity: 0.6;
 }
 

src/skins/vector/css/molecules/voip/IncomingCallbox.css

@@ -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 {

src/skins/vector/css/organisms/RoomList.css

@@ -17,6 +17,7 @@ limitations under the License.
 .mx_RoomList {
     padding-top: 24px;
     padding-bottom: 12px;
+    min-height: 400px;
 }
 
 .mx_RoomList_expandButton {

src/skins/vector/css/organisms/RoomSubList.css

@@ -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;

src/vector/index.js

@@ -153,7 +153,8 @@ function loadApp() {
                 onNewScreen={onNewScreen}
                 registrationUrl={makeRegistrationUrl()}
                 ConferenceHandler={VectorConferenceHandler}
-                config={configJson} />,
+                config={configJson}
+                startingQueryParams={parseQsFromFragment(window.location)} />,
             document.getElementById('matrixchat')
         );
     }

vector/index.html

@@ -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>