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

Honor the min-width and min-height CSS properties...

Browse Source 
when it comes to chat box resizing.
This commit is contained in:
JC Brand 2015-09-25 21:00:38 +00:00
parent 9c16711581
commit 969c94d473
3 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
converse.js
View File

@ -1336,8 +1336,8 @@
/* Determine and store the default box size. /* Determine and store the default box size.
* We need this information for the drag-resizing feature. * We need this information for the drag-resizing feature.
*/ */
var $flyout = this.$el.find('.box-flyout');
if (typeof this.model.get('height') == 'undefined') { if (typeof this.model.get('height') == 'undefined') {
var $flyout = this.$el.find('.box-flyout');
var height = $flyout.height(); var height = $flyout.height();
var width = $flyout.width(); var width = $flyout.width();
this.model.set('height', height); this.model.set('height', height);
@ -1345,6 +1345,10 @@
this.model.set('width', width); this.model.set('width', width);
this.model.set('default_width', width); this.model.set('default_width', width);
} }
var min_width = $flyout.css('min-width');
var min_height = $flyout.css('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 // Initialize last known mouse position
this.prev_pageY = 0; this.prev_pageY = 0;
this.prev_pageX = 0; this.prev_pageX = 0;
@ -1770,7 +1774,7 @@
if (converse.resizing.direction.indexOf('top') === 0) { if (converse.resizing.direction.indexOf('top') === 0) {
diff = ev.pageY - this.prev_pageY; diff = ev.pageY - this.prev_pageY;
if (diff) { if (diff) {
this.height -= diff; this.height = ((this.height-diff) > this.model.get('min_height')) ? (this.height-diff) : this.model.get('min_height');
this.prev_pageY = ev.pageY; this.prev_pageY = ev.pageY;
this.setChatBoxHeight(this.height); this.setChatBoxHeight(this.height);
} }
@ -1778,7 +1782,7 @@
if (converse.resizing.direction.indexOf('left') !== -1) { if (converse.resizing.direction.indexOf('left') !== -1) {
diff = this.prev_pageX - ev.pageX; diff = this.prev_pageX - ev.pageX;
if (diff) { if (diff) {
this.width += diff; this.width = ((this.width+diff) > this.model.get('min_width')) ? (this.width+diff) : this.model.get('min_width');
this.prev_pageX = ev.pageX; this.prev_pageX = ev.pageX;
this.setChatBoxWidth(this.width); this.setChatBoxWidth(this.width);
} }

4
css/converse.css
View File

@ -1255,7 +1255,9 @@
bottom: 6px; bottom: 6px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block; display: block;
position: absolute; } position: absolute;
min-width: 200px;
min-height: 200px; }
#conversejs .box-flyout { #conversejs .box-flyout {
height: 400px; } height: 400px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {

2
sass/_core.scss
View File

@ -1510,6 +1510,8 @@
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block; display: block;
position: absolute; position: absolute;
min-width: $chat-width;
min-height: $chat-height/2;
} }
.box-flyout { .box-flyout {