+ );
+ }
+});
diff --git a/src/components/login/PostRegistration.js b/src/components/login/PostRegistration.js
new file mode 100644
index 000000000..20a58f114
--- /dev/null
+++ b/src/components/login/PostRegistration.js
@@ -0,0 +1,81 @@
+/*
+Copyright 2015 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 sdk = require('matrix-react-sdk');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+
+module.exports = React.createClass({
+ displayName: 'PostRegistration',
+
+ propTypes: {
+ onComplete: React.PropTypes.func.isRequired
+ },
+
+ getInitialState: function() {
+ return {
+ avatarUrl: null,
+ errorString: null,
+ busy: false
+ };
+ },
+
+ componentWillMount: function() {
+ // There is some assymetry between ChangeDisplayName and ChangeAvatar,
+ // as ChangeDisplayName will auto-get the name but ChangeAvatar expects
+ // the URL to be passed to you (because it's also used for room avatars).
+ var cli = MatrixClientPeg.get();
+ this.setState({busy: true});
+ var self = this;
+ cli.getProfileInfo(cli.credentials.userId).done(function(result) {
+ self.setState({
+ avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(result.avatar_url),
+ busy: false
+ });
+ }, function(error) {
+ self.setState({
+ errorString: "Failed to fetch avatar URL",
+ busy: false
+ });
+ });
+ },
+
+ render: function() {
+ var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
+ var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
+ return (
+
+
+
+
+
+
+ Set a display name:
+
+ Upload an avatar:
+
+
+ {this.state.errorString}
+
+
+
+ );
+ }
+});
diff --git a/src/components/login/Registration.js b/src/components/login/Registration.js
new file mode 100644
index 000000000..b06f9ffef
--- /dev/null
+++ b/src/components/login/Registration.js
@@ -0,0 +1,247 @@
+/*
+Copyright 2015 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 sdk = require('matrix-react-sdk');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+var ServerConfig = require("./ServerConfig");
+var RegistrationForm = require("./RegistrationForm");
+var CaptchaForm = require("matrix-react-sdk/lib/components/login/CaptchaForm");
+var Signup = require("matrix-react-sdk/lib/Signup");
+var MIN_PASSWORD_LENGTH = 6;
+
+module.exports = React.createClass({
+ displayName: 'Registration',
+
+ propTypes: {
+ onLoggedIn: React.PropTypes.func.isRequired,
+ clientSecret: React.PropTypes.string,
+ sessionId: React.PropTypes.string,
+ registrationUrl: React.PropTypes.string,
+ idSid: React.PropTypes.string,
+ hsUrl: React.PropTypes.string,
+ isUrl: React.PropTypes.string,
+ // registration shouldn't know or care how login is done.
+ onLoginClick: React.PropTypes.func.isRequired
+ },
+
+ getInitialState: function() {
+ return {
+ busy: false,
+ errorText: null,
+ enteredHomeserverUrl: this.props.hsUrl,
+ enteredIdentityServerUrl: this.props.isUrl
+ };
+ },
+
+ componentWillMount: function() {
+ this.dispatcherRef = dis.register(this.onAction);
+ // attach this to the instance rather than this.state since it isn't UI
+ this.registerLogic = new Signup.Register(
+ this.props.hsUrl, this.props.isUrl
+ );
+ this.registerLogic.setClientSecret(this.props.clientSecret);
+ this.registerLogic.setSessionId(this.props.sessionId);
+ this.registerLogic.setRegistrationUrl(this.props.registrationUrl);
+ this.registerLogic.setIdSid(this.props.idSid);
+ this.registerLogic.recheckState();
+ },
+
+ componentWillUnmount: function() {
+ dis.unregister(this.dispatcherRef);
+ },
+
+ componentDidMount: function() {
+ // may have already done an HTTP hit (e.g. redirect from an email) so
+ // check for any pending response
+ var promise = this.registerLogic.getPromise();
+ if (promise) {
+ this.onProcessingRegistration(promise);
+ }
+ },
+
+ onHsUrlChanged: function(newHsUrl) {
+ this.registerLogic.setHomeserverUrl(newHsUrl);
+ },
+
+ onIsUrlChanged: function(newIsUrl) {
+ this.registerLogic.setIdentityServerUrl(newIsUrl);
+ },
+
+ onAction: function(payload) {
+ if (payload.action !== "registration_step_update") {
+ return;
+ }
+ this.forceUpdate(); // registration state has changed.
+ },
+
+ onFormSubmit: function(formVals) {
+ var self = this;
+ this.setState({
+ errorText: "",
+ busy: true
+ });
+ this.onProcessingRegistration(this.registerLogic.register(formVals));
+ },
+
+ // Promise is resolved when the registration process is FULLY COMPLETE
+ onProcessingRegistration: function(promise) {
+ var self = this;
+ promise.done(function(response) {
+ if (!response || !response.access_token) {
+ console.warn(
+ "FIXME: Register fulfilled without a final response, " +
+ "did you break the promise chain?"
+ );
+ // no matter, we'll grab it direct
+ response = self.registerLogic.getCredentials();
+ }
+ if (!response || !response.user_id || !response.access_token) {
+ console.error("Final response is missing keys.");
+ self.setState({
+ errorText: "There was a problem processing the response."
+ });
+ return;
+ }
+ self.props.onLoggedIn({
+ userId: response.user_id,
+ homeserverUrl: self.registerLogic.getHomeserverUrl(),
+ identityServerUrl: self.registerLogic.getIdentityServerUrl(),
+ accessToken: response.access_token
+ });
+ self.setState({
+ busy: false
+ });
+ }, function(err) {
+ if (err.message) {
+ self.setState({
+ errorText: err.message
+ });
+ }
+ self.setState({
+ busy: false
+ });
+ console.log(err);
+ });
+ },
+
+ onFormValidationFailed: function(errCode) {
+ var errMsg;
+ switch (errCode) {
+ case "RegistrationForm.ERR_PASSWORD_MISSING":
+ errMsg = "Missing password.";
+ break;
+ case "RegistrationForm.ERR_PASSWORD_MISMATCH":
+ errMsg = "Passwords don't match.";
+ break;
+ case "RegistrationForm.ERR_PASSWORD_LENGTH":
+ errMsg = `Password too short (min ${MIN_PASSWORD_LENGTH}).`;
+ break;
+ default:
+ console.error("Unknown error code: %s", errCode);
+ errMsg = "An unknown error occurred.";
+ break;
+ }
+ this.setState({
+ errorText: errMsg
+ });
+ },
+
+ onCaptchaLoaded: function(divIdName) {
+ this.registerLogic.tellStage("m.login.recaptcha", {
+ divId: divIdName
+ });
+ this.setState({
+ busy: false // requires user input
+ });
+ },
+
+ _getRegisterContentJsx: function() {
+ var currStep = this.registerLogic.getStep();
+ var registerStep;
+ switch (currStep) {
+ case "Register.COMPLETE":
+ break; // NOP
+ case "Register.START":
+ case "Register.STEP_m.login.dummy":
+ registerStep = (
+
+ );
+ break;
+ case "Register.STEP_m.login.email.identity":
+ registerStep = (
+
+ Please check your email to continue registration.
+
+ );
+ }
+});
diff --git a/src/components/login/RegistrationForm.js b/src/components/login/RegistrationForm.js
new file mode 100644
index 000000000..3f9fb6ae1
--- /dev/null
+++ b/src/components/login/RegistrationForm.js
@@ -0,0 +1,126 @@
+/*
+Copyright 2015 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 sdk = require('matrix-react-sdk')
+
+/**
+ * A pure UI component which displays a registration form.
+ */
+module.exports = React.createClass({
+ displayName: 'RegistrationForm',
+
+ propTypes: {
+ defaultEmail: React.PropTypes.string,
+ defaultUsername: React.PropTypes.string,
+ showEmail: React.PropTypes.bool,
+ minPasswordLength: React.PropTypes.number,
+ onError: React.PropTypes.func,
+ onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
+ },
+
+ getDefaultProps: function() {
+ return {
+ showEmail: false,
+ minPasswordLength: 6,
+ onError: function(e) {
+ console.error(e);
+ }
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ email: this.props.defaultEmail,
+ username: this.props.defaultUsername,
+ password: null,
+ passwordConfirm: null
+ };
+ },
+
+ onSubmit: function(ev) {
+ ev.preventDefault();
+
+ var pwd1 = this.refs.password.value.trim();
+ var pwd2 = this.refs.passwordConfirm.value.trim()
+
+ var errCode;
+ if (!pwd1 || !pwd2) {
+ errCode = "RegistrationForm.ERR_PASSWORD_MISSING";
+ }
+ else if (pwd1 !== pwd2) {
+ errCode = "RegistrationForm.ERR_PASSWORD_MISMATCH";
+ }
+ else if (pwd1.length < this.props.minPasswordLength) {
+ errCode = "RegistrationForm.ERR_PASSWORD_LENGTH";
+ }
+ if (errCode) {
+ this.props.onError(errCode);
+ return;
+ }
+
+ var promise = this.props.onRegisterClick({
+ username: this.refs.username.value.trim(),
+ password: pwd1,
+ email: this.refs.email.value.trim()
+ });
+
+ if (promise) {
+ ev.target.disabled = true;
+ promise.finally(function() {
+ ev.target.disabled = false;
+ });
+ }
+ },
+
+ render: function() {
+ var emailSection, registerButton;
+ if (this.props.showEmail) {
+ emailSection = (
+
+ );
+ }
+ if (this.props.onRegisterClick) {
+ registerButton = (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+ }
+});
diff --git a/src/components/login/ServerConfig.js b/src/components/login/ServerConfig.js
new file mode 100644
index 000000000..8f1eab384
--- /dev/null
+++ b/src/components/login/ServerConfig.js
@@ -0,0 +1,161 @@
+/*
+Copyright 2015 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 Modal = require('matrix-react-sdk/lib/Modal');
+var sdk = require('matrix-react-sdk')
+
+/**
+ * A pure UI component which displays the HS and IS to use.
+ */
+module.exports = React.createClass({
+ displayName: 'ServerConfig',
+
+ propTypes: {
+ onHsUrlChanged: React.PropTypes.func,
+ onIsUrlChanged: React.PropTypes.func,
+ defaultHsUrl: React.PropTypes.string,
+ defaultIsUrl: React.PropTypes.string,
+ withToggleButton: React.PropTypes.bool,
+ delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
+ },
+
+ getDefaultProps: function() {
+ return {
+ onHsUrlChanged: function() {},
+ onIsUrlChanged: function() {},
+ withToggleButton: false,
+ delayTimeMs: 0
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ hs_url: this.props.defaultHsUrl,
+ is_url: this.props.defaultIsUrl,
+ original_hs_url: this.props.defaultHsUrl,
+ original_is_url: this.props.defaultIsUrl,
+ // no toggle button = show, toggle button = hide
+ configVisible: !this.props.withToggleButton
+ }
+ },
+
+ onHomeserverChanged: function(ev) {
+ this.setState({hs_url: ev.target.value}, function() {
+ this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
+ this.props.onHsUrlChanged(this.state.hs_url);
+ });
+ });
+ },
+
+ onIdentityServerChanged: function(ev) {
+ this.setState({is_url: ev.target.value}, function() {
+ this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
+ this.props.onIsUrlChanged(this.state.is_url);
+ });
+ });
+ },
+
+ _waitThenInvoke: function(existingTimeoutId, fn) {
+ if (existingTimeoutId) {
+ clearTimeout(existingTimeoutId);
+ }
+ return setTimeout(fn.bind(this), this.props.delayTimeMs);
+ },
+
+ getHsUrl: function() {
+ return this.state.hs_url;
+ },
+
+ getIsUrl: function() {
+ return this.state.is_url;
+ },
+
+ onServerConfigVisibleChange: function(ev) {
+ this.setState({
+ configVisible: ev.target.checked
+ });
+ },
+
+ showHelpPopup: function() {
+ var ErrorDialog = sdk.getComponent('organisms.ErrorDialog');
+ Modal.createDialog(ErrorDialog, {
+ title: 'Custom Server Options',
+ description:
+ You can use the custom server options to log into other Matrix
+ servers by specifying a different Home server URL.
+
+ This allows you to use Vector with an existing Matrix account on
+ a different Home server.
+
+
+ You can also set a custom Identity server but this will affect
+ people's ability to find you if you use a server in a group other
+ than the main Matrix.org group.
+ ,
+ button: "Dismiss",
+ focus: true
+ });
+ },
+
+ render: function() {
+ var serverConfigStyle = {};
+ serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
+
+ var toggleButton;
+ if (this.props.withToggleButton) {
+ toggleButton = (
+
);
case this.Phases.Uploading:
+ var Loader = sdk.getComponent("atoms.Spinner");
return (
);
diff --git a/src/skins/vector/views/molecules/ChangeDisplayName.js b/src/skins/vector/views/molecules/ChangeDisplayName.js
index 1a094ec24..a10ba2a75 100644
--- a/src/skins/vector/views/molecules/ChangeDisplayName.js
+++ b/src/skins/vector/views/molecules/ChangeDisplayName.js
@@ -20,8 +20,6 @@ var React = require('react');
var sdk = require('matrix-react-sdk');
var ChangeDisplayNameController = require("matrix-react-sdk/lib/controllers/molecules/ChangeDisplayName");
-var Loader = require("react-loader");
-
module.exports = React.createClass({
displayName: 'ChangeDisplayName',
@@ -39,6 +37,7 @@ module.exports = React.createClass({
render: function() {
if (this.state.busy) {
+ var Loader = sdk.getComponent("atoms.Spinner");
return (
);
diff --git a/src/skins/vector/views/molecules/ChangePassword.js b/src/skins/vector/views/molecules/ChangePassword.js
index 004fed398..b1d8f28e6 100644
--- a/src/skins/vector/views/molecules/ChangePassword.js
+++ b/src/skins/vector/views/molecules/ChangePassword.js
@@ -19,17 +19,15 @@ limitations under the License.
var React = require('react');
var ChangePasswordController = require('matrix-react-sdk/lib/controllers/molecules/ChangePassword')
-var Loader = require("react-loader");
-
module.exports = React.createClass({
displayName: 'ChangePassword',
mixins: [ChangePasswordController],
onClickChange: function() {
- var old_password = this.refs.old_input.getDOMNode().value;
- var new_password = this.refs.new_input.getDOMNode().value;
- var confirm_password = this.refs.confirm_input.getDOMNode().value;
+ var old_password = this.refs.old_input.value;
+ var new_password = this.refs.new_input.value;
+ var confirm_password = this.refs.confirm_input.value;
if (new_password != confirm_password) {
this.setState({
state: this.Phases.Error,
@@ -64,6 +62,7 @@ module.exports = React.createClass({
);
case this.Phases.Uploading:
+ var Loader = sdk.getComponent("atoms.Spinner");
return (
diff --git a/src/skins/vector/views/molecules/EventTile.js b/src/skins/vector/views/molecules/EventTile.js
index c5cb81951..236e7b1fd 100644
--- a/src/skins/vector/views/molecules/EventTile.js
+++ b/src/skins/vector/views/molecules/EventTile.js
@@ -17,15 +17,28 @@ limitations under the License.
'use strict';
var React = require('react');
+var ReactDom = require('react-dom');
var classNames = require("classnames");
var sdk = require('matrix-react-sdk')
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg')
var EventTileController = require('matrix-react-sdk/lib/controllers/molecules/EventTile')
var ContextualMenu = require('../../../../ContextualMenu');
var TextForEvent = require('matrix-react-sdk/lib/TextForEvent');
+var Velociraptor = require('../../../../Velociraptor');
+require('../../../../VelocityBounce');
+
+var bounce = false;
+try {
+ if (global.localStorage) {
+ bounce = global.localStorage.getItem('avatar_bounce') == 'true';
+ }
+} catch (e) {
+}
+
var eventTileTypes = {
'm.room.message': 'molecules.MessageTile',
'm.room.member' : 'molecules.EventAsTextTile',
@@ -36,6 +49,8 @@ var eventTileTypes = {
'm.room.topic' : 'molecules.EventAsTextTile',
};
+var MAX_READ_AVATARS = 5;
+
module.exports = React.createClass({
displayName: 'EventTile',
mixins: [EventTileController],
@@ -52,7 +67,7 @@ module.exports = React.createClass({
},
getInitialState: function() {
- return {menu: false};
+ return {menu: false, allReadAvatars: false};
},
onEditClicked: function(e) {
@@ -72,6 +87,127 @@ module.exports = React.createClass({
this.setState({menu: true});
},
+ toggleAllReadAvatars: function() {
+ this.setState({
+ allReadAvatars: !this.state.allReadAvatars
+ });
+ },
+
+ getReadAvatars: function() {
+ var avatars = [];
+
+ var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+
+ if (!room) return [];
+
+ var myUserId = MatrixClientPeg.get().credentials.userId;
+
+ // get list of read receipts, sorted most recent first
+ var receipts = room.getReceiptsForEvent(this.props.mxEvent).filter(function(r) {
+ return r.type === "m.read" && r.userId != myUserId;
+ }).sort(function(r1, r2) {
+ return r2.data.ts - r1.data.ts;
+ });
+
+ var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
+
+ var left = 0;
+
+ var reorderTransitionOpts = {
+ duration: 100,
+ easing: 'easeOut'
+ };
+
+ for (var i = 0; i < receipts.length; ++i) {
+ var member = room.getMember(receipts[i].userId);
+
+ // Using react refs here would mean both getting Velociraptor to expose
+ // them and making them scoped to the whole RoomView. Not impossible, but
+ // getElementById seems simpler at least for a first cut.
+ var oldAvatarDomNode = document.getElementById('mx_readAvatar'+member.userId);
+ var startStyles = [];
+ var enterTransitionOpts = [];
+ var oldNodeTop = -15; // For avatars that weren't on screen, act as if they were just off the top
+ if (oldAvatarDomNode) {
+ oldNodeTop = oldAvatarDomNode.getBoundingClientRect().top;
+ }
+
+ if (this.readAvatarNode) {
+ var topOffset = oldNodeTop - this.readAvatarNode.getBoundingClientRect().top;
+
+ if (oldAvatarDomNode && oldAvatarDomNode.style.left !== '0px') {
+ var leftOffset = oldAvatarDomNode.style.left;
+ // start at the old height and in the old h pos
+ startStyles.push({ top: topOffset, left: leftOffset });
+ enterTransitionOpts.push(reorderTransitionOpts);
+ }
+
+ // then shift to the rightmost column,
+ // and then it will drop down to its resting position
+ startStyles.push({ top: topOffset, left: '0px' });
+ enterTransitionOpts.push({
+ duration: bounce ? Math.min(Math.log(Math.abs(topOffset)) * 200, 3000) : 300,
+ easing: bounce ? 'easeOutBounce' : 'easeOutCubic',
+ });
+ }
+
+ var style = {
+ left: left+'px',
+ top: '0px',
+ visibility: ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) ? 'visible' : 'hidden'
+ };
+
+ //console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
+
+ // add to the start so the most recent is on the end (ie. ends up rightmost)
+ avatars.unshift(
+
+ );
+ // TODO: we keep the extra read avatars in the dom to make animation simpler
+ // we could optimise this to reduce the dom size.
+ if (i < MAX_READ_AVATARS - 1 || this.state.allReadAvatars) { // XXX: where does this -1 come from? is it to make the max'th avatar animate properly?
+ left -= 15;
+ }
+ }
+ var editButton;
+ if (!this.state.allReadAvatars) {
+ var remainder = receipts.length - MAX_READ_AVATARS;
+ var remText;
+ if (i >= MAX_READ_AVATARS - 1) left -= 15;
+ if (remainder > 0) {
+ remText = { remainder }+
+ ;
+ left -= 15;
+ }
+ editButton = (
+
+ );
+ }
+
+ return
+ { editButton }
+ { remText }
+
+ { avatars }
+
+ ;
+ },
+
+ collectReadAvatarNode: function(node) {
+ this.readAvatarNode = ReactDom.findDOMNode(node);
+ },
+
render: function() {
var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
var SenderProfile = sdk.getComponent('molecules.SenderProfile');
@@ -100,18 +236,14 @@ module.exports = React.createClass({
menu: this.state.menu,
});
var timestamp =
- var editButton = (
-
- );
var aux = null;
if (msgtype === 'm.image') aux = "sent an image";
else if (msgtype === 'm.video') aux = "sent a video";
else if (msgtype === 'm.file') aux = "uploaded a file";
+ var readAvatars = this.getReadAvatars();
+
var avatar, sender;
if (!this.props.continuation) {
if (this.props.mxEvent.sender) {
@@ -127,11 +259,13 @@ module.exports = React.createClass({
}
return (
- );
+ ));
}
});
+
+// Export the wrapped version, inlining the 'collect' functions
+// to more closely resemble the ES7
+module.exports =
+DropTarget('RoomTile', roomTileTarget, function(connect, monitor) {
+ return {
+ // Call this function inside render()
+ // to let React DnD handle the drag events:
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver(),
+ }
+})(
+DragSource('RoomTile', roomTileSource, function(connect, monitor) {
+ return {
+ // Call this function inside render()
+ // to let React DnD handle the drag events:
+ connectDragSource: connect.dragSource(),
+ // You can ask the monitor about the current drag state:
+ isDragging: monitor.isDragging()
+ };
+})(RoomTile));
\ No newline at end of file
diff --git a/src/skins/vector/views/molecules/RoomTooltip.js b/src/skins/vector/views/molecules/RoomTooltip.js
index 82e3e7446..51b13526c 100644
--- a/src/skins/vector/views/molecules/RoomTooltip.js
+++ b/src/skins/vector/views/molecules/RoomTooltip.js
@@ -17,6 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
+var ReactDOM = require('react-dom');
var dis = require('matrix-react-sdk/lib/dispatcher');
@@ -24,21 +25,21 @@ module.exports = React.createClass({
displayName: 'RoomTooltip',
componentDidMount: function() {
+ var tooltip = ReactDOM.findDOMNode(this);
if (!this.props.bottom) {
// tell the roomlist about us so it can position us
dis.dispatch({
action: 'view_tooltip',
- tooltip: this.getDOMNode(),
+ tooltip: tooltip,
});
}
else {
- var tooltip = this.getDOMNode();
tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px";
tooltip.style.display = "block";
}
},
- componentDidUnmount: function() {
+ componentWillUnmount: function() {
if (!this.props.bottom) {
dis.dispatch({
action: 'view_tooltip',
diff --git a/src/skins/vector/views/molecules/SearchBar.js b/src/skins/vector/views/molecules/SearchBar.js
index d31e24b4e..585b9a6d4 100644
--- a/src/skins/vector/views/molecules/SearchBar.js
+++ b/src/skins/vector/views/molecules/SearchBar.js
@@ -39,7 +39,7 @@ module.exports = React.createClass({
onSearchChange: function(e) {
if (e.keyCode === 13) { // on enter...
- this.props.onSearch(this.refs.search_term.getDOMNode().value, this.state.scope);
+ this.props.onSearch(this.refs.search_term.value, this.state.scope);
}
},
diff --git a/src/skins/vector/views/molecules/ServerConfig.js b/src/skins/vector/views/molecules/ServerConfig.js
deleted file mode 100644
index e48487aee..000000000
--- a/src/skins/vector/views/molecules/ServerConfig.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-Copyright 2015 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 Modal = require('matrix-react-sdk/lib/Modal');
-var sdk = require('matrix-react-sdk')
-
-var ServerConfigController = require('matrix-react-sdk/lib/controllers/molecules/ServerConfig')
-
-module.exports = React.createClass({
- displayName: 'ServerConfig',
- mixins: [ServerConfigController],
-
- showHelpPopup: function() {
- var ErrorDialog = sdk.getComponent('organisms.ErrorDialog');
- Modal.createDialog(ErrorDialog, {
- title: 'Custom Server Options',
- description: "You can use the custom server options to log into other Matrix servers by specifying a different Home server URL. This allows you to use Vector with an existing Matrix account on a different Home server. You can also set a cutom Identity server but this will affect people ability to find you if you use a server in a group other than tha main Matrix.org group.",
- button: "Dismiss",
- focus: true
- });
- },
-
- render: function() {
- return (
-
+
);
}
});
diff --git a/src/skins/vector/views/organisms/RoomSubList.js b/src/skins/vector/views/organisms/RoomSubList.js
new file mode 100644
index 000000000..35210b499
--- /dev/null
+++ b/src/skins/vector/views/organisms/RoomSubList.js
@@ -0,0 +1,290 @@
+/*
+Copyright 2015 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 DropTarget = require('react-dnd').DropTarget;
+var sdk = require('matrix-react-sdk')
+var dis = require('matrix-react-sdk/lib/dispatcher');
+
+// turn this on for drop & drag console debugging galore
+var debug = false;
+
+var roomListTarget = {
+ canDrop: function() {
+ return true;
+ },
+
+ drop: function(props, monitor, component) {
+ if (debug) console.log("dropped on sublist")
+ },
+
+ hover: function(props, monitor, component) {
+ var item = monitor.getItem();
+
+ if (component.state.sortedList.length == 0 && props.editable) {
+ if (debug) console.log("hovering on sublist " + props.label + ", isOver=" + monitor.isOver());
+
+ if (item.targetList !== component) {
+ item.targetList.removeRoomTile(item.room);
+ item.targetList = component;
+ }
+
+ component.moveRoomTile(item.room, 0);
+ }
+ },
+};
+
+var RoomSubList = React.createClass({
+ displayName: 'RoomSubList',
+
+ debug: debug,
+
+ propTypes: {
+ list: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+ label: React.PropTypes.string.isRequired,
+ tagName: React.PropTypes.string,
+ editable: React.PropTypes.bool,
+ order: React.PropTypes.string.isRequired,
+ bottommost: React.PropTypes.bool,
+ selectedRoom: React.PropTypes.string.isRequired,
+ activityMap: React.PropTypes.object.isRequired,
+ collapsed: React.PropTypes.bool.isRequired
+ },
+
+ getInitialState: function() {
+ return {
+ hidden: false,
+ sortedList: [],
+ };
+ },
+
+ componentWillMount: function() {
+ this.sortList(this.props.list, this.props.order);
+ },
+
+ componentWillReceiveProps: function(newProps) {
+ // order the room list appropriately before we re-render
+ //if (debug) console.log("received new props, list = " + newProps.list);
+ this.sortList(newProps.list, newProps.order);
+ },
+
+ onClick: function(ev) {
+ this.setState({ hidden : !this.state.hidden });
+ },
+
+ tsOfNewestEvent: function(room) {
+ if (room.timeline.length) {
+ return room.timeline[room.timeline.length - 1].getTs();
+ }
+ else {
+ return Number.MAX_SAFE_INTEGER;
+ }
+ },
+
+ // TODO: factor the comparators back out into a generic comparator
+ // so that view_prev_room and view_next_room can do the right thing
+
+ recentsComparator: function(roomA, roomB) {
+ return this.tsOfNewestEvent(roomB) - this.tsOfNewestEvent(roomA);
+ },
+
+ manualComparator: function(roomA, roomB) {
+ if (!roomA.tags[this.props.tagName] || !roomB.tags[this.props.tagName]) return 0;
+ var a = roomA.tags[this.props.tagName].order;
+ var b = roomB.tags[this.props.tagName].order;
+ return a == b ? this.recentsComparator(roomA, roomB) : ( a > b ? 1 : -1);
+ },
+
+ sortList: function(list, order) {
+ if (list === undefined) list = this.state.sortedList;
+ if (order === undefined) order = this.props.order;
+ var comparator;
+ list = list || [];
+ if (order === "manual") comparator = this.manualComparator;
+ if (order === "recent") comparator = this.recentsComparator;
+
+ //if (debug) console.log("sorting list for sublist " + this.props.label + " with length " + list.length + ", this.props.list = " + this.props.list);
+ this.setState({ sortedList: list.sort(comparator) });
+ },
+
+ moveRoomTile: function(room, atIndex) {
+ if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex);
+ //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms));
+ var found = this.findRoomTile(room);
+ var rooms = this.state.sortedList;
+ if (found.room) {
+ if (debug) console.log("removing at index " + found.index + " and adding at index " + atIndex);
+ rooms.splice(found.index, 1);
+ rooms.splice(atIndex, 0, found.room);
+ }
+ else {
+ if (debug) console.log("Adding at index " + atIndex);
+ rooms.splice(atIndex, 0, room);
+ }
+ this.setState({ sortedList: rooms });
+ // console.log("moveRoomTile after: " + JSON.stringify(this.state.rooms));
+ },
+
+ // XXX: this isn't invoked via a property method but indirectly via
+ // the roomList property method. Unsure how evil this is.
+ removeRoomTile: function(room) {
+ if (debug) console.log("remove room " + room.roomId);
+ var found = this.findRoomTile(room);
+ var rooms = this.state.sortedList;
+ if (found.room) {
+ rooms.splice(found.index, 1);
+ }
+ else {
+ console.warn("Can't remove room " + room.roomId + " - can't find it");
+ }
+ this.setState({ sortedList: rooms });
+ },
+
+ findRoomTile: function(room) {
+ var index = this.state.sortedList.indexOf(room);
+ if (index >= 0) {
+ // console.log("found: room: " + room.roomId + " with index " + index);
+ }
+ else {
+ if (debug) console.log("didn't find room");
+ room = null;
+ }
+ return ({
+ room: room,
+ index: index,
+ });
+ },
+
+ calcManualOrderTagData: function(room) {
+ var 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
+ if (index > 0) {
+ var 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.")
+ }
+ else if (prevTag.order === undefined) {
+ console.error("Previous room in sublist has no ordering metadata. This should never happen.");
+ }
+ else {
+ orderA = prevTag.order;
+ }
+ }
+
+ var 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];
+ if (!nextTag) {
+ console.error("Next room in sublist is not tagged to be in this list. This should never happen.")
+ }
+ else if (nextTag.order === undefined) {
+ console.error("Next room in sublist has no ordering metadata. This should never happen.");
+ }
+ else {
+ orderB = nextTag.order;
+ }
+ }
+
+ var 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
+ }
+
+ return order;
+ },
+
+ makeRoomTiles: function() {
+ var self = this;
+ var RoomTile = sdk.getComponent("molecules.RoomTile");
+ return this.state.sortedList.map(function(room) {
+ var selected = room.roomId == self.props.selectedRoom;
+ // XXX: is it evil to pass in self as a prop to RoomTile?
+ return (
+
+ );
+ });
+ },
+
+ render: function() {
+ var connectDropTarget = this.props.connectDropTarget;
+ var RoomDropTarget = sdk.getComponent('molecules.RoomDropTarget');
+
+ var label = this.props.collapsed ? null : this.props.label;
+
+ //console.log("render: " + JSON.stringify(this.state.sortedList));
+
+ var target;
+ if (this.state.sortedList.length == 0 && this.props.editable) {
+ target = ;
+ }
+
+ if (this.state.sortedList.length > 0 || this.props.editable) {
+ var subList;
+ var classes = "mx_RoomSubList" +
+ (this.props.bottommost ? " mx_RoomSubList_bottommost" : "");
+
+ if (!this.state.hidden) {
+ subList =
+ );
+ }
+ }
+});
+
+// Export the wrapped version, inlining the 'collect' functions
+// to more closely resemble the ES7
+module.exports =
+DropTarget('RoomTile', roomListTarget, function(connect) {
+ return {
+ connectDropTarget: connect.dropTarget(),
+ }
+})(RoomSubList);
diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js
index 4f15ea618..e569a3538 100644
--- a/src/skins/vector/views/organisms/RoomView.js
+++ b/src/skins/vector/views/organisms/RoomView.js
@@ -17,6 +17,7 @@ limitations under the License.
'use strict';
var React = require('react');
+var ReactDOM = require('react-dom');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var dis = require('matrix-react-sdk/lib/dispatcher');
@@ -25,11 +26,9 @@ var sdk = require('matrix-react-sdk')
var classNames = require("classnames");
var filesize = require('filesize');
+var GeminiScrollbar = require('react-gemini-scrollbar');
var RoomViewController = require('../../../../controllers/organisms/RoomView')
-var Loader = require("react-loader");
-
-
module.exports = React.createClass({
displayName: 'RoomView',
mixins: [RoomViewController],
@@ -102,9 +101,9 @@ module.exports = React.createClass({
},
scrollToBottom: function() {
- if (!this.refs.messageWrapper) return;
- var messageWrapper = this.refs.messageWrapper.getDOMNode();
- messageWrapper.scrollTop = messageWrapper.scrollHeight;
+ var scrollNode = this._getScrollNode();
+ if (!scrollNode) return;
+ scrollNode.scrollTop = scrollNode.scrollHeight;
},
render: function() {
@@ -131,6 +130,7 @@ module.exports = React.createClass({
var myUserId = MatrixClientPeg.get().credentials.userId;
if (this.state.room.currentState.members[myUserId].membership == 'invite') {
if (this.state.joining || this.state.rejecting) {
+ var Loader = sdk.getComponent("atoms.Spinner");
return (
@@ -196,10 +196,48 @@ module.exports = React.createClass({
);
} else {
var typingString = this.getWhoIsTypingString();
+ //typingString = "Testing typing...";
var unreadMsgs = this.getUnreadMessagesString();
+ // no conn bar trumps unread count since you can't get unread messages
+ // without a connection! (technically may already have some but meh)
+ // It also trumps the "some not sent" msg since you can't resend without
+ // a connection!
+ if (this.state.syncState === "ERROR") {
+ statusBar = (
+
+
+
+
+ Connectivity to the server has been lost.
+
+
+ Sent messages will be stored until your connection has returned.
+
+ );
+ }
// unread count trumps who is typing since the unread count is only
// set when you've scrolled up
- if (unreadMsgs) {
+ else if (unreadMsgs) {
statusBar = (
@@ -222,6 +260,7 @@ module.exports = React.createClass({
aux = ;
}
else if (this.state.uploadingRoomSettings) {
+ var Loader = sdk.getComponent("atoms.Spinner");
aux = ;
}
else if (this.state.searching) {
@@ -260,7 +299,7 @@ module.exports = React.createClass({
{ conferenceCallNotification }
{ aux }
+ 
- Download {this.presentableTextForFile(content)}
- 
+ 
+ 
+ 
+ 
}
+ var callPreview;
+ if (this.state.showCallElement) {
+ var CallView = sdk.getComponent('molecules.voip.CallView');
+ callPreview = 
:
null;
- var invitesLabel = this.props.collapsed ? null : "Invites";
- var recentsLabel = this.props.collapsed ? null : "Recent";
-
- var invites;
- if (this.state.inviteList.length) {
- invites = 
+ 
@@ -222,6 +260,7 @@ module.exports = React.createClass({
aux =