Merge branch 'develop' into matthew/settings

2024-09-19 19:45:10 +00:00 · 2015-12-21 13:10:34 +00:00 · 2015-12-21 13:10:34 +00:00 · ae02d8d30a
commit ae02d8d30a
parent a7b9e54594 85db381153
9 changed files with 65 additions and 31 deletions
--- a/src/components/structures/LeftPanel.js
+++ b/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}
--- a/src/components/structures/RoomSubList.js
+++ b/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" +
-                          (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>
            );
        }
--- a/src/skins/vector/css/molecules/EventTile.css
+++ b/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;
 }
--- a/src/skins/vector/css/molecules/RoomHeader.css
+++ b/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;
 }

--- a/src/skins/vector/css/molecules/voip/IncomingCallbox.css
+++ b/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 {
--- a/src/skins/vector/css/organisms/RoomList.css
+++ b/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 {
--- a/src/skins/vector/css/organisms/RoomSubList.css
+++ b/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;
--- a/src/vector/index.js
+++ b/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')
        );
    }
--- a/vector/index.html
+++ b/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>