Merge branches 'develop' and 't3chguy/devtools-118247' of github.com:vector-im/riot-web into t3chguy/devtools-118247

.github/ISSUE_TEMPLATE.md

@@ -1,3 +1,5 @@
+<!-- Please report security issues by email to security@matrix.org -->
+
 <!-- This is a bug report template. By following the instructions below and
 filling out the sections with your information, you will help the us to get all
 the necessary data to fix your issue.

AUTHORS.rst

@@ -13,3 +13,6 @@ include:
 
 * Michael Telatynski (https://github.com/t3chguy)
   Improved consistency of inverted elements in dark theme across browsers
+
+* Alexandr Korsak (https://github.com/oivoodoo)
+  Improved multiple file uploading

CHANGELOG.md

@@ -1,3 +1,17 @@
+Changes in [0.13.4](https://github.com/vector-im/riot-web/releases/tag/v0.13.4) (2018-01-03)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.3...v0.13.4)
+
+ * Change config of riot.im electron build to fix some widgets not working. This only affects
+   electron builds using the riot.im config - for all other builds, this is identical to
+   v0.13.3.
+
+Changes in [0.13.3](https://github.com/vector-im/riot-web/releases/tag/v0.13.3) (2017-12-04)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.2...v0.13.3)
+
+ * Bump js-sdk, react-sdk version to pull in fix for [setting room publicity in a group](https://github.com/matrix-org/matrix-js-sdk/commit/aa3201ebb0fff5af2fb733080aa65ed1f7213de6).
+
 Changes in [0.13.2](https://github.com/vector-im/riot-web/releases/tag/v0.13.2) (2017-11-28)
 ============================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.1...v0.13.2)

README.md

@@ -130,6 +130,11 @@ You can configure the app by copying `config.sample.json` to
    anything else since it is used to isolate the privileges of file attachments to this
    domain. Default: `usercontent.riot.im`. This needs to contain v1.html from
    https://github.com/matrix-org/usercontent/blob/master/v1.html
+1. `piwik`: an object containing the following properties:
+    1. `url`: The URL of the Piwik instance to use for collecting Analytics
+    1. `whitelistedHSUrls`: a list of HS URLs to not redact from the Analytics
+    1. `whitelistedISUrls`: a list of IS URLs to not redact from the Analytics
+    1. `siteId`: The Piwik Site ID to use when sending Analytics to the Piwik server configured above
 
 Running as a Desktop app
 ========================

config.sample.json

@@ -24,6 +24,8 @@
     "welcomeUserId": "@riot-bot:matrix.org",
     "piwik": {
         "url": "https://piwik.riot.im/",
+        "whitelistedHSUrls": ["https://matrix.org"],
+        "whitelistedISUrls": ["https://vector.im", "https://matrix.org"],
         "siteId": 1
     }
 }

electron_app/package.json

@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "src/electron-main.js",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "dependencies": {

electron_app/riot.im/config.json

@@ -5,6 +5,10 @@
     "brand": "Riot",
     "integrations_ui_url": "https://scalar.vector.im/",
     "integrations_rest_url": "https://scalar.vector.im/api",
+    "integrations_widgets_urls": [
+        "https://scalar-staging.riot.im/scalar/api",
+        "https://scalar.vector.im/api"
+    ],
     "bug_report_endpoint_url": "https://riot.im/bugreports/submit",
     "welcomeUserId": "@riot-bot:matrix.org",
     "roomDirectory": {

package.json

@@ -2,9 +2,9 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron_app/src/electron-main.js",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "description": "A feature-rich client for Matrix.org",
-  "author": "Vector Creations Ltd.",
+  "author": "New Vector Ltd.",
   "repository": {
     "type": "git",
     "url": "https://github.com/vector-im/riot-web"
@@ -68,8 +68,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.9.1",
+    "matrix-js-sdk": "0.9.2",
-    "matrix-react-sdk": "0.11.2",
+    "matrix-react-sdk": "0.11.3",
     "modernizr": "^3.1.0",
     "pako": "^1.0.5",
     "prop-types": "^15.5.10",

scripts/copy-res.js

@@ -16,7 +16,7 @@ const INCLUDE_LANGS = [
     {'value': 'el', 'label': 'Ελληνικά'},
     {'value': 'eo', 'label': 'Esperanto'},
     {'value': 'es', 'label': 'Español'},
-    {'value': 'eu', 'label': 'Euskal'},
+    {'value': 'eu', 'label': 'Euskara'},
     {'value': 'fi', 'label': 'Suomi'},
     {'value': 'fr', 'label': 'Français'},
     {'value': 'hu', 'label': 'Magyar'},

src/components/structures/LeftPanel.js

@@ -17,10 +17,8 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import classNames from 'classnames';
-import KeyCode from 'matrix-react-sdk/lib/KeyCode';
+import { KeyCode } from 'matrix-react-sdk/lib/Keyboard';
 import sdk from 'matrix-react-sdk';
 import dis from 'matrix-react-sdk/lib/dispatcher';
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
@@ -199,4 +197,4 @@ var LeftPanel = React.createClass({
     }
 });
 
-module.exports = DragDropContext(HTML5Backend)(LeftPanel);
+module.exports = LeftPanel;

src/components/structures/RoomSubList.js

@@ -30,7 +30,7 @@ var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
 var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 import Modal from 'matrix-react-sdk/lib/Modal';
-import KeyCode from 'matrix-react-sdk/lib/KeyCode';
+import { KeyCode } from 'matrix-react-sdk/lib/Keyboard';
 
 // turn this on for drop & drag console debugging galore
 var debug = false;
@@ -327,43 +327,46 @@ var RoomSubList = React.createClass({
     },
 
     calcManualOrderTagData: function(room) {
-        var index = this.state.sortedList.indexOf(room);
+        const index = this.state.sortedList.indexOf(room);
 
         // we sort rooms by the lexicographic ordering of the 'order' metadata on their tags.
         // for convenience, we calculate this for now a floating point number between 0.0 and 1.0.
 
-        var orderA = 0.0; // by default we're next to the beginning of the list
+        let orderA = 0.0; // by default we're next to the beginning of the list
         if (index > 0) {
-            var prevTag = this.state.sortedList[index - 1].tags[this.props.tagName];
+            const prevTag = this.state.sortedList[index - 1].tags[this.props.tagName];
             if (!prevTag) {
-                console.error("Previous room in sublist is not tagged to be in this list. This should never happen.")
+                console.error("Previous room in sublist is not tagged to be in this list. This should never happen.");
-            }
+            } else if (prevTag.order === undefined) {
-            else if (prevTag.order === undefined) {
                 console.error("Previous room in sublist has no ordering metadata. This should never happen.");
-            }
+            } else {
-            else {
                 orderA = prevTag.order;
             }
         }
 
-        var orderB = 1.0; // by default we're next to the end of the list too
+        let orderB = 1.0; // by default we're next to the end of the list too
         if (index < this.state.sortedList.length - 1) {
-            var nextTag = this.state.sortedList[index + 1].tags[this.props.tagName];
+            const nextTag = this.state.sortedList[index + 1].tags[this.props.tagName];
             if (!nextTag) {
-                console.error("Next room in sublist is not tagged to be in this list. This should never happen.")
+                console.error("Next room in sublist is not tagged to be in this list. This should never happen.");
-            }
+            } else if (nextTag.order === undefined) {
-            else if (nextTag.order === undefined) {
                 console.error("Next room in sublist has no ordering metadata. This should never happen.");
-            }
+            } else {
-            else {
                 orderB = nextTag.order;
             }
         }
 
-        var order = (orderA + orderB) / 2.0;
+        const order = (orderA + orderB) / 2.0;
+
         if (order === orderA || order === orderB) {
             console.error("Cannot describe new list position.  This should be incredibly unlikely.");
-            // TODO: renumber the list
+            this.state.sortedList.forEach((room, index) => {
+                MatrixClientPeg.get().setRoomTag(
+                    room.roomId, this.props.tagName,
+                    {order: index / this.state.sortedList.length},
+                );
+            });
+            return index / this.state.sortedList.length;
         }
 
         return order;

src/components/structures/SearchBox.js

@@ -18,7 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-import KeyCode from 'matrix-react-sdk/lib/KeyCode';
+import { KeyCode } from 'matrix-react-sdk/lib/Keyboard';
 import sdk from 'matrix-react-sdk';
 import dis from 'matrix-react-sdk/lib/dispatcher';
 import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';

src/components/views/context_menus/MessageContextMenu.js

@@ -16,15 +16,16 @@ limitations under the License.
 
 'use strict';
 
-const React = require('react');
+import React from 'react';
 
-const MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
-const dis = require('matrix-react-sdk/lib/dispatcher');
+import dis from 'matrix-react-sdk/lib/dispatcher';
-const sdk = require('matrix-react-sdk');
+import sdk from 'matrix-react-sdk';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-const Modal = require('matrix-react-sdk/lib/Modal');
+import Modal from 'matrix-react-sdk/lib/Modal';
-const Resend = require("matrix-react-sdk/lib/Resend");
+import Resend from "matrix-react-sdk/lib/Resend";
 import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
+import {makeEventPermalink} from 'matrix-react-sdk/lib/matrix-to';
 
 module.exports = React.createClass({
     displayName: 'MessageContextMenu',
@@ -107,15 +108,14 @@ module.exports = React.createClass({
             onFinished: (proceed) => {
                 if (!proceed) return;
 
-                MatrixClientPeg.get().redactEvent(
+                const cli = MatrixClientPeg.get();
-                    this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
+                cli.redactEvent(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()).catch(function(e) {
-                ).catch(function(e) {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     // display error message stating you couldn't delete this.
                     const code = e.errcode || e.statusCode;
                     Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
                         title: _t('Error'),
-                        description: _t('You cannot delete this message. (%(code)s)', {code: code})
+                        description: _t('You cannot delete this message. (%(code)s)', {code}),
                     });
                 }).done();
             },
@@ -138,12 +138,12 @@ module.exports = React.createClass({
 
     onPinClick: function() {
         MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '')
-            .catch(e => {
+            .catch((e) => {
                 // Intercept the Event Not Found error and fall through the promise chain with no event.
                 if (e.errcode === "M_NOT_FOUND") return null;
                 throw e;
             })
-            .then(event => {
+            .then((event) => {
                 const eventIds = (event ? event.pinned : []) || [];
                 if (!eventIds.includes(this.props.mxEvent.getId())) {
                     // Not pinned - add
@@ -153,7 +153,8 @@ module.exports = React.createClass({
                     eventIds.splice(eventIds.indexOf(this.props.mxEvent.getId()), 1);
                 }
 
-                MatrixClientPeg.get().sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
+                const cli = MatrixClientPeg.get();
+                cli.sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
             });
         this.closeMenu();
     },
@@ -177,6 +178,14 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    onReplyClick: function() {
+        dis.dispatch({
+            action: 'quote_event',
+            event: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
     render: function() {
         const eventStatus = this.props.mxEvent.status;
         let resendButton;
@@ -184,12 +193,11 @@ module.exports = React.createClass({
         let cancelButton;
         let forwardButton;
         let pinButton;
-        let viewSourceButton;
         let viewClearSourceButton;
         let unhidePreviewButton;
-        let permalinkButton;
         let externalURLButton;
         let quoteButton;
+        let replyButton;
 
         if (eventStatus === 'not_sent') {
             resendButton = (
@@ -224,17 +232,25 @@ module.exports = React.createClass({
                     </div>
                 );
 
+                if (SettingsStore.isFeatureEnabled("feature_rich_quoting")) {
+                    replyButton = (
+                        <div className="mx_MessageContextMenu_field" onClick={this.onReplyClick}>
+                            { _t('Reply') }
+                        </div>
+                    );
+                }
+
                 if (this.state.canPin) {
                     pinButton = (
                         <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
-                            {this._isPinned() ? _t('Unpin Message') : _t('Pin Message')}
+                            { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
                         </div>
                     );
                 }
             }
         }
 
-        viewSourceButton = (
+        const viewSourceButton = (
             <div className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
                 { _t('View Source') }
             </div>
@@ -259,10 +275,10 @@ module.exports = React.createClass({
         }
 
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
-        permalinkButton = (
+        const permalinkButton = (
             <div className="mx_MessageContextMenu_field">
-                <a href={ "https://matrix.to/#/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
+                <a href={makeEventPermalink(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId())}
-                  target="_blank" rel="noopener" onClick={ this.closeMenu }>{ _t('Permalink') }</a>
+                  target="_blank" rel="noopener" onClick={this.closeMenu}>{ _t('Permalink') }</a>
             </div>
         );
 
@@ -275,29 +291,30 @@ module.exports = React.createClass({
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        if( typeof(this.props.mxEvent.event.content.external_url) === "string") {
+        if (typeof(this.props.mxEvent.event.content.external_url) === "string") {
-          externalURLButton = (
+            externalURLButton = (
-              <div className="mx_MessageContextMenu_field">
+                <div className="mx_MessageContextMenu_field">
-                  <a href={ this.props.mxEvent.event.content.external_url }
+                    <a href={this.props.mxEvent.event.content.external_url}
-                    rel="noopener" target="_blank" onClick={ this.closeMenu }>{ _t('Source URL') }</a>
+                       rel="noopener" target="_blank" onClick={this.closeMenu}>{ _t('Source URL') }</a>
-              </div>
+                </div>
-          );
+            );
         }
 
 
         return (
             <div>
-                {resendButton}
+                { resendButton }
-                {redactButton}
+                { redactButton }
-                {cancelButton}
+                { cancelButton }
-                {forwardButton}
+                { forwardButton }
-                {pinButton}
+                { pinButton }
-                {viewSourceButton}
+                { viewSourceButton }
-                {viewClearSourceButton}
+                { viewClearSourceButton }
-                {unhidePreviewButton}
+                { unhidePreviewButton }
-                {permalinkButton}
+                { permalinkButton }
-                {quoteButton}
+                { quoteButton }
-                {externalURLButton}
+                { replyButton }
+                { externalURLButton }
             </div>
         );
     },

src/components/views/dialogs/DevtoolsDialog.js

@@ -60,7 +60,7 @@ class GenericEditor extends DevtoolsComponent {
                 <label htmlFor={id}>{ label }</label>
             </div>
             <div className="mx_DevTools_inputCell">
-                <input id={id} onChange={this._onChange} value={this.state[id]} size="32" />
+                <input id={id} className="mx_TextInputDialog_input" onChange={this._onChange} value={this.state[id]} size="32" />
             </div>
         </div>;
     }

src/components/views/elements/ImageView.js

@@ -20,7 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 
-var DateUtils = require('matrix-react-sdk/lib/DateUtils');
+import {formatDate} from 'matrix-react-sdk/lib/DateUtils';
 var filesize = require('filesize');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 const Modal = require('matrix-react-sdk/lib/Modal');
@@ -159,7 +159,7 @@ module.exports = React.createClass({
             }
 
             eventMeta = (<div className="mx_ImageView_metadata">
-                { _t('Uploaded on %(date)s by %(user)s', {date: DateUtils.formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) }
+                { _t('Uploaded on %(date)s by %(user)s', {date: formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) }
             </div>);
         }
 

src/components/views/messages/DateSeparator.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +16,9 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-import DateUtils from 'matrix-react-sdk/lib/DateUtils';
+import {formatFullDateNoTime} from 'matrix-react-sdk/lib/DateUtils';
 
 function getdaysArray() {
 	return [
@@ -30,30 +32,30 @@ function getdaysArray() {
     ];
 }
 
-module.exports = React.createClass({
+export default class DateSeparator extends React.Component {
-    displayName: 'DateSeparator',
+    static propTypes = {
-    render: function() {
+        ts: PropTypes.number.isRequired,
-        var date = new Date(this.props.ts);
+    };
-        var today = new Date();
-        var yesterday = new Date();
-        var days = getdaysArray();
-        yesterday.setDate(today.getDate() - 1);
-        var label;
-        if (date.toDateString() === today.toDateString()) {
-            label = _t('Today');
-        }
-        else if (date.toDateString() === yesterday.toDateString()) {
-            label = _t('Yesterday');
-        }
-        else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
-            label = days[date.getDay()];
-        }
-        else {
-            label = DateUtils.formatFullDate(date, this.props.showTwelveHour);
-        }
 
-        return (
+    getLabel() {
-            <h2 className="mx_DateSeparator">{ label }</h2>
+        const date = new Date(this.props.ts);
-        );
+        const today = new Date();
+        const yesterday = new Date();
+        const days = getdaysArray();
+        yesterday.setDate(today.getDate() - 1);
+
+        if (date.toDateString() === today.toDateString()) {
+            return _t('Today');
+        } else if (date.toDateString() === yesterday.toDateString()) {
+            return _t('Yesterday');
+        } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+            return days[date.getDay()];
+        } else {
+            return formatFullDateNoTime(date);
+        }
     }
-});
+
+    render() {
+        return <h2 className="mx_DateSeparator">{ this.getLabel() }</h2>;
+    }
+}

src/components/views/messages/MessageTimestamp.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,24 +15,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
-import DateUtils from 'matrix-react-sdk/lib/DateUtils';
+import PropTypes from 'prop-types';
+import {formatFullDate, formatTime} from 'matrix-react-sdk/lib/DateUtils';
 
-module.exports = React.createClass({
+export default class MessageTimestamp extends React.Component {
-    displayName: 'MessageTimestamp',
+    static propTypes = {
+        ts: PropTypes.number.isRequired,
+        showTwelveHour: PropTypes.bool,
+    };
 
-    propTypes: {
+    render() {
-        showTwelveHour: React.PropTypes.bool,
-    },
-
-    render: function() {
         const date = new Date(this.props.ts);
         return (
-            <span className="mx_MessageTimestamp" title={ DateUtils.formatFullDate(date, this.props.showTwelveHour) }>
+            <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)}>
-                { DateUtils.formatTime(date, this.props.showTwelveHour) }
+                { formatTime(date, this.props.showTwelveHour) }
             </span>
         );
-    },
+    }
-});
+}

src/i18n/strings/en_EN.json

@@ -217,5 +217,6 @@
     "Contributing code to Matrix and Riot": "Contributing code to Matrix and Riot",
     "Dev chat for the Riot/Web dev team": "Dev chat for the Riot/Web dev team",
     "Dev chat for the Dendrite dev team": "Dev chat for the Dendrite dev team",
-    "Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators"
+    "Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators",
+    "Reply": "Reply"
 }

src/skins/vector/css/_components.scss

@@ -11,6 +11,7 @@
 @import "./matrix-react-sdk/structures/_RoomStatusBar.scss";
 @import "./matrix-react-sdk/structures/_RoomView.scss";
 @import "./matrix-react-sdk/structures/_SearchBox.scss";
+@import "./matrix-react-sdk/structures/_TagPanel.scss";
 @import "./matrix-react-sdk/structures/_UploadBar.scss";
 @import "./matrix-react-sdk/structures/_UserSettings.scss";
 @import "./matrix-react-sdk/structures/login/_Login.scss";
@@ -38,6 +39,7 @@
 @import "./matrix-react-sdk/views/elements/_RichText.scss";
 @import "./matrix-react-sdk/views/elements/_RoleButton.scss";
 @import "./matrix-react-sdk/views/elements/_ToolTipButton.scss";
+@import "./matrix-react-sdk/views/elements/_Quote.scss";
 @import "./matrix-react-sdk/views/groups/_GroupPublicityToggle.scss";
 @import "./matrix-react-sdk/views/groups/_GroupRoomList.scss";
 @import "./matrix-react-sdk/views/groups/_GroupUserSettings.scss";
@@ -69,6 +71,7 @@
 @import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
 @import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
 @import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
+@import "./matrix-react-sdk/views/rooms/_QuotePreview.scss";
 @import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
 @import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
 @import "./matrix-react-sdk/views/voip/_CallView.scss";

src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss

@@ -21,6 +21,8 @@ limitations under the License.
     padding-top: 24px;
     padding-bottom: 22px;
 
+    border-bottom: 1px solid $panel-divider-color;
+
     display: flex;
 }
 

src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss

@@ -0,0 +1,79 @@
+/*
+Copyright 2017 New Vector 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_TagPanel {
+    width: 60px;
+    background-color: $tertiary-accent-color;
+    cursor: pointer;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mx_TagPanel .mx_TagPanel_tagTileContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 65px;
+
+    flex-grow: 1;
+}
+
+.mx_TagPanel .mx_TagTile {
+    padding: 6px 3px;
+    opacity: 0.5;
+}
+.mx_TagPanel .mx_TagTile:focus,
+.mx_TagPanel .mx_TagTile:hover,
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
+    opacity: 1;
+}
+
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
+    /* To offset border of mx_TagTile_avatar */
+    padding: 3px 0px;
+}
+
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar {
+    border: 3px solid $accent-color;
+    border-radius: 60px;
+}
+
+.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
+    filter: none;
+}
+
+.mx_TagTile_tooltip {
+    position: relative;
+    top: -30px;
+    left: 5px;
+}
+
+.mx_TagPanel_createGroupButton {
+    opacity: 0.5;
+    margin-bottom: 17px;
+    height: 25px;
+}
+
+.mx_TagPanel_createGroupButton:hover {
+    opacity: 1;
+}
+
+.mx_TagPanel_createGroupButton object {
+    pointer-events: none;
+}

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

@@ -0,0 +1,26 @@
+/*
+Copyright 2017 Vector Creations 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_Quote .mx_DateSeparator {
+    font-size: 1em !important;
+    margin-bottom: 0;
+    padding-bottom: 1px;
+    bottom: -5px;
+}
+
+.mx_Quote_show {
+    cursor: pointer;
+}

src/skins/vector/css/matrix-react-sdk/views/groups/_GroupUserSettings.scss

@@ -19,4 +19,5 @@ limitations under the License.
     border: 1px solid $primary-hairline-color;
     border-radius: 3px;
     margin-right: 32px;
+    overflow: hidden;
 }

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

@@ -85,6 +85,14 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    cursor: pointer;
+}
+
+.mx_AppTileMenuBarTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    pointer-events: none;
 }
 
 .mx_AppTileMenuBarWidgets {
@@ -93,6 +101,7 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
 }
+
 .mx_AppTileMenuBarWidget {
     // pointer-events: none;
     cursor: pointer;

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

@@ -1,7 +1,7 @@
 .mx_Autocomplete {
     position: absolute;
     bottom: 0;
-    z-index: 1000;
+    z-index: 1001;
     width: 100%;
     border: 1px solid $primary-hairline-color;
     background: $primary-bg-color;
@@ -90,3 +90,4 @@
 .mx_Autocomplete_Completion_description {
     color: gray;
 }
+

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

@@ -109,7 +109,7 @@ limitations under the License.
 /* this is used for the tile for the event which is selected via the URL.
  * TODO: ultimately we probably want some transition on here.
  */
-.mx_EventTile_selected .mx_EventTile_line {
+.mx_EventTile_selected > .mx_EventTile_line {
     border-left: $accent-color 5px solid;
     padding-left: 60px;
     background-color: $event-selected-color;
@@ -209,7 +209,7 @@ limitations under the License.
     visibility: visible;
 }
 
-.mx_EventTile_selected .mx_MessageTimestamp {
+.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
     left: 3px;
     width: auto;
 }
@@ -224,6 +224,10 @@ limitations under the License.
     width: 19px;
     height: 19px;
     background-image: url($edit-button-url);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .mx_EventTile:hover .mx_EventTile_editButton,

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

@@ -98,6 +98,9 @@ limitations under the License.
     width: 100%;
     flex: 1;
     word-break: break-word;
+    max-height: 120px;
+    min-height: 21px;
+    overflow: auto;
 }
 
 .mx_MessageComposer_input .DraftEditor-root .DraftEditor-editorContainer {
@@ -105,12 +108,6 @@ limitations under the License.
     padding-top: 2px;
 }
 
-.mx_MessageComposer_input .public-DraftEditor-content {
-    max-height: 120px;
-    min-height: 21px;
-    overflow: auto;
-}
-
 .mx_MessageComposer_input blockquote {
     color: $blockquote-fg-color;
     margin: 0 0 16px;

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

@@ -0,0 +1,36 @@
+.mx_QuotePreview {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    border: 1px solid $primary-hairline-color;
+    background: $primary-bg-color;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_QuotePreview_section {
+    border-bottom: 1px solid $primary-hairline-color;
+}
+
+.mx_QuotePreview_header {
+    margin: 12px;
+    color: $primary-fg-color;
+    font-weight: 400;
+    opacity: 0.4;
+}
+
+.mx_QuotePreview_title {
+    float: left;
+}
+
+.mx_QuotePreview_cancel {
+    float: right;
+    cursor: pointer;
+}
+
+.mx_QuotePreview_clear {
+    clear: both;
+}

src/skins/vector/css/themes/_base.scss

@@ -40,6 +40,7 @@ $preview-bar-bg-color: #f7f7f7;
 
 // left-panel style muted accent color
 $secondary-accent-color: #eaf5f0;
+$tertiary-accent-color: #d3efe1;
 
 // used by RoomDirectory permissions
 $plinth-bg-color: $secondary-accent-color;
@@ -48,7 +49,7 @@ $plinth-bg-color: $secondary-accent-color;
 $droptarget-bg-color: rgba(255,255,255,0.5);
 
 // used by AddressSelector
-$selected-color: #eaf5f0;
+$selected-color: $secondary-accent-color;
 
 // selected for hoverover & selected event tiles
 $event-selected-color: #f7f7f7;
@@ -104,14 +105,14 @@ $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
 $roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);
 
 $roomsublist-label-fg-color: $h3-color;
-$roomsublist-label-bg-color: #d3efe1;
+$roomsublist-label-bg-color: $tertiary-accent-color;
 $roomsublist-chevron-color: $accent-color;
 
 $panel-divider-color: rgba(118, 207, 166, 0.2);
 
 // ********************
 
-$widget-menu-bar-bg-color: #d3efe1;
+$widget-menu-bar-bg-color: $tertiary-accent-color;
 
 // ********************
 

src/skins/vector/css/themes/_dark.scss

@@ -29,12 +29,13 @@ $preview-bar-bg-color: #333;
 
 // left-panel style muted accent color
 $secondary-accent-color: $primary-bg-color;
+$tertiary-accent-color: #454545;
 
 // stop the tinter trying to change the secondary accent color
 // by overriding the key to something untintable
 // XXX: this is a bit of a hack.
 #mx_theme_secondaryAccentColor {
-    color: #c0ff33 ! important; // deliberately off by one
+    color: #c0ffee ! important;
 }
 
 #mx_theme_tertiaryAccentColor {
@@ -103,14 +104,14 @@ $roomtile-selected-bg-color: rgba(255, 255, 255, 0.05);
 $roomtile-focused-bg-color: rgba(255, 255, 255, 0.2);
 
 $roomsublist-label-fg-color: $h3-color;
-$roomsublist-label-bg-color: #454545;
+$roomsublist-label-bg-color: $tertiary-accent-color;
 $roomsublist-chevron-color: $accent-color;
 
 $panel-divider-color: rgba(118, 207, 166, 0.2);
 
 // ********************
 
-$widget-menu-bar-bg-color: #454545;
+$widget-menu-bar-bg-color: $tertiary-accent-color;
 
 // ********************
 

src/skins/vector/css/vector-web/structures/_LeftPanel.scss

@@ -44,6 +44,7 @@ limitations under the License.
 
 .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
    flex: 0 0 160px;
+   margin-bottom: 9px;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
@@ -77,6 +78,7 @@ limitations under the License.
 .mx_BottomLeftMenu_options .mx_RoleButton {
     margin-left: 0px;
     margin-right: 10px;
+    height: 30px;
 }
 
 .mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {

src/skins/vector/css/vector-web/structures/_RoomSubList.scss

@@ -33,14 +33,13 @@ limitations under the License.
     font-weight: 600;
     font-size: 12px;
     width: 203px; /* padding + width = LHS Panel width */
-    height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */
+    height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
-    background-color: $roomsublist-label-bg-color;
+    background-color: $secondary-accent-color;
-    border-top: solid 2px $secondary-accent-color;
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {

src/skins/vector/img/camera_green.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="2048px" height="1792px" viewBox="0 0 2048 1792" enable-background="new 0 0 2048 1792" xml:space="preserve">
+<path fill="#76CFA6" d="M1024,672c79.333,0,147.166,28.167,203.5,84.5c56.333,56.334,84.5,124.167,84.5,203.5
+	c0,79.334-28.167,147.167-84.5,203.5c-56.334,56.334-124.167,84.5-203.5,84.5c-79.334,0-147.167-28.166-203.5-84.5
+	C764.166,1107.167,736,1039.334,736,960c0-79.333,28.166-147.166,84.5-203.5C876.833,700.167,944.666,672,1024,672z M1728,256
+	c70.666,0,131,25,181,75s75,110.334,75,181v896c0,70.667-25,131-75,181s-110.334,75-181,75H320c-70.667,0-131-25-181-75
+	s-75-110.333-75-181V512c0-70.666,25-131,75-181s110.333-75,181-75h224l51-136c12.666-32.666,35.833-60.833,69.5-84.5
+	C698.166,11.834,732.666,0,768,0h512c35.333,0,69.833,11.834,103.5,35.5c33.666,23.667,56.833,51.834,69.5,84.5l51,136H1728z
+	 M1024,1408c123.333,0,228.833-43.833,316.5-131.5c87.666-87.666,131.5-193.166,131.5-316.5c0-123.333-43.834-228.833-131.5-316.5
+	C1252.833,555.834,1147.333,512,1024,512c-123.334,0-228.834,43.834-316.5,131.5C619.833,731.167,576,836.667,576,960
+	c0,123.334,43.833,228.834,131.5,316.5C795.166,1364.167,900.666,1408,1024,1408z"/>
+</svg>

src/skins/vector/img/maximize.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1792px" height="1792px" viewBox="0 0 1792 1792" enable-background="new 0 0 1792 1792" xml:space="preserve">
+<path fill="#76CFA6" d="M256,1408h1280V640H256V1408z M1792,288v1216c0,44-15.667,81.667-47,113s-69,47-113,47H160
+	c-44,0-81.667-15.667-113-47s-47-69-47-113V288c0-44,15.667-81.667,47-113s69-47,113-47h1472c44,0,81.667,15.667,113,47
+	S1792,244,1792,288z"/>
+</svg>

src/skins/vector/img/minimize.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1792px" height="1792px" viewBox="0 0 1792 1792" enable-background="new 0 0 1792 1792" xml:space="preserve">
+<path fill="#76CFA6" d="M1792,1312v192c0,44-15.667,81.667-47,113s-69,47-113,47H160c-44,0-81.667-15.667-113-47s-47-69-47-113v-192
+	c0-44,15.667-81.667,47-113s69-47,113-47h1472c44,0,81.667,15.667,113,47S1792,1268,1792,1312z"/>
+</svg>

src/skins/vector/themes/status/css/_status.scss

@@ -85,6 +85,7 @@ $preview-bar-bg-color: #f7f7f7;
 
 // left-panel style muted accent color
 $secondary-accent-color: #586C7B;
+$tertiary-accent-color: #DBEBF6;
 
 // stop the tinter trying to change the secondary accent color
 // by overriding the key to something untintable
@@ -236,7 +237,7 @@ $progressbar-color: #000;
 .mx_RoomSubList_label {
     font-size: 13px;
     font-family: $header-font-family;
-    letter-spacing: 1px;    
+    letter-spacing: 1px;
 }
 
 // FIXME: all these ! importants are horrid - we should instead go and define

src/vector/index.js

@@ -387,6 +387,7 @@ async function loadLanguage() {
     }
     try {
         await languageHandler.setLanguage(langs);
+        document.documentElement.setAttribute("lang", languageHandler.getCurrentLanguage());
     } catch (e) {
         console.error("Unable to set language", e);
     }

test/app-tests/joining.js

@@ -16,6 +16,9 @@ limitations under the License.
 
 /* joining.js: tests for the various paths when joining a room */
 
+import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import Platform from '../../src/vector/platform';
+
 require('skin-sdk');
 
 var jssdk = require('matrix-js-sdk');
@@ -85,6 +88,8 @@ describe('joining a room', function () {
             localStorage.setItem("mx_access_token", ACCESS_TOKEN );
             localStorage.setItem("mx_user_id", USER_ID);
 
+            PlatformPeg.set(new Platform());
+
             var mc = (
                 <MatrixChat config={{}}
                     makeRegistrationUrl={()=>{throw new Error("unimplemented");}}

test/app-tests/loading.js

@@ -16,6 +16,9 @@ limitations under the License.
 
 /* loading.js: test the myriad paths we have for loading the application */
 
+import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import Platform from '../../src/vector/platform';
+
 import 'skin-sdk';
 
 import React from 'react';
@@ -137,6 +140,8 @@ describe('loading:', function () {
             default_is_url: DEFAULT_IS_URL,
         }, opts.config || {});
 
+        PlatformPeg.set(new Platform());
+
         var params = parseQs(windowLocation);
         matrixChat = ReactDOM.render(
             <MatrixChat