0.7.3

js-sdk 0.5.3
react-sdk 0.6.0

CHANGELOG.md

@@ -1,3 +1,45 @@
+Changes in [0.7.3](https://github.com/vector-im/vector-web/releases/tag/v0.7.3) (2016-06-03)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.2...v0.7.3)
+
+* Update to react-sdk 0.6.3
+
+Changes in [0.7.2](https://github.com/vector-im/vector-web/releases/tag/v0.7.2) (2016-06-02)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.1...v0.7.2)
+
+ * Correctly bump the dep on new matrix-js-sdk and matrix-react-sdk
+
+Changes in [0.7.1](https://github.com/vector-im/vector-web/releases/tag/v0.7.1) (2016-06-02)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.0...v0.7.1)
+
+ * Fix accidentally committed local changes to the default config.json (doh!)
+
+Changes in [0.7.0](https://github.com/vector-im/vector-web/releases/tag/v0.7.0) (2016-06-02)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.6.1...v0.7.0)
+
+ * Update to matrix-react-sdk 0.6.0 - see
+   [changelog](https://github.com/matrix-org/matrix-react-sdk/blob/v0.6.0/CHANGELOG.md)
+ * Style selection color.
+   [\#1557](https://github.com/vector-im/vector-web/pull/1557)
+ * Fix NPE when loading the Settings page which infini-spinnered
+   [\#1518](https://github.com/vector-im/vector-web/pull/1518)
+ * Add option to enable email notifications
+   [\#1469](https://github.com/vector-im/vector-web/pull/1469)
+
+Changes in [0.6.1](https://github.com/vector-im/vector-web/releases/tag/v0.6.1) (2016-04-22)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.6.0...v0.6.1)
+
+ * Update to matrix-react-sdk 0.5.2 - see
+   [changelog](https://github.com/matrix-org/matrix-react-sdk/blob/v0.5.2/CHANGELOG.md)
+ * Don't relayout scrollpanels every time something changes
+   [\#1438](https://github.com/vector-im/vector-web/pull/1438)
+ * Include react-addons-perf for non-production builds
+   [\#1431](https://github.com/vector-im/vector-web/pull/1431)
+
 Changes in [0.6.0](https://github.com/vector-im/vector-web/releases/tag/v0.6.0) (2016-04-19)
 ============================================================================================
 [Full Changelog](https://github.com/vector-im/vector-web/compare/v0.5.0...v0.6.0)

config.json

@@ -1,4 +1,7 @@
 {
     "default_hs_url": "https://matrix.org",
-    "default_is_url": "https://vector.im"
+    "default_is_url": "https://vector.im",
+    "brand": "Vector",
+    "integrations_ui_url": "http://localhost:8081/",
+    "integrations_rest_url": "http://localhost:5050"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vector-web",
-  "version": "0.6.0",
+  "version": "0.7.3",
   "description": "Vector webapp",
   "author": "matrix.org",
   "repository": {
@@ -16,7 +16,7 @@
     "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
-    "build:bundle:dev": "webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
+    "build:bundle:dev": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
     "build": "npm run build:css && npm run build:compile && npm run build:bundle",
     "build:dev": "npm run build:css && npm run build:compile && npm run build:bundle:dev",
     "package": "scripts/package.sh",
@@ -37,19 +37,19 @@
     "extract-text-webpack-plugin": "^0.9.1",
     "filesize": "^3.1.2",
     "flux": "~2.0.3",
-    "gemini-scrollbar": "matrix-org/gemini-scrollbar#7dc736d",
+    "gemini-scrollbar": "matrix-org/gemini-scrollbar#87ebaa7",
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.0.0-beta.4",
-    "matrix-js-sdk": "^0.5.2",
-    "matrix-react-sdk": "^0.5.1",
+    "matrix-js-sdk": "^0.5.4",
+    "matrix-react-sdk": "^0.6.3",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.0.1",
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
     "react-dom": "^15.0.1",
-    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#4707b88",
+    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#c3d942e",
     "sanitize-html": "^1.11.1"
   },
   "devDependencies": {
@@ -73,6 +73,7 @@
     "parallelshell": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.7",
     "react-addons-test-utils": "^15.0.1",
+    "react-addons-perf": "^15.0",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.1.5",
     "webpack": "^1.12.14"

src/components/structures/RoomDirectory.js

@@ -129,8 +129,8 @@ module.exports = React.createClass({
         var rooms = this.state.publicRooms.filter(function(a) {
             // FIXME: if incrementally typing, keep narrowing down the search set
             // incrementally rather than starting over each time.
-            return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) || 
-                     (a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) && 
+            return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) ||
+                     (a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) &&
                       a.num_joined_members > 0);
         }).sort(function(a,b) {
             return a.num_joined_members - b.num_joined_members;
@@ -213,7 +213,8 @@ module.exports = React.createClass({
                 <SimpleRoomHeader title="Directory" />
                 <div className="mx_RoomDirectory_list">
                     <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
-                    <GeminiScrollbar className="mx_RoomDirectory_tableWrapper">
+                    <GeminiScrollbar className="mx_RoomDirectory_tableWrapper"
+                                     relayoutOnUpdate={false} >
                         <table ref="directory_table" className="mx_RoomDirectory_table">
                             <tbody>
                                 { this.getRows(this.state.roomAlias) }
@@ -225,4 +226,3 @@ module.exports = React.createClass({
         );
     }
 });
-

src/components/structures/SearchBox.js

@@ -81,6 +81,16 @@ module.exports = React.createClass({
         var searchControls;
         if (!this.props.collapsed) {
             searchControls = [
+                    this.state.searchTerm.length > 0 ?
+                    <div key="button"
+                         className="mx_SearchBox_closeButton"
+                         onClick={ ()=>{ this.refs.search.value = ""; this.onChange(); } }>
+                        <TintableSvg
+                            className="mx_SearchBox_searchButton"
+                            src="img/icons-close.svg" width="24" height="24"
+                        />
+                    </div>
+                    :
                     <TintableSvg
                         key="button"
                         className="mx_SearchBox_searchButton"

src/components/views/settings/Notifications.js

@@ -21,6 +21,7 @@ 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');
 
@@ -69,6 +70,17 @@ module.exports = React.createClass({
         ERROR: "ERROR"      // There was an error
     },
 
+    propTypes: {
+        // The array of threepids from the JS SDK (required for email notifications)
+        threepids: React.PropTypes.array.isRequired,
+    },
+
+    getDefaultProps: function() {
+        return {
+            threepids: []
+        };
+    },
+
     getInitialState: function() {
         return {
             phase: this.phases.LOADING,
@@ -102,6 +114,30 @@ module.exports = React.createClass({
         UserSettingsStore.setEnableNotifications(event.target.checked);
     },
 
+    onEnableEmailNotificationsChange: function(address, event) {
+        var emailPusherPromise;
+        if (event.target.checked) {
+            var data = {}
+            if (configJson.brand) {
+                data['brand'] = configJson.brand;
+            }
+            emailPusherPromise = UserSettingsStore.addEmailPusher(address, data);
+        } else {
+            var emailPusher = UserSettingsStore.getEmailPusher(this.state.pushers, address);
+            emailPusher.kind = null;
+            emailPusherPromise = MatrixClientPeg.get().setPusher(emailPusher);
+        }
+        emailPusherPromise.done(() => {
+            this._refreshFromServer();
+        }, (error) => {
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Error saving email notification preferences",
+                description: "Vector was unable to save your email notification preferences.",
+            });
+        });
+    },
+
     onNotifStateButtonClicked: function(event) {
         // FIXME: use .bind() rather than className metadata here surely
         var vectorRuleId = event.target.className.split("-")[0];
@@ -620,6 +656,24 @@ module.exports = React.createClass({
         return rows;
     },
 
+    emailNotificationsRow: function(address, label) {
+        return (<div className="mx_UserNotifSettings_tableRow">
+            <div className="mx_UserNotifSettings_inputCell">
+                <input id="enableEmailNotifications_{address}"
+                    ref="enableEmailNotifications_{address}"
+                    type="checkbox"
+                    checked={ UserSettingsStore.hasEmailPusher(this.state.pushers, address) }
+                    onChange={ this.onEnableEmailNotificationsChange.bind(this, address) }
+                />
+            </div>
+            <div className="mx_UserNotifSettings_labelCell">
+                <label htmlFor="enableEmailNotifications_{address}">
+                    {label}
+                </label>
+            </div>
+        </div>);
+    },
+
     render: function() {
         var self = this;
 
@@ -656,12 +710,29 @@ module.exports = React.createClass({
                     {masterPushRuleDiv}
 
                     <div className="mx_UserSettings_notifTable">
-                        All notifications are currently disabled for all devices.
+                        All notifications are currently disabled for all targets.
                     </div>
                 </div>
             );
         }
 
+        var emailNotificationsRow;
+        if (this.props.threepids.filter(function(tp) {
+                if (tp.medium == "email") {
+                    return true;
+                }
+            }).length == 0) {
+            emailNotificationsRow = <div>
+                Add an email address above to configure email notifications
+            </div>;
+        } else {
+            // This only supports the first email address in your profile for now
+            emailNotificationsRow = this.emailNotificationsRow(
+                this.props.threepids[0].address,
+                "Enable email notifications ("+this.props.threepids[0].address+")"
+            );
+        }
+
         // Build external push rules
         var externalRules = [];
         for (var i in this.state.externalPushRules) {
@@ -682,13 +753,11 @@ module.exports = React.createClass({
 
         var devicesSection;
         if (this.state.pushers === undefined) {
-            devicesSection = <div className="error">Unable to fetch device list</div>
+            devicesSection = <div className="error">Unable to fetch notification target list</div>
         } else if (this.state.pushers.length == 0) {
-            devicesSection = <div className="mx_UserSettings_devicesTable_nodevices">
-                No devices are receiving push notifications
-            </div>
+            devicesSection = null;
         } else {
-            // It would be great to be able to delete pushers from here too,
+            // TODO: It would be great to be able to delete pushers from here too,
             // and this wouldn't be hard to add.
             var rows = [];
             for (var i = 0; i < this.state.pushers.length; ++i) {
@@ -698,17 +767,17 @@ module.exports = React.createClass({
                 </tr>);
             }
             devicesSection = (<table className="mx_UserSettings_devicesTable">
-                <thead>
-                    <tr>
-                        <th>Application</th>
-                        <th>Device</th>
-                    </tr>
-                </thead>
                 <tbody>
                     {rows}
                 </tbody>
             </table>);
         }
+        if (devicesSection) {
+            devicesSection = (<div>
+                <h3>Notification targets</h3>
+                { devicesSection }
+            </div>);
+        }
 
         var advancedSettings;
         if (externalRules.length) {
@@ -766,7 +835,7 @@ module.exports = React.createClass({
                         </div>
                     </div>
 
-                    <h3>General use</h3>
+                    { emailNotificationsRow }
 
                     <div className="mx_UserNotifSettings_pushRulesTableWrapper">
                         <table className="mx_UserNotifSettings_pushRulesTable">
@@ -788,7 +857,6 @@ module.exports = React.createClass({
 
                     { advancedSettings }
 
-                    <h3>Devices</h3>
                     { devicesSection }
 
                 </div>

src/skins/vector/css/common.css

@@ -228,3 +228,13 @@ input[type=text]:focus, textarea:focus {
     height: 1em;
     vertical-align: middle;
 }
+
+::-moz-selection {
+    background-color: #76CFA6;
+    color: white;
+}
+
+::selection {
+    background-color: #76CFA6;
+    color: white;
+}

src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css

@@ -28,6 +28,11 @@ limitations under the License.
 
 .mx_SearchBox_searchButton {
     margin-right: 10px;
+    pointer-events: none;
+}
+
+.mx_SearchBox_closeButton {
+    cursor: pointer;
 }
 
 .mx_SearchBox_search {

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

@@ -52,6 +52,7 @@ limitations under the License.
     display: table-cell;
     vertical-align: middle;
     overflow: hidden;
+    font-size: 14px;
     text-overflow: ellipsis;
 }
 

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

@@ -34,8 +34,8 @@ limitations under the License.
 
 .mx_LinkPreviewWidget_caption {
     margin-left: 15px;
-    -webkit-flex: 1;
-    flex: 1;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
 }
 
 .mx_LinkPreviewWidget_title {
@@ -50,11 +50,14 @@ limitations under the License.
 .mx_LinkPreviewWidget_description {
     margin-top: 8px;
     white-space: normal;
+    word-break: break-word;
 }
 
 .mx_LinkPreviewWidget_cancel {
     visibility: hidden;
     cursor: pointer;
+    -webkit-flex: 0 0 40px;
+    flex: 0 0 40px;
 }
 
 .mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {

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

@@ -18,6 +18,7 @@ limitations under the License.
     height: 100%;
 
     margin-top: 12px;
+    margin-right: 20px;
 
     -webkit-flex: 1;
     flex: 1;

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

@@ -19,6 +19,7 @@ limitations under the License.
     /* This fixes wrapping of long room names, but breaks drag & drop previews */
     /* display: table-row; */
     font-size: 13px;
+    position: relative;
 }
 
 .mx_RoomTile_avatar {
@@ -26,7 +27,7 @@ limitations under the License.
     padding-right: 11px;
     padding-top: 6px;
     padding-bottom: 6px;
-    padding-left: 20px;
+    padding-left: 18px;
     width: 24px;
     height: 24px;
     position: relative;
@@ -39,7 +40,7 @@ limitations under the License.
     vertical-align: middle;
     overflow: hidden;
     word-break: break-word;
-    padding-right: 19px;
+    padding-right: 15px;
     color: rgba(69, 69, 69, 0.8);
 }
 
@@ -57,58 +58,28 @@ limitations under the License.
     display: none;
 }
 
-/*
-.mx_RoomTile_nameBadge {
-    display: table;
-    width: 100%;
-    height: 50px;
-}
-
-.mx_RoomTile_badgeCell {
-    display: table-cell;
-    vertical-align: middle;
-    width: 26px;
+.collapsed .mx_RoomTile_badge {
+    margin-top: -15px;
+    right: 7px;
 }
 
 .mx_RoomTile_badge {
-    background-color: #76cfa6;
-    color: #fff;
-    border-radius: 26px;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 28px;
-    width: 26px;
-    height: 26px;
-    text-align: center;
-}
-*/
-
-/*
-.mx_RoomTile_badge {
-    background-color: #ff0064;
-    border: 3px solid #fff;
-    border-radius: 16px;
-    width: 9px;
-    height: 9px;
+    min-width: 12px;
+    height: 16px;
     position: absolute;
-    right: 9px;
-    bottom: 3px;
-}
-*/
-
-.mx_RoomTile_badge {
-    background-color: #ff0064;
-    width: 8px;
-    height: 8px;
-    position: absolute;
-    left: 7px;
+    right: 16px;
     top: 50%;
-    margin-top: -4px;
-    border-radius: 4px;
+    margin-top: -8px;
+    border-radius: 16px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 11px;
+    text-align: center;
+    padding: 0px 4px 0px 4px;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
-    background-color: #454545;
+    background-color: #76cfa6;
 }
 
 .mx_RoomTile_highlight .mx_RoomTile_badge {
@@ -120,19 +91,22 @@ limitations under the License.
     font-weight: bold;
 }
 
+/* the inner highlight span has 4px of padding on it, so we shrink the _avatar by 4px and grow the _name by 4px to fit it in */
 .mx_RoomTile_selected .mx_RoomTile_name {
-    padding-right: 23px;
+    padding-right: 19px;
 }
-
-.mx_RoomTile_highlight .mx_RoomTile_name {
-    color: #ff0064 ! important;
-}
-
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar {
+.mx_RoomTile_selected .mx_RoomTile_avatar {
     padding-right: 7px;
 }
 
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name span {
+/* leave room for the badge, if present.
+   N.B. this has to come after the above _selected width tweaks */
+.mx_RoomTile_unreadNotify .mx_RoomTile_name,
+.mx_RoomTile_highlight .mx_RoomTile_name {
+    padding-right: 40px;
+}
+
+.mx_RoomTile_selected .mx_RoomTile_name span {
     display: inline-block;
     position: relative;
     width: 100%;
@@ -143,13 +117,11 @@ limitations under the License.
     background-color: rgba(118,207,166,0.2);
 }
 
-/*
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
-    background: url('img/selected.png');
-    background-repeat: no-repeat;
-    background-position: right center;
+/* stop the span from overlapping with the badge */
+.mx_RoomTile_unreadNotify.mx_RoomTile_selected .mx_RoomTile_name span,
+.mx_RoomTile_highlight.mx_RoomTile_selected .mx_RoomTile_name span {
+    padding-right: 22px;
 }
-*/
 
 .mx_RoomTile_arrow {
     position: absolute;

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

@@ -32,7 +32,7 @@ limitations under the License.
     margin-left: 3px;
     font-size: 15px;
     margin-bottom: 8px;
-    width: 180px;
+    width: 189px;
 }
 
 .mx_SearchableEntityList_query::-moz-placeholder {

src/skins/vector/css/vector-web/structures/LeftPanel.css

@@ -59,8 +59,8 @@ limitations under the License.
     order: 3;
 
     border-top: 1px solid rgba(0, 0, 0, 0.1);
-    margin-left: 20px;
-    margin-right: 20px;
+    margin-left: 18px;
+    margin-right: 18px;
     -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
 }

src/skins/vector/css/vector-web/structures/RoomDirectory.css

@@ -22,8 +22,6 @@ limitations under the License.
     margin-bottom: 12px;
     color: #4a4a4a;
 
-    border-top: 1px solid #c5c5c5;
-
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;

src/skins/vector/img/icons-close.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-11 13 24 24" xml:space="preserve">
+<style type="text/css">
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;}
+</style>
+<title>icons_create_room</title>
+<desc>Created with sketchtool.</desc>
+<g id="_x30_3-Input" sketch:type="MSPage">
+	<g id="_x30_3_x5F_4-Uploading" transform="translate(-20.000000, -726.000000)" sketch:type="MSArtboardGroup">
+		<g id="Room-list" sketch:type="MSLayerGroup">
+			<g id="Room-list_x2F_Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
+				<g id="icons_create_room" transform="translate(20.000000, 18.000000)">
+					<circle id="Oval-1-Copy-7" fill="#76CFA6" cx="1" cy="25" r="12"/>
+					<path id="Line" class="st1" d="M-2.5,28.5l7.1-7.1"/>
+					<path id="Line_1_" class="st1" d="M-2.5,21.5l7.1,7.1"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/vector/index.js

@@ -27,8 +27,15 @@ require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
 
+
+ // add React and ReactPerf to the global namespace, to make them easier to
+ // access via the console
+global.React = require("react");
+if (process.env.NODE_ENV !== 'production') {
+    global.ReactPerf = require("react-addons-perf");
+}
+
 var RunModernizrTests = require("./modernizr"); // this side-effects a global
-var React = require("react");
 var ReactDOM = require("react-dom");
 var sdk = require("matrix-react-sdk");
 sdk.loadSkin(require('../component-index'));
@@ -175,6 +182,19 @@ window.onload = function() {
 }
 
 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";
+            return;
+        }
+    }
+    else if (/Android/.test(navigator.userAgent)) {
+        if (confirm("Vector runs much better as an app on Vector. Get the app?")) {
+            window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha";
+            return;
+        }
+    }
+
     console.log("Vector starting at "+window.location);
     if (validBrowser) {
         var MatrixChat = sdk.getComponent('structures.MatrixChat');

webpack.config.js

@@ -41,6 +41,7 @@ module.exports = {
             // alias any requires to the react module to the one in our path, otherwise
             // we tend to get the react source included twice when using npm link.
             react: path.resolve('./node_modules/react'),
+            "react-addons-perf": path.resolve('./node_modules/react-addons-perf'),
 
             // same goes for js-sdk
             "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),