Commit d36775fe authored by JC Brand's avatar JC Brand

Fixes around resizing of chats.

- The .box-flyout container also needs it's width set upon page load.
- Remove custom height/width upon viewport change (if viewport is small enough).
parent 7c70452b
......@@ -1222,6 +1222,7 @@
},
initialize: function () {
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
this.model.messages.on('add', this.onMessageAdded, this);
this.model.on('show', this.show, this);
this.model.on('destroy', this.hide, this);
......@@ -1346,6 +1347,22 @@
return this;
},
adjustToViewport: function () {
/* Event handler called when viewport gets resized. We remove
* custom width/height from chat boxes.
*/
var viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
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);
}
},
initDragResize: function () {
/* Determine and store the default box size.
* We need this information for the drag-resizing feature.
......@@ -1373,6 +1390,13 @@
return this;
},
setDimensions: function () {
// 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'));
},
clearStatusNotification: function () {
this.$content.find('div.chat-event').remove();
},
......@@ -1780,14 +1804,22 @@
setChatBoxHeight: function (height) {
if (!this.model.get('minimized')) {
height = converse.applyDragResistance(height, this.model.get('default_height'))+'px';
if (height) {
height = converse.applyDragResistance(height, this.model.get('default_height'))+'px';
} else {
height = "";
}
this.$el.children('.box-flyout')[0].style.height = height;
}
},
setChatBoxWidth: function (width) {
if (!this.model.get('minimized')) {
width = converse.applyDragResistance(width, this.model.get('default_width'))+'px';
if (width) {
width = converse.applyDragResistance(width, this.model.get('default_width'))+'px';
} else {
width = "";
}
this.$el[0].style.width = width;
this.$el.children('.box-flyout')[0].style.width = width;
}
......@@ -2116,7 +2148,7 @@
if (this.$el.is(':visible') && this.$el.css('opacity') === "1") {
return this.focus();
}
this.initDragResize();
this.initDragResize().setDimensions();
this.$el.fadeIn(function () {
if (typeof callback === "function") {
callback.apply(this, arguments);
......@@ -2485,6 +2517,7 @@
initialize: function () {
this.$el.insertAfter(converse.controlboxtoggle.$el);
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
this.model.on('change:connected', this.onConnected, this);
this.model.on('destroy', this.hide, this);
this.model.on('hide', this.hide, this);
......@@ -2568,7 +2601,7 @@
if (converse.allow_registration) {
this.registerpanel.render().$el.hide();
}
this.initDragResize();
this.initDragResize().setDimensions();
if ($feedback.length && $feedback.text() !== __('Connecting')) {
this.$('.conn-feedback').replaceWith($feedback);
}
......@@ -2595,7 +2628,7 @@
this.roomspanel.model.save({nick: Strophe.getNodeFromJid(converse.bare_jid)});
}
}
this.initDragResize();
this.initDragResize().setDimensions();
},
close: function (ev) {
......@@ -2845,6 +2878,7 @@
is_chatroom: true,
initialize: function () {
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
this.model.messages.on('add', this.onMessageAdded, this);
this.model.on('change:minimized', function (item) {
if (item.get('minimized')) {
......
......@@ -1769,6 +1769,8 @@
padding-left: 10px; }
#conversejs #converse-roster .roster-filter-group {
margin: 0 1em;
width: 100%;
padding-right: 2em;
/* (jQ addClass:) if input has value: */
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-group .roster-filter {
......
......@@ -23,6 +23,8 @@
.roster-filter-group {
margin: 0 1em;
width: 100%;
padding-right: 1em + 2*$chat-gutter;
.roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
......
<div class="flyout box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="flyout box-flyout">
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
......
<div class="flyout box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="flyout box-flyout">
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
......
<div class="flyout box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="flyout box-flyout">
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment