Add close button for controlbox in overlay view mode
This commit is contained in:
parent
a1145140c3
commit
d7de739001
|
@ -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;
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -152,7 +152,6 @@
|
|||
}
|
||||
|
||||
.brand-heading-container {
|
||||
@include make-col(12);
|
||||
|
||||
.brand-heading {
|
||||
text-align: center;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -34,6 +34,7 @@
|
|||
}
|
||||
|
||||
.brand-heading-container {
|
||||
@include make-col(12);
|
||||
text-align: center;
|
||||
.brand-heading {
|
||||
font-size: 150%;
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user