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

Make background darker and add new logo

Browse Source
This commit is contained in:
JC Brand 2019-01-02 22:26:31 +01:00
parent bdc438db8e
commit aa274f41c2
9 changed files with 191 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
css/converse.css
View File

@ -9299,7 +9299,7 @@ readers do not read off random characters that represent icons */
#conversejs .invisible {
visibility: hidden !important; }
#conversejs, .converse-content {
#conversejs, #conversejs-bg, .converse-fullscreen {
--subdued-color: #A8ABA1;
--subdued-color-lighten-25-percent: #e6e7e4;
--chat-status-online: #3AA569;
@ -9313,7 +9313,7 @@ readers do not read off random characters that represent icons */
--link-color-darken-20-percent: #345566;
--link-color-lighten-10-percent: #79a5ba;
--dark-link-color: #206485;
--global-background-color: #578EA9;
--global-background-color: #397491;
--inverse-link-color: white;
--text-shadow-color: #FAFAFA;
--text-color: #666;
@ -9480,26 +9480,28 @@ readers do not read off random characters that represent icons */
--list-item-open-color: #444;
--list-item-open-hover-color: #444; }
body.reset {
margin: 0; }
body.converse-fullscreen {
margin: 0;
background-color: var(--global-background-color); }
.converse-brand {
#conversejs-bg .converse-brand {
display: flex;
justify-content: space-between;
margin-top: 15vh;
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 750ms;
-moz-animation-duration: 750ms;
animation-duration: 750ms;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease; }
.converse-brand__padding {
#conversejs-bg .converse-brand__padding {
position: relative;
width: 100%;
min-height: 1px;
@ -9507,57 +9509,63 @@ body.reset {
padding-left: 15px;
padding: 0; }
@media (min-width: 768px) {
.converse-brand__padding {
#conversejs-bg .converse-brand__padding {
flex: 0 0 33.33333%;
max-width: 33.33333%; } }
@media (min-width: 992px) {
.converse-brand__padding {
#conversejs-bg .converse-brand__padding {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 1200px) {
.converse-brand__padding {
#conversejs-bg .converse-brand__padding {
flex: 0 0 16.66667%;
max-width: 16.66667%; } }
.converse-brand__heading {
#conversejs-bg .converse-brand__heading {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
padding: 0; }
padding: 0;
display: flex;
justify-content: center;
margin: auto; }
@media (min-width: 768px) {
.converse-brand__heading {
#conversejs-bg .converse-brand__heading {
font-size: 4em;
flex: 0 0 66.66667%;
max-width: 66.66667%; } }
@media (min-width: 992px) {
.converse-brand__heading {
#conversejs-bg .converse-brand__heading {
font-size: 5em;
flex: 0 0 75%;
max-width: 75%; } }
@media (min-width: 1200px) {
.converse-brand__heading {
#conversejs-bg .converse-brand__heading {
font-size: 6em;
flex: 0 0 83.33333%;
max-width: 83.33333%; } }
#conversejs-bg .converse-brand__heading svg {
margin-top: 0.3em; }
.converse-brand__text {
#conversejs-bg .converse-brand__text {
color: #ffffff;
font-family: var(--branding-font);
font-weight: normal;
width: 50%;
margin: auto;
margin-top: 10%;
text-align: center; }
.converse-brand__byline {
font-size: var(--font-size-small);
width: 50%;
margin: auto;
text-align: center; }
.converse-brand__byline a {
text-decoration: none;
color: var(--chatroom-head-color-lighten-25-percent); }
text-align: center;
font-size: 140%;
margin-left: 0.2em; }
#conversejs-bg .converse-brand__text .byline {
margin: 0;
font-family: var(--heading-font);
font-size: 0.3em;
opacity: 0.55;
margin-bottom: 2em;
margin-left: -2.7em;
word-spacing: 5px; }
#conversejs-bg .converse-brand__text .subdued {
opacity: 0.25; }
#conversejs {
bottom: 0;

26
css/fullpage.css
View File

@ -1,26 +0,0 @@
body {
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
background-color: #578EA9;
}
.brand-heading {
font-size: 600%;
margin-left: -10%;
}
.icon-conversejs {
font-size: 88%;
}
.brand-heading div.content {
height: 100vh;
width: 100vw;
position: fixed;
background-color: #578EA9;
}
.brand-heading div.content .inner-content {
text-align: center;
padding: 7%;
}
p.no-chats {
padding-right: 10%;
font-size: 120%;
}

11
dev.html
View File

@ -9,22 +9,13 @@
<meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<script src="3rdparty/libsignal-protocol-javascript/dist/libsignal-protocol.js"></script>
<script src="dist/converse.js"></script>
</head>
<body class="reset">
<div class="converse-content">
<div class="inner-content converse-brand row">
<div class="converse-brand__padding"></div>
<div class="converse-brand__heading">
<div class="converse-brand__text"><i class="icon-conversejs"></i>Converse</div>
</div>
</div>
</div>
<div id="conversejs-bg"></div>
<script>
converse.initialize({
auto_away: 300,

35
dist/converse.js vendored
View File

@ -49153,8 +49153,10 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @converse/headless/converse-core */ "./src/headless/converse-core.js");
/* harmony import */ var templates_avatar_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! templates/avatar.svg */ "./src/templates/avatar.svg");
/* harmony import */ var templates_avatar_svg__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(templates_avatar_svg__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! templates/chatboxes.html */ "./src/templates/chatboxes.html");
/* harmony import */ var templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var templates_background_logo_html__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! templates/background_logo.html */ "./src/templates/background_logo.html");
/* harmony import */ var templates_background_logo_html__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(templates_background_logo_html__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! templates/chatboxes.html */ "./src/templates/chatboxes.html");
/* harmony import */ var templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_6__);
// Converse.js
// http://conversejs.org
//
@ -49166,6 +49168,7 @@ __webpack_require__.r(__webpack_exports__);
const _converse$env = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].env,
Backbone = _converse$env.Backbone,
_ = _converse$env._,
@ -49259,17 +49262,25 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
initialize() {
this.model.on("destroy", this.removeChat, this);
const bg = document.getElementById('conversejs-bg');
if (bg && !bg.innerHTML.trim()) {
bg.innerHTML = templates_background_logo_html__WEBPACK_IMPORTED_MODULE_5___default()();
}
const body = document.querySelector('body');
body.classList.add(`converse-${_converse.view_mode}`);
this.el.classList.add(`converse-${_converse.view_mode}`);
this.render();
},
render() {
try {
this.el.innerHTML = templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5___default()();
this.el.innerHTML = templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_6___default()();
} catch (e) {
this._ensureElement();
this.el.innerHTML = templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_5___default()();
this.el.innerHTML = templates_chatboxes_html__WEBPACK_IMPORTED_MODULE_6___default()();
}
this.row_el = this.el.querySelector('.row');
@ -92079,6 +92090,22 @@ return __p
/***/ }),
/***/ "./src/templates/background_logo.html":
/*!********************************************!*\
!*** ./src/templates/background_logo.html ***!
\********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
module.exports = function(o) {
var __t, __p = '';
__p += '<!-- src/templates/background_logo.html -->\n<div class="inner-content converse-brand row">\n <div class="converse-brand__padding"></div>\n <div class="converse-brand__heading">\n <svg height="200px"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n viewBox="0 0 364 364"\n version="1.1">\n <title>Logo Converse</title>\n <defs>\n <linearGradient id="gradient" x1="92.14" y1="27.64" x2="267.65" y2="331.62" gradientUnits="userSpaceOnUse">\n <stop offset="0" stop-color="#fff1d1"/>\n <stop offset="0.05" stop-color="#fae8c1"/>\n <stop offset="0.15" stop-color="#f0d5a1"/>\n <stop offset="0.27" stop-color="#e7c687"/>\n <stop offset="0.4" stop-color="#e1bb72"/>\n <stop offset="0.54" stop-color="#dcb264"/>\n <stop offset="0.71" stop-color="#daad5c"/>\n <stop offset="1" stop-color="#d9ac59"/>\n </linearGradient>\n <filter id="shadow">\n <feGaussianBlur in="SourceAlpha" stdDeviation="2.3" result="blur1"/>\n <feOffset in="blur1" dx="3" dy="3" result="blur2"/>\n <feColorMatrix in="blur2" type="matrix" result="blur3"\n values="1 0 0 0 0.1\n 0 1 0 0 0.1\n 0 0 1 0 0.1\n 0 0 0 1 0"/>\n <feMerge>\n <feMergeNode in="blur3"/>\n <feMergeNode in="SourceGraphic"/>\n </feMerge>\n </filter>\n </defs>\n <g filter="url(#shadow)">\n <path d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" fill="#d9ac59"/>\n <path d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" fill="url(#gradient)"/>\n </g>\n </svg>\n <span class="converse-brand__text">\n <span>converse<span class="subdued">.js</span></span>\n <p class="byline">messaging freedom</p>\n </span>\n </div>\n</div>\n';
return __p
};
/***/ }),
/***/ "./src/templates/bookmark.html":
/*!*************************************!*\
!*** ./src/templates/bookmark.html ***!

17
fullscreen.html
View File

@ -8,19 +8,11 @@
<script type="text/javascript" src="inverse-analytics.js"></script>
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=5" style="border:0;" alt="" /></p></noscript>
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
<script src="3rdparty/libsignal-protocol.js"></script>
<script src="dist/converse.js"></script>
</head>
<body class="reset">
<div class="converse-content" style="display:none">
<div class="inner-content converse-brand row">
<div class="converse-brand__padding"></div>
<div class="converse-brand__heading">
<div class="converse-brand__text"><i class="icon-conversejs"></i>Converse</div>
</div>
</div>
</div>
<body class="converse-fullscreen">
<div id="conversejs-bg"></div>
<script>
/*
@licstart
@ -49,7 +41,6 @@
For more information, please refer to <http://unlicense.org/>
@licend
*/
converse.initialize({
authentication: 'login',
@ -58,10 +49,6 @@
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
message_archiving: 'always',
view_mode: 'fullscreen'
}).then(function () {
setTimeout(function () {
document.querySelector('.converse-content').style = '';
}, 1000);
});
</script>
</body>

117
sass/_core.scss
View File

@ -6,67 +6,78 @@
@include animation-timing-function(ease);
}
body.reset {
body.converse-fullscreen {
margin: 0;
background-color: var(--global-background-color);
}
.converse-brand {
display: flex;
justify-content: space-between;
@include animation-name(fadein);
@include animation-fill-mode(forwards);
@include animation-duration(750ms);
@include animation-timing-function(ease);
}
#conversejs-bg {
.converse-brand {
display: flex;
justify-content: space-between;
margin-top: 15vh;
@include animation-name(fadein);
@include animation-fill-mode(forwards);
@include animation-duration(5s);
@include animation-timing-function(ease);
}
.converse-brand__padding {
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(4);
.converse-brand__padding {
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(4);
}
@include media-breakpoint-up(lg) {
@include make-col(3);
}
@include media-breakpoint-up(xl) {
@include make-col(2);
}
padding: 0;
}
@include media-breakpoint-up(lg) {
@include make-col(3);
}
@include media-breakpoint-up(xl) {
@include make-col(2);
}
padding: 0;
}
.converse-brand__heading {
@include make-col-ready();
@include media-breakpoint-up(md) {
font-size: 4em;
@include make-col(8);
.converse-brand__heading {
@include make-col-ready();
@include media-breakpoint-up(md) {
font-size: 4em;
@include make-col(8);
}
@include media-breakpoint-up(lg) {
font-size: 5em;
@include make-col(9);
}
@include media-breakpoint-up(xl) {
font-size: 6em;
@include make-col(10);
}
padding: 0;
display: flex;
justify-content: center;
margin: auto;
svg {
margin-top: 0.3em;
}
}
@include media-breakpoint-up(lg) {
font-size: 5em;
@include make-col(9);
}
@include media-breakpoint-up(xl) {
font-size: 6em;
@include make-col(10);
}
padding: 0;
}
.converse-brand__text {
font-family: var(--branding-font);
font-weight: normal;
width: 50%;
margin: auto;
margin-top: 10%;
text-align: center;
}
.converse-brand__byline {
font-size: var(--font-size-small);
width: 50%;
margin: auto;
text-align: center;
a {
text-decoration: none;
color: var(--chatroom-head-color-lighten-25-percent);
.converse-brand__text {
color: #ffffff;
font-family: var(--branding-font);
font-weight: normal;
text-align: center;
font-size: 140%;
margin-left: 0.2em;
.byline {
margin: 0;
font-family: var(--heading-font);
font-size: 0.3em;
opacity: 0.55;
margin-bottom: 2em;
margin-left: -2.7em;
word-spacing: 5px;
}
.subdued {
opacity: 0.25;
}
}
}

4
sass/_variables.scss
View File

@ -1,7 +1,7 @@
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
#conversejs, .converse-content {
#conversejs, #conversejs-bg, .converse-fullscreen {
--subdued-color: #A8ABA1;
--subdued-color-lighten-25-percent: #e6e7e4; // lighten(#A8ABA1, 25%)
@ -19,7 +19,7 @@ $mobile_portrait_length: 480px !default;
--link-color-darken-20-percent: #345566; // darken($light-blue, 20%)
--link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
--dark-link-color: #206485; // $dark-blue
--global-background-color: #578EA9; // $light-blue
--global-background-color: #397491; // dark blue
--inverse-link-color: white;
--text-shadow-color: #FAFAFA;

7
src/converse-chatboxviews.js
View File

@ -9,6 +9,7 @@ import "backbone.nativeview";
import "backbone.overview";
import converse from "@converse/headless/converse-core";
import tpl_avatar from "templates/avatar.svg";
import tpl_background_logo from "templates/background_logo.html";
import tpl_chatboxes from "templates/chatboxes.html";
const { Backbone, _, utils } = converse.env;
@ -105,6 +106,12 @@ converse.plugins.add('converse-chatboxviews', {
initialize () {
this.model.on("destroy", this.removeChat, this);
const bg = document.getElementById('conversejs-bg');
if (bg && !bg.innerHTML.trim()) {
bg.innerHTML = tpl_background_logo();
}
const body = document.querySelector('body');
body.classList.add(`converse-${_converse.view_mode}`);
this.el.classList.add(`converse-${_converse.view_mode}`);
this.render();
},

45
src/templates/background_logo.html Normal file
View File

@ -0,0 +1,45 @@
<div class="inner-content converse-brand row">
<div class="converse-brand__padding"></div>
<div class="converse-brand__heading">
<svg height="200px"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 364 364"
version="1.1">
<title>Logo Converse</title>
<defs>
<linearGradient id="gradient" x1="92.14" y1="27.64" x2="267.65" y2="331.62" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff1d1"/>
<stop offset="0.05" stop-color="#fae8c1"/>
<stop offset="0.15" stop-color="#f0d5a1"/>
<stop offset="0.27" stop-color="#e7c687"/>
<stop offset="0.4" stop-color="#e1bb72"/>
<stop offset="0.54" stop-color="#dcb264"/>
<stop offset="0.71" stop-color="#daad5c"/>
<stop offset="1" stop-color="#d9ac59"/>
</linearGradient>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.3" result="blur1"/>
<feOffset in="blur1" dx="3" dy="3" result="blur2"/>
<feColorMatrix in="blur2" type="matrix" result="blur3"
values="1 0 0 0 0.1
0 1 0 0 0.1
0 0 1 0 0.1
0 0 0 1 0"/>
<feMerge>
<feMergeNode in="blur3"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g filter="url(#shadow)">
<path d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" fill="#d9ac59"/>
<path d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" fill="url(#gradient)"/>
</g>
</svg>
<span class="converse-brand__text">
<span>converse<span class="subdued">.js</span></span>
<p class="byline">messaging freedom</p>
</span>
</div>
</div>