From 68c1ddd5d21d19fe699d70eee8b4936162e5ad60 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Nov 2015 18:12:26 +0000 Subject: [PATCH 01/34] replace react-loader with Spinner everywhere --- package.json | 1 - src/skins/vector/views/molecules/ChangeAvatar.js | 4 +--- src/skins/vector/views/molecules/ChangeDisplayName.js | 3 +-- src/skins/vector/views/molecules/ChangePassword.js | 3 +-- src/skins/vector/views/molecules/MemberInfo.js | 2 +- src/skins/vector/views/organisms/CreateRoom.js | 4 +--- src/skins/vector/views/organisms/MemberList.js | 2 +- src/skins/vector/views/organisms/RoomDirectory.js | 3 +-- src/skins/vector/views/organisms/RoomView.js | 5 ++--- src/skins/vector/views/organisms/UserSettings.js | 3 +-- src/skins/vector/views/templates/Login.js | 3 +-- src/skins/vector/views/templates/Register.js | 3 +-- 12 files changed, 12 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index a532d18564..fb7558ad5a 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,6 @@ "react-dnd-html5-backend": "^2.0.0", "react-dom": "^0.14.2", "react-gemini-scrollbar": "^2.0.1", - "react-loader": "^1.4.0", "sanitize-html": "^1.0.0" }, "devDependencies": { diff --git a/src/skins/vector/views/molecules/ChangeAvatar.js b/src/skins/vector/views/molecules/ChangeAvatar.js index 42c2d1fd45..7afac77fd5 100644 --- a/src/skins/vector/views/molecules/ChangeAvatar.js +++ b/src/skins/vector/views/molecules/ChangeAvatar.js @@ -21,9 +21,6 @@ var React = require('react'); var sdk = require('matrix-react-sdk') var ChangeAvatarController = require('matrix-react-sdk/lib/controllers/molecules/ChangeAvatar') -var Loader = require("react-loader"); - - module.exports = React.createClass({ displayName: 'ChangeAvatar', mixins: [ChangeAvatarController], @@ -70,6 +67,7 @@ module.exports = React.createClass({ ); 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 1a094ec24b..a10ba2a754 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 32315158f2..b1d8f28e6f 100644 --- a/src/skins/vector/views/molecules/ChangePassword.js +++ b/src/skins/vector/views/molecules/ChangePassword.js @@ -19,8 +19,6 @@ 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', @@ -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/MemberInfo.js b/src/skins/vector/views/molecules/MemberInfo.js index 5f8e806d24..24fa1e91a4 100644 --- a/src/skins/vector/views/molecules/MemberInfo.js +++ b/src/skins/vector/views/molecules/MemberInfo.js @@ -17,7 +17,6 @@ limitations under the License. 'use strict'; var React = require('react'); -var Loader = require("../atoms/Spinner"); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var sdk = require('matrix-react-sdk') @@ -47,6 +46,7 @@ module.exports = React.createClass({ } if (this.state.creatingRoom) { + var Loader = sdk.getComponent("atoms.Spinner"); spinner = ; } diff --git a/src/skins/vector/views/organisms/CreateRoom.js b/src/skins/vector/views/organisms/CreateRoom.js index 64f5b861b3..b63b477deb 100644 --- a/src/skins/vector/views/organisms/CreateRoom.js +++ b/src/skins/vector/views/organisms/CreateRoom.js @@ -24,9 +24,6 @@ var sdk = require('matrix-react-sdk') var PresetValues = require('matrix-react-sdk/lib/controllers/atoms/create_room/Presets').Presets; -var Loader = require("react-loader"); - - module.exports = React.createClass({ displayName: 'CreateRoom', mixins: [CreateRoomController], @@ -122,6 +119,7 @@ module.exports = React.createClass({ render: function() { var curr_phase = this.state.phase; if (curr_phase == this.phases.CREATING) { + var Loader = sdk.getComponent("atoms.Spinner"); return ( ); diff --git a/src/skins/vector/views/organisms/MemberList.js b/src/skins/vector/views/organisms/MemberList.js index 407e282aaf..b39d675f31 100644 --- a/src/skins/vector/views/organisms/MemberList.js +++ b/src/skins/vector/views/organisms/MemberList.js @@ -18,7 +18,6 @@ limitations under the License. var React = require('react'); var classNames = require('classnames'); -var Loader = require('react-loader'); var MemberListController = require('matrix-react-sdk/lib/controllers/organisms/MemberList') var GeminiScrollbar = require('react-gemini-scrollbar'); @@ -78,6 +77,7 @@ module.exports = React.createClass({ inviteTile: function() { if (this.state.inviting) { + var Loader = sdk.getComponent("atoms.Spinner"); return ( ); diff --git a/src/skins/vector/views/organisms/RoomDirectory.js b/src/skins/vector/views/organisms/RoomDirectory.js index 8c4dc51dfa..05b2b9c282 100644 --- a/src/skins/vector/views/organisms/RoomDirectory.js +++ b/src/skins/vector/views/organisms/RoomDirectory.js @@ -23,8 +23,6 @@ var Modal = require('matrix-react-sdk/lib/Modal'); var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); -var Loader = require("react-loader"); - module.exports = React.createClass({ displayName: 'RoomDirectory', @@ -121,6 +119,7 @@ module.exports = React.createClass({ render: function() { if (this.state.loading) { + var Loader = sdk.getComponent("atoms.Spinner"); return (
diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js index dfab5b67f8..2169fb4f67 100644 --- a/src/skins/vector/views/organisms/RoomView.js +++ b/src/skins/vector/views/organisms/RoomView.js @@ -29,9 +29,6 @@ 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], @@ -133,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 (
@@ -262,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) { diff --git a/src/skins/vector/views/organisms/UserSettings.js b/src/skins/vector/views/organisms/UserSettings.js index 6071f82edf..ab376ea476 100644 --- a/src/skins/vector/views/organisms/UserSettings.js +++ b/src/skins/vector/views/organisms/UserSettings.js @@ -19,8 +19,6 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var UserSettingsController = require('matrix-react-sdk/lib/controllers/organisms/UserSettings') -var Loader = require("react-loader"); - var Modal = require('matrix-react-sdk/lib/Modal'); module.exports = React.createClass({ @@ -68,6 +66,7 @@ module.exports = React.createClass({ }, render: function() { + var Loader = sdk.getComponent("atoms.Spinner"); switch (this.state.phase) { case this.Phases.Loading: return diff --git a/src/skins/vector/views/templates/Login.js b/src/skins/vector/views/templates/Login.js index 50b0917806..192645dd3c 100644 --- a/src/skins/vector/views/templates/Login.js +++ b/src/skins/vector/views/templates/Login.js @@ -21,8 +21,6 @@ var React = require('react'); var sdk = require('matrix-react-sdk') var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); -var Loader = require("react-loader"); - var LoginController = require('matrix-react-sdk/lib/controllers/templates/Login') var config = require('../../../../../config.json'); @@ -158,6 +156,7 @@ module.exports = React.createClass({ }, loginContent: function() { + var Loader = sdk.getComponent("atoms.Spinner"); var loader = this.state.busy ?
: null; return (
diff --git a/src/skins/vector/views/templates/Register.js b/src/skins/vector/views/templates/Register.js index 4490522e45..f3c81737a2 100644 --- a/src/skins/vector/views/templates/Register.js +++ b/src/skins/vector/views/templates/Register.js @@ -21,8 +21,6 @@ var React = require('react'); var sdk = require('matrix-react-sdk') var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg') -var Loader = require("react-loader"); - var RegisterController = require('../../../../controllers/templates/Register') var config = require('../../../../../config.json'); @@ -128,6 +126,7 @@ module.exports = React.createClass({ registerContent: function() { if (this.state.busy) { + var Loader = sdk.getComponent("atoms.Spinner"); return ( ); From 0825e0a2e275b2395509a7053526ef265d7bb462 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Nov 2015 19:09:24 +0000 Subject: [PATCH 02/34] retrieve last used HS/IS URL from local storage, and associated tweaks --- src/skins/vector/views/templates/Login.js | 47 +++++++++++++------- src/skins/vector/views/templates/Register.js | 34 ++++++++------ 2 files changed, 52 insertions(+), 29 deletions(-) diff --git a/src/skins/vector/views/templates/Login.js b/src/skins/vector/views/templates/Login.js index 192645dd3c..702043c6c8 100644 --- a/src/skins/vector/views/templates/Login.js +++ b/src/skins/vector/views/templates/Login.js @@ -29,21 +29,28 @@ module.exports = React.createClass({ displayName: 'Login', mixins: [LoginController], - getInitialState: function() { - return { - serverConfigVisible: false - }; - }, - componentWillMount: function() { + // TODO: factor out all localstorage stuff into its own home. + // This is common to Login, Register and MatrixClientPeg + var localStorage = window.localStorage; + if (localStorage) { + var hs_url = localStorage.getItem("mx_hs_url"); + var is_url = localStorage.getItem("mx_is_url"); + } + + this.setState({ + customHsUrl: hs_url || config.default_hs_url, + customIsUrl: is_url || config.default_is_url, + serverConfigVisible: (hs_url !== config.default_hs_url || + is_url !== config.default_is_url) + }); + this.onHSChosen(); - this.customHsUrl = config.default_hs_url; - this.customIsUrl = config.default_is_url; }, getHsUrl: function() { if (this.state.serverConfigVisible) { - return this.customHsUrl; + return this.state.customHsUrl; } else { return config.default_hs_url; } @@ -51,7 +58,7 @@ module.exports = React.createClass({ getIsUrl: function() { if (this.state.serverConfigVisible) { - return this.customIsUrl; + return this.state.customIsUrl; } else { return config.default_is_url; } @@ -60,7 +67,7 @@ module.exports = React.createClass({ onServerConfigVisibleChange: function(ev) { this.setState({ serverConfigVisible: ev.target.checked - }, this.onHsUrlChanged); + }, this.onHSChosen); }, /** @@ -77,16 +84,22 @@ module.exports = React.createClass({ var newHsUrl = this.refs.serverConfig.getHsUrl().trim(); var newIsUrl = this.refs.serverConfig.getIsUrl().trim(); - if (newHsUrl == this.customHsUrl && - newIsUrl == this.customIsUrl) + if (newHsUrl == this.state.customHsUrl && + newIsUrl == this.state.customIsUrl) { return; } else { - this.customHsUrl = newHsUrl; - this.customIsUrl = newIsUrl; + this.setState({ + customHsUrl: newHsUrl, + customIsUrl: newIsUrl, + }); } + // XXX: why are we replacing the MatrixClientPeg here when we're about + // to do it again 1s later in the setTimeout to onHSChosen? -- matthew + // Commenting it out for now to see what breaks. + /* MatrixClientPeg.replaceUsingUrls( this.getHsUrl(), this.getIsUrl() @@ -95,6 +108,8 @@ module.exports = React.createClass({ hs_url: this.getHsUrl(), is_url: this.getIsUrl() }); + */ + // XXX: HSes do not have to offer password auth, so we // need to update and maybe show a different component // when a new HS is entered. @@ -121,7 +136,7 @@ module.exports = React.createClass({
diff --git a/src/skins/vector/views/templates/Register.js b/src/skins/vector/views/templates/Register.js index f3c81737a2..28ae9ffc63 100644 --- a/src/skins/vector/views/templates/Register.js +++ b/src/skins/vector/views/templates/Register.js @@ -29,15 +29,21 @@ module.exports = React.createClass({ displayName: 'Register', mixins: [RegisterController], - getInitialState: function() { - return { - serverConfigVisible: false - }; - }, - componentWillMount: function() { - this.customHsUrl = config.default_hs_url; - this.customIsUrl = config.default_is_url; + // TODO: factor out all localstorage stuff into its own home. + // This is common to Login, Register and MatrixClientPeg + var localStorage = window.localStorage; + if (localStorage) { + var hs_url = localStorage.getItem("mx_hs_url"); + var is_url = localStorage.getItem("mx_is_url"); + } + + this.setState({ + customHsUrl: hs_url || config.default_hs_url, + customIsUrl: is_url || config.default_is_url, + serverConfigVisible: (hs_url !== config.default_hs_url || + is_url !== config.default_is_url) + }); }, getRegFormVals: function() { @@ -51,7 +57,7 @@ module.exports = React.createClass({ getHsUrl: function() { if (this.state.serverConfigVisible) { - return this.customHsUrl; + return this.state.customHsUrl; } else { return config.default_hs_url; } @@ -59,7 +65,7 @@ module.exports = React.createClass({ getIsUrl: function() { if (this.state.serverConfigVisible) { - return this.customIsUrl; + return this.state.customIsUrl; } else { return config.default_is_url; } @@ -72,8 +78,10 @@ module.exports = React.createClass({ }, onServerUrlChanged: function(newUrl) { - this.customHsUrl = this.refs.serverConfig.getHsUrl(); - this.customIsUrl = this.refs.serverConfig.getIsUrl(); + this.setState({ + customHsUrl: this.refs.serverConfig.getHsUrl(), + customIsUrl: this.refs.serverConfig.getIsUrl(), + }); this.forceUpdate(); }, @@ -99,7 +107,7 @@ module.exports = React.createClass({

From 9cbd4ae2e4901dd7e82db3a6d723793dfb4ea305 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Nov 2015 19:15:14 +0000 Subject: [PATCH 03/34] fix raging typos --- src/skins/vector/views/molecules/ServerConfig.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/views/molecules/ServerConfig.js b/src/skins/vector/views/molecules/ServerConfig.js index e48487aee8..c2b4a7d8e7 100644 --- a/src/skins/vector/views/molecules/ServerConfig.js +++ b/src/skins/vector/views/molecules/ServerConfig.js @@ -30,7 +30,10 @@ module.exports = React.createClass({ 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.", + 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 }); From f628591e2791dc96a41f6ff3c2af557f91204232 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Nov 2015 19:19:23 +0000 Subject: [PATCH 04/34] fix login page vertical scroll and centering --- src/skins/vector/css/templates/Login.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/templates/Login.css b/src/skins/vector/css/templates/Login.css index 93cb7433a4..e5884de7b2 100644 --- a/src/skins/vector/css/templates/Login.css +++ b/src/skins/vector/css/templates/Login.css @@ -17,6 +17,18 @@ limitations under the License. .mx_Login { width: 100%; height: 100%; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + + overflow: auto; } .mx_Login h2 { @@ -28,8 +40,8 @@ limitations under the License. .mx_Login_box { width: 300px; + min-height: 450px; margin: auto; - padding-top: 100px; } .mx_Login_logo { From 801154fd8afafb4da95096bfd07149bcdbfe8b04 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 00:05:35 +0100 Subject: [PATCH 05/34] apply jsx --- .../vector/views/molecules/ServerConfig.js | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/skins/vector/views/molecules/ServerConfig.js b/src/skins/vector/views/molecules/ServerConfig.js index c2b4a7d8e7..d6947727c8 100644 --- a/src/skins/vector/views/molecules/ServerConfig.js +++ b/src/skins/vector/views/molecules/ServerConfig.js @@ -29,13 +29,16 @@ module.exports = React.createClass({ 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 + 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, }); }, @@ -43,9 +46,9 @@ module.exports = React.createClass({ return (
- + - + What does this mean?
); From 19b31ff30df01c4a7037424f8c22fd6c862719bb Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 00:06:49 +0100 Subject: [PATCH 06/34] oops, make this actually work. --- src/skins/vector/views/templates/Login.js | 19 +++++++------- src/skins/vector/views/templates/Register.js | 26 +++++++++++++------- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/src/skins/vector/views/templates/Login.js b/src/skins/vector/views/templates/Login.js index 702043c6c8..e01bd1f7e2 100644 --- a/src/skins/vector/views/templates/Login.js +++ b/src/skins/vector/views/templates/Login.js @@ -29,23 +29,22 @@ module.exports = React.createClass({ displayName: 'Login', mixins: [LoginController], - componentWillMount: function() { + getInitialState: function() { // TODO: factor out all localstorage stuff into its own home. // This is common to Login, Register and MatrixClientPeg var localStorage = window.localStorage; + var hs_url, is_url; if (localStorage) { - var hs_url = localStorage.getItem("mx_hs_url"); - var is_url = localStorage.getItem("mx_is_url"); + hs_url = localStorage.getItem("mx_hs_url"); + is_url = localStorage.getItem("mx_is_url"); } - this.setState({ + return { customHsUrl: hs_url || config.default_hs_url, customIsUrl: is_url || config.default_is_url, - serverConfigVisible: (hs_url !== config.default_hs_url || - is_url !== config.default_is_url) - }); - - this.onHSChosen(); + serverConfigVisible: (hs_url && hs_url !== config.default_hs_url || + is_url && is_url !== config.default_is_url) + } }, getHsUrl: function() { @@ -147,7 +146,7 @@ module.exports = React.createClass({ return (
-
+

{ this.componentForStep('choose_hs') } diff --git a/src/skins/vector/views/templates/Register.js b/src/skins/vector/views/templates/Register.js index 28ae9ffc63..945d607c9e 100644 --- a/src/skins/vector/views/templates/Register.js +++ b/src/skins/vector/views/templates/Register.js @@ -29,21 +29,29 @@ module.exports = React.createClass({ displayName: 'Register', mixins: [RegisterController], - componentWillMount: function() { + getInitialState: function() { // TODO: factor out all localstorage stuff into its own home. // This is common to Login, Register and MatrixClientPeg var localStorage = window.localStorage; + var hs_url, is_url; if (localStorage) { - var hs_url = localStorage.getItem("mx_hs_url"); - var is_url = localStorage.getItem("mx_is_url"); + hs_url = localStorage.getItem("mx_hs_url"); + is_url = localStorage.getItem("mx_is_url"); } - this.setState({ + // make sure we have our MatrixClient set up whatever + // Useful for debugging only. + // MatrixClientPeg.replaceUsingUrls( + // hs_url || config.default_hs_url, + // is_url || config.default_is_url + // ); + + return { customHsUrl: hs_url || config.default_hs_url, customIsUrl: is_url || config.default_is_url, - serverConfigVisible: (hs_url !== config.default_hs_url || - is_url !== config.default_is_url) - }); + serverConfigVisible: (hs_url && hs_url !== config.default_hs_url || + is_url && is_url !== config.default_is_url) + } }, getRegFormVals: function() { @@ -98,12 +106,12 @@ module.exports = React.createClass({ return (
-
+



- +
Date: Wed, 11 Nov 2015 00:39:48 +0100 Subject: [PATCH 07/34] oops, refresh the login options on mount. make autofocus work too. --- src/skins/vector/views/templates/Login.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/views/templates/Login.js b/src/skins/vector/views/templates/Login.js index e01bd1f7e2..8bd9334e27 100644 --- a/src/skins/vector/views/templates/Login.js +++ b/src/skins/vector/views/templates/Login.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var sdk = require('matrix-react-sdk') var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); @@ -44,6 +45,17 @@ module.exports = React.createClass({ customIsUrl: is_url || config.default_is_url, serverConfigVisible: (hs_url && hs_url !== config.default_hs_url || is_url && is_url !== config.default_is_url) + }; + }, + + componentDidMount: function() { + this.onHSChosen(); + }, + + componentDidUpdate: function() { + if (!this.state.focusFired && this.refs.user) { + this.refs.user.focus(); + this.setState({ focusFired: true }); } }, @@ -146,7 +158,7 @@ module.exports = React.createClass({ return (
-
+

{ this.componentForStep('choose_hs') } From 5c92b09da1f9496cf74e2fa0c347d32e2d410400 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 00:56:44 +0100 Subject: [PATCH 08/34] improve spacing on login screen --- src/skins/vector/css/templates/Login.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/skins/vector/css/templates/Login.css b/src/skins/vector/css/templates/Login.css index e5884de7b2..11fba43fbc 100644 --- a/src/skins/vector/css/templates/Login.css +++ b/src/skins/vector/css/templates/Login.css @@ -41,6 +41,8 @@ limitations under the License. .mx_Login_box { width: 300px; min-height: 450px; + padding-top: 50px; + padding-bottom: 50px; margin: auto; } From adb7915b3e88de97da2a0b38291403313e0f4c93 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 00:56:51 +0100 Subject: [PATCH 09/34] suppress warning --- src/skins/vector/views/organisms/RoomSubList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/views/organisms/RoomSubList.js b/src/skins/vector/views/organisms/RoomSubList.js index a4fd5e9973..2eed9b748f 100644 --- a/src/skins/vector/views/organisms/RoomSubList.js +++ b/src/skins/vector/views/organisms/RoomSubList.js @@ -224,7 +224,7 @@ var RoomSubList = React.createClass({ room={ room } roomSubList={ self } key={ room.roomId } - collapsed={ self.props.collapsed } + collapsed={ self.props.collapsed || false} selected={ selected } unread={ self.props.activityMap[room.roomId] === 1 } highlight={ self.props.activityMap[room.roomId] === 2 } From bbd7124ac7c923f34608aefeb7083ecd875436ce Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 00:57:16 +0100 Subject: [PATCH 10/34] improve comment on how our dynamic height CSS works --- src/skins/vector/css/pages/MatrixChat.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css index e6d7d30b3e..b95f6a415c 100644 --- a/src/skins/vector/css/pages/MatrixChat.css +++ b/src/skins/vector/css/pages/MatrixChat.css @@ -97,7 +97,8 @@ limitations under the License. /* XXX: Hack: apparently if you try to nest a flex-box * within a non-flex-box within a flex-box, the height * of the innermost element gets miscalculated if the - * parents are both auto. + * parents are both auto. Height has to be auto here + * for RoomView to correctly fit when the Toolbar is shown. * Ideally we'd launch straight into the RoomView at this * point, but instead we fudge it and make the middlePanel * flex itself. From c2af09fbaa93a0e4d7f29590bfc8f92f8477f141 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 00:57:31 +0100 Subject: [PATCH 11/34] fix Spinner CSS a bit --- src/skins/vector/css/atoms/Spinner.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/skins/vector/css/atoms/Spinner.css b/src/skins/vector/css/atoms/Spinner.css index 1c8aa97d02..537ecca83d 100644 --- a/src/skins/vector/css/atoms/Spinner.css +++ b/src/skins/vector/css/atoms/Spinner.css @@ -21,5 +21,10 @@ limitations under the License. -webkit-justify-content: center; align-items: center; justify-content: center; + width: 100%; height: 100%; +} + +.mx_MatrixChat_middlePanel .mx_Spinner { + height: auto; } \ No newline at end of file From 5aa468f1e335f5752a718f669479edf57b404a47 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 01:59:56 +0100 Subject: [PATCH 12/34] skin simpleheader --- src/skins/vector/css/molecules/RoomHeader.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/molecules/RoomHeader.css index e86bab2e1a..5519c14de5 100644 --- a/src/skins/vector/css/molecules/RoomHeader.css +++ b/src/skins/vector/css/molecules/RoomHeader.css @@ -90,9 +90,9 @@ limitations under the License. .mx_RoomHeader_simpleHeader { line-height: 83px; - color: #76cfa6; - font-weight: 400; - font-size: 20px; + color: #454545; + font-size: 24px; + font-weight: bold; overflow: hidden; text-overflow: ellipsis; } @@ -102,7 +102,7 @@ limitations under the License. vertical-align: middle; height: 28px; color: #454545; - font-weight: 800; + font-weight: bold; font-size: 24px; padding-left: 19px; padding-right: 16px; From bc3ee949f573dbf2ed3ee9720ddb6bd741939adf Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 02:00:18 +0100 Subject: [PATCH 13/34] fix warning about missing thead --- src/skins/vector/views/organisms/RoomDirectory.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/views/organisms/RoomDirectory.js b/src/skins/vector/views/organisms/RoomDirectory.js index 05b2b9c282..28135bfeb4 100644 --- a/src/skins/vector/views/organisms/RoomDirectory.js +++ b/src/skins/vector/views/organisms/RoomDirectory.js @@ -135,7 +135,9 @@ module.exports = React.createClass({
- + + + { this.getRows(this.state.roomAlias) }
RoomAliasMembers
RoomAliasMembers
From 2c9273a86ce7009c0391f574c290259987786b8c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 02:00:51 +0100 Subject: [PATCH 14/34] avoid the initial sync from clobbering the location bar --- src/vector/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index 87cbd0b661..115d1de921 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -99,13 +99,15 @@ var lastLoadedScreen = null; // This will be called whenever the SDK changes screens, // so a web page can update the URL bar appropriately. -var onNewScreen = function(screen) { +var onNewScreen = function(screen, onlyIfBlank) { if (!loaded) { lastLoadedScreen = screen; } else { - var hash = '#/' + screen; - lastLocationHashSet = hash; - window.location.hash = hash; + if (!onlyIfBlank || !window.location.hash) { + var hash = '#/' + screen; + lastLocationHashSet = hash; + window.location.hash = hash; + } } } From dd3427d8d0807c87fc556297b3e306c96ea95599 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 02:01:11 +0100 Subject: [PATCH 15/34] remove unused component --- src/skins/vector/views/molecules/MatrixToolbar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/skins/vector/views/molecules/MatrixToolbar.js b/src/skins/vector/views/molecules/MatrixToolbar.js index 361e39d6f0..5b613f563d 100644 --- a/src/skins/vector/views/molecules/MatrixToolbar.js +++ b/src/skins/vector/views/molecules/MatrixToolbar.js @@ -34,7 +34,6 @@ module.exports = React.createClass({ }, render: function() { - var EnableNotificationsButton = sdk.getComponent("atoms.EnableNotificationsButton"); return (
/!\ From 81128ef06e21805f0e860997c77c16c42bb9ca8a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 02:07:41 +0100 Subject: [PATCH 16/34] hopefully fix https://github.com/vector-im/vector-web/issues/226 --- src/controllers/organisms/RoomView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index 0c25b2a24c..31bce9fec6 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -325,7 +325,7 @@ module.exports = { if (this.refs.messageWrapper) { var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; var wasAtBottom = this.atBottom; - this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight; + this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight - 1; if (this.atBottom && !wasAtBottom) { this.forceUpdate(); // remove unread msg count } From 2fff6f4d5f9e731ab44732add7230fc16b3139b1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 02:31:17 +0100 Subject: [PATCH 17/34] fix spinner layout yet more --- src/skins/vector/css/atoms/Spinner.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/skins/vector/css/atoms/Spinner.css b/src/skins/vector/css/atoms/Spinner.css index 537ecca83d..b2a04607fc 100644 --- a/src/skins/vector/css/atoms/Spinner.css +++ b/src/skins/vector/css/atoms/Spinner.css @@ -23,6 +23,8 @@ limitations under the License. justify-content: center; width: 100%; height: 100%; + flex: 1; + -webkit-flex: 1; } .mx_MatrixChat_middlePanel .mx_Spinner { From 2cae5e7a00dbbfa095edf3fa8beae6cff6a1be04 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 11 Nov 2015 02:31:37 +0100 Subject: [PATCH 18/34] revert bad fix to managing history --- src/vector/index.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index 115d1de921..87cbd0b661 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -99,15 +99,13 @@ var lastLoadedScreen = null; // This will be called whenever the SDK changes screens, // so a web page can update the URL bar appropriately. -var onNewScreen = function(screen, onlyIfBlank) { +var onNewScreen = function(screen) { if (!loaded) { lastLoadedScreen = screen; } else { - if (!onlyIfBlank || !window.location.hash) { - var hash = '#/' + screen; - lastLocationHashSet = hash; - window.location.hash = hash; - } + var hash = '#/' + screen; + lastLocationHashSet = hash; + window.location.hash = hash; } } From c12c716dc033c7d23438b5f76cf55661df6be1da Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 12 Nov 2015 13:34:00 +0000 Subject: [PATCH 19/34] fix URLs on image --- src/skins/vector/views/organisms/RoomSubList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/views/organisms/RoomSubList.js b/src/skins/vector/views/organisms/RoomSubList.js index 2eed9b748f..35210b499a 100644 --- a/src/skins/vector/views/organisms/RoomSubList.js +++ b/src/skins/vector/views/organisms/RoomSubList.js @@ -265,7 +265,7 @@ var RoomSubList = React.createClass({ return connectDropTarget(

{ this.props.collapsed ? '' : this.props.label } - +

{ subList }
From c8a830616555d75385320dda1758604d2a47a4f1 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 12 Nov 2015 14:16:57 +0000 Subject: [PATCH 20/34] Display some sensible UI for non-mxc content URLs. --- src/skins/vector/views/molecules/MFileTile.js | 28 ++++++++----- .../vector/views/molecules/MImageTile.js | 39 +++++++++++++------ 2 files changed, 46 insertions(+), 21 deletions(-) diff --git a/src/skins/vector/views/molecules/MFileTile.js b/src/skins/vector/views/molecules/MFileTile.js index f7e8991f93..9180bd6b83 100644 --- a/src/skins/vector/views/molecules/MFileTile.js +++ b/src/skins/vector/views/molecules/MFileTile.js @@ -30,15 +30,25 @@ module.exports = React.createClass({ var content = this.props.mxEvent.getContent(); var cli = MatrixClientPeg.get(); - return ( - - + var httpUrl = cli.mxcUrlToHttp(content.url); + var text = this.presentableTextForFile(content); + + if (httpUrl) { + return ( + + + + ); + } else { + var extra = text ? ': '+text : ''; + return + Invalid file{extra} - ); + } }, }); diff --git a/src/skins/vector/views/molecules/MImageTile.js b/src/skins/vector/views/molecules/MImageTile.js index 0667dabd10..2f3b7a55db 100644 --- a/src/skins/vector/views/molecules/MImageTile.js +++ b/src/skins/vector/views/molecules/MImageTile.js @@ -73,18 +73,33 @@ module.exports = React.createClass({ var imgStyle = {}; if (thumbHeight) imgStyle['height'] = thumbHeight; - return ( - - - {content.body} - - - - ); + + + ); + } else if (content.body) { + return ( + + Image '{content.body}' cannot be displayed. + + ); + } else { + return ( + + This image cannot be displayed. + + ); + } }, }); From 1ac47f32fec72383fe2ba8a5a71f15fb9dd5b8d1 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 12 Nov 2015 17:18:22 +0000 Subject: [PATCH 21/34] Fix scrolling on browsers where gemini scrollbars don't kick in. --- src/controllers/organisms/RoomView.js | 64 +++++++++++--------- src/skins/vector/views/organisms/RoomView.js | 8 +-- 2 files changed, 41 insertions(+), 31 deletions(-) diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index 31bce9fec6..5a76c1d681 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -60,12 +60,12 @@ module.exports = { }, componentWillUnmount: function() { - if (this.refs.messageWrapper) { - var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper); - messageWrapper.removeEventListener('drop', this.onDrop); - messageWrapper.removeEventListener('dragover', this.onDragOver); - messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd); - messageWrapper.removeEventListener('dragend', this.onDragLeaveOrEnd); + if (this.refs.messagePanel) { + var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel); + messagePanel.removeEventListener('drop', this.onDrop); + messagePanel.removeEventListener('dragover', this.onDragOver); + messagePanel.removeEventListener('dragleave', this.onDragLeaveOrEnd); + messagePanel.removeEventListener('dragend', this.onDragLeaveOrEnd); } dis.unregister(this.dispatcherRef); if (MatrixClientPeg.get()) { @@ -98,10 +98,9 @@ module.exports = { // Call state has changed so we may be loading video elements // which will obscure the message log. // scroll to bottom - var messageWrapper = this.refs.messageWrapper; - if (messageWrapper) { - var messageWrapperScroll = ReactDOM.findDOMNode(messageWrapper).children[2]; - messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight; + var scrollNode = this._getScrollNode(); + if (scrollNode) { + scrollNode.scrollTop = scrollNode.scrollHeight; } } @@ -112,6 +111,17 @@ module.exports = { } }, + _getScrollNode: function() { + var panel = ReactDOM.findDOMNode(this.refs.messagePanel); + if (!panel) return null; + + if (panel.classList.contains('gm-prevented')) { + return panel; + } else { + return panel.children[2]; // XXX: Fragile! + } + }, + onSyncStateChange: function(state) { this.setState({ syncState: state @@ -138,11 +148,11 @@ module.exports = { if (this.state.joining) return; if (room.roomId != this.props.roomId) return; - if (this.refs.messageWrapper) { - var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; + var scrollNode = this._getScrollNode(); + if (scrollNode) { this.atBottom = ( - messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= - (messageWrapperScroll.clientHeight + 150) + scrollNode.scrollHeight - scrollNode.scrollTop <= + (scrollNode.clientHeight + 150) // 150? ); } @@ -225,15 +235,15 @@ module.exports = { }, componentDidMount: function() { - if (this.refs.messageWrapper) { - var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper); + if (this.refs.messagePanel) { + var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel); - messageWrapper.addEventListener('drop', this.onDrop); - messageWrapper.addEventListener('dragover', this.onDragOver); - messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd); - messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd); + messagePanel.addEventListener('drop', this.onDrop); + messagePanel.addEventListener('dragover', this.onDragOver); + messagePanel.addEventListener('dragleave', this.onDragLeaveOrEnd); + messagePanel.addEventListener('dragend', this.onDragLeaveOrEnd); - var messageWrapperScroll = messageWrapper.children[2]; + var messageWrapperScroll = this._getScrollNode(); messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight; @@ -244,9 +254,9 @@ module.exports = { }, componentDidUpdate: function() { - if (!this.refs.messageWrapper) return; + if (!this.refs.messagePanel) return; - var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; + var messageWrapperScroll = this._getScrollNode(); if (this.state.paginating && !this.waiting_for_paginate) { var heightGained = messageWrapperScroll.scrollHeight - this.oldScrollHeight; @@ -264,8 +274,8 @@ module.exports = { }, fillSpace: function() { - if (!this.refs.messageWrapper) return; - var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; + if (!this.refs.messagePanel) return; + var messageWrapperScroll = this._getScrollNode(); if (messageWrapperScroll.scrollTop < messageWrapperScroll.clientHeight && this.state.room.oldState.paginationToken) { this.setState({paginating: true}); @@ -322,8 +332,8 @@ module.exports = { }, onMessageListScroll: function(ev) { - if (this.refs.messageWrapper) { - var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; + if (this.refs.messagePanel) { + var messageWrapperScroll = this._getScrollNode(); var wasAtBottom = this.atBottom; this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight - 1; if (this.atBottom && !wasAtBottom) { diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js index 2169fb4f67..a3213a12ab 100644 --- a/src/skins/vector/views/organisms/RoomView.js +++ b/src/skins/vector/views/organisms/RoomView.js @@ -101,9 +101,9 @@ module.exports = React.createClass({ }, scrollToBottom: function() { - if (!this.refs.messageWrapper) return; - var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; - messageWrapper.scrollTop = messageWrapper.scrollHeight; + var scrollNode = this._getScrollNode(); + if (!scrollNode) return; + scrollNode.scrollTop = scrollNode.scrollHeight; }, render: function() { @@ -299,7 +299,7 @@ module.exports = React.createClass({ { conferenceCallNotification } { aux }
- +
{ fileDropTarget }
    From caa2fd97d1eabcb22479199d28efea9395c9723f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 13 Nov 2015 00:46:50 +0000 Subject: [PATCH 22/34] sacrifice dead goats to make gemini-scrollbars work on firefox 42 and chrome 48 and later. the problem is that flexbox interacts badly with gemini-scrollbars, as gemini looks at the offsetWidth of the container in order to make the width of its enclosed scrollable view = width+scrollbarwidth. The problem is that flexbox then sees that the scrollable view has expanded, and unhelpfully flexes the container to fit it. This fixes the problem by providing more explicit widths for the containers to stop them flexing. I'm not sure I want to know why we don't also see the same problem with heights. --- src/skins/vector/css/organisms/RoomView.css | 6 ++++-- src/skins/vector/css/pages/MatrixChat.css | 10 ++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index 191742f515..4a905ce703 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -107,12 +107,14 @@ limitations under the License. width: 100%; + /* specify width and margin in here rather than the wrapper otherwise gemini-scrollbars gets confused */ + max-width: 960px; + margin: auto; + overflow-y: auto; } .mx_RoomView_messageListWrapper { - max-width: 960px; - margin: auto; } .mx_RoomView_MessageList { diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css index b95f6a415c..f7c63e7891 100644 --- a/src/skins/vector/css/pages/MatrixChat.css +++ b/src/skins/vector/css/pages/MatrixChat.css @@ -71,8 +71,14 @@ limitations under the License. background-color: #eaf5f0; +/* + We can't use flex here as gemini-scrollbars chokes on the width calculation (on FF 42 and Chrome 48) + and you end up with double-scrollbars and an ever-increasing width. + -webkit-flex: 0 0 210px; flex: 0 0 210px; +*/ + width: 210px; } .mx_MatrixChat .mx_LeftPanel.collapsed { @@ -117,8 +123,12 @@ limitations under the License. -webkit-order: 3; order: 3; +/* Similarly, specify width explicitly otherwise gemini-scrollbars gets confused + -webkit-flex: 0 0 235px; flex: 0 0 235px; +*/ + width: 235px; } .mx_MatrixChat .mx_RightPanel.collapsed { From 04305460dbc8da802ae74175db686db63c7e7e31 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 13 Nov 2015 01:19:40 +0000 Subject: [PATCH 23/34] make firefox slightly happier --- src/skins/vector/css/organisms/RoomView.css | 4 ++-- src/skins/vector/css/pages/MatrixChat.css | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index 4a905ce703..dd1a917cef 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -105,10 +105,10 @@ limitations under the License. -webkit-flex: 1 1 0; flex: 1 1 0; - width: 100%; - /* specify width and margin in here rather than the wrapper otherwise gemini-scrollbars gets confused */ + min-width: 0px; max-width: 960px; + width: 100%; margin: auto; overflow-y: auto; diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css index f7c63e7891..c2f638f5cd 100644 --- a/src/skins/vector/css/pages/MatrixChat.css +++ b/src/skins/vector/css/pages/MatrixChat.css @@ -82,8 +82,11 @@ limitations under the License. } .mx_MatrixChat .mx_LeftPanel.collapsed { +/* -webkit-flex: 0 0 60px; flex: 0 0 60px; +*/ + width: 60px; } .mx_MatrixChat .mx_MatrixChat_middlePanel { @@ -132,6 +135,9 @@ limitations under the License. } .mx_MatrixChat .mx_RightPanel.collapsed { +/* -webkit-flex: 0 0 72px; flex: 0 0 72px; +*/ + width: 72px; } From 36b7deac356df3d2a4d1d6e7e184405318123b0b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 13 Nov 2015 01:42:09 +0000 Subject: [PATCH 24/34] clear unread message count more aggressively (and revert previous thinko) --- src/controllers/organisms/RoomView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index 5a76c1d681..e603198a72 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -335,7 +335,7 @@ module.exports = { if (this.refs.messagePanel) { var messageWrapperScroll = this._getScrollNode(); var wasAtBottom = this.atBottom; - this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight - 1; + this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight + 1; if (this.atBottom && !wasAtBottom) { this.forceUpdate(); // remove unread msg count } From 2cf0ceb260738eaa6a53061b5fb9f86ced18e751 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 13 Nov 2015 02:29:18 +0000 Subject: [PATCH 25/34] back out previous bodges to flexbox to make geminiscrollbar work in FF --- src/skins/vector/css/organisms/RoomView.css | 6 ++---- src/skins/vector/css/pages/MatrixChat.css | 16 ---------------- 2 files changed, 2 insertions(+), 20 deletions(-) diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index dd1a917cef..191742f515 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -105,16 +105,14 @@ limitations under the License. -webkit-flex: 1 1 0; flex: 1 1 0; - /* specify width and margin in here rather than the wrapper otherwise gemini-scrollbars gets confused */ - min-width: 0px; - max-width: 960px; width: 100%; - margin: auto; overflow-y: auto; } .mx_RoomView_messageListWrapper { + max-width: 960px; + margin: auto; } .mx_RoomView_MessageList { diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css index c2f638f5cd..b95f6a415c 100644 --- a/src/skins/vector/css/pages/MatrixChat.css +++ b/src/skins/vector/css/pages/MatrixChat.css @@ -71,22 +71,13 @@ limitations under the License. background-color: #eaf5f0; -/* - We can't use flex here as gemini-scrollbars chokes on the width calculation (on FF 42 and Chrome 48) - and you end up with double-scrollbars and an ever-increasing width. - -webkit-flex: 0 0 210px; flex: 0 0 210px; -*/ - width: 210px; } .mx_MatrixChat .mx_LeftPanel.collapsed { -/* -webkit-flex: 0 0 60px; flex: 0 0 60px; -*/ - width: 60px; } .mx_MatrixChat .mx_MatrixChat_middlePanel { @@ -126,18 +117,11 @@ limitations under the License. -webkit-order: 3; order: 3; -/* Similarly, specify width explicitly otherwise gemini-scrollbars gets confused - -webkit-flex: 0 0 235px; flex: 0 0 235px; -*/ - width: 235px; } .mx_MatrixChat .mx_RightPanel.collapsed { -/* -webkit-flex: 0 0 72px; flex: 0 0 72px; -*/ - width: 72px; } From 20f84ce322976ee186ab8089f9dd9dab59ac5da0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 13 Nov 2015 02:29:59 +0000 Subject: [PATCH 26/34] override gemini-scrollbar CSS to stop the scrollview from pushing out the container, causing FF's flexbox to adapt and keep growing infinitely --- src/skins/vector/css/common.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index a68d190d6a..63d2ac5b75 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -47,6 +47,14 @@ a:visited { color: #76cfa6; } +/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48. + Stop the scrollbar view from pushing out the container's overall sizing, which causes + flexbox to adapt to the new size and cause the view to keep growing. + */ +.gm-scrollbar-container .gm-scroll-view { + position: absolute; +} + .mx_ContextualMenu_background { position: fixed; top: 0; From f8d628d3367bb8c22003419b7918b988adba8b22 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 13 Nov 2015 02:44:46 +0000 Subject: [PATCH 27/34] fix composer avatar --- src/skins/vector/css/atoms/MemberAvatar.css | 6 +++--- src/skins/vector/css/molecules/MessageComposer.css | 4 ++-- src/skins/vector/views/atoms/MemberAvatar.js | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/skins/vector/css/atoms/MemberAvatar.css b/src/skins/vector/css/atoms/MemberAvatar.css index 97dae35f7c..3cc6e94b22 100644 --- a/src/skins/vector/css/atoms/MemberAvatar.css +++ b/src/skins/vector/css/atoms/MemberAvatar.css @@ -15,8 +15,8 @@ limitations under the License. */ .mx_MemberAvatar { + position: relative; z-index: 20; - border-radius: 20px; } .mx_MemberAvatar_initial { @@ -25,6 +25,6 @@ limitations under the License. text-align: center; } -.mx_MemberAvatar_wrapper { - position: relative; +.mx_MemberAvatar_image { + border-radius: 20px; } \ No newline at end of file diff --git a/src/skins/vector/css/molecules/MessageComposer.css b/src/skins/vector/css/molecules/MessageComposer.css index 2dbe05b541..bd93f630a7 100644 --- a/src/skins/vector/css/molecules/MessageComposer.css +++ b/src/skins/vector/css/molecules/MessageComposer.css @@ -36,9 +36,9 @@ limitations under the License. height: 70px; } -.mx_MessageComposer .mx_MessageComposer_avatar img { +.mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar { + display: block; margin-top: 18px; - border-radius: 20px; } .mx_MessageComposer_input { diff --git a/src/skins/vector/views/atoms/MemberAvatar.js b/src/skins/vector/views/atoms/MemberAvatar.js index c4153b85c3..7d96a91f82 100644 --- a/src/skins/vector/views/atoms/MemberAvatar.js +++ b/src/skins/vector/views/atoms/MemberAvatar.js @@ -49,18 +49,18 @@ module.exports = React.createClass({ initial = this.props.member.name[1].toUpperCase(); return ( - + { initial } - ); } return ( - ); From 2fabf69ce321db1dbf40f9907550009f314778f5 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 13 Nov 2015 09:28:56 +0000 Subject: [PATCH 28/34] Mark up the avatar initials so they're not read out by screen readers --- src/skins/vector/css/atoms/MemberAvatar.css | 3 ++- src/skins/vector/views/atoms/MemberAvatar.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/atoms/MemberAvatar.css b/src/skins/vector/css/atoms/MemberAvatar.css index 3cc6e94b22..ed324e9cef 100644 --- a/src/skins/vector/css/atoms/MemberAvatar.css +++ b/src/skins/vector/css/atoms/MemberAvatar.css @@ -23,8 +23,9 @@ limitations under the License. position: absolute; color: #fff; text-align: center; + speak: none; } .mx_MemberAvatar_image { border-radius: 20px; -} \ No newline at end of file +} diff --git a/src/skins/vector/views/atoms/MemberAvatar.js b/src/skins/vector/views/atoms/MemberAvatar.js index 7d96a91f82..c8606cd72e 100644 --- a/src/skins/vector/views/atoms/MemberAvatar.js +++ b/src/skins/vector/views/atoms/MemberAvatar.js @@ -50,7 +50,7 @@ module.exports = React.createClass({ return ( - From ff59fc84c5c3bcb57e58beb8a0ba441148c6d052 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 13 Nov 2015 18:25:10 +0000 Subject: [PATCH 29/34] don't bold the selected room just because, as it bold = new msgs --- src/skins/vector/css/molecules/RoomTile.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css index 4bc71cb801..37d2e1b62e 100644 --- a/src/skins/vector/css/molecules/RoomTile.css +++ b/src/skins/vector/css/molecules/RoomTile.css @@ -104,9 +104,7 @@ limitations under the License. } .mx_RoomTile_unread, -.mx_RoomTile_highlight, -.mx_RoomTile_selected -{ +.mx_RoomTile_highlight { font-weight: bold; } From 2fd7196cdd1e325849646a3f9f29ae0df8f59ac6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 13 Nov 2015 18:36:46 +0000 Subject: [PATCH 30/34] also handle a11y on room avatars --- src/skins/vector/css/atoms/RoomAvatar.css | 1 + src/skins/vector/views/atoms/RoomAvatar.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/atoms/RoomAvatar.css b/src/skins/vector/css/atoms/RoomAvatar.css index f54a93eeec..01425190ee 100644 --- a/src/skins/vector/css/atoms/RoomAvatar.css +++ b/src/skins/vector/css/atoms/RoomAvatar.css @@ -22,4 +22,5 @@ limitations under the License. color: #fff; text-align: center; font-weight: normal ! important; + speak: none; } \ No newline at end of file diff --git a/src/skins/vector/views/atoms/RoomAvatar.js b/src/skins/vector/views/atoms/RoomAvatar.js index f61b6cec12..bdd28bad59 100644 --- a/src/skins/vector/views/atoms/RoomAvatar.js +++ b/src/skins/vector/views/atoms/RoomAvatar.js @@ -57,7 +57,7 @@ module.exports = React.createClass({ return ( - From 063e387a65c1eca3aa2ec751bf65740cf1c63314 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 13 Nov 2015 23:51:40 +0000 Subject: [PATCH 31/34] turn off the placeholder drag & drop function to get an opinion from folks --- src/skins/vector/views/molecules/RoomTile.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/skins/vector/views/molecules/RoomTile.js b/src/skins/vector/views/molecules/RoomTile.js index 471bd8a11f..31dead455c 100644 --- a/src/skins/vector/views/molecules/RoomTile.js +++ b/src/skins/vector/views/molecules/RoomTile.js @@ -43,9 +43,9 @@ var roomTileSource = { originalList: props.roomSubList, originalIndex: props.roomSubList.findRoomTile(props.room).index, targetList: props.roomSubList, // at first target is same as original - lastTargetRoom: null, - lastYOffset: null, - lastYDelta: null, + // lastTargetRoom: null, + // lastYOffset: null, + // lastYDelta: null, }; if (props.roomSubList.debug) console.log("roomTile beginDrag for " + item.room.roomId); @@ -123,7 +123,7 @@ var roomTileTarget = { hover: function(props, monitor) { var item = monitor.getItem(); - var off = monitor.getClientOffset(); + //var off = monitor.getClientOffset(); // console.log("hovering on room " + props.room.roomId + ", isOver=" + monitor.isOver()); //console.log("item.targetList=" + item.targetList + ", roomSubList=" + props.roomSubList); @@ -150,7 +150,7 @@ var roomTileTarget = { // stop us from flickering between our droptarget and the previous room. // whenever the cursor changes direction we have to reset the flicker-damping. - +/* var yDelta = off.y - item.lastYOffset; if ((yDelta > 0 && item.lastYDelta < 0) || @@ -170,6 +170,7 @@ var roomTileTarget = { if (yDelta) item.lastYDelta = yDelta; item.lastYOffset = off.y; +*/ } else if (switchedTarget) { if (!props.roomSubList.findRoomTile(item.room).room) { @@ -216,10 +217,12 @@ var RoomTile = React.createClass({ // //console.log("room " + this.props.room.roomId + " has dropTarget clientOffset " + this.props.clientOffset.x + "," + this.props.clientOffset.y); // } +/* if (this.props.room._dragging) { var RoomDropTarget = sdk.getComponent("molecules.RoomDropTarget"); return ; } +*/ var myUserId = MatrixClientPeg.get().credentials.userId; var me = this.props.room.currentState.members[myUserId]; From 1c7e7cd111d457829f11a18d431f2cf314b6db5e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 14 Nov 2015 00:13:13 +0000 Subject: [PATCH 32/34] kill stale z-index param --- src/skins/vector/css/atoms/MemberAvatar.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/skins/vector/css/atoms/MemberAvatar.css b/src/skins/vector/css/atoms/MemberAvatar.css index ed324e9cef..34ef139364 100644 --- a/src/skins/vector/css/atoms/MemberAvatar.css +++ b/src/skins/vector/css/atoms/MemberAvatar.css @@ -16,7 +16,6 @@ limitations under the License. .mx_MemberAvatar { position: relative; - z-index: 20; } .mx_MemberAvatar_initial { From ef181f55d5d16bc78f4d9dd323393b94465025c0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 14 Nov 2015 00:14:41 +0000 Subject: [PATCH 33/34] make modal dialogs higher in z-index --- src/skins/vector/css/common.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 63d2ac5b75..121fbca7a4 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -107,7 +107,7 @@ a:visited { height: 100%; background-color: #000; opacity: 0.2; - z-index: 2000; + z-index: 4000; } .mx_Dialog_wrapper { @@ -132,7 +132,7 @@ a:visited { background-color: #fff; color: #747474; text-align: center; - z-index: 2010; + z-index: 4010; font-weight: 300; font-size: 16px; position: relative; From bf91155e6080ca9c0514ad04dcb625f74e5d38aa Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 15 Nov 2015 03:36:10 +0000 Subject: [PATCH 34/34] implement multiline input --- .../vector/css/molecules/MessageComposer.css | 15 ++++++--------- src/skins/vector/css/organisms/RoomView.css | 4 ++-- .../vector/views/molecules/MessageComposer.js | 2 +- src/skins/vector/views/organisms/RoomView.js | 2 +- 4 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/skins/vector/css/molecules/MessageComposer.css b/src/skins/vector/css/molecules/MessageComposer.css index bd93f630a7..fbbeef6455 100644 --- a/src/skins/vector/css/molecules/MessageComposer.css +++ b/src/skins/vector/css/molecules/MessageComposer.css @@ -16,29 +16,25 @@ limitations under the License. .mx_MessageComposer_wrapper { max-width: 960px; - height: 70px; vertical-align: middle; margin: auto; - background-color: #fff; border-top: 2px solid #e1dddd; } .mx_MessageComposer_row { display: table-row; width: 100%; - height: 70px; } .mx_MessageComposer .mx_MessageComposer_avatar { display: table-cell; padding-left: 10px; padding-right: 28px; - height: 70px; + vertical-align: middle; } .mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar { display: block; - margin-top: 18px; } .mx_MessageComposer_input { @@ -49,17 +45,18 @@ limitations under the License. } .mx_MessageComposer_input textarea { + display: block; font-size: 15px; width: 100%; - height: 1.2em; - padding-top: 0.7em; - padding-bottom: 0.7em; + padding: 0px; + margin-top: 6px; + margin-bottom: 6px; border: 0px; resize: none; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; - box-shadow: none; + box-shadow: none; /* needed for FF */ font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif; diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index 191742f515..94fff29068 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -236,8 +236,8 @@ limitations under the License. order: 5; width: 100%; - -webkit-flex: 0 0 70px; - flex: 0 0 70px; + -webkit-flex: 0; + flex: 0; margin-right: 2px; } diff --git a/src/skins/vector/views/molecules/MessageComposer.js b/src/skins/vector/views/molecules/MessageComposer.js index c75aaa142c..2f0e7ac57f 100644 --- a/src/skins/vector/views/molecules/MessageComposer.js +++ b/src/skins/vector/views/molecules/MessageComposer.js @@ -61,7 +61,7 @@ module.exports = React.createClass({
-