From be28a96d8d6bad9fcc113c20d07df63699892892 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Tue, 16 Aug 2016 03:30:26 +0530 Subject: [PATCH 1/2] add fancy changelog dialog --- package.json | 3 +- src/component-index.js | 1 + .../views/dialogs/ChangelogDialog.js | 83 +++++++++++++++++++ src/components/views/globals/NewVersionBar.js | 42 +++++++--- .../views/dialogs/ChangelogDialog.css | 20 +++++ 5 files changed, 135 insertions(+), 14 deletions(-) create mode 100644 src/components/views/dialogs/ChangelogDialog.js create mode 100644 src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css diff --git a/package.json b/package.json index be87139b2..9e3450cdc 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,8 @@ "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef", "sanitize-html": "^1.11.1", "ua-parser-js": "^0.7.10", - "url": "^0.11.0" + "url": "^0.11.0", + "whatwg-fetch": "^1.0.0" }, "devDependencies": { "babel": "^5.8.23", diff --git a/src/component-index.js b/src/component-index.js index b4c73a4b0..dfe549930 100644 --- a/src/component-index.js +++ b/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'); diff --git a/src/components/views/dialogs/ChangelogDialog.js b/src/components/views/dialogs/ChangelogDialog.js new file mode 100644 index 000000000..96ae63655 --- /dev/null +++ b/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'; + +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() { + console.log(this.props); + const version = this.props.newVersion; + const version2 = this.props.version; + if(version == null || version2 == null) return; + for(let i=0; i response.json()) + .then(json => this.setState({[REPOS[i]]: json.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 ; + return ( +
+

{repo}

+ {this.state[repo].map(commit => +
{commit.commit.message}
+ )} +
+ ) + }); + + const content = ( +
+ {this.props.version == null || this.props.newVersion == null ?

Unavailable

: logs} +
+ ); + + + return ( + + ) + } +} + +ChangelogDialog.propTypes = { + version: React.PropTypes.string.isRequired, + newVersion: React.PropTypes.string.isRequired, + onFinished: React.PropTypes.func.isRequired, +}; diff --git a/src/components/views/globals/NewVersionBar.js b/src/components/views/globals/NewVersionBar.js index 83dccf5d0..62d755a6a 100644 --- a/src/components/views/globals/NewVersionBar.js +++ b/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') +var sdk = require('matrix-react-sdk'); +import Modal from 'matrix-react-sdk/lib/Modal'; -module.exports = React.createClass({ - displayName: 'NewVersionBar', +export default function NewVersionBar(props) { + const onChangelogClicked = () => { + const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog'); + console.log(props); + Modal.createDialog(ChangelogDialog, { + version: props.version, + newVersion: props.newVersion, + onFinished: (update) => { + if(update) { + window.location.reload(); + } + } + }); + }; - render: function() { - return ( -
- /!\ -
- A new version of Vector is available. Refresh your browser. -
+ return ( +
+ /!\ +
+ A new version of Vector is available. Refresh your browser.
- ); - } -}); + +
+ ); +} +NewVersionBar.propTypes = { + version: React.PropTypes.string.isRequired, + newVersion: React.PropTypes.string.isRequired, +}; \ No newline at end of file diff --git a/src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css b/src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css new file mode 100644 index 000000000..37b865d94 --- /dev/null +++ b/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; +} From 56813eb11ed4fdecf3c676272b75e5824316ff3a Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Fri, 19 Aug 2016 00:24:00 +0530 Subject: [PATCH 2/2] remove whatwg-fetch and use browser-request --- package.json | 3 +-- src/components/views/dialogs/ChangelogDialog.js | 14 +++++++------- src/components/views/globals/NewVersionBar.js | 6 +++--- .../css/vector-web/views/globals/MatrixToolbar.css | 4 ++++ 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 9e3450cdc..be87139b2 100644 --- a/package.json +++ b/package.json @@ -58,8 +58,7 @@ "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef", "sanitize-html": "^1.11.1", "ua-parser-js": "^0.7.10", - "url": "^0.11.0", - "whatwg-fetch": "^1.0.0" + "url": "^0.11.0" }, "devDependencies": { "babel": "^5.8.23", diff --git a/src/components/views/dialogs/ChangelogDialog.js b/src/components/views/dialogs/ChangelogDialog.js index 96ae63655..823c205b8 100644 --- a/src/components/views/dialogs/ChangelogDialog.js +++ b/src/components/views/dialogs/ChangelogDialog.js @@ -17,6 +17,7 @@ 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']; @@ -28,17 +29,16 @@ export default class ChangelogDialog extends React.Component { } componentDidMount() { - console.log(this.props); - const version = this.props.newVersion; - const version2 = this.props.version; + const version = this.props.newVersion.split('-'); + const version2 = this.props.version.split('-'); if(version == null || version2 == null) return; for(let i=0; i response.json()) - .then(json => this.setState({[REPOS[i]]: json.commits})); - + 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}); + }); } } diff --git a/src/components/views/globals/NewVersionBar.js b/src/components/views/globals/NewVersionBar.js index 62d755a6a..8d819323a 100644 --- a/src/components/views/globals/NewVersionBar.js +++ b/src/components/views/globals/NewVersionBar.js @@ -23,7 +23,7 @@ import Modal from 'matrix-react-sdk/lib/Modal'; export default function NewVersionBar(props) { const onChangelogClicked = () => { const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog'); - console.log(props); + Modal.createDialog(ChangelogDialog, { version: props.version, newVersion: props.newVersion, @@ -38,10 +38,10 @@ export default function NewVersionBar(props) { return (
/!\ -
+
A new version of Vector is available. Refresh your browser.
- +
); } diff --git a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css b/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css index a8297f46c..4e214e113 100644 --- a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css +++ b/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; +}