diff --git a/src/components/views/dialogs/AddAppDialog.js b/src/components/views/dialogs/AddAppDialog.js
index 4a3c1dfb5b..b72a3809b4 100644
--- a/src/components/views/dialogs/AddAppDialog.js
+++ b/src/components/views/dialogs/AddAppDialog.js
@@ -29,6 +29,9 @@ export default React.createClass({
},
getInitialState: function() {
+ return {
+ value: "",
+ };
},
componentDidMount: function() {
@@ -36,9 +39,7 @@ export default React.createClass({
},
onValueChange: function(ev) {
- this.setState({
- value: ev.target.value,
- });
+ this.setState({ value: ev.target.value});
},
onFormSubmit: function(ev) {
@@ -61,7 +62,7 @@ export default React.createClass({
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
new file mode 100644
index 0000000000..66c32a16a1
--- /dev/null
+++ b/src/components/views/elements/AppTile.js
@@ -0,0 +1,53 @@
+/*
+Copyright 2015, 2016 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.
+*/
+
+'use strict';
+
+const React = require('react');
+
+export default React.createClass({
+ displayName: 'AppTile',
+
+ propTypes: {
+ id: React.PropTypes.string.isRequired,
+ url: React.PropTypes.string.isRequired,
+ name: React.PropTypes.string.isRequired,
+ },
+
+ getDefaultProps: function() {
+ return {
+ url: "",
+ };
+ },
+
+ render: function() {
+ return (
+
+
+ {this.props.name}
+
+
+
+ {/* x */}
+
+
+
+
+
+
+ );
+ },
+});
diff --git a/src/components/views/elements/MemberTile.js b/src/components/views/elements/MemberTile.js
new file mode 100644
index 0000000000..5becef9ede
--- /dev/null
+++ b/src/components/views/elements/MemberTile.js
@@ -0,0 +1,97 @@
+/*
+Copyright 2015, 2016 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.
+*/
+
+'use strict';
+
+var React = require('react');
+
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var sdk = require('../../../index');
+var dis = require('../../../dispatcher');
+var Modal = require("../../../Modal");
+
+module.exports = React.createClass({
+ displayName: 'MemberTile',
+
+ propTypes: {
+ member: React.PropTypes.any.isRequired, // RoomMember
+ },
+
+ getInitialState: function() {
+ return {};
+ },
+
+ shouldComponentUpdate: function(nextProps, nextState) {
+ if (
+ this.member_last_modified_time === undefined ||
+ this.member_last_modified_time < nextProps.member.getLastModifiedTime()
+ ) {
+ return true;
+ }
+ if (
+ nextProps.member.user &&
+ (this.user_last_modified_time === undefined ||
+ this.user_last_modified_time < nextProps.member.user.getLastModifiedTime())
+ ) {
+ return true;
+ }
+ return false;
+ },
+
+ onClick: function(e) {
+ dis.dispatch({
+ action: 'view_user',
+ member: this.props.member,
+ });
+ },
+
+ _getDisplayName: function() {
+ return this.props.member.name;
+ },
+
+ getPowerLabel: function() {
+ return this.props.member.userId + " (power " + this.props.member.powerLevel + ")";
+ },
+
+ render: function() {
+ var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+ var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+ var EntityTile = sdk.getComponent('rooms.EntityTile');
+
+ var member = this.props.member;
+ var name = this._getDisplayName();
+ var active = -1;
+ var presenceState = member.user ? member.user.presence : null;
+
+ var av = (
+
+ );
+
+ if (member.user) {
+ this.user_last_modified_time = member.user.getLastModifiedTime();
+ }
+ this.member_last_modified_time = member.getLastModifiedTime();
+
+ return (
+
+ );
+ }
+});
diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js
index 82abb07e5c..ef0cbcf2b9 100644
--- a/src/components/views/rooms/AppsDrawer.js
+++ b/src/components/views/rooms/AppsDrawer.js
@@ -18,6 +18,8 @@ limitations under the License.
const React = require('react');
const AddAppDialog = require('../dialogs/AddAppDialog');
+const AppTile = require('../elements/AppTile');
+const Modal = require("../../../Modal");
module.exports = React.createClass({
displayName: 'AppsDrawer',
@@ -26,26 +28,51 @@ module.exports = React.createClass({
},
componentDidMount: function() {
+ const as = this.state.apps;
+ as.push({
+ id: "bbcApp",
+ url: "http://news.bbc.co.uk",
+ name: "BBC News",
+ });
+ this.setState({apps: as});
},
getInitialState: function() {
- // this.onClickAddWidget = this.onClickAddWidget.bind(this);
return {
- addAppWidget: false,
+ apps: [{
+ id: "googleApp",
+ url: "http://matrix.org/grafana/dashboard/db/golang-metrics?panelId=2&fullscreen&edit&var-bucket_size=1m&var-job=riot-bot&var-handler=All&from=1495188444653&to=1495210044654",
+ name: "Google",
+ }],
};
},
onClickAddWidget: function() {
- this.setState({
- addAppWidget: true,
+ Modal.createDialog(AddAppDialog, {
+ onFinished: (proceed, reason) => {
+ if (!proceed) return;
+
+ this.state.apps.push();
+ },
});
},
render: function() {
+ const apps = this.state.apps.map(
+ (app) =>
);
+
return (
-
[+] Add a widget
- {this.state.addAppWidget && AddAppDialog}
+
+ {apps}
+
+
+ [+] Add a widget
+
);
},