Merge branch 'develop' into matthew/scalar

src/components/structures/RoomDirectory.js

@@ -81,16 +81,18 @@ module.exports = React.createClass({
         // });
     },
 
-    showRoom: function(roomId) {
+    showRoom: function(roomId, roomAlias) {
         // extract the metadata from the publicRooms structure to pass
         // as out-of-band data to view_room, because we get information
         // here that we can't get other than by joining the room in some
         // cases.
         var room;
-        for (var i = 0; i < this.state.publicRooms.length; ++i) {
-            if (this.state.publicRooms[i].room_id == roomId) {
-                room = this.state.publicRooms[i];
-                break;
+        if (roomId) {
+            for (var i = 0; i < this.state.publicRooms.length; ++i) {
+                if (this.state.publicRooms[i].room_id == roomId) {
+                    room = this.state.publicRooms[i];
+                    break;
+                }
             }
         }
         var oob_data = {};
@@ -114,11 +116,20 @@ module.exports = React.createClass({
             };
         }
 
-        dis.dispatch({
-            action: 'view_room',
-            room_id: roomId,
+        var payload = {
             oob_data: oob_data,
-        });
+            action: 'view_room',
+        };
+        // It's not really possible to join Matrix rooms by ID because the HS has no way to know
+        // which servers to start querying. However, there's no other way to join rooms in
+        // this list without aliases at present, so if roomAlias isn't set here we have no
+        // choice but to supply the ID.
+        if (roomAlias) {
+            payload.room_alias = roomAlias;
+        } else {
+            payload.room_id = roomId;
+        }
+        dis.dispatch(payload);
     },
 
     getRows: function(filter) {
@@ -164,7 +175,7 @@ module.exports = React.createClass({
             topic = linkifyString(sanitizeHtml(topic));
 
             rows.unshift(
-                <tr key={ rooms[i].room_id } onClick={self.showRoom.bind(null, rooms[i].room_id)}>
+                <tr key={ rooms[i].room_id } onClick={self.showRoom.bind(null, rooms[i].room_id, alias)}>
                     <td className="mx_RoomDirectory_roomAvatar">
                         <BaseAvatar width={24} height={24} resizeMethod='crop'
                             name={ name } idName={ name }
@@ -193,7 +204,7 @@ module.exports = React.createClass({
         this.forceUpdate();
         this.setState({ roomAlias : this.refs.roomAlias.value })
         if (ev.key == "Enter") {
-            this.showRoom(this.refs.roomAlias.value);
+            this.showRoom(null, this.refs.roomAlias.value);
         }
     },
 

src/components/structures/SearchBox.js

@@ -103,7 +103,7 @@ module.exports = React.createClass({
                         className="mx_SearchBox_search"
                         value={ this.state.searchTerm }
                         onChange={ this.onChange }
-                        placeholder="Search room names"
+                        placeholder="Filter room names"
                     />
                 ];
         }

src/components/views/settings/Notifications.js

@@ -21,7 +21,6 @@ var sdk = require('matrix-react-sdk');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var UserSettingsStore = require('matrix-react-sdk/lib/UserSettingsStore');
 var Modal = require('matrix-react-sdk/lib/Modal');
-var configJson = require("../../../../config.json");
 
 var notifications = require('../../../notifications');
 
@@ -73,6 +72,8 @@ module.exports = React.createClass({
     propTypes: {
         // The array of threepids from the JS SDK (required for email notifications)
         threepids: React.PropTypes.array.isRequired,
+        // The brand string set when creating an email pusher
+        brand: React.PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -118,9 +119,7 @@ module.exports = React.createClass({
         var emailPusherPromise;
         if (event.target.checked) {
             var data = {}
-            if (configJson.brand) {
-                data['brand'] = configJson.brand;
-            }
+            data['brand'] = this.props.brand || 'Vector';
             emailPusherPromise = UserSettingsStore.addEmailPusher(address, data);
         } else {
             var emailPusher = UserSettingsStore.getEmailPusher(this.state.pushers, address);

src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css

@@ -0,0 +1,22 @@
+.mx_UserPill {
+    color: white;
+    background-color: #76cfa6;
+    padding: 2px 8px;
+    border-radius: 16px;
+}
+
+.mx_RoomPill {
+    background-color: white;
+    color: #76cfa6;
+    border: 1px solid #76cfa6;
+    padding: 2px 8px;
+    border-radius: 16px;
+}
+
+.mx_Markdown_BOLD {
+    font-weight: bold;
+}
+
+.mx_Markdown_ITALIC {
+    font-style: italic;
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_EventTile {
     max-width: 100%;
     clear: both;
-    margin-top: 24px;
+    padding-top: 24px;
     margin-left: 65px;
 }
 
@@ -33,7 +33,15 @@ limitations under the License.
 }
 
 .mx_EventTile_continuation {
-    margin-top: 8px ! important;
+    padding-top: 8px ! important;
+}
+
+.mx_EventTile_verified {
+    background-color: #eaf5f0;
+}
+
+.mx_EventTile_unverified {
+    background-color: #ffa0a0;
 }
 
 .mx_EventTile .mx_SenderProfile {

src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css

@@ -0,0 +1,44 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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.
+*/
+
+.mx_MemberDeviceInfo {
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+.mx_MemberDeviceInfo div {
+    display: inline;
+    margin-right: 5px;
+}
+
+.mx_MemberDeviceInfo_textButton {
+    color: #fff;
+    height: 20px;
+    border-radius: 20px;
+    text-align: center;
+    padding-left: 1em;
+    padding-right: 1em;
+
+    cursor: pointer;
+}
+
+.mx_MemberDeviceInfo_verify {
+    background-color: #76cfa6;
+}
+
+.mx_MemberDeviceInfo_unverify {
+    background-color: #e55e5e;
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css

@@ -22,15 +22,15 @@ limitations under the License.
 }
 
 .mx_MessageComposer_row {
-    display: table-row;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     width: 100%;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
-    display: table-cell;
     padding-left: 10px;
     padding-right: 28px;
-    vertical-align: middle;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@@ -42,9 +42,7 @@ limitations under the License.
 }
 
 .mx_MessageComposer_noperm_error {
-    display: table-cell;
     width: 100%;
-    vertical-align: middle;
     height: 60px;
     text-align: center;
     font-style: italic;
@@ -52,10 +50,22 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input {
-    display: table-cell;
-    width: 100%;
+    flex: 1;
     vertical-align: middle;
-    height: 60px;
+    min-height: 60px;
+    max-height: 120px;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+    transition: 0.6s border-top ease;
+    border-top: 2px solid rgba(255, 255, 255, 0);
+}
+.mx_MessageComposer_input_rte {
+    border-top: 2px solid #76cfa6; /* placeholder RTE indicator */
+}
+
+.mx_MessageComposer_input .DraftEditor-root {
+    flex: 1;
 }
 
 .mx_MessageComposer_input textarea {
@@ -92,8 +102,8 @@ limitations under the License.
 .mx_MessageComposer_hangup,
 .mx_MessageComposer_voicecall,
 .mx_MessageComposer_videocall {
-    display: table-cell;
-    vertical-align: middle;
+    /*display: table-cell;*/
+    /*vertical-align: middle;*/
     padding-left: 10px;
     padding-right: 10px;
     cursor: pointer;

src/vector/index.js

@@ -26,6 +26,7 @@ require('../../vector/components.css');
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
+require('draft-js/dist/Draft.css');
 
 
  // add React and ReactPerf to the global namespace, to make them easier to
@@ -40,8 +41,9 @@ var ReactDOM = require("react-dom");
 var sdk = require("matrix-react-sdk");
 sdk.loadSkin(require('../component-index'));
 var VectorConferenceHandler = require('../VectorConferenceHandler');
-var configJson = require("../../config.json");
 var UpdateChecker = require("./updater");
+var q = require('q');
+var request = require('browser-request');
 
 var qs = require("querystring");
 
@@ -111,6 +113,8 @@ function parseQs(location) {
 // Here, we do some crude URL analysis to allow
 // deep-linking.
 function routeUrl(location) {
+    if (!window.matrixChat) return;
+
     console.log("Routing URL "+window.location);
     var params = parseQs(location);
     var loginToken = params.loginToken;
@@ -181,7 +185,25 @@ window.onload = function() {
     }
 }
 
-function loadApp() {
+function getConfig() {
+    let deferred = q.defer();
+
+    request(
+        { method: "GET", url: "config.json", json: true },
+        (err, response, body) => {
+            if (err || response.status < 200 || response.status >= 300) {
+                deferred.reject({err: err, response: response});
+                return;
+            }
+
+            deferred.resolve(body);
+        }
+    );
+
+    return deferred.promise;
+}
+
+async function loadApp() {
     if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
         if (confirm("Vector runs much better as an app on iOS. Get the app?")) {
             window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067";
@@ -189,14 +211,32 @@ function loadApp() {
         }
     }
     else if (/Android/.test(navigator.userAgent)) {
-        if (confirm("Vector runs much better as an app on Vector. Get the app?")) {
+        if (confirm("Vector runs much better as an app on Android. Get the app?")) {
             window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha";
             return;
         }
     }
 
+    let configJson;
+    let configError;
+    try {
+        configJson = await getConfig();
+    } catch (e) {
+        // On 404 errors, carry on without a config,
+        // but on other errors, fail, otherwise it will
+        // lead to subtle errors where the app runs with
+        // the default config if it fails to fetch config.json.
+        if (e.response.status != 404) {
+            configError = e;
+        }
+    }
+
     console.log("Vector starting at "+window.location);
-    if (validBrowser) {
+    if (configError) {
+        window.matrixChat = ReactDOM.render(<div className="error">
+            Unable to load config file: please refresh the page to try again.
+        </div>, document.getElementById('matrixchat'));
+    } else if (validBrowser) {
         var MatrixChat = sdk.getComponent('structures.MatrixChat');
         var fragParts = parseQsFromFragment(window.location);
         window.matrixChat = ReactDOM.render(