Merge branch 'develop' into matthew/orderable-roomlist

src/controllers/organisms/RoomView.js

@@ -350,8 +350,12 @@ module.exports = {
             self.setState({
                 upload: undefined
             });
-        }).done(undefined, function() {
-            // TODO: display error message
+        }).done(undefined, function(error) {
+            var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Failed to upload file",
+                description: error.toString()
+            });
         });
     },
 
@@ -377,6 +381,7 @@ module.exports = {
                     room_events: {
                         search_term: term,
                         filter: filter,
+                        order_by: "recent",
                         event_context: {
                             before_limit: 1,
                             after_limit: 1,
@@ -390,7 +395,11 @@ module.exports = {
                 searchResults: data,
             });
         }, function(error) {
-            // TODO: show dialog or something
+            var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Search failed",
+                description: error.toString()
+            });
         });
     },
 
@@ -408,7 +417,7 @@ module.exports = {
             var eventIds = Object.keys(results);
             // XXX: todo: merge overlapping results somehow?
             // XXX: why doesn't searching on name work?
-            var resultList = eventIds.map(function(key) { return results[key]; }).sort(function(a, b) { b.rank - a.rank });
+            var resultList = eventIds.map(function(key) { return results[key]; }); // .sort(function(a, b) { b.rank - a.rank });
             for (var i = 0; i < resultList.length; i++) {
                 var ts1 = resultList[i].result.origin_server_ts;
                 ret.push(<li key={ts1 + "-search"}><DateSeparator ts={ts1}/></li>); //  Rank: {resultList[i].rank}

src/skins/vector/css/atoms/MemberAvatar.css

@@ -19,3 +19,12 @@ limitations under the License.
     border-radius: 20px;
 }
 
+.mx_MemberAvatar_initial {
+    position: absolute;
+    color: #fff;
+    text-align: center;
+}
+
+.mx_MemberAvatar_wrapper {
+    position: relative;
+}

src/skins/vector/css/atoms/RoomAvatar.css

@@ -0,0 +1,25 @@
+/*
+Copyright 2015 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_RoomAvatar {
+}
+
+.mx_RoomAvatar_initial {
+    position: absolute;
+    color: #fff;
+    text-align: center;
+    font-weight: normal ! important;
+}

src/skins/vector/css/molecules/MatrixToolbar.css

@@ -15,20 +15,40 @@ limitations under the License.
 */
 
 .mx_MatrixToolbar {
-    text-align: center;
-    background-color: #ff0064;
+    background-color: #76cfa6;
     color: #fff;
-    font-weight: bold;
-    padding: 6px;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
 }
 
-.mx_MatrixToolbar button {
-    margin-left: 12px;
+.mx_MatrixToolbar_warning {
+    margin-left: 16px;
+    margin-right: 8px;
+    margin-top: -2px;
+}
+
+.mx_MatrixToolbar_link
+{
+    color: #fff ! important;
+    text-decoration: underline ! important;
+    cursor: pointer;
 }
 
 .mx_MatrixToolbar_close {
-    float: right;
-    margin-top: 3px;
-    margin-right: 12px;
+    -webkit-flex: 1;
+    flex: 1;
     cursor: pointer;
+    text-align: right;
+}
+
+.mx_MatrixToolbar_close img {
+    display: block;
+    float: right;
+    margin-right: 10px;
 }

src/skins/vector/css/pages/MatrixChat.css

@@ -35,7 +35,7 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    height: 21px;
+    height: 40px;
 }
 
 .mx_MatrixChat_toolbarShowing {

src/skins/vector/views/atoms/MemberAvatar.js

@@ -40,6 +40,25 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        // XXX: recalculates default avatar url constantly
+        if (this.state.imageUrl === this.defaultAvatarUrl(this.props.member)) {
+            var initial;
+            if (this.props.member.name[0])
+                initial = this.props.member.name[0].toUpperCase();
+            if (initial === '@' && this.props.member.name[1])
+                initial = this.props.member.name[1].toUpperCase();
+         
+            return (
+                <span className="mx_MemberAvatar_wrapper">
+                    <span className="mx_MemberAvatar_initial"
+                          style={{ fontSize: (this.props.width * 0.75) + "px",
+                                   width: this.props.width + "px",
+                                   lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
+                    <img className="mx_MemberAvatar" src={this.state.imageUrl}
+                         onError={this.onError} width={this.props.width} height={this.props.height} />
+                </span>
+            );            
+        }
         return (
             <img className="mx_MemberAvatar" src={this.state.imageUrl}
                 onError={this.onError}

src/skins/vector/views/atoms/RoomAvatar.js

@@ -44,12 +44,32 @@ module.exports = React.createClass({
     render: function() {
         var style = {
             width: this.props.width,
-            weight: this.props.height,
+            height: this.props.height,
         };
+
+        // XXX: recalculates fallback avatar constantly
+        if (this.state.imageUrl === this.getFallbackAvatar()) {
+            var initial;
+            if (this.props.room.name[0])
+                initial = this.props.room.name[0].toUpperCase();
+            if ((initial === '@' || initial === '#') && this.props.room.name[1])
+                initial = this.props.room.name[1].toUpperCase();
+         
             return (
-            <img className="mx_RoomAvatar" src={this.state.imageUrl} onError={this.onError}
-                style={style}
-            />
+                <span>
+                    <span className="mx_RoomAvatar_initial"
+                          style={{ fontSize: (this.props.width * 0.75) + "px",
+                                   width: this.props.width + "px",
+                                   lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
+                    <img className="mx_RoomAvatar" src={this.state.imageUrl}
+                            onError={this.onError} style={style} />
+                </span>
             );
         }
+        else {
+            return <img className="mx_RoomAvatar" src={this.state.imageUrl}
+                        onError={this.onError} style={style} />
+        }
+
+    }
 });

src/skins/vector/views/molecules/MatrixToolbar.js

@@ -28,12 +28,20 @@ module.exports = React.createClass({
         Notifier.setToolbarHidden(true);
     },
 
+    onClick: function() {
+        var Notifier = sdk.getComponent('organisms.Notifier');
+        Notifier.setEnabled(true);
+    },
+
     render: function() {
         var EnableNotificationsButton = sdk.getComponent("atoms.EnableNotificationsButton");
         return (
             <div className="mx_MatrixToolbar">
-                You are not receiving desktop notifications. <EnableNotificationsButton />
-                <div className="mx_MatrixToolbar_close"><img src="img/close-white.png" width="16" height="16" onClick={ this.hideToolbar } /></div>
+                <img className="mx_MatrixToolbar_warning" src="img/warning.png" width="28" height="28" alt="/!\"/>
+                <div>
+                    You are not receiving desktop notifications. <a className="mx_MatrixToolbar_link" onClick={ this.onClick }>Enable them now</a>
+                </div>
+                <div className="mx_MatrixToolbar_close"><img src="img/cancel-black2.png" width="23" height="23" onClick={ this.hideToolbar } /></div>
             </div>
         );
     }