Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
C
converse.js
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
converse.js
Commits
aa274f41
Commit
aa274f41
authored
Jan 02, 2019
by
JC Brand
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Make background darker and add new logo
parent
bdc438db
Changes
9
Show whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
191 additions
and
141 deletions
+191
-141
css/converse.css
css/converse.css
+39
-31
css/fullpage.css
css/fullpage.css
+0
-26
dev.html
dev.html
+1
-10
dist/converse.js
dist/converse.js
+31
-4
fullscreen.html
fullscreen.html
+2
-15
sass/_core.scss
sass/_core.scss
+64
-53
sass/_variables.scss
sass/_variables.scss
+2
-2
src/converse-chatboxviews.js
src/converse-chatboxviews.js
+7
-0
src/templates/background_logo.html
src/templates/background_logo.html
+45
-0
No files found.
css/converse.css
View file @
aa274f41
...
@@ -9299,7 +9299,7 @@ readers do not read off random characters that represent icons */
...
@@ -9299,7 +9299,7 @@ readers do not read off random characters that represent icons */
#conversejs .invisible {
#conversejs .invisible {
visibility: hidden !important; }
visibility: hidden !important; }
#conversejs,
.converse-content
{
#conversejs,
#conversejs-bg, .converse-fullscreen
{
--subdued-color: #A8ABA1;
--subdued-color: #A8ABA1;
--subdued-color-lighten-25-percent: #e6e7e4;
--subdued-color-lighten-25-percent: #e6e7e4;
--chat-status-online: #3AA569;
--chat-status-online: #3AA569;
...
@@ -9313,7 +9313,7 @@ readers do not read off random characters that represent icons */
...
@@ -9313,7 +9313,7 @@ readers do not read off random characters that represent icons */
--link-color-darken-20-percent: #345566;
--link-color-darken-20-percent: #345566;
--link-color-lighten-10-percent: #79a5ba;
--link-color-lighten-10-percent: #79a5ba;
--dark-link-color: #206485;
--dark-link-color: #206485;
--global-background-color: #
578EA9
;
--global-background-color: #
397491
;
--inverse-link-color: white;
--inverse-link-color: white;
--text-shadow-color: #FAFAFA;
--text-shadow-color: #FAFAFA;
--text-color: #666;
--text-color: #666;
...
@@ -9480,26 +9480,28 @@ readers do not read off random characters that represent icons */
...
@@ -9480,26 +9480,28 @@ readers do not read off random characters that represent icons */
--list-item-open-color
:
#444
;
--list-item-open-color
:
#444
;
--list-item-open-hover-color
:
#444
;
}
--list-item-open-hover-color
:
#444
;
}
body
.reset
{
body
.converse-fullscreen
{
margin
:
0
;
}
margin
:
0
;
background-color
:
var
(
--global-background-color
);
}
.converse-brand
{
#conversejs-bg
.converse-brand
{
display
:
flex
;
display
:
flex
;
justify-content
:
space-between
;
justify-content
:
space-between
;
margin-top
:
15vh
;
-webkit-animation-name
:
fadein
;
-webkit-animation-name
:
fadein
;
-moz-animation-name
:
fadein
;
-moz-animation-name
:
fadein
;
animation-name
:
fadein
;
animation-name
:
fadein
;
-webkit-animation-fill-mode
:
forwards
;
-webkit-animation-fill-mode
:
forwards
;
-moz-animation-fill-mode
:
forwards
;
-moz-animation-fill-mode
:
forwards
;
animation-fill-mode
:
forwards
;
animation-fill-mode
:
forwards
;
-webkit-animation-duration
:
750m
s
;
-webkit-animation-duration
:
5
s
;
-moz-animation-duration
:
750m
s
;
-moz-animation-duration
:
5
s
;
animation-duration
:
750m
s
;
animation-duration
:
5
s
;
-webkit-animation-timing-function
:
ease
;
-webkit-animation-timing-function
:
ease
;
-moz-animation-timing-function
:
ease
;
-moz-animation-timing-function
:
ease
;
animation-timing-function
:
ease
;
}
animation-timing-function
:
ease
;
}
.converse-brand__padding
{
#conversejs-bg
.converse-brand__padding
{
position
:
relative
;
position
:
relative
;
width
:
100%
;
width
:
100%
;
min-height
:
1px
;
min-height
:
1px
;
...
@@ -9507,57 +9509,63 @@ body.reset {
...
@@ -9507,57 +9509,63 @@ body.reset {
padding-left
:
15px
;
padding-left
:
15px
;
padding
:
0
;
}
padding
:
0
;
}
@media
(
min-width
:
768px
)
{
@media
(
min-width
:
768px
)
{
.converse-brand__padding
{
#conversejs-bg
.converse-brand__padding
{
flex
:
0
0
33.33333%
;
flex
:
0
0
33.33333%
;
max-width
:
33.33333%
;
}
}
max-width
:
33.33333%
;
}
}
@media
(
min-width
:
992px
)
{
@media
(
min-width
:
992px
)
{
.converse-brand__padding
{
#conversejs-bg
.converse-brand__padding
{
flex
:
0
0
25%
;
flex
:
0
0
25%
;
max-width
:
25%
;
}
}
max-width
:
25%
;
}
}
@media
(
min-width
:
1200px
)
{
@media
(
min-width
:
1200px
)
{
.converse-brand__padding
{
#conversejs-bg
.converse-brand__padding
{
flex
:
0
0
16.66667%
;
flex
:
0
0
16.66667%
;
max-width
:
16.66667%
;
}
}
max-width
:
16.66667%
;
}
}
.converse-brand__heading
{
#conversejs-bg
.converse-brand__heading
{
position
:
relative
;
position
:
relative
;
width
:
100%
;
width
:
100%
;
min-height
:
1px
;
min-height
:
1px
;
padding-right
:
15px
;
padding-right
:
15px
;
padding-left
:
15px
;
padding-left
:
15px
;
padding
:
0
;
}
padding
:
0
;
display
:
flex
;
justify-content
:
center
;
margin
:
auto
;
}
@media
(
min-width
:
768px
)
{
@media
(
min-width
:
768px
)
{
.converse-brand__heading
{
#conversejs-bg
.converse-brand__heading
{
font-size
:
4em
;
font-size
:
4em
;
flex
:
0
0
66.66667%
;
flex
:
0
0
66.66667%
;
max-width
:
66.66667%
;
}
}
max-width
:
66.66667%
;
}
}
@media
(
min-width
:
992px
)
{
@media
(
min-width
:
992px
)
{
.converse-brand__heading
{
#conversejs-bg
.converse-brand__heading
{
font-size
:
5em
;
font-size
:
5em
;
flex
:
0
0
75%
;
flex
:
0
0
75%
;
max-width
:
75%
;
}
}
max-width
:
75%
;
}
}
@media
(
min-width
:
1200px
)
{
@media
(
min-width
:
1200px
)
{
.converse-brand__heading
{
#conversejs-bg
.converse-brand__heading
{
font-size
:
6em
;
font-size
:
6em
;
flex
:
0
0
83.33333%
;
flex
:
0
0
83.33333%
;
max-width
:
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-family
:
var
(
--branding-font
);
font-weight
:
normal
;
font-weight
:
normal
;
width
:
50%
;
text-align
:
center
;
margin
:
auto
;
font-size
:
140%
;
margin-
top
:
10%
;
margin-
left
:
0.2em
;
}
text-align
:
center
;
}
#conversejs-bg
.converse-brand__text
.byline
{
margin
:
0
;
.converse-brand__byline
{
font-family
:
var
(
--heading-font
);
font-size
:
var
(
--font-size-small
)
;
font-size
:
0.3em
;
width
:
50%
;
opacity
:
0.55
;
margin
:
auto
;
margin-bottom
:
2em
;
text-align
:
center
;
}
margin-left
:
-2.7em
;
.converse-brand__byline
a
{
word-spacing
:
5px
;
}
text-decoration
:
none
;
#conversejs-bg
.converse-brand__text
.subdued
{
color
:
var
(
--chatroom-head-color-lighten-25-percent
)
;
}
opacity
:
0.25
;
}
#conversejs
{
#conversejs
{
bottom
:
0
;
bottom
:
0
;
...
...
css/fullpage.css
deleted
100644 → 0
View file @
bdc438db
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%
;
}
dev.html
View file @
aa274f41
...
@@ -9,22 +9,13 @@
...
@@ -9,22 +9,13 @@
<meta
name=
"author"
content=
"JC Brand"
/>
<meta
name=
"author"
content=
"JC Brand"
/>
<meta
name=
"keywords"
content=
"xmpp chat webchat converse.js"
/>
<meta
name=
"keywords"
content=
"xmpp chat webchat converse.js"
/>
<link
rel=
"shortcut icon"
type=
"image/ico"
href=
"css/images/favicon.ico"
/>
<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"
/>
<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=
"3rdparty/libsignal-protocol-javascript/dist/libsignal-protocol.js"
></script>
<script
src=
"dist/converse.js"
></script>
<script
src=
"dist/converse.js"
></script>
</head>
</head>
<body
class=
"reset"
>
<body
class=
"reset"
>
<div
class=
"converse-content"
>
<div
id=
"conversejs-bg"
></div>
<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>
<script>
<script>
converse
.
initialize
({
converse
.
initialize
({
auto_away
:
300
,
auto_away
:
300
,
...
...
dist/converse.js
View file @
aa274f41
...
@@ -49153,8 +49153,10 @@ __webpack_require__.r(__webpack_exports__);
...
@@ -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 _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__ = __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_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_background_logo_html__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! templates/background_logo.html */ "./src/templates/background_logo.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___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
// Converse.js
// http://conversejs.org
// http://conversejs.org
//
//
...
@@ -49166,6 +49168,7 @@ __webpack_require__.r(__webpack_exports__);
...
@@ -49166,6 +49168,7 @@ __webpack_require__.r(__webpack_exports__);
const _converse$env = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].env,
const _converse$env = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].env,
Backbone = _converse$env.Backbone,
Backbone = _converse$env.Backbone,
_ = _converse$env._,
_ = _converse$env._,
...
@@ -49259,17 +49262,25 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
...
@@ -49259,17 +49262,25 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
initialize() {
initialize() {
this.model.on("destroy", this.removeChat, this);
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.el.classList.add(`converse-${_converse.view_mode}`);
this.render();
this.render();
},
},
render() {
render() {
try {
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) {
} catch (e) {
this._ensureElement();
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');
this.row_el = this.el.querySelector('.row');
...
@@ -92079,6 +92090,22 @@ return __p
...
@@ -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":
/*!*************************************!*\
/*!*************************************!*\
!*** ./src/templates/bookmark.html ***!
!*** ./src/templates/bookmark.html ***!
fullscreen.html
View file @
aa274f41
...
@@ -8,19 +8,11 @@
...
@@ -8,19 +8,11 @@
<script
type=
"text/javascript"
src=
"inverse-analytics.js"
></script>
<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>
<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/converse.css"
/>
<link
type=
"text/css"
rel=
"stylesheet"
media=
"screen"
href=
"css/fullpage.css"
/>
<script
src=
"3rdparty/libsignal-protocol.js"
></script>
<script
src=
"3rdparty/libsignal-protocol.js"
></script>
<script
src=
"dist/converse.js"
></script>
<script
src=
"dist/converse.js"
></script>
</head>
</head>
<body
class=
"reset"
>
<body
class=
"converse-fullscreen"
>
<div
class=
"converse-content"
style=
"display:none"
>
<div
id=
"conversejs-bg"
></div>
<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>
<script>
<script>
/*
/*
@licstart
@licstart
...
@@ -49,7 +41,6 @@
...
@@ -49,7 +41,6 @@
For more information, please refer to <http://unlicense.org/>
For more information, please refer to <http://unlicense.org/>
@licend
@licend
*/
*/
converse
.
initialize
({
converse
.
initialize
({
authentication
:
'
login
'
,
authentication
:
'
login
'
,
...
@@ -58,10 +49,6 @@
...
@@ -58,10 +49,6 @@
bosh_service_url
:
'
https://conversejs.org/http-bind/
'
,
// Please use this connection manager only for testing purposes
bosh_service_url
:
'
https://conversejs.org/http-bind/
'
,
// Please use this connection manager only for testing purposes
message_archiving
:
'
always
'
,
message_archiving
:
'
always
'
,
view_mode
:
'
fullscreen
'
view_mode
:
'
fullscreen
'
}).
then
(
function
()
{
setTimeout
(
function
()
{
document
.
querySelector
(
'
.converse-content
'
).
style
=
''
;
},
1000
);
});
});
</script>
</script>
</body>
</body>
...
...
sass/_core.scss
View file @
aa274f41
...
@@ -6,20 +6,23 @@
...
@@ -6,20 +6,23 @@
@include
animation-timing-function
(
ease
);
@include
animation-timing-function
(
ease
);
}
}
body
.
reset
{
body
.
converse-fullscreen
{
margin
:
0
;
margin
:
0
;
background-color
:
var
(
--
global-background-color
);
}
}
.converse-brand
{
#conversejs-bg
{
.converse-brand
{
display
:
flex
;
display
:
flex
;
justify-content
:
space-between
;
justify-content
:
space-between
;
margin-top
:
15vh
;
@include
animation-name
(
fadein
);
@include
animation-name
(
fadein
);
@include
animation-fill-mode
(
forwards
);
@include
animation-fill-mode
(
forwards
);
@include
animation-duration
(
750m
s
);
@include
animation-duration
(
5
s
);
@include
animation-timing-function
(
ease
);
@include
animation-timing-function
(
ease
);
}
}
.converse-brand__padding
{
.converse-brand__padding
{
@include
make-col-ready
();
@include
make-col-ready
();
@include
media-breakpoint-up
(
md
)
{
@include
media-breakpoint-up
(
md
)
{
@include
make-col
(
4
);
@include
make-col
(
4
);
...
@@ -31,9 +34,9 @@ body.reset {
...
@@ -31,9 +34,9 @@ body.reset {
@include
make-col
(
2
);
@include
make-col
(
2
);
}
}
padding
:
0
;
padding
:
0
;
}
}
.converse-brand__heading
{
.converse-brand__heading
{
@include
make-col-ready
();
@include
make-col-ready
();
@include
media-breakpoint-up
(
md
)
{
@include
media-breakpoint-up
(
md
)
{
font-size
:
4em
;
font-size
:
4em
;
...
@@ -48,25 +51,33 @@ body.reset {
...
@@ -48,25 +51,33 @@ body.reset {
@include
make-col
(
10
);
@include
make-col
(
10
);
}
}
padding
:
0
;
padding
:
0
;
}
display
:
flex
;
justify-content
:
center
;
margin
:
auto
;
svg
{
margin-top
:
0
.3em
;
}
}
.converse-brand__text
{
.converse-brand__text
{
color
:
#ffffff
;
font-family
:
var
(
--
branding-font
);
font-family
:
var
(
--
branding-font
);
font-weight
:
normal
;
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
;
text-align
:
center
;
a
{
font-size
:
140%
;
text-decoration
:
none
;
margin-left
:
0
.2em
;
color
:
var
(
--
chatroom-head-color-lighten-25-percent
);
.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
;
}
}
}
}
}
...
...
sass/_variables.scss
View file @
aa274f41
$mobile_landscape_height
:
450px
!
default
;
$mobile_landscape_height
:
450px
!
default
;
$mobile_portrait_length
:
480px
!
default
;
$mobile_portrait_length
:
480px
!
default
;
#conversejs
,
.converse-content
{
#conversejs
,
#conversejs-bg
,
.converse-fullscreen
{
--subdued-color
:
#A8ABA1
;
--subdued-color
:
#A8ABA1
;
--subdued-color-lighten-25-percent
:
#e6e7e4
;
// lighten(#A8ABA1, 25%)
--subdued-color-lighten-25-percent
:
#e6e7e4
;
// lighten(#A8ABA1, 25%)
...
@@ -19,7 +19,7 @@ $mobile_portrait_length: 480px !default;
...
@@ -19,7 +19,7 @@ $mobile_portrait_length: 480px !default;
--link-color-darken-20-percent
:
#345566
;
// darken($light-blue, 20%)
--link-color-darken-20-percent
:
#345566
;
// darken($light-blue, 20%)
--link-color-lighten-10-percent
:
#79a5ba
;
// lighten($light-blue, 10%)
--link-color-lighten-10-percent
:
#79a5ba
;
// lighten($light-blue, 10%)
--dark-link-color
:
#206485
;
// $dark-blue
--dark-link-color
:
#206485
;
// $dark-blue
--global-background-color
:
#
578EA9
;
// $light-
blue
--global-background-color
:
#
397491
;
// dark
blue
--inverse-link-color
:
white
;
--inverse-link-color
:
white
;
--text-shadow-color
:
#FAFAFA
;
--text-shadow-color
:
#FAFAFA
;
...
...
src/converse-chatboxviews.js
View file @
aa274f41
...
@@ -9,6 +9,7 @@ import "backbone.nativeview";
...
@@ -9,6 +9,7 @@ import "backbone.nativeview";
import
"
backbone.overview
"
;
import
"
backbone.overview
"
;
import
converse
from
"
@converse/headless/converse-core
"
;
import
converse
from
"
@converse/headless/converse-core
"
;
import
tpl_avatar
from
"
templates/avatar.svg
"
;
import
tpl_avatar
from
"
templates/avatar.svg
"
;
import
tpl_background_logo
from
"
templates/background_logo.html
"
;
import
tpl_chatboxes
from
"
templates/chatboxes.html
"
;
import
tpl_chatboxes
from
"
templates/chatboxes.html
"
;
const
{
Backbone
,
_
,
utils
}
=
converse
.
env
;
const
{
Backbone
,
_
,
utils
}
=
converse
.
env
;
...
@@ -105,6 +106,12 @@ converse.plugins.add('converse-chatboxviews', {
...
@@ -105,6 +106,12 @@ converse.plugins.add('converse-chatboxviews', {
initialize
()
{
initialize
()
{
this
.
model
.
on
(
"
destroy
"
,
this
.
removeChat
,
this
);
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
.
el
.
classList
.
add
(
`converse-
${
_converse
.
view_mode
}
`
);
this
.
render
();
this
.
render
();
},
},
...
...
src/templates/background_logo.html
0 → 100644
View file @
aa274f41
<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>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment