add fancy changelog dialog

src/component-index.js

@@ -37,6 +37,7 @@ module.exports.components['structures.ViewSource'] = require('./components/struc
 module.exports.components['views.context_menus.MessageContextMenu'] = require('./components/views/context_menus/MessageContextMenu');
 module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu');
 module.exports.components['views.context_menus.RoomTagContextMenu'] = require('./components/views/context_menus/RoomTagContextMenu');
+module.exports.components['views.dialogs.ChangelogDialog'] = require('./components/views/dialogs/ChangelogDialog');
 module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
 module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
 module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');

src/components/views/dialogs/ChangelogDialog.js

@@ -0,0 +1,83 @@
+/*
+ Copyright 2016 Aviral Dasgupta
+
+ 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.
+ */
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import 'whatwg-fetch';
+import request from 'browser-request';
+
+const REPOS = ['vector-im/vector-web', 'matrix-org/matrix-react-sdk', 'matrix-org/matrix-js-sdk'];
+
+export default class ChangelogDialog extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+    }
+
+    componentDidMount() {
+        const version = this.props.newVersion.split('-');
+        const version2 = this.props.version.split('-');
+        if(version == null || version2 == null) return;
+        for(let i=0; i<REPOS.length; i++) {
+            const oldVersion = version2[2*i+1];
+            const newVersion = version[2*i+1];
+            request(`https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`, (a, b, body) => {
+                if(body == null) return;
+                this.setState({[REPOS[i]]: JSON.parse(body).commits});
+            });
+        }
+    }
+
+    render() {
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+
+        const logs = REPOS.map(repo => {
+            if (this.state[repo] == null) return <Spinner key={repo} />;
+            return (
+                <div key={repo}>
+                    <h2>{repo}</h2>
+                    {this.state[repo].map(commit =>
+                        <div key={commit.commit.url}><a href={commit.commit.url}>{commit.commit.message}</a></div>
+                    )}
+                </div>
+            )
+        });
+
+        const content = (
+            <div className="mx_ChangelogDialog_content">
+                {this.props.version == null || this.props.newVersion == null ? <h2>Unavailable</h2> : logs}
+            </div>
+        );
+
+
+        return (
+            <QuestionDialog
+                title="Changelog"
+                description={content}
+                button="Update"
+                onFinished={this.props.onFinished}
+                />
+        )
+    }
+}
+
+ChangelogDialog.propTypes = {
+    version: React.PropTypes.string.isRequired,
+    newVersion: React.PropTypes.string.isRequired,
+    onFinished: React.PropTypes.func.isRequired,
+};

src/components/views/globals/NewVersionBar.js

@@ -17,20 +17,36 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var sdk = require('matrix-react-sdk')
-
-module.exports = React.createClass({
-    displayName: 'NewVersionBar',
-
-    render: function() {
-        return (
-            <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
-                <div>
-                    A new version of Vector is available. Refresh your browser.
-                </div>
+var sdk = require('matrix-react-sdk');
+import Modal from 'matrix-react-sdk/lib/Modal';
+
+export default function NewVersionBar(props) {
+    const onChangelogClicked = () => {
+        const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
+
+        Modal.createDialog(ChangelogDialog, {
+            version: props.version,
+            newVersion: props.newVersion,
+            onFinished: (update) => {
+                if(update) {
+                    window.location.reload();
+                }
+            }
+        });
+    };
+
+    return (
+        <div className="mx_MatrixToolbar">
+            <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
+            <div className="mx_MatrixToolbar_content">
+                A new version of Vector is available. Refresh your browser.
             </div>
-        );
-    }
-});
-
+            <button className="mx_MatrixToolbar_action" onClick={onChangelogClicked}>Changelog</button>
+        </div>
+    );
+}
+
+NewVersionBar.propTypes = {
+    version: React.PropTypes.string.isRequired,
+    newVersion: React.PropTypes.string.isRequired,
+};

src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css

@@ -0,0 +1,20 @@
+/*
+Copyright 2016 Aviral Dasgupta
+
+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_ChangelogDialog_content {
+    max-height: 300px;
+    overflow: auto;
+}

src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css

@@ -54,3 +54,7 @@ limitations under the License.
     float: right;
     margin-right: 10px;
 }
+
+.mx_MatrixToolbar_action {
+    margin-right: 16px;
+}