inverse: move brand heading into template

This commit is contained in:
JC Brand 2017-06-15 15:09:34 +02:00
parent 3181956b61
commit 7e62546d6f
5 changed files with 70 additions and 68 deletions

View File

@ -1482,25 +1482,24 @@ body {
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff; color: #ffffff;
background-color: #578EA9; } background-color: #578EA9; }
body .brand-heading {
div.content { font-size: 600%;
height: 100vh; margin-left: -10%; }
width: 100vw; body .brand-heading .icon-conversejs {
position: fixed; font-size: 88%; }
background-color: #578EA9; } body div.content {
div.content .inner-content { height: 100vh;
text-align: center; width: 100vw;
padding: 7%; position: fixed;
padding-left: -webkit-calc(5% + 250px); background-color: #578EA9; }
padding-left: calc(5% + 250px); } body div.content .inner-content {
div.content .inner-content .brand-heading { text-align: center;
font-size: 600%; padding: 7%;
margin-left: -10%; } padding-left: -webkit-calc(5% + 250px);
div.content .inner-content .brand-heading .icon-conversejs { padding-left: calc(5% + 250px); }
font-size: 88%; } body div.content .inner-content p.no-chats {
div.content .inner-content p.no-chats { padding-right: 10%;
padding-right: 10%; font-size: 120%; }
font-size: 120%; }
#conversejs { #conversejs {
width: 100vw; width: 100vw;
@ -2327,6 +2326,7 @@ div.content {
float: left; float: left;
margin: 0; } margin: 0; }
#conversejs #controlbox #login-dialog .brand-heading, #conversejs #controlbox #register .brand-heading { #conversejs #controlbox #login-dialog .brand-heading, #conversejs #controlbox #register .brand-heading {
font-size: 600%;
margin: 10% 0 0 0; margin: 10% 0 0 0;
color: #387592; } color: #387592; }
#conversejs #controlbox #login-dialog .converse-form, #conversejs #controlbox #register .converse-form { #conversejs #controlbox #login-dialog .converse-form, #conversejs #controlbox #register .converse-form {

View File

@ -7,6 +7,7 @@
#login-dialog, #register { #login-dialog, #register {
.brand-heading { .brand-heading {
font-size: 600%;
margin: 10% 0 0 0; margin: 10% 0 0 0;
color: $blue; color: $blue;
} }

View File

@ -1,32 +1,33 @@
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff; color: #ffffff;
background-color: $global-background-color;
}
div.content {
height: 100vh;
width: 100vw;
position: fixed;
background-color: $global-background-color; background-color: $global-background-color;
.inner-content { .brand-heading {
text-align: center; font-size: 600%;
padding: 7%; margin-left: -10%;
@include calc(padding-left, '5% + #{$controlbox-width}'); .icon-conversejs {
font-size: 88%;
.brand-heading {
font-size: 600%;
margin-left: -10%;
.icon-conversejs {
font-size: 88%;
}
} }
p.no-chats { }
padding-right: 10%;
font-size: 120%; div.content {
height: 100vh;
width: 100vw;
position: fixed;
background-color: $global-background-color;
.inner-content {
text-align: center;
padding: 7%;
@include calc(padding-left, '5% + #{$controlbox-width}');
p.no-chats {
padding-right: 10%;
font-size: 120%;
}
} }
} }
} }

View File

@ -4,21 +4,39 @@
// Copyright (c) 2012-2016, Jan-Carel Brand <jc@opkode.com> // Copyright (c) 2012-2016, Jan-Carel Brand <jc@opkode.com>
// Licensed under the Mozilla Public License (MPLv2) // Licensed under the Mozilla Public License (MPLv2)
// //
/*global Backbone, define, window */ /*global define */
(function (root, factory) { (function (root, factory) {
define(["converse-core", define(["converse-core",
"tpl!brand_heading",
"converse-chatview", "converse-chatview",
"converse-controlbox", "converse-controlbox",
"converse-muc", "converse-muc",
"converse-singleton" "converse-singleton"
], factory); ], factory);
}(this, function (converse) { }(this, function (converse, tpl_brand_heading) {
"use strict"; "use strict";
var $ = converse.env.jQuery, var $ = converse.env.jQuery,
Strophe = converse.env.Strophe, Strophe = converse.env.Strophe,
_ = converse.env._; _ = converse.env._;
function createBrandHeadingElement () {
var div = document.createElement('div');
div.innerHTML = tpl_brand_heading();
return div.firstChild;
}
function isMessageToHiddenChat (_converse, message) {
var jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
var model = _converse.chatboxes.get(jid);
if (!_.isNil(model)) {
return model.get('hidden');
}
// Not having a chat box is assume to be practically the same
// as it being hidden.
return true;
}
converse.plugins.add('converse-inverse', { converse.plugins.add('converse-inverse', {
overrides: { overrides: {
@ -37,7 +55,7 @@
shouldNotifyOfMessage: function (message) { shouldNotifyOfMessage: function (message) {
var _converse = this.__super__._converse; var _converse = this.__super__._converse;
var result = this.__super__.shouldNotifyOfMessage.apply(this, arguments); var result = this.__super__.shouldNotifyOfMessage.apply(this, arguments);
return result && _converse.isMessageToHiddenChat(message); return result && isMessageToHiddenChat(_converse, message);
}, },
ControlBoxView: { ControlBoxView: {
@ -50,11 +68,8 @@
renderRegistrationPanel: function () { renderRegistrationPanel: function () {
this.__super__.renderRegistrationPanel.apply(this, arguments); this.__super__.renderRegistrationPanel.apply(this, arguments);
// TODO: put into template
var div = document.createElement('div');
div.innerHTML = '<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>';
var el = document.getElementById('converse-register'); var el = document.getElementById('converse-register');
el.parentNode.insertBefore(div.firstChild, el); el.parentNode.insertBefore(createBrandHeadingElement(), el);
return this; return this;
}, },
@ -62,11 +77,8 @@
this.__super__.renderLoginPanel.apply(this, arguments); this.__super__.renderLoginPanel.apply(this, arguments);
this.el.classList.add("fullscreen"); this.el.classList.add("fullscreen");
// TODO: put into template
var div = document.createElement('div');
div.innerHTML = '<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>';
var el = document.getElementById('converse-login'); var el = document.getElementById('converse-login');
el.parentNode.insertBefore(div.firstChild, el); el.parentNode.insertBefore(createBrandHeadingElement(), el);
return this; return this;
} }
}, },
@ -85,8 +97,6 @@
}, },
initialize: function () { initialize: function () {
var _converse = this._converse;
this.updateSettings({ this.updateSettings({
chatview_avatar_height: 44, chatview_avatar_height: 44,
chatview_avatar_width: 44, chatview_avatar_width: 44,
@ -96,17 +106,6 @@
sounds_path: '/node_modules/converse.js/sounds/', // New default sounds_path: '/node_modules/converse.js/sounds/', // New default
sticky_controlbox: true, sticky_controlbox: true,
}); });
_converse.isMessageToHiddenChat = function (message) {
var jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
var model = _converse.chatboxes.get(jid);
if (!_.isNil(model)) {
return model.get('hidden');
}
// Not having a chat box is assume to be practically the same
// as it being hidden.
return true;
}
} }
}); });
})); }));

View File

@ -0,0 +1 @@
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>