From abe6fd2f60213a082cc890ab360f482dfd7238f1 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Sat, 26 Jan 2019 00:48:33 -0600 Subject: [PATCH] Rework `ServerConfig` to approach design The public server search box is left out for now, so this restyles the existing custom server inputs to more closely approximate the design. --- res/css/views/auth/_ServerConfig.scss | 26 +++--- src/components/views/auth/ServerConfig.js | 109 +++++++--------------- src/i18n/strings/en_EN.json | 9 +- 3 files changed, 50 insertions(+), 94 deletions(-) diff --git a/res/css/views/auth/_ServerConfig.scss b/res/css/views/auth/_ServerConfig.scss index 894ce19827..686f4b442c 100644 --- a/res/css/views/auth/_ServerConfig.scss +++ b/res/css/views/auth/_ServerConfig.scss @@ -14,23 +14,23 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_ServerConfig { - margin-top: 7px; +.mx_ServerConfig_fields { + display: flex; + margin: 1em 0; } -.mx_ServerConfig .mx_Login_field { - margin-top: 4px; - margin-bottom: 5px; +.mx_ServerConfig_fields .mx_Field { + margin: 0 5px; +} + +.mx_ServerConfig_fields .mx_Field:first-child { + margin-left: 0; +} + +.mx_ServerConfig_fields .mx_Field:last-child { + margin-right: 0; } .mx_ServerConfig_help:link { opacity: 0.8; - font-size: 13px; - font-weight: 300; - color: $primary-fg-color; } - -.mx_ServerConfig_selector { - text-align: center; - width: 302px; // for fr i18n -} \ No newline at end of file diff --git a/src/components/views/auth/ServerConfig.js b/src/components/views/auth/ServerConfig.js index e8359edea9..63331bf91b 100644 --- a/src/components/views/auth/ServerConfig.js +++ b/src/components/views/auth/ServerConfig.js @@ -60,23 +60,18 @@ module.exports = React.createClass({ getInitialState: function() { return { - hs_url: this.props.customHsUrl, - is_url: this.props.customIsUrl, - configVisible: (this.props.customHsUrl !== this.props.defaultHsUrl) || - (this.props.customIsUrl !== this.props.defaultIsUrl), + hsUrl: this.props.customHsUrl, + isUrl: this.props.customIsUrl, }; }, componentWillReceiveProps: function(newProps) { - if (newProps.customHsUrl === this.state.hs_url && - newProps.customIsUrl === this.state.is_url) return; + if (newProps.customHsUrl === this.state.hsUrl && + newProps.customIsUrl === this.state.isUrl) return; this.setState({ - hs_url: newProps.customHsUrl, - is_url: newProps.customIsUrl, - configVisible: - (newProps.customHsUrl !== newProps.defaultHsUrl) || - (newProps.customIsUrl !== newProps.defaultIsUrl), + hsUrl: newProps.customHsUrl, + isUrl: newProps.customIsUrl, }); this.props.onServerConfigChange({ hsUrl: newProps.customHsUrl, @@ -85,26 +80,26 @@ module.exports = React.createClass({ }, onHomeserverChanged: function(ev) { - this.setState({hs_url: ev.target.value}, () => { + this.setState({hsUrl: ev.target.value}, () => { this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => { - let hsUrl = this.state.hs_url.trim().replace(/\/$/, ""); + let hsUrl = this.state.hsUrl.trim().replace(/\/$/, ""); if (hsUrl === "") hsUrl = this.props.defaultHsUrl; this.props.onServerConfigChange({ - hsUrl: this.state.hs_url, - isUrl: this.state.is_url, + hsUrl: this.state.hsUrl, + isUrl: this.state.isUrl, }); }); }); }, onIdentityServerChanged: function(ev) { - this.setState({is_url: ev.target.value}, () => { + this.setState({isUrl: ev.target.value}, () => { this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, () => { - let isUrl = this.state.is_url.trim().replace(/\/$/, ""); + let isUrl = this.state.isUrl.trim().replace(/\/$/, ""); if (isUrl === "") isUrl = this.props.defaultIsUrl; this.props.onServerConfigChange({ - hsUrl: this.state.hs_url, - isUrl: this.state.is_url, + hsUrl: this.state.hsUrl, + isUrl: this.state.isUrl, }); }); }); @@ -117,75 +112,37 @@ module.exports = React.createClass({ return setTimeout(fn.bind(this), this.props.delayTimeMs); }, - onServerConfigVisibleChange: function(visible, ev) { - this.setState({ - configVisible: visible, - }); - if (!visible) { - this.props.onServerConfigChange({ - hsUrl: this.props.defaultHsUrl, - isUrl: this.props.defaultIsUrl, - }); - } else { - this.props.onServerConfigChange({ - hsUrl: this.state.hs_url, - isUrl: this.state.is_url, - }); - } - }, - showHelpPopup: function() { const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog'); Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog); }, render: function() { - const serverConfigStyle = {}; - serverConfigStyle.display = this.state.configVisible ? 'block' : 'none'; - - const toggleButton = ( -
- - -    - - -
- ); + const Field = sdk.getComponent('elements.Field'); return ( -
- { toggleButton } -
-
- - +

{_t("Other servers")}

+ {_t("Enter custom server URLs What does this mean?", {}, { + a: sub => + { sub } + , + })} +
+ - - + - - { _t("What does this mean?") } - + value={this.state.isUrl} + onChange={this.onIdentityServerChanged} + />
-
); }, }); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index e1bca55736..f4d3429835 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1194,11 +1194,10 @@ "If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?", "Email address (optional)": "Email address (optional)", "Mobile phone number (optional)": "Mobile phone number (optional)", - "Default server": "Default server", - "Custom server": "Custom server", - "Home server URL": "Home server URL", - "Identity server URL": "Identity server URL", - "What does this mean?": "What does this mean?", + "Other servers": "Other servers", + "Enter custom server URLs What does this mean?": "Enter custom server URLs What does this mean?", + "Homeserver URL": "Homeserver URL", + "Identity Server URL": "Identity Server URL", "Free": "Free", "Join millions for free on the largest public server": "Join millions for free on the largest public server", "Premium": "Premium",