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

Add close button for controlbox in overlay view mode

Browse Source
This commit is contained in:
JC Brand 2018-03-09 23:42:42 +01:00
parent a1145140c3
commit d7de739001
10 changed files with 47 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/converse.css
View File

@ -4877,7 +4877,7 @@ body.reset {
cursor: pointer;
font-size: 16px;
margin: 0 0.2em;
padding: 0.3em;
padding: 0 0 0 0.5em;
text-decoration: none; }
#converse-embedded-chat .chatbox-btn:active,
#conversejs .chatbox-btn:active {
@ -5509,13 +5509,10 @@ body.reset {
padding-bottom: 0.5em; }
#conversejs #controlbox .conn-feedback p.feedback-subject.error {
font-weight: bold; }
#conversejs #controlbox .brand-heading-container {
flex: 0 0 100%;
max-width: 100%; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
padding-top: 0;
padding-bottom: 0; }
@ -5728,9 +5725,11 @@ body.reset {
#conversejs:not(.fullscreen) #controlbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#conversejs:not(.fullscreen) #controlbox:not(.logged-out) .controlbox-head {
height: 15px; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head {
display: flex;
flex-direction: row;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between; }
#conversejs:not(.fullscreen) #controlbox .controlbox-head .brand-heading {
@ -6209,8 +6208,6 @@ body.reset {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: #578EA9;
border: 1px solid white;
border-bottom: none;
padding: 0.5em 0;
text-align: center;
color: white;
@ -6218,7 +6215,7 @@ body.reset {
overflow-y: hidden;
text-overflow: ellipsis;
display: block;
height: 50px; }
height: 45px; }
#conversejs:not(.fullscreen) #minimized-chats a.restore-chat {
padding: 1px 0 1px 5px;
color: white;
@ -6233,7 +6230,7 @@ body.reset {
color: white; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
flex-direction: column-reverse;
bottom: 34px;
bottom: 30px;
width: 130px; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
padding: 0.3em;

15
css/inverse.css
View File

@ -4929,7 +4929,7 @@ body {
cursor: pointer;
font-size: 16px;
margin: 0 0.2em;
padding: 0.3em;
padding: 0 0 0 0.5em;
text-decoration: none; }
#converse-embedded-chat .chatbox-btn:active,
#conversejs .chatbox-btn:active {
@ -5579,13 +5579,10 @@ body {
padding-bottom: 0.5em; }
#conversejs #controlbox .conn-feedback p.feedback-subject.error {
font-weight: bold; }
#conversejs #controlbox .brand-heading-container {
flex: 0 0 100%;
max-width: 100%; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
padding-top: 0;
padding-bottom: 0; }
@ -5820,6 +5817,8 @@ body {
#conversejs.fullscreen #controlbox .toggle-register-login {
line-height: 26px; }
#conversejs.fullscreen #controlbox .brand-heading-container {
flex: 0 0 100%;
max-width: 100%;
text-align: center; }
#conversejs.fullscreen #controlbox .brand-heading-container .brand-heading {
font-size: 150%;

2
sass/_chatbox.scss
View File

@ -25,7 +25,7 @@
cursor: pointer;
font-size: $box-close-font-size;
margin: 0 0.2em;
padding: 0.3em;
padding: 0 0 0 0.5em;
text-decoration: none;
&:active {

1
sass/_controlbox.scss
View File

@ -152,7 +152,6 @@
}
.brand-heading-container {
@include make-col(12);
.brand-heading {
text-align: center;

10
sass/converse/_controlbox.scss
View File

@ -7,12 +7,20 @@
min-width: $controlbox-width !important;
width: $controlbox-width;
}
&:not(.logged-out) {
.controlbox-head {
height: 15px;
}
}
.controlbox-head {
display: flex;
flex-direction: row;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
.brand-heading {
@include make-col-ready();
@include make-col(8);

6
sass/converse/_minimized_chats.scss
View File

@ -19,8 +19,6 @@
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
background-color: $link-color;
border: 1px solid white;
border-bottom: none;
padding: 0.5em 0;
text-align: center;
color: white;
@ -28,7 +26,7 @@
overflow-y: hidden;
text-overflow: ellipsis;
display: block;
height: 50px;
height: 45px;
}
a.restore-chat {
@ -50,7 +48,7 @@
.minimized-chats-flyout {
flex-direction: column-reverse;
bottom: 34px;
bottom: 30px;
width: $minimized-chats-width;
.chat-head {

1
sass/inverse/_controlbox.scss
View File

@ -34,6 +34,7 @@
}
.brand-heading-container {
@include make-col(12);
text-align: center;
.brand-heading {
font-size: 150%;

9
src/converse-controlbox.js
View File

@ -299,8 +299,13 @@
},
insertBrandHeading () {
const panes_el = this.el.querySelector('.controlbox-panes');
panes_el.insertAdjacentHTML('beforeBegin', this.createBrandHeadingHTML());
const heading_el = this.el.querySelector('.brand-heading-container');
if (_.isNull(heading_el)) {
const el = this.el.querySelector('.controlbox-head');
el.insertAdjacentHTML('beforeend', this.createBrandHeadingHTML());
} else {
heading_el.outerHTML = this.createBrandHeadingHTML();
}
},
renderLoginPanel () {

9
src/templates/controlbox.html
View File

@ -1 +1,8 @@
<div class="flyout box-flyout"><div class="controlbox-panes"></div></div>
<div class="flyout box-flyout">
<div class="chat-head controlbox-head">
{[ if (!o.sticky_controlbox) { ]}
<a class="chatbox-btn close-chatbox-button fa fa-close"></a>
{[ } ]}
</div>
<div class="controlbox-panes"></div>
</div>

9
src/templates/converse_brand_heading.html
View File

@ -1,12 +1,7 @@
<div class="chat-head controlbox-head">
<span class="brand-heading-container">
<div class="brand-heading">
<a href="https://conversejs.org" target="_blank" rel="noopener">
<i class="icon-conversejs"></i><span class="brand-name">converse</span>
</a>
</div>
{[ if (!o.sticky_controlbox) { ]}
<a class="chatbox-btn close-chatbox-button fa fa-close"></a>
{[ } ]}
</div>
</span>