Only show controlbox head when logging in, in overlayed view mode
This commit is contained in:
parent
251c023b15
commit
40f4555419
@ -18,6 +18,8 @@ with regards to sponsoring development on reintroducing them.
|
||||
event and make the XMLHttpRequest yourself.
|
||||
* Removed the `xhr_user_search` and `xhr_user_search_url` configuration options.
|
||||
|
||||
## Updated UI
|
||||
|
||||
The UI is now rewritten with Bootstrap4 and Flexbox is used pretty much
|
||||
everywhere. Unfortunately this means that in the overlayed view_mode, chat
|
||||
boxes can no longer be resized horizontally (or diagonally). Perhaps a solution
|
||||
|
@ -4964,7 +4964,7 @@ body.reset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: white;
|
||||
background-color: #3AA569;
|
||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||
height: 450px;
|
||||
min-height: 225px;
|
||||
@ -5103,6 +5103,7 @@ body.reset {
|
||||
white-space: nowrap; }
|
||||
#converse-embedded-chat .chatbox .chat-content,
|
||||
#conversejs .chatbox .chat-content {
|
||||
height: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
@ -5436,6 +5437,8 @@ body.reset {
|
||||
margin-top: 0.25em; }
|
||||
#conversejs #controlbox {
|
||||
margin-right: 1.5em; }
|
||||
#conversejs #controlbox .box-flyout {
|
||||
background-color: white; }
|
||||
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
|
||||
overflow-y: auto; }
|
||||
#conversejs #controlbox form.search-xmpp-contact {
|
||||
@ -5764,11 +5767,8 @@ body.reset {
|
||||
padding-left: 15px;
|
||||
flex: 0 0 66.6666666667%;
|
||||
max-width: 66.6666666667%;
|
||||
order: 1;
|
||||
color: #777;
|
||||
font-size: 2em; }
|
||||
#conversejs:not(.fullscreen) #controlbox .controlbox-head .close-chatbox-button {
|
||||
order: 2; }
|
||||
#conversejs:not(.fullscreen) #controlbox .controlbox-head .chatbox-btn {
|
||||
color: #578EA9;
|
||||
margin: 0; }
|
||||
@ -5976,6 +5976,7 @@ body.reset {
|
||||
#converse-embedded-chat .chatroom .box-flyout,
|
||||
#conversejs .chatroom .box-flyout {
|
||||
overflow-y: hidden;
|
||||
background-color: #E77051;
|
||||
width: 100%; }
|
||||
@media screen and (max-height: 450px) {
|
||||
#converse-embedded-chat .chatroom .box-flyout,
|
||||
|
@ -5014,7 +5014,7 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: white;
|
||||
background-color: #3AA569;
|
||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||
height: 100%;
|
||||
min-height: 50%;
|
||||
@ -5153,6 +5153,7 @@ body {
|
||||
white-space: nowrap; }
|
||||
#converse-embedded-chat .chatbox .chat-content,
|
||||
#conversejs .chatbox .chat-content {
|
||||
height: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
@ -5417,8 +5418,8 @@ body {
|
||||
max-width: 75%; } }
|
||||
@media (min-width: 1200px) {
|
||||
#conversejs.fullscreen .chatbox {
|
||||
flex: 0 0 75%;
|
||||
max-width: 75%; } }
|
||||
flex: 0 0 83.3333333333%;
|
||||
max-width: 83.3333333333%; } }
|
||||
#conversejs.fullscreen .chatbox .box-flyout {
|
||||
background-color: #3AA569;
|
||||
height: 100vh;
|
||||
@ -5440,7 +5441,6 @@ body {
|
||||
height: 22px;
|
||||
margin-bottom: -5.5px; }
|
||||
#conversejs.fullscreen .chatbox .chat-content {
|
||||
height: 100%;
|
||||
padding: 0 1em 1em 1em;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px; }
|
||||
@ -5492,6 +5492,8 @@ body {
|
||||
margin-top: 0.25em; }
|
||||
#conversejs #controlbox {
|
||||
margin-right: 1.5em; }
|
||||
#conversejs #controlbox .box-flyout {
|
||||
background-color: white; }
|
||||
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
|
||||
overflow-y: auto; }
|
||||
#conversejs #controlbox form.search-xmpp-contact {
|
||||
@ -5783,6 +5785,11 @@ body {
|
||||
#conversejs.sidebar-open #controlbox .controlbox-pane {
|
||||
display: block; } }
|
||||
#conversejs.fullscreen #controlbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin: 0; }
|
||||
@media (min-width: 768px) {
|
||||
#conversejs.fullscreen #controlbox {
|
||||
@ -5817,6 +5824,8 @@ body {
|
||||
#conversejs.fullscreen #controlbox .brand-heading-container .brand-heading {
|
||||
font-size: 400%; } }
|
||||
#conversejs.fullscreen #controlbox.logged-out {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
opacity: 0;
|
||||
/* make things invisible upon start */
|
||||
-webkit-animation-name: fadein;
|
||||
@ -6069,6 +6078,7 @@ body {
|
||||
#converse-embedded-chat .chatroom .box-flyout,
|
||||
#conversejs .chatroom .box-flyout {
|
||||
overflow-y: hidden;
|
||||
background-color: #E77051;
|
||||
width: 100%; }
|
||||
@media screen and (max-height: 450px) {
|
||||
#converse-embedded-chat .chatroom .box-flyout,
|
||||
|
@ -19,8 +19,8 @@
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head controlbox-head">
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-close"></a>
|
||||
<div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-close"></a>
|
||||
</div>
|
||||
<div class="controlbox-panes">
|
||||
<div id="login-dialog" class="controlbox-pane row">
|
||||
|
@ -115,7 +115,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: white;
|
||||
background-color: $chat-head-color;
|
||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||
height: $chat-height;
|
||||
min-height: $chat-height/2;
|
||||
@ -258,6 +258,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chat-content {
|
||||
height: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 13px;
|
||||
color: $text-color;
|
||||
|
@ -69,6 +69,7 @@
|
||||
|
||||
.box-flyout {
|
||||
overflow-y: hidden;
|
||||
background-color: $chatroom-head-color;
|
||||
|
||||
width: 100%;
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
|
@ -50,6 +50,10 @@
|
||||
}
|
||||
|
||||
#controlbox {
|
||||
.box-flyout {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
margin-right: 3*$chat-gutter;
|
||||
|
||||
&.logged-out {
|
||||
|
18
sass/converse/_chatrooms.scss
Normal file
18
sass/converse/_chatrooms.scss
Normal file
@ -0,0 +1,18 @@
|
||||
#conversejs {
|
||||
.chatbox {
|
||||
&.chatroom {
|
||||
@include media-breakpoint-up(xs) {
|
||||
@include make-col(12);
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(8);
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(6);
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -27,15 +27,9 @@
|
||||
.brand-heading {
|
||||
@include make-col-ready();
|
||||
@include make-col(8);
|
||||
|
||||
order: 1;
|
||||
color: $text-color;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.close-chatbox-button {
|
||||
order: 2;
|
||||
}
|
||||
.chatbox-btn {
|
||||
color: $controlbox-head-color;
|
||||
margin: 0;
|
||||
|
@ -33,7 +33,7 @@
|
||||
@include make-col(9);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include make-col(9);
|
||||
@include make-col(10);
|
||||
}
|
||||
|
||||
.box-flyout {
|
||||
@ -64,7 +64,6 @@
|
||||
}
|
||||
}
|
||||
.chat-content {
|
||||
height: 100%;
|
||||
padding: 0 $padding $padding $padding;
|
||||
border-top-left-radius: $chatbox-border-radius;
|
||||
border-top-right-radius: $chatbox-border-radius;
|
||||
|
@ -1,5 +1,6 @@
|
||||
#conversejs.fullscreen {
|
||||
#controlbox {
|
||||
@include make-col-ready();
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(3);
|
||||
}
|
||||
@ -49,6 +50,7 @@
|
||||
}
|
||||
|
||||
&.logged-out {
|
||||
@include make-col(12);
|
||||
@include fade-in;
|
||||
width: 100%;
|
||||
.box-flyout {
|
||||
|
@ -256,10 +256,7 @@
|
||||
this.model.set('closed', !_converse.show_controlbox_by_default);
|
||||
}
|
||||
}
|
||||
this.el.innerHTML = tpl_controlbox(
|
||||
_.extend(this.model.toJSON(), {
|
||||
'sticky_controlbox': _converse.sticky_controlbox
|
||||
}));
|
||||
this.el.innerHTML = tpl_controlbox(_.extend(this.model.toJSON()));
|
||||
|
||||
if (!this.model.get('closed')) {
|
||||
this.show();
|
||||
@ -296,17 +293,14 @@
|
||||
},
|
||||
|
||||
createBrandHeadingHTML () {
|
||||
return tpl_brand_heading();
|
||||
return tpl_brand_heading({
|
||||
'sticky_controlbox': _converse.sticky_controlbox
|
||||
});
|
||||
},
|
||||
|
||||
insertBrandHeading () {
|
||||
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();
|
||||
}
|
||||
const panes_el = this.el.querySelector('.controlbox-panes');
|
||||
panes_el.insertAdjacentHTML('beforeBegin', this.createBrandHeadingHTML());
|
||||
},
|
||||
|
||||
renderLoginPanel () {
|
||||
|
@ -1,8 +1 @@
|
||||
<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>
|
||||
<div class="flyout box-flyout"><div class="controlbox-panes"></div></div>
|
||||
|
@ -1 +1,12 @@
|
||||
<div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
|
||||
<div class="chat-head controlbox-head">
|
||||
<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>
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user