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 @@ ...@@ -1222,6 +1222,7 @@
}, },
initialize: function () { initialize: function () {
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
this.model.messages.on('add', this.onMessageAdded, this); this.model.messages.on('add', this.onMessageAdded, this);
this.model.on('show', this.show, this); this.model.on('show', this.show, this);
this.model.on('destroy', this.hide, this); this.model.on('destroy', this.hide, this);
...@@ -1346,6 +1347,22 @@ ...@@ -1346,6 +1347,22 @@
return this; 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 () { initDragResize: function () {
/* 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.
...@@ -1373,6 +1390,13 @@ ...@@ -1373,6 +1390,13 @@
return this; 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 () { clearStatusNotification: function () {
this.$content.find('div.chat-event').remove(); this.$content.find('div.chat-event').remove();
}, },
...@@ -1780,14 +1804,22 @@ ...@@ -1780,14 +1804,22 @@
setChatBoxHeight: function (height) { setChatBoxHeight: function (height) {
if (!this.model.get('minimized')) { if (!this.model.get('minimized')) {
if (height) {
height = converse.applyDragResistance(height, this.model.get('default_height'))+'px'; height = converse.applyDragResistance(height, this.model.get('default_height'))+'px';
} else {
height = "";
}
this.$el.children('.box-flyout')[0].style.height = height; this.$el.children('.box-flyout')[0].style.height = height;
} }
}, },
setChatBoxWidth: function (width) { setChatBoxWidth: function (width) {
if (!this.model.get('minimized')) { if (!this.model.get('minimized')) {
if (width) {
width = converse.applyDragResistance(width, this.model.get('default_width'))+'px'; width = converse.applyDragResistance(width, this.model.get('default_width'))+'px';
} else {
width = "";
}
this.$el[0].style.width = width; this.$el[0].style.width = width;
this.$el.children('.box-flyout')[0].style.width = width; this.$el.children('.box-flyout')[0].style.width = width;
} }
...@@ -2116,7 +2148,7 @@ ...@@ -2116,7 +2148,7 @@
if (this.$el.is(':visible') && this.$el.css('opacity') === "1") { if (this.$el.is(':visible') && this.$el.css('opacity') === "1") {
return this.focus(); return this.focus();
} }
this.initDragResize(); this.initDragResize().setDimensions();
this.$el.fadeIn(function () { this.$el.fadeIn(function () {
if (typeof callback === "function") { if (typeof callback === "function") {
callback.apply(this, arguments); callback.apply(this, arguments);
...@@ -2485,6 +2517,7 @@ ...@@ -2485,6 +2517,7 @@
initialize: function () { initialize: function () {
this.$el.insertAfter(converse.controlboxtoggle.$el); 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('change:connected', this.onConnected, this);
this.model.on('destroy', this.hide, this); this.model.on('destroy', this.hide, this);
this.model.on('hide', this.hide, this); this.model.on('hide', this.hide, this);
...@@ -2568,7 +2601,7 @@ ...@@ -2568,7 +2601,7 @@
if (converse.allow_registration) { if (converse.allow_registration) {
this.registerpanel.render().$el.hide(); this.registerpanel.render().$el.hide();
} }
this.initDragResize(); this.initDragResize().setDimensions();
if ($feedback.length && $feedback.text() !== __('Connecting')) { if ($feedback.length && $feedback.text() !== __('Connecting')) {
this.$('.conn-feedback').replaceWith($feedback); this.$('.conn-feedback').replaceWith($feedback);
} }
...@@ -2595,7 +2628,7 @@ ...@@ -2595,7 +2628,7 @@
this.roomspanel.model.save({nick: Strophe.getNodeFromJid(converse.bare_jid)}); this.roomspanel.model.save({nick: Strophe.getNodeFromJid(converse.bare_jid)});
} }
} }
this.initDragResize(); this.initDragResize().setDimensions();
}, },
close: function (ev) { close: function (ev) {
...@@ -2845,6 +2878,7 @@ ...@@ -2845,6 +2878,7 @@
is_chatroom: true, is_chatroom: true,
initialize: function () { initialize: function () {
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
this.model.messages.on('add', this.onMessageAdded, this); this.model.messages.on('add', this.onMessageAdded, this);
this.model.on('change:minimized', function (item) { this.model.on('change:minimized', function (item) {
if (item.get('minimized')) { if (item.get('minimized')) {
......
...@@ -1769,6 +1769,8 @@ ...@@ -1769,6 +1769,8 @@
padding-left: 10px; } padding-left: 10px; }
#conversejs #converse-roster .roster-filter-group { #conversejs #converse-roster .roster-filter-group {
margin: 0 1em; margin: 0 1em;
width: 100%;
padding-right: 2em;
/* (jQ addClass:) if input has value: */ /* (jQ addClass:) if input has value: */
/* (jQ addClass:) if mouse is over the 'x' input area*/ } /* (jQ addClass:) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-group .roster-filter { #conversejs #converse-roster .roster-filter-group .roster-filter {
......
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
.roster-filter-group { .roster-filter-group {
margin: 0 1em; margin: 0 1em;
width: 100%;
padding-right: 1em + 2*$chat-gutter;
.roster-filter { .roster-filter {
float: left; float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center; 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-top"></div>
<div class="dragresize dragresize-topleft"></div> <div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></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-top"></div>
<div class="dragresize dragresize-topleft"></div> <div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></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-top"></div>
<div class="dragresize dragresize-topleft"></div> <div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></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