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

Only show controlbox head when logging in, in overlayed view mode

Browse Source
This commit is contained in:
JC Brand 2018-03-09 11:02:28 +01:00
parent 251c023b15
commit 40f4555419
14 changed files with 69 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGES.md
View File

@ -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

9
css/converse.css
View File

@ -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,

18
css/inverse.css
View File

@ -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,

2
mockup/overlayed-login.html
View File

@ -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">

3
sass/_chatbox.scss
View File

@ -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;

1
sass/_chatrooms.scss
View File

@ -69,6 +69,7 @@
.box-flyout {
overflow-y: hidden;
background-color: $chatroom-head-color;
width: 100%;
@media screen and (max-height: $mobile-landscape-height) {

4
sass/_controlbox.scss
View File

@ -50,6 +50,10 @@
}
#controlbox {
.box-flyout {
background-color: white;
}
margin-right: 3*$chat-gutter;
&.logged-out {

18
sass/converse/_chatrooms.scss Normal file
View 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);
}
}
}
}

6
sass/converse/_controlbox.scss
View File

@ -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;

3
sass/inverse/_chatbox.scss
View File

@ -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;

2
sass/inverse/_controlbox.scss
View File

@ -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 {

18
src/converse-controlbox.js
View File

@ -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 () {

9
src/templates/controlbox.html
View File

@ -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>

13
src/templates/converse_brand_heading.html
View File

@ -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>