Don't use the bootstrap responsive grid for chats in overlay mode
This commit is contained in:
JC Brand
parent
849d6b2612
commit
392a7e8ab3
119
css/converse.css
119
css/converse.css
|
|
@ -4451,17 +4451,17 @@ body.reset {
|
|||
#conversejs {
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: 100vw;
|
||||
color: #777;
|
||||
direction: ltr;
|
||||
display: block;
|
||||
font-family: "Helvetica", "Arial", sans-serif;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
margin-left: -15px; }
|
||||
direction: ltr;
|
||||
display: block;
|
||||
z-index: 1031; }
|
||||
#conversejs .converse-chatboxes {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: 100vw; }
|
||||
#conversejs ::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
color: #A8ABA1; }
|
||||
|
|
@ -4875,7 +4875,7 @@ body.reset {
|
|||
border-radius: 25%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
margin: 0 0.2em;
|
||||
padding: 0.3em;
|
||||
text-decoration: none; }
|
||||
|
|
@ -5358,28 +5358,12 @@ body.reset {
|
|||
border-top-right-radius: 0; } }
|
||||
#converse-embedded-chat .chatbox,
|
||||
#conversejs:not(.fullscreen) .chatbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%; }
|
||||
@media (min-width: 576px) {
|
||||
#converse-embedded-chat .chatbox,
|
||||
#conversejs:not(.fullscreen) .chatbox {
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%; } }
|
||||
@media (min-width: 768px) {
|
||||
#converse-embedded-chat .chatbox,
|
||||
#conversejs:not(.fullscreen) .chatbox {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%; } }
|
||||
@media (min-width: 992px) {
|
||||
#converse-embedded-chat .chatbox,
|
||||
#conversejs:not(.fullscreen) .chatbox {
|
||||
flex: 0 0 16.6666666667%;
|
||||
max-width: 16.6666666667%; } }
|
||||
min-width: 250px !important;
|
||||
width: 250px; }
|
||||
#converse-embedded-chat .chatbox .box-flyout,
|
||||
#conversejs:not(.fullscreen) .chatbox .box-flyout {
|
||||
min-width: 250px !important;
|
||||
width: 250px; }
|
||||
#converse-embedded-chat .chatbox .chat-body .chat-message,
|
||||
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message {
|
||||
padding: 0.3em;
|
||||
|
|
@ -5737,29 +5721,11 @@ body.reset {
|
|||
display: block; } }
|
||||
#conversejs:not(.fullscreen) #controlbox {
|
||||
order: -1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%; }
|
||||
@media (min-width: 576px) {
|
||||
#conversejs:not(.fullscreen) #controlbox {
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%; } }
|
||||
@media (min-width: 768px) {
|
||||
#conversejs:not(.fullscreen) #controlbox {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%; } }
|
||||
@media (min-width: 992px) {
|
||||
#conversejs:not(.fullscreen) #controlbox {
|
||||
flex: 0 0 16.6666666667%;
|
||||
max-width: 16.6666666667%; } }
|
||||
@media (min-width: 1200px) {
|
||||
#conversejs:not(.fullscreen) #controlbox {
|
||||
flex: 0 0 16.6666666667%;
|
||||
max-width: 16.6666666667%; } }
|
||||
min-width: 250px !important;
|
||||
width: 250px; }
|
||||
#conversejs:not(.fullscreen) #controlbox .box-flyout {
|
||||
min-width: 250px !important;
|
||||
width: 250px; }
|
||||
#conversejs:not(.fullscreen) #controlbox .controlbox-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -5970,7 +5936,7 @@ body.reset {
|
|||
margin: 0.3em 0; }
|
||||
#converse-embedded-chat .chatroom,
|
||||
#conversejs .chatroom {
|
||||
width: 300px; }
|
||||
width: 400px; }
|
||||
@media screen and (max-height: 450px) {
|
||||
#converse-embedded-chat .chatroom,
|
||||
#conversejs .chatroom {
|
||||
|
|
@ -6044,7 +6010,7 @@ body.reset {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
min-width: 200px; }
|
||||
min-width: 250px; }
|
||||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
|
||||
background-color: #E77051;
|
||||
|
|
@ -6206,20 +6172,13 @@ body.reset {
|
|||
border: 1px solid #999; }
|
||||
|
||||
#conversejs .chatbox.chatroom {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%; }
|
||||
@media (min-width: 576px) {
|
||||
#conversejs .chatbox.chatroom {
|
||||
flex: 0 0 66.6666666667%;
|
||||
max-width: 66.6666666667%; } }
|
||||
@media (min-width: 768px) {
|
||||
#conversejs .chatbox.chatroom {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%; } }
|
||||
@media (min-width: 992px) {
|
||||
#conversejs .chatbox.chatroom {
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%; } }
|
||||
min-width: 400px !important;
|
||||
width: 400px; }
|
||||
#conversejs .chatbox.chatroom .box-flyout {
|
||||
min-width: 400px !important;
|
||||
width: 400px; }
|
||||
#conversejs .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
|
||||
font-size: 12px; }
|
||||
|
||||
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
|
||||
background-color: #E7A151; }
|
||||
|
|
@ -6234,27 +6193,13 @@ body.reset {
|
|||
|
||||
#conversejs:not(.fullscreen) #minimized-chats {
|
||||
order: 100;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
flex: 0 0 16.6666666667%;
|
||||
max-width: 16.6666666667%;
|
||||
width: 130px;
|
||||
margin-bottom: -1em;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
color: white;
|
||||
margin-right: 0.5em;
|
||||
padding: 0; }
|
||||
@media (min-width: 576px) {
|
||||
#conversejs:not(.fullscreen) #minimized-chats {
|
||||
flex: 0 0 16.6666666667%;
|
||||
max-width: 16.6666666667%; } }
|
||||
@media (min-width: 992px) {
|
||||
#conversejs:not(.fullscreen) #minimized-chats {
|
||||
flex: 0 0 8.3333333333%;
|
||||
max-width: 8.3333333333%; } }
|
||||
#conversejs:not(.fullscreen) #minimized-chats .badge {
|
||||
bottom: 8px;
|
||||
border: 1px solid #818479; }
|
||||
|
|
@ -6286,8 +6231,8 @@ body.reset {
|
|||
color: white; }
|
||||
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
|
||||
flex-direction: column-reverse;
|
||||
width: 100%;
|
||||
bottom: 48px; }
|
||||
bottom: 34px;
|
||||
width: 130px; }
|
||||
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
|
||||
padding: 0.3em;
|
||||
border-radius: 4px;
|
||||
|
|
|
|||
|
|
@ -4451,17 +4451,17 @@ body.reset {
|
|||
#conversejs {
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: 100vw;
|
||||
color: #777;
|
||||
direction: ltr;
|
||||
display: block;
|
||||
font-family: "Helvetica", "Arial", sans-serif;
|
||||
font-size: 16px;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
margin-left: -15px; }
|
||||
direction: ltr;
|
||||
display: block;
|
||||
z-index: 1031; }
|
||||
#conversejs .converse-chatboxes {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: 100vw; }
|
||||
#conversejs ::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
color: #A8ABA1; }
|
||||
|
|
@ -4884,17 +4884,19 @@ body {
|
|||
padding-right: 10%;
|
||||
font-size: 120%; }
|
||||
|
||||
#conversejs.fullscreen form.converse-form {
|
||||
margin: 1em; }
|
||||
#conversejs.fullscreen form.converse-form input[type=checkbox] {
|
||||
margin-left: 1em;
|
||||
display: inline;
|
||||
margin-bottom: 2em; }
|
||||
#conversejs.fullscreen form.converse-form input[type=button],
|
||||
#conversejs.fullscreen form.converse-form input[type=submit] {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin-right: 1em; }
|
||||
#conversejs.fullscreen {
|
||||
margin-left: -15px; }
|
||||
#conversejs.fullscreen form.converse-form {
|
||||
margin: 1em; }
|
||||
#conversejs.fullscreen form.converse-form input[type=checkbox] {
|
||||
margin-left: 1em;
|
||||
display: inline;
|
||||
margin-bottom: 2em; }
|
||||
#conversejs.fullscreen form.converse-form input[type=button],
|
||||
#conversejs.fullscreen form.converse-form input[type=submit] {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
margin-right: 1em; }
|
||||
|
||||
#conversejs #user-profile-modal label {
|
||||
font-weight: bold; }
|
||||
|
|
@ -5805,6 +5807,9 @@ body {
|
|||
#conversejs.fullscreen #controlbox {
|
||||
flex: 0 0 16.6666666667%;
|
||||
max-width: 16.6666666667%; } }
|
||||
#conversejs.fullscreen #controlbox.logged-out {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%; }
|
||||
#conversejs.fullscreen #controlbox .controlbox-pane {
|
||||
border-radius: 0; }
|
||||
#conversejs.fullscreen #controlbox .flyout {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<body class="reset">
|
||||
<div id="conversejs" class="fullscreen">
|
||||
<div class="sidebar"></div>
|
||||
<div class="row no-gutters">
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<body class="reset">
|
||||
<div id="conversejs" class="fullscreen">
|
||||
<div class="sidebar"></div>
|
||||
<div class="row no-gutters">
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
|
||||
<div id="conversejs">
|
||||
<div class="row no-gutters">
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
</div>
|
||||
|
||||
<div id="conversejs" class="fullscreen">
|
||||
<div class="row no-gutters">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox logged-out">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
|
||||
<div id="conversejs">
|
||||
<div class="row no-gutters">
|
||||
<div class="converse-chatboxes row no-gutters">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head controlbox-head">
|
||||
|
|
|
|||
|
|
@ -42,18 +42,19 @@ body.reset {
|
|||
#conversejs {
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: 100vw;
|
||||
color: $text-color;
|
||||
direction: ltr;
|
||||
display: block;
|
||||
font-family: "Helvetica", "Arial", sans-serif;
|
||||
font-size: $font-size;
|
||||
position: fixed;
|
||||
direction: ltr;
|
||||
display: block;
|
||||
z-index: 1031; // One more than bootstrap navbar
|
||||
|
||||
margin-left: -15px; // XXX: why is this necessary?
|
||||
.converse-chatboxes {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: $subdued-color;
|
||||
|
|
|
|||
|
|
@ -13,18 +13,12 @@
|
|||
}
|
||||
}
|
||||
.chatbox {
|
||||
@include make-col-ready();
|
||||
@include media-breakpoint-up(xs) {
|
||||
@include make-col(12);
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(4);
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(3);
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(2);
|
||||
min-width: $chat-width!important;
|
||||
width: $chat-width;
|
||||
|
||||
.box-flyout {
|
||||
min-width: $chat-width!important;
|
||||
width: $chat-width;
|
||||
}
|
||||
|
||||
.chat-body {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
#conversejs {
|
||||
.chatbox {
|
||||
&.chatroom {
|
||||
@include media-breakpoint-up(xs) {
|
||||
@include make-col(12);
|
||||
min-width: $chatroom-width !important;
|
||||
width: $chatroom-width;
|
||||
.box-flyout {
|
||||
min-width: $chatroom-width !important;
|
||||
width: $chatroom-width;
|
||||
}
|
||||
@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);
|
||||
|
||||
.chatroom-body {
|
||||
.occupants {
|
||||
.chatroom-features {
|
||||
.feature {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,12 @@
|
|||
#conversejs:not(.fullscreen) {
|
||||
#controlbox {
|
||||
order: -1;
|
||||
@include make-col-ready();
|
||||
@include media-breakpoint-up(xs) {
|
||||
@include make-col(12);
|
||||
min-width: $controlbox-width !important;
|
||||
width: $controlbox-width;
|
||||
.box-flyout {
|
||||
min-width: $controlbox-width !important;
|
||||
width: $controlbox-width;
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(4);
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(3);
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(2);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include make-col(2);
|
||||
}
|
||||
|
||||
.controlbox-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,8 @@
|
|||
#conversejs:not(.fullscreen) {
|
||||
#minimized-chats {
|
||||
order: 100;
|
||||
@include make-col-ready();
|
||||
@include media-breakpoint-up(xs) {
|
||||
@include make-col(2);
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(2);
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(1);
|
||||
}
|
||||
|
||||
width: $minimized-chats-width;
|
||||
margin-bottom: -2*$chat-gutter;
|
||||
border-top-left-radius: $chatbox-border-radius;
|
||||
border-top-right-radius: $chatbox-border-radius;
|
||||
|
|
@ -59,8 +50,8 @@
|
|||
|
||||
.minimized-chats-flyout {
|
||||
flex-direction: column-reverse;
|
||||
width: 100%;
|
||||
bottom: 48px;
|
||||
bottom: 34px;
|
||||
width: $minimized-chats-width;
|
||||
|
||||
.chat-head {
|
||||
padding: 0.3em;
|
||||
|
|
|
|||
|
|
@ -109,8 +109,8 @@ $line-height-small: 14px !default;
|
|||
$line-height: 16px !default;
|
||||
$line-height-large: 20px !default;
|
||||
|
||||
$controlbox-width: 200px !default;
|
||||
$chat-width: 200px !default;
|
||||
$controlbox-width: 250px !default;
|
||||
$chat-width: 250px !default;
|
||||
$chat-height: 450px !default;
|
||||
$chat-gutter: 0.5em !default;
|
||||
$minimized-chats-width: 130px !default;
|
||||
|
|
@ -121,7 +121,7 @@ $small-mobile-chat-height: 300px !default;
|
|||
|
||||
$font-path: "../fonticons/fonts/" !default;
|
||||
|
||||
$chatroom-width: 300px !default;
|
||||
$chatroom-width: 400px !default;
|
||||
$chatroom-head-color: $red !default;
|
||||
$chatroom-color-light: $light-red !default;
|
||||
$chatroom-color-lightest: $light-red !default;
|
||||
|
|
@ -135,4 +135,4 @@ $box-close-button-padding-top: 4px !default;
|
|||
$box-close-button-padding-bottom: 4px !default;
|
||||
$box-close-button-padding-left: 4px !default;
|
||||
$box-close-button-padding-right: 4px !default;
|
||||
$box-close-font-size: 12px !default;
|
||||
$box-close-font-size: 16px !default;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
@include make-col(2);
|
||||
}
|
||||
|
||||
&.logged-out {
|
||||
@include make-col(12);
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
|
||||
.controlbox-pane {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,9 @@ body {
|
|||
|
||||
#conversejs.fullscreen {
|
||||
|
||||
// XXX: why is this neccessary?
|
||||
margin-left: -15px;
|
||||
|
||||
form {
|
||||
&.converse-form {
|
||||
margin: 1em;
|
||||
|
|
|
|||
|
|
@ -305,8 +305,6 @@
|
|||
|
||||
renderLoginPanel () {
|
||||
this.el.classList.add("logged-out");
|
||||
this.el.classList.remove("col-xl-2");
|
||||
this.el.classList.remove("col-md-3");
|
||||
if (_.isNil(this.loginpanel)) {
|
||||
this.loginpanel = new _converse.LoginPanel({
|
||||
'model': new _converse.LoginPanelModel()
|
||||
|
|
@ -332,9 +330,6 @@
|
|||
delete this.loginpanel;
|
||||
}
|
||||
this.el.classList.remove("logged-out");
|
||||
this.el.classList.add("col-xl-2");
|
||||
this.el.classList.add("col-md-3");
|
||||
|
||||
this.controlbox_pane = new _converse.ControlBoxPane();
|
||||
this.el.querySelector('.controlbox-panes').insertAdjacentElement(
|
||||
'afterBegin',
|
||||
|
|
|
|||
|
|
@ -67,10 +67,16 @@
|
|||
that.resizing.chatbox.height,
|
||||
that.resizing.chatbox.model.get('default_height')
|
||||
);
|
||||
const width = that.applyDragResistance(
|
||||
that.resizing.chatbox.width,
|
||||
that.resizing.chatbox.model.get('default_width')
|
||||
);
|
||||
if (that.connection.connected) {
|
||||
that.resizing.chatbox.model.save({'height': height});
|
||||
that.resizing.chatbox.model.save({'width': width});
|
||||
} else {
|
||||
that.resizing.chatbox.model.set({'height': height});
|
||||
that.resizing.chatbox.model.set({'width': width});
|
||||
}
|
||||
that.resizing = null;
|
||||
});
|
||||
|
|
@ -82,9 +88,12 @@
|
|||
initialize () {
|
||||
const { _converse } = this.__super__;
|
||||
const result = this.__super__.initialize.apply(this, arguments),
|
||||
height = this.get('height'),
|
||||
height = this.get('height'), width = this.get('width'),
|
||||
save = this.get('id') === 'controlbox' ? this.set.bind(this) : this.save.bind(this);
|
||||
save('height', _converse.applyDragResistance(height, this.get('default_height')));
|
||||
save({
|
||||
'height': _converse.applyDragResistance(height, this.get('default_height')),
|
||||
'width': _converse.applyDragResistance(width, this.get('default_width')),
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
|
|
@ -92,6 +101,8 @@
|
|||
ChatBoxView: {
|
||||
events: {
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
},
|
||||
|
||||
initialize () {
|
||||
|
|
@ -102,9 +113,18 @@
|
|||
render () {
|
||||
const result = this.__super__.render.apply(this, arguments);
|
||||
renderDragResizeHandles(this.__super__._converse, this);
|
||||
this.setWidth();
|
||||
return result;
|
||||
},
|
||||
|
||||
setWidth () {
|
||||
// If a custom width is applied (due to drag-resizing),
|
||||
// then we need to set the width of the .chatbox element as well.
|
||||
if (this.model.get('width')) {
|
||||
this.el.style.width = this.model.get('width');
|
||||
}
|
||||
},
|
||||
|
||||
_show () {
|
||||
this.initDragResize().setDimensions();
|
||||
this.__super__._show.apply(this, arguments);
|
||||
|
|
@ -119,25 +139,32 @@
|
|||
style = window.getComputedStyle(flyout);
|
||||
|
||||
if (_.isUndefined(this.model.get('height'))) {
|
||||
const height = parseInt(style.height.replace(/px$/, ''), 10);
|
||||
const height = parseInt(style.height.replace(/px$/, ''), 10),
|
||||
width = parseInt(style.width.replace(/px$/, ''), 10);
|
||||
this.model.set('height', height);
|
||||
this.model.set('default_height', height);
|
||||
this.model.set('width', width);
|
||||
this.model.set('default_width', width);
|
||||
}
|
||||
const min_width = style['min-width'];
|
||||
const min_height = style['min-height'];
|
||||
this.model.set('min_width', min_width.endsWith('px') ? Number(min_width.replace(/px$/, '')) :0);
|
||||
this.model.set('min_height', min_height.endsWith('px') ? Number(min_height.replace(/px$/, '')) :0);
|
||||
// Initialize last known mouse position
|
||||
this.prev_pageY = 0;
|
||||
this.prev_pageX = 0;
|
||||
if (_converse.connection.connected) {
|
||||
this.height = this.model.get('height');
|
||||
this.width = this.model.get('width');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
setDimensions () {
|
||||
// Make sure the chat box has the right height
|
||||
// Make sure the chat box has the right height and width.
|
||||
this.adjustToViewport();
|
||||
this.setChatBoxHeight(this.model.get('height'));
|
||||
this.setChatBoxWidth(this.model.get('width'));
|
||||
},
|
||||
|
||||
setChatBoxHeight (height) {
|
||||
|
|
@ -153,10 +180,32 @@
|
|||
}
|
||||
},
|
||||
|
||||
setChatBoxWidth (width) {
|
||||
const { _converse } = this.__super__;
|
||||
if (width) {
|
||||
width = _converse.applyDragResistance(width, this.model.get('default_width'))+'px';
|
||||
} else {
|
||||
width = "";
|
||||
}
|
||||
this.el.style.width = width;
|
||||
const flyout_el = this.el.querySelector('.box-flyout');
|
||||
if (!_.isNull(flyout_el)) {
|
||||
flyout_el.style.width = width;
|
||||
}
|
||||
},
|
||||
|
||||
adjustToViewport () {
|
||||
/* Event handler called when viewport gets resized. We remove the custom height from chat boxes. */
|
||||
/* Event handler called when viewport gets resized. We remove
|
||||
* custom width/height from chat boxes.
|
||||
*/
|
||||
const viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
const viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
if (viewport_height <= this.model.get('height')) {
|
||||
if (viewport_width <= 480) {
|
||||
this.model.set('height', undefined);
|
||||
this.model.set('width', undefined);
|
||||
} else if (viewport_width <= this.model.get('width')) {
|
||||
this.model.set('width', undefined);
|
||||
} else if (viewport_height <= this.model.get('height')) {
|
||||
this.model.set('height', undefined);
|
||||
}
|
||||
},
|
||||
|
|
@ -175,6 +224,26 @@
|
|||
this.prev_pageY = ev.pageY;
|
||||
},
|
||||
|
||||
onStartHorizontalResize (ev) {
|
||||
const { _converse } = this.__super__;
|
||||
if (!_converse.allow_dragresize) { return true; }
|
||||
const flyout = this.el.querySelector('.box-flyout'),
|
||||
style = window.getComputedStyle(flyout);
|
||||
this.width = parseInt(style.width.replace(/px$/, ''), 10);
|
||||
_converse.resizing = {
|
||||
'chatbox': this,
|
||||
'direction': 'left'
|
||||
};
|
||||
this.prev_pageX = ev.pageX;
|
||||
},
|
||||
|
||||
onStartDiagonalResize (ev) {
|
||||
const { _converse } = this.__super__;
|
||||
this.onStartHorizontalResize(ev);
|
||||
this.onStartVerticalResize(ev);
|
||||
_converse.resizing.direction = 'topleft';
|
||||
},
|
||||
|
||||
resizeChatBox (ev) {
|
||||
let diff;
|
||||
const { _converse } = this.__super__;
|
||||
|
|
@ -186,12 +255,22 @@
|
|||
this.setChatBoxHeight(this.height);
|
||||
}
|
||||
}
|
||||
if (_.includes(_converse.resizing.direction, 'left')) {
|
||||
diff = this.prev_pageX - ev.pageX;
|
||||
if (diff) {
|
||||
this.width = ((this.width+diff) > (this.model.get('min_width') || 0)) ? (this.width+diff) : this.model.get('min_width');
|
||||
this.prev_pageX = ev.pageX;
|
||||
this.setChatBoxWidth(this.width);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
HeadlinesBoxView: {
|
||||
events: {
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
},
|
||||
|
||||
initialize () {
|
||||
|
|
@ -202,6 +281,7 @@
|
|||
render () {
|
||||
const result = this.__super__.render.apply(this, arguments);
|
||||
renderDragResizeHandles(this.__super__._converse, this);
|
||||
this.setWidth();
|
||||
return result;
|
||||
}
|
||||
},
|
||||
|
|
@ -210,6 +290,7 @@
|
|||
events: {
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
},
|
||||
|
||||
initialize () {
|
||||
|
|
@ -220,6 +301,7 @@
|
|||
render () {
|
||||
const result = this.__super__.render.apply(this, arguments);
|
||||
renderDragResizeHandles(this.__super__._converse, this);
|
||||
this.setWidth();
|
||||
return result;
|
||||
},
|
||||
|
||||
|
|
@ -239,6 +321,8 @@
|
|||
ChatRoomView: {
|
||||
events: {
|
||||
'mousedown .dragresize-top': 'onStartVerticalResize',
|
||||
'mousedown .dragresize-left': 'onStartHorizontalResize',
|
||||
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
|
||||
},
|
||||
|
||||
initialize () {
|
||||
|
|
@ -249,6 +333,7 @@
|
|||
render () {
|
||||
const result = this.__super__.render.apply(this, arguments);
|
||||
renderDragResizeHandles(this.__super__._converse, this);
|
||||
this.setWidth();
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
<div class="row no-gutters"></div>
|
||||
<div class="converse-chatboxes row no-gutters"></div>
|
||||
<div id="converse-modals" class="modals"></div>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<li class="feature" title="{{{ o.tt_persistent }}}"><span class="fa fa-save"></span>{{{ o.label_persistent }}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.temporary) { ]}
|
||||
<li class="feature" title="{{{ o.tt_temporary }}}"><span class="fa fa-snowflake"></span>{{{ o.label_temporary }}}</li>
|
||||
<li class="feature" title="{{{ o.tt_temporary }}}"><span class="fa fa-snowflake-o"></span>{{{ o.label_temporary }}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.nonanonymous) { ]}
|
||||
<li class="feature" title="{{{ o.tt_nonanonymous }}}"><span class="fa fa-idcard-dark"></span>{{{ o.label_nonanonymous }}}</li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user