Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Remove Login and Registration tabs and consolidate into one panel

Browse Source
This commit is contained in:
JC Brand 2017-09-08 19:50:34 +02:00
parent c4f4213bc7
commit 681245584e
11 changed files with 87 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -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)

18
css/converse.css
View File

@ -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; }

53
css/inverse.css
View File

@ -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 {

26
sass/_controlbox.scss
View File

@ -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;

27
sass/inverse/_controlbox.scss
View File

@ -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 {

2
sass/pure/_buttons.scss
View File

@ -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;

23
src/converse-controlbox.js
View File

@ -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);

11
src/converse-inverse.js
View File

@ -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;
}
},

2
src/converse-register.js
View File

@ -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;
},

2
src/templates/brand_heading.html
View File

@ -1,4 +1,4 @@
<span>
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<p><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<p class="brand-subtitle"><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<span>

13
src/templates/login_panel.html
View File

@ -1,11 +1,12 @@
<div class="conn-feedback">
<p class="feedback-subject {{ conn_feedback_class }}">{{ conn_feedback_subject }}</p>
<p class="feedback-message {{ conn_feedback_class }}">{{ conn_feedback_message }} </p>
</div>
<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
{[ if (auto_login) { ]}
<span class="spinner login-submit"/>
{[ } ]}
<div class="conn-feedback">
<p class="feedback-subject {{ conn_feedback_class }}">{{ conn_feedback_subject }}</p>
<p class="feedback-message {{ conn_feedback_class }}">{{ conn_feedback_message }} </p>
</div>
{[ if (!auto_login) { ]}
{[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
<label>{{{label_username}}}</label>
@ -24,3 +25,7 @@
{[ } ]}
{[ } ]}
</form>
<form class="pure-form pure-form-stacked converse-form" id="converse-register" method="post">
<p>Don't have a chat account? You can <a class="register-account">register an account</a></p>
</form>