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

Styling changes now that we don't have tabs.

Browse Source
This commit is contained in:
JC Brand 2017-09-09 11:20:28 +02:00
parent 196a42dc50
commit 1613c0d7de
11 changed files with 95 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/converse.css
View File

@ -17,6 +17,7 @@
font-weight: normal;
font-style: normal; }
.icon-conversejs {
padding-right: 0.2em;
font-family: 'Converse-js';
speak: none;
font-style: normal;
@ -1927,6 +1928,10 @@
#conversejs #controlbox .controlbox-head {
border-top-left-radius: 0;
border-top-right-radius: 0; } }
#conversejs #controlbox.logged-out .controlbox-head {
background-color: white; }
#conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
color: #578EA9; }
#conversejs #controlbox form.search-xmpp-contact {
margin: 0;
padding-left: 5px;
@ -1983,15 +1988,19 @@
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 .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 #login-dialog .brand-heading {
font-size: 150%; }
#conversejs #controlbox #login-dialog .brand-name {
font-size: 120%; }
#conversejs #controlbox #login-dialog .register-account {
font-weight: bold; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin-top: 2em; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {

37
css/inverse.css
View File

@ -17,6 +17,7 @@
font-weight: normal;
font-style: normal; }
.icon-conversejs {
padding-right: 0.2em;
font-family: 'Converse-js';
speak: none;
font-style: normal;
@ -1995,6 +1996,10 @@ body {
#conversejs #controlbox .controlbox-head {
border-top-left-radius: 0;
border-top-right-radius: 0; } }
#conversejs #controlbox.logged-out .controlbox-head {
background-color: white; }
#conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
color: #578EA9; }
#conversejs #controlbox form.search-xmpp-contact {
margin: 0;
padding-left: 5px;
@ -2051,15 +2056,19 @@ 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 .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 #login-dialog .brand-heading {
font-size: 150%; }
#conversejs #controlbox #login-dialog .brand-name {
font-size: 120%; }
#conversejs #controlbox #login-dialog .register-account {
font-weight: bold; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin-top: 2em; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@ -2353,6 +2362,8 @@ body {
width: 200px;
float: left;
margin: 0; }
#conversejs #controlbox .conn-feedback {
padding-top: 2em; }
#conversejs #controlbox #login-dialog .brand-heading {
font-size: 600%;
margin: 0.5em 0 0 0;
@ -2360,13 +2371,11 @@ body {
color: #387592; }
#conversejs #controlbox #login-dialog .brand-subtitle {
font-size: 90%; }
#conversejs #controlbox #login-dialog .register-account {
font-weight: bold; }
#conversejs #controlbox.fullscreen {
#conversejs #controlbox.logged-out {
width: 100%; }
#conversejs #controlbox.fullscreen .box-flyout {
#conversejs #controlbox.logged-out .box-flyout {
width: 100%; }
#conversejs #controlbox.fullscreen .box-flyout .controlbox-head {
#conversejs #controlbox.logged-out .box-flyout .controlbox-head {
background-color: white; }
#conversejs #controlbox .box-flyout {
border: 0;

3
css/theme.css
View File

@ -20,9 +20,6 @@ h6 {
font-weight: 700;
letter-spacing: 1px;
}
h1 {
text-transform: uppercase;
}
p {
margin: 0 0 25px;
font-size: 18px;

2
dev.html
View File

@ -37,7 +37,7 @@
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
<h1 class="brand-heading"><i class="icon-conversejs"></i>converse</h1>
<p class="intro-text">Developer page.</p>
<p class="intro-text">
Converse.js will only work on this page if you have

2
index.html
View File

@ -67,7 +67,7 @@
<section class="intro" class="container">
<div class="row">
<h1 class="brand-heading"><i class="icon-conversejs"></i> Converse.js</h1>
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
<div class="col-md-8 col-md-offset-2">
<p class="intro-text">A free and open-source XMPP chat client in your browser</p>
<p>Now also available in a fullscreen version.

23
sass/_controlbox.scss
View File

@ -27,6 +27,16 @@
margin: 0;
padding: 6px 6px 6px 0;
}
&.logged-out {
.controlbox-head {
background-color: white;
.chatbox-btn {
color: $controlbox-head-color;
}
}
}
form.search-xmpp-contact {
margin: 0;
padding-left: 5px;
@ -105,7 +115,6 @@
}
.conn-feedback {
padding-top: 2em;
p {
color: $controlbox-head-color;
padding-bottom: 0.5em;
@ -118,6 +127,18 @@
}
}
#login-dialog {
.brand-heading {
font-size: 150%;
}
.brand-name {
font-size: 120%;
}
.register-account {
font-weight: bold;
}
}
#converse-register, #converse-login {
margin-top: 2em;
.login-anon {

1
sass/_fonts.scss
View File

@ -10,6 +10,7 @@
}
.icon-conversejs {
padding-right: 0.2em;
font-family: 'Converse-js';
speak: none;
font-style: normal;

9
sass/inverse/_controlbox.scss
View File

@ -5,6 +5,10 @@
float: left;
margin: 0;
.conn-feedback {
padding-top: 2em;
}
#login-dialog {
.brand-heading {
font-size: 600%;
@ -15,12 +19,9 @@
.brand-subtitle {
font-size: 90%;
}
.register-account {
font-weight: bold;
}
}
&.fullscreen {
&.logged-out {
width: 100%;
.box-flyout {
width: 100%;

17
src/converse-controlbox.js
View File

@ -12,6 +12,7 @@
"lodash.fp",
"tpl!add_contact_dropdown",
"tpl!add_contact_form",
"tpl!converse_brand_heading",
"tpl!change_status_message",
"tpl!chat_status",
"tpl!choose_status",
@ -31,6 +32,7 @@
fp,
tpl_add_contact_dropdown,
tpl_add_contact_form,
tpl_brand_heading,
tpl_change_status_message,
tpl_chat_status,
tpl_choose_status,
@ -267,12 +269,21 @@
return this;
},
createBrandHeadingElement () {
const div = document.createElement('div');
div.innerHTML = tpl_brand_heading();
return div.firstChild;
},
renderLoginPanel () {
this.loginpanel = new _converse.LoginPanel({
'$parent': this.$el.find('.controlbox-panes'),
'model': this
});
this.loginpanel.render();
this.el.classList.add("logged-out");
const el = document.getElementById('converse-login');
el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
return this;
},
@ -289,6 +300,7 @@
'model': _converse.xmppstatus
});
_converse.xmppstatusview.render();
this.el.classList.remove("logged-out");
},
close (ev) {
@ -415,6 +427,11 @@
const klass = _converse.connfeedback.get('klass');
function insert (text, el) {
el.textContent = text;
if (!text) {
el.classList.add('hidden');
} else {
el.classList.remove('hidden');
}
el.classList.remove('error');
if (klass) {
el.classList.add(klass);

24
src/converse-inverse.js
View File

@ -8,7 +8,7 @@
(function (root, factory) {
define(["converse-core",
"tpl!brand_heading",
"tpl!inverse_brand_heading",
"converse-chatview",
"converse-controlbox",
"converse-muc",
@ -18,12 +18,6 @@
"use strict";
const { Strophe, _ } = converse.env;
function createBrandHeadingElement () {
const div = document.createElement('div');
div.innerHTML = tpl_brand_heading();
return div.firstChild;
}
function isMessageToHiddenChat (_converse, message) {
const jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
const model = _converse.chatboxes.get(jid);
@ -57,18 +51,10 @@
},
ControlBoxView: {
renderContactsPanel () {
this.__super__.renderContactsPanel.apply(this, arguments);
this.el.classList.remove("fullscreen");
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.parentNode.firstChild);
return this;
createBrandHeadingElement () {
const div = document.createElement('div');
div.innerHTML = tpl_brand_heading();
return div.firstChild;
}
},

4
src/templates/login_panel.html
View File

@ -1,6 +1,6 @@
<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>
<p class="feedback-subject hidden {{{ conn_feedback_class }}}">{{{ conn_feedback_subject }}}</p>
<p class="feedback-message hidden {{{ conn_feedback_class }}}">{{{ conn_feedback_message }}}</p>
</div>
<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">