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 a532d185..fb7558ad 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 42c2d1fd..7afac77f 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 1a094ec2..a10ba2a7 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 32315158..b1d8f28e 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 5f8e806d..24fa1e91 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 64f5b861..b63b477d 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 407e282a..b39d675f 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 8c4dc51d..05b2b9c2 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 dfab5b67..2169fb4f 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 6071f82e..ab376ea4 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 50b09178..192645dd 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 4490522e..f3c81737 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 192645dd..702043c6 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 f3c81737..28ae9ffc 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 e48487ae..c2b4a7d8 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 93cb7433..e5884de7 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 c2b4a7d8..d6947727 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 702043c6..e01bd1f7 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 28ae9ffc..945d607c 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 e01bd1f7..8bd9334e 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 e5884de7..11fba43f 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 a4fd5e99..2eed9b74 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 e6d7d30b..b95f6a41 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 1c8aa97d..537ecca8 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 e86bab2e..5519c14d 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 05b2b9c2..28135bfe 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 87cbd0b6..115d1de9 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 361e39d6..5b613f56 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 0c25b2a2..31bce9fe 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 537ecca8..b2a04607 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 115d1de9..87cbd0b6 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 2eed9b74..35210b49 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 f7e8991f..9180bd6b 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 0667dabd..2f3b7a55 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 31bce9fe..5a76c1d6 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 2169fb4f..a3213a12 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 191742f5..4a905ce7 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 b95f6a41..f7c63e78 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 4a905ce7..dd1a917c 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 f7c63e78..c2f638f5 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 5a76c1d6..e603198a 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 dd1a917c..191742f5 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 c2f638f5..b95f6a41 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 a68d190d..63d2ac5b 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 97dae35f..3cc6e94b 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 2dbe05b5..bd93f630 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 c4153b85..7d96a91f 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 3cc6e94b..ed324e9c 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 7d96a91f..c8606cd7 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 4bc71cb8..37d2e1b6 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 f54a93ee..01425190 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 f61b6cec..bdd28bad 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 471bd8a1..31dead45 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 ed324e9c..34ef1393 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 63d2ac5b..121fbca7 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 bd93f630..fbbeef64 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 191742f5..94fff290 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 c75aaa14..2f0e7ac5 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({
-