Notifications
-
-
+
-
-
-
-
-
-
-
- Advanced
diff --git a/src/components/views/dialogs/ErrorDialog.js b/src/components/views/dialogs/ErrorDialog.js index ed9364df60..d06cf2de84 100644 --- a/src/components/views/dialogs/ErrorDialog.js +++ b/src/components/views/dialogs/ErrorDialog.js @@ -48,7 +48,7 @@ module.exports = React.createClass({ render: function() { return (
-
+
{this.props.title}
diff --git a/src/components/views/dialogs/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js
index f415201e45..4eeecd64b3 100644
--- a/src/components/views/dialogs/QuestionDialog.js
+++ b/src/components/views/dialogs/QuestionDialog.js
@@ -46,7 +46,7 @@ module.exports = React.createClass({
render: function() {
return (
-
+
{this.props.title}
diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js
new file mode 100644
index 0000000000..3cda852449
--- /dev/null
+++ b/src/components/views/dialogs/TextInputDialog.js
@@ -0,0 +1,94 @@
+/*
+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.
+*/
+
+var React = require("react");
+
+module.exports = React.createClass({
+ displayName: 'TextInputDialog',
+ propTypes: {
+ title: React.PropTypes.string,
+ description: React.PropTypes.string,
+ value: React.PropTypes.string,
+ button: React.PropTypes.string,
+ focus: React.PropTypes.bool,
+ onFinished: React.PropTypes.func.isRequired
+ },
+
+ getDefaultProps: function() {
+ return {
+ title: "",
+ value: "",
+ description: "",
+ button: "OK",
+ focus: true
+ };
+ },
+
+ componentDidMount: function() {
+ if (this.props.focus) {
+ // Set the cursor at the end of the text input
+ this.refs.textinput.value = this.props.value;
+ }
+ },
+
+ onOk: function() {
+ this.props.onFinished(true, this.refs.textinput.value);
+ },
+
+ onCancel: function() {
+ this.props.onFinished(false);
+ },
+
+ onKeyDown: function(e) {
+ if (e.keyCode === 27) { // escape
+ e.stopPropagation();
+ e.preventDefault();
+ this.props.onFinished(false);
+ }
+ else if (e.keyCode === 13) { // enter
+ e.stopPropagation();
+ e.preventDefault();
+ this.props.onFinished(true, this.refs.textinput.value);
+ }
+ },
+
+ render: function() {
+ return (
+
+
+ );
+ }
+});
diff --git a/src/components/views/login/CustomServerDialog.js b/src/components/views/login/CustomServerDialog.js
index 8a67dfd7e6..dc6a49abd6 100644
--- a/src/components/views/login/CustomServerDialog.js
+++ b/src/components/views/login/CustomServerDialog.js
@@ -22,7 +22,7 @@ module.exports = React.createClass({
render: function() {
return (
+ {this.props.title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
Custom Server Options
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
new file mode 100644
index 0000000000..a0135fb0c3
--- /dev/null
+++ b/src/components/views/rooms/EntityTile.js
@@ -0,0 +1,139 @@
+/*
+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 PRESENCE_CLASS = {
+ "offline": "mx_EntityTile_offline",
+ "online": "mx_EntityTile_online",
+ "unavailable": "mx_EntityTile_unavailable"
+};
+
+module.exports = React.createClass({
+ displayName: 'EntityTile',
+
+ propTypes: {
+ name: React.PropTypes.string,
+ title: React.PropTypes.string,
+ avatarJsx: React.PropTypes.any, // 
;
+ }
+ if (powerLevel >= 99) {
+ power = 
;
+ }
+
+
+ var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+ var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+
+ var av = this.props.avatarJsx || 
;
- // }
-
- var power;
- if (this.props.member) {
- var powerLevel = this.props.member.powerLevel;
- if (powerLevel >= 50 && powerLevel < 99) {
- power = ;
- }
- if (powerLevel >= 99) {
- power = ;
- }
- }
- }
-
- var mainClassName = "mx_MemberTile ";
- mainClassName += presenceClass;
- if (this.state.hover) {
- mainClassName += " mx_MemberTile_hover";
- }
-
- var nameEl;
- if (this.state.hover && this.props.member) {
- var presenceState = (member && member.user) ? member.user.presence : null;
- var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
- nameEl = (
-
+ 
+
+ );
+ }
+ else {
+ nameEl = (
+
+ { this.props.name }
+
+ { this.props.name }
+
+ );
+ }
+
+ var inviteButton;
+ if (this.props.showInviteButton) {
+ inviteButton = (
+
+ 
+
+ );
+ }
+
+ var power;
+ var powerLevel = this.props.powerLevel;
+ if (powerLevel >= 50 && powerLevel < 99) {
+ power =
+ ;
+ }
+ if (powerLevel >= 99) {
+ power = ;
+ }
+
+
+ var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+ var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+
+ var av = this.props.avatarJsx ||
+
+ );
+ }
+});
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 3e3221992e..ff76e64c56 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -19,6 +19,7 @@ var Matrix = require("matrix-js-sdk");
var q = require('q');
var MatrixClientPeg = require("../../../MatrixClientPeg");
var Modal = require("../../../Modal");
+var Entities = require("../../../Entities");
var sdk = require('../../../index');
var GeminiScrollbar = require('react-gemini-scrollbar');
@@ -284,6 +285,8 @@ module.exports = React.createClass({
// we shouldn't add them if the 3pid invite state key (token) is in the
// member invite (content.third_party_invite.signed.token)
var room = MatrixClientPeg.get().getRoom(this.props.roomId);
+ var EntityTile = sdk.getComponent("rooms.EntityTile");
+ var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
if (room) {
room.currentState.getStateEvents("m.room.third_party_invite").forEach(
function(e) {
@@ -293,9 +296,12 @@ module.exports = React.createClass({
if (memberEvent) {
return;
}
+ var avatarJsx = (
+
+ {av}
+
+ { nameEl }
+ { power }
+ { inviteButton }
+ ;
- }
- if (powerLevel >= 99) {
- power = ;
- }
- }
- }
-
- var mainClassName = "mx_MemberTile ";
- mainClassName += presenceClass;
- if (this.state.hover) {
- mainClassName += " mx_MemberTile_hover";
- }
-
- var nameEl;
- if (this.state.hover && this.props.member) {
- var presenceState = (member && member.user) ? member.user.presence : null;
- var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
- nameEl = (
-
-
-
- );
- }
- else {
- nameEl = (
-
- { name }
-
- { name }
-
- );
- }
-
var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+ var EntityTile = sdk.getComponent('rooms.EntityTile');
- var av;
- if (member) {
- av = (
- ;
}
- else {
- av = (
- ;
}
+ if (member.user) {
+ this.user_last_modified_time = member.user.getLastModifiedTime();
+
+ // FIXME: make presence data update whenever User.presence changes...
+ active = (
+ (Date.now() - (member.user.lastPresenceTs - member.user.lastActiveAgo)) || -1
+ );
+ }
+ this.member_last_modified_time = member.getLastModifiedTime();
+
return (
-
-
+
- { av }
- { power }
-
- { nameEl }
- Notifications
+
+
+
+
Permissions
diff --git a/src/components/views/rooms/SearchableEntityList.js b/src/components/views/rooms/SearchableEntityList.js
new file mode 100644
index 0000000000..52f3307bcd
--- /dev/null
+++ b/src/components/views/rooms/SearchableEntityList.js
@@ -0,0 +1,89 @@
+/*
+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.
+*/
+var React = require('react');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var Modal = require("../../../Modal");
+var GeminiScrollbar = require('react-gemini-scrollbar');
+
+// A list capable of displaying entities which conform to the SearchableEntity
+// interface which is an object containing getJsx(): Jsx and matches(query: string): boolean
+var SearchableEntityList = React.createClass({
+ displayName: 'SearchableEntityList',
+
+ propTypes: {
+ searchPlaceholderText: React.PropTypes.string,
+ emptyQueryShowsAll: React.PropTypes.bool,
+ onSubmit: React.PropTypes.func, // fn(inputText)
+ entities: React.PropTypes.array
+ },
+
+ getDefaultProps: function() {
+ return {
+ searchPlaceholderText: "Search",
+ entities: [],
+ emptyQueryShowsAll: false,
+ onSubmit: function() {}
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ query: "",
+ results: this.getSearchResults("")
+ };
+ },
+
+ onQueryChanged: function(ev) {
+ var q = ev.target.value;
+ this.setState({
+ query: q,
+ results: this.getSearchResults(q)
+ });
+ },
+
+ onQuerySubmit: function(ev) {
+ ev.preventDefault();
+ this.props.onSubmit(this.state.query);
+ },
+
+ getSearchResults: function(query) {
+ if (!query || query.length === 0) {
+ return this.props.emptyQueryShowsAll ? this.props.entities : []
+ }
+ return this.props.entities.filter(function(e) {
+ return e.matches(query);
+ });
+ },
+
+ render: function() {
+ return (
+
+
+
+ );
+ }
+});
+
+ module.exports = SearchableEntityList;
diff --git a/src/components/views/rooms/UserTile.js b/src/components/views/rooms/UserTile.js
new file mode 100644
index 0000000000..6597796764
--- /dev/null
+++ b/src/components/views/rooms/UserTile.js
@@ -0,0 +1,56 @@
+/*
+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 Avatar = require("../../../Avatar");
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var sdk = require('../../../index');
+var dis = require('../../../dispatcher');
+var Modal = require("../../../Modal");
+
+module.exports = React.createClass({
+ displayName: 'UserTile',
+
+ propTypes: {
+ user: React.PropTypes.any.isRequired // User
+ },
+
+ render: function() {
+ var EntityTile = sdk.getComponent("rooms.EntityTile");
+ var user = this.props.user;
+ var name = user.displayName || user.userId;
+ var active = -1;
+
+ // FIXME: make presence data update whenever User.presence changes...
+ active = (
+ (Date.now() - (user.lastPresenceTs - user.lastActiveAgo)) || -1
+ );
+
+ var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+ var avatarJsx = (
+
+ {this.state.results.map((entity) => {
+ return entity.getJsx();
+ })}
+
+