From 681245584e97efd3b29f0720b4cbb0d629e14ac1 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 8 Sep 2017 19:50:34 +0200 Subject: [PATCH] Remove `Login` and `Registration` tabs and consolidate into one panel --- CHANGES.md | 1 + css/converse.css | 18 ++++++----- css/inverse.css | 53 +++++++++++++++++--------------- sass/_controlbox.scss | 26 ++++++++-------- sass/inverse/_controlbox.scss | 27 ++++++++++------ sass/pure/_buttons.scss | 2 +- src/converse-controlbox.js | 23 +++----------- src/converse-inverse.js | 11 +------ src/converse-register.js | 2 -- src/templates/brand_heading.html | 2 +- src/templates/login_panel.html | 13 +++++--- 11 files changed, 87 insertions(+), 91 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index e63480b4b..b9f1dcf42 100755 --- a/CHANGES.md +++ b/CHANGES.md @@ -4,6 +4,7 @@ - Don't hang indefinitely and provide nicer error messages when a connection can't be established. +- Remove `Login` and `Registration` tabs and consolidate into one panel. ## 3.2.1 (2017-08-29) diff --git a/css/converse.css b/css/converse.css index 96f91c210..75f9e18fe 100644 --- a/css/converse.css +++ b/css/converse.css @@ -1044,7 +1044,7 @@ padding: 0.5em 1em; color: #444; /* rgba not supported (IE 8) */ - color: rgba(0, 0, 0, 0.8); + color: rgba(0, 0, 0, 0.6); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ @@ -1983,6 +1983,15 @@ font-size: 85%; } #conversejs #controlbox #converse-register .instructions:hover { color: #777; } + #conversejs #controlbox .conn-feedback { + padding-top: 2em; } + #conversejs #controlbox .conn-feedback p { + color: #578EA9; + padding-bottom: 0.5em; } + #conversejs #controlbox .conn-feedback p.feedback-subject.error { + font-weight: bold; } + #conversejs #controlbox .conn-feedback p.error { + color: #A53214; } #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { margin-top: 2em; } #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon { @@ -1990,13 +1999,6 @@ white-space: normal; } #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit { color: #3AA569; } - #conversejs #controlbox #converse-register .conn-feedback p, #conversejs #controlbox #converse-login .conn-feedback p { - color: #578EA9; - padding-bottom: 0.5em; } - #conversejs #controlbox #converse-register .conn-feedback p.feedback-subject.error, #conversejs #controlbox #converse-login .conn-feedback p.feedback-subject.error { - font-weight: bold; } - #conversejs #controlbox #converse-register .conn-feedback p.error, #conversejs #controlbox #converse-login .conn-feedback p.error { - color: #A53214; } #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { width: 100%; margin: 0.5em 0; } diff --git a/css/inverse.css b/css/inverse.css index eabad4506..3fed96e7f 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -1044,7 +1044,7 @@ padding: 0.5em 1em; color: #444; /* rgba not supported (IE 8) */ - color: rgba(0, 0, 0, 0.8); + color: rgba(0, 0, 0, 0.6); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ @@ -2051,6 +2051,15 @@ body { font-size: 85%; } #conversejs #controlbox #converse-register .instructions:hover { color: #777; } + #conversejs #controlbox .conn-feedback { + padding-top: 2em; } + #conversejs #controlbox .conn-feedback p { + color: #578EA9; + padding-bottom: 0.5em; } + #conversejs #controlbox .conn-feedback p.feedback-subject.error { + font-weight: bold; } + #conversejs #controlbox .conn-feedback p.error { + color: #A53214; } #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { margin-top: 2em; } #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon { @@ -2058,13 +2067,6 @@ body { white-space: normal; } #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit { color: #3AA569; } - #conversejs #controlbox #converse-register .conn-feedback p, #conversejs #controlbox #converse-login .conn-feedback p { - color: #578EA9; - padding-bottom: 0.5em; } - #conversejs #controlbox #converse-register .conn-feedback p.feedback-subject.error, #conversejs #controlbox #converse-login .conn-feedback p.feedback-subject.error { - font-weight: bold; } - #conversejs #controlbox #converse-register .conn-feedback p.error, #conversejs #controlbox #converse-login .conn-feedback p.error { - color: #A53214; } #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input { width: 100%; margin: 0.5em 0; } @@ -2351,16 +2353,21 @@ body { width: 200px; float: left; margin: 0; } - #conversejs #controlbox #login-dialog .brand-heading, #conversejs #controlbox #register .brand-heading { + #conversejs #controlbox #login-dialog .brand-heading { font-size: 600%; - margin: 10% 0 0 0; + margin: 0.5em 0 0 0; + opacity: 0.8; color: #387592; } - #conversejs #controlbox #login-dialog .converse-form, #conversejs #controlbox #register .converse-form { - margin: 4em 30% 0 30%; } + #conversejs #controlbox #login-dialog .brand-subtitle { + font-size: 90%; } + #conversejs #controlbox #login-dialog .register-account { + font-weight: bold; } #conversejs #controlbox.fullscreen { width: 100%; } #conversejs #controlbox.fullscreen .box-flyout { width: 100%; } + #conversejs #controlbox.fullscreen .box-flyout .controlbox-head { + background-color: white; } #conversejs #controlbox .box-flyout { border: 0; min-width: 250px; @@ -2371,18 +2378,16 @@ body { height: 63px; padding: 6px 0 6px 0; margin-top: 0.5em; } - #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { - margin: 30%; - margin-top: 15%; } - #conversejs #controlbox #converse-register #available-chatrooms, #conversejs #controlbox #converse-login #available-chatrooms { - padding: 0 1em 2em 1em; } - #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label { - margin: 1em 0; } - #conversejs #controlbox #converse-register input[type=submit], - #conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit], - #conversejs #controlbox #converse-login input[type=button] { - width: auto; - margin: 1.5em 1em 0 0; } + #conversejs #controlbox #converse-register { + margin: 4em 30% 0 30%; } + #conversejs #controlbox #converse-login { + margin: 2em 30% 0 30%; } + #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label { + margin: 1em 0; } + #conversejs #controlbox #converse-register input[type=submit], + #conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit], + #conversejs #controlbox #converse-login input[type=button] { + width: auto; } #conversejs #controlbox #controlbox-tabs { /* single tab */ } #conversejs #controlbox #controlbox-tabs li { diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss index 642732576..e4b5f8956 100644 --- a/sass/_controlbox.scss +++ b/sass/_controlbox.scss @@ -104,6 +104,20 @@ } } + .conn-feedback { + padding-top: 2em; + p { + color: $controlbox-head-color; + padding-bottom: 0.5em; + &.feedback-subject.error { + font-weight: bold; + } + &.error { + color: $error-color; + } + } + } + #converse-register, #converse-login { margin-top: 2em; .login-anon { @@ -113,18 +127,6 @@ .save-submit { color: $save-button-color; } - .conn-feedback { - p { - color: $controlbox-head-color; - padding-bottom: 0.5em; - &.feedback-subject.error { - font-weight: bold; - } - &.error { - color: $error-color; - } - } - } input { width: 100%; margin: 0.5em 0; diff --git a/sass/inverse/_controlbox.scss b/sass/inverse/_controlbox.scss index fef9de78a..d4846931a 100644 --- a/sass/inverse/_controlbox.scss +++ b/sass/inverse/_controlbox.scss @@ -5,14 +5,18 @@ float: left; margin: 0; - #login-dialog, #register { + #login-dialog { .brand-heading { font-size: 600%; - margin: 10% 0 0 0; + margin: 0.5em 0 0 0; + opacity: 0.8; color: $blue; } - .converse-form { - margin: 4em 30% 0 30%; + .brand-subtitle { + font-size: 90%; + } + .register-account { + font-weight: bold; } } @@ -20,6 +24,9 @@ width: 100%; .box-flyout { width: 100%; + .controlbox-head { + background-color: white; + } } } .box-flyout { @@ -34,19 +41,19 @@ padding: 6px 0 6px 0; margin-top: 0.5em; } + #converse-register { + margin: 4em 30% 0 30%; + } + #converse-login { + margin: 2em 30% 0 30%; + } #converse-register, #converse-login { - margin: 30%; - margin-top: 15%; - #available-chatrooms { - padding: 0 1em 2em 1em; - } .title, .instructions, label { margin: 1em 0; } input[type=submit], input[type=button] { width: auto; - margin: 1.5em 1em 0 0; } } #controlbox-tabs { diff --git a/sass/pure/_buttons.scss b/sass/pure/_buttons.scss index b9ab6e738..60fbd2a65 100644 --- a/sass/pure/_buttons.scss +++ b/sass/pure/_buttons.scss @@ -36,7 +36,7 @@ https://github.com/yahoo/pure/blob/master/LICENSE.md font-size: 100%; padding: 0.5em 1em; color: #444; /* rgba not supported (IE 8) */ - color: rgba(0, 0, 0, 0.80); /* rgba supported */ + color: rgba(0, 0, 0, 0.60); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ background-color: #E6E6E6; diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js index 63b6f1a58..6ff02fe18 100644 --- a/src/converse-controlbox.js +++ b/src/converse-controlbox.js @@ -20,7 +20,6 @@ "tpl!controlbox", "tpl!controlbox_toggle", "tpl!login_panel", - "tpl!login_tab", "tpl!search_contact", "tpl!status_option", "converse-chatview", @@ -40,7 +39,6 @@ tpl_controlbox, tpl_controlbox_toggle, tpl_login_panel, - tpl_login_tab, tpl_search_contact, tpl_status_option ) { @@ -269,17 +267,6 @@ return this; }, - showLoginPanel () { - if (!_.isUndefined(this.loginpanel)) { - this.renderLoginPanel(); - } else { - this.loginpanel.$el.find('input#jid').focus(); - if (!this.loginpanel.$el.is(':visible')) { - this.loginpanel.$el.show(); - } - } - }, - renderLoginPanel () { this.loginpanel = new _converse.LoginPanel({ '$parent': this.$el.find('.controlbox-panes'), @@ -404,20 +391,18 @@ 'conn_feedback_class': _converse.connfeedback.get('klass'), 'conn_feedback_subject': _converse.connfeedback.get('subject'), 'conn_feedback_message': _converse.connfeedback.get('message'), - 'label_username': __('XMPP Username:'), + 'label_username': __('Jabber ID:'), 'label_password': __('Password:'), 'label_anon_login': __('Click here to log in anonymously'), 'label_login': __('Log In'), - 'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@server'), + 'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'), 'placeholder_password': __('password') }) )); - this.$tabs = cfg.$parent.parent().find('#controlbox-tabs'); _converse.connfeedback.on('change', this.showConnectionFeedback, this); }, render () { - this.$tabs.append(tpl_login_tab({label_sign_in: __('Sign in')})); this.$el.find('input#jid').focus(); if (!this.$el.is(':visible')) { this.$el.show(); @@ -738,7 +723,7 @@ if (!jid || _.filter(jid.split('@')).length < 2) { this.el.querySelector('.search-xmpp div').innerHTML = this.generateAddContactHTML({ - error_message: __('Please enter a valid XMPP username'), + error_message: __('Please enter a valid XMPP address'), label_contact_username: __('e.g. user@example.org'), label_add: __('Add'), value: jid @@ -858,7 +843,7 @@ const view = _converse.chatboxviews.get('controlbox'); view.model.set({connected:false}); view.$('#controlbox-tabs').empty(); - view.showLoginPanel(); + view.renderLoginPanel(); }; _converse.on('disconnected', disconnect); diff --git a/src/converse-inverse.js b/src/converse-inverse.js index f39686fe0..71ab09ab8 100644 --- a/src/converse-inverse.js +++ b/src/converse-inverse.js @@ -63,20 +63,11 @@ return this; }, - renderRegistrationPanel () { - this.__super__.renderRegistrationPanel.apply(this, arguments); - if (this.__super__._converse.allow_registration) { - const el = document.getElementById('converse-register'); - el.parentNode.insertBefore(createBrandHeadingElement(), el); - } - return this; - }, - renderLoginPanel () { this.__super__.renderLoginPanel.apply(this, arguments); this.el.classList.add("fullscreen"); const el = document.getElementById('converse-login'); - el.parentNode.insertBefore(createBrandHeadingElement(), el); + el.parentNode.insertBefore(createBrandHeadingElement(), el.parentNode.firstChild); return this; } }, diff --git a/src/converse-register.js b/src/converse-register.js index 150d391a8..c4688fb1a 100644 --- a/src/converse-register.js +++ b/src/converse-register.js @@ -127,7 +127,6 @@ initialize (cfg) { this.reset(); this.$parent = cfg.$parent; - this.$tabs = cfg.$parent.parent().find('#controlbox-tabs'); this.registerHooks(); }, @@ -144,7 +143,6 @@ 'domain_placeholder': _converse.domain_placeholder }) )); - this.$tabs.append(tpl_register_tab({label_register: __('Register')})); return this; }, diff --git a/src/templates/brand_heading.html b/src/templates/brand_heading.html index ce20b2ef6..2abbb5796 100644 --- a/src/templates/brand_heading.html +++ b/src/templates/brand_heading.html @@ -1,4 +1,4 @@

inVerse

-

Open Source XMPP chat client

+

Open Source XMPP chat client

diff --git a/src/templates/login_panel.html b/src/templates/login_panel.html index 4be6b37d7..92934d0d3 100644 --- a/src/templates/login_panel.html +++ b/src/templates/login_panel.html @@ -1,11 +1,12 @@ +
+ + +
+
{[ if (auto_login) { ]}