Commit 36549bf6 authored by JC Brand's avatar JC Brand

Revert `flexbox`, `column-reverse` changes

Unfortunately this doesn't work on Firefox and there's no proper
workaround. https://github.com/philipwalton/flexbugs/issues/108

Reverts:

Revert "Bugfix. Properly insert error messages and spinner"
This reverts commit 6a419cc1.

Revert "Use flexbox to keep the chat scrolled down"
This reverts commit dd91d3cc.
parent 303a8b63
...@@ -61,8 +61,6 @@ ...@@ -61,8 +61,6 @@
- Removed events `statusChanged` and `statusMessageChanged`. Instead, you can - Removed events `statusChanged` and `statusMessageChanged`. Instead, you can
listen on the `change:status` or `change:status\_message` events on listen on the `change:status` or `change:status\_message` events on
`_converse.xmppstatus`. `_converse.xmppstatus`.
- Use flexbox instead of JavaScript to keep chat scrolled down. Due to this
change, messages are now inserted into the DOM in reverse order than before.
### API changes ### API changes
......
...@@ -207,8 +207,6 @@ ...@@ -207,8 +207,6 @@
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
.chat-content { .chat-content {
display: flex;
flex-direction: column-reverse;
padding: 1em 0; padding: 1em 0;
height: 100%; height: 100%;
font-size: var(--message-font-size); font-size: var(--message-font-size);
......
...@@ -77,9 +77,10 @@ ...@@ -77,9 +77,10 @@
} }
&.chat-msg { &.chat-msg {
display: flex; display: inline-flex;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
overflow: auto; // Ensures that content stays inside
padding: 0.125rem 1rem; padding: 0.125rem 1rem;
&.onload { &.onload {
...@@ -151,6 +152,7 @@ ...@@ -151,6 +152,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
width: 100%;
} }
.chat-msg__message { .chat-msg__message {
...@@ -267,7 +269,7 @@ ...@@ -267,7 +269,7 @@
} }
&.chat-msg--action { &.chat-msg--action {
.chat-msg__content { .chat-msg__content {
flex-wrap: wrap; flex-wrap: nowrap;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
} }
......
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
}).c('body').t('hello world').tree(); }).c('body').t('hello world').tree();
await _converse.chatboxes.onMessage(msg); await _converse.chatboxes.onMessage(msg);
await test_utils.waitUntil(() => view.content.querySelectorAll('.chat-msg').length); await test_utils.waitUntil(() => view.content.querySelectorAll('.chat-msg').length);
expect(view.content.firstElementChild.textContent.trim().indexOf('hello world')).not.toBe(-1); expect(view.content.lastElementChild.textContent.trim().indexOf('hello world')).not.toBe(-1);
done(); done();
})); }));
...@@ -78,22 +78,22 @@ ...@@ -78,22 +78,22 @@
message = '/me is as well'; message = '/me is as well';
await test_utils.sendMessage(view, message); await test_utils.sendMessage(view, message);
expect(view.el.querySelectorAll('.chat-msg--action').length).toBe(2); expect(view.el.querySelectorAll('.chat-msg--action').length).toBe(2);
await test_utils.waitUntil(() => sizzle('.chat-msg__author:first', view.el).pop().textContent.trim() === '**Romeo Montague'); await test_utils.waitUntil(() => sizzle('.chat-msg__author:last', view.el).pop().textContent.trim() === '**Romeo Montague');
const last_el = sizzle('.chat-msg__text:first', view.el).pop(); const last_el = sizzle('.chat-msg__text:last', view.el).pop();
expect(last_el.textContent).toBe('is as well'); expect(last_el.textContent).toBe('is as well');
expect(u.hasClass('chat-msg--followup', last_el)).toBe(false); expect(u.hasClass('chat-msg--followup', last_el)).toBe(false);
// Check that /me messages after a normal message don't // Check that /me messages after a normal message don't
// get the 'chat-msg--followup' class. // get the 'chat-msg--followup' class.
message = 'This a normal message'; message = 'This a normal message';
await test_utils.sendMessage(view, message); await test_utils.sendMessage(view, message);
let message_el = view.el.querySelector('.message:first-child'); let message_el = view.el.querySelector('.message:last-child');
expect(u.hasClass('chat-msg--followup', message_el)).toBeFalsy(); expect(u.hasClass('chat-msg--followup', message_el)).toBeFalsy();
message = '/me wrote a 3rd person message'; message = '/me wrote a 3rd person message';
await test_utils.sendMessage(view, message); await test_utils.sendMessage(view, message);
message_el = view.el.querySelector('.message:first-child'); message_el = view.el.querySelector('.message:last-child');
expect(view.el.querySelectorAll('.chat-msg--action').length).toBe(3); expect(view.el.querySelectorAll('.chat-msg--action').length).toBe(3);
expect(sizzle('.chat-msg__text:first', view.el).pop().textContent).toBe('wrote a 3rd person message'); expect(sizzle('.chat-msg__text:last', view.el).pop().textContent).toBe('wrote a 3rd person message');
expect(u.isVisible(sizzle('.chat-msg__author:first', view.el).pop())).toBeTruthy(); expect(u.isVisible(sizzle('.chat-msg__author:last', view.el).pop())).toBeTruthy();
expect(u.hasClass('chat-msg--followup', message_el)).toBeFalsy(); expect(u.hasClass('chat-msg--followup', message_el)).toBeFalsy();
done(); done();
})); }));
...@@ -267,7 +267,7 @@ ...@@ -267,7 +267,7 @@
const jid = el.textContent.replace(/ /g,'.').toLowerCase() + '@montague.lit'; const jid = el.textContent.replace(/ /g,'.').toLowerCase() + '@montague.lit';
spyOn(_converse.api, "trigger"); spyOn(_converse.api, "trigger");
el.click(); el.click();
await test_utils.waitUntil(() => _converse.api.trigger.calls.count(), 1000); await test_utils.waitUntil(() => _converse.api.trigger.calls.count(), 500);
expect(_converse.chatboxes.length).toEqual(2); expect(_converse.chatboxes.length).toEqual(2);
expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxFocused', jasmine.any(Object)); expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxFocused', jasmine.any(Object));
done(); done();
......
This diff is collapsed.
This diff is collapsed.
...@@ -208,7 +208,7 @@ ...@@ -208,7 +208,7 @@
_converse.connection._dataRecv(test_utils.createRequest(stanza)); _converse.connection._dataRecv(test_utils.createRequest(stanza));
await new Promise((resolve, reject) => view.once('messageInserted', resolve)); await new Promise((resolve, reject) => view.once('messageInserted', resolve));
expect(view.model.messages.length).toBe(2); expect(view.model.messages.length).toBe(2);
expect(view.el.querySelectorAll('.chat-msg__body')[0].textContent.trim()) expect(view.el.querySelectorAll('.chat-msg__body')[1].textContent.trim())
.toBe('This is an encrypted message from the contact'); .toBe('This is an encrypted message from the contact');
// #1193 Check for a received message without <body> tag // #1193 Check for a received message without <body> tag
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
await new Promise((resolve, reject) => view.once('messageInserted', resolve)); await new Promise((resolve, reject) => view.once('messageInserted', resolve));
await test_utils.waitUntil(() => view.model.messages.length > 1); await test_utils.waitUntil(() => view.model.messages.length > 1);
expect(view.model.messages.length).toBe(3); expect(view.model.messages.length).toBe(3);
expect(view.el.querySelectorAll('.chat-msg__body')[0].textContent.trim()) expect(view.el.querySelectorAll('.chat-msg__body')[2].textContent.trim())
.toBe('Another received encrypted message without fallback'); .toBe('Another received encrypted message without fallback');
done(); done();
})); }));
......
This diff is collapsed.
...@@ -470,6 +470,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -470,6 +470,7 @@ converse.plugins.add('converse-muc-views', {
this.initDebounced(); this.initDebounced();
this.model.messages.on('add', this.onMessageAdded, this); this.model.messages.on('add', this.onMessageAdded, this);
this.model.messages.on('rendered', this.scrollDown, this);
this.model.messages.on('reset', () => { this.model.messages.on('reset', () => {
this.content.innerHTML = ''; this.content.innerHTML = '';
this.removeAll(); this.removeAll();
...@@ -679,6 +680,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -679,6 +680,7 @@ converse.plugins.add('converse-muc-views', {
this.model.clearUnreadMsgCounter(); this.model.clearUnreadMsgCounter();
this.model.save(); this.model.save();
} }
this.scrollDown();
this.renderEmojiPicker(); this.renderEmojiPicker();
}, },
...@@ -706,6 +708,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -706,6 +708,7 @@ converse.plugins.add('converse-muc-views', {
} else if (conn_status === converse.ROOMSTATUS.ENTERED) { } else if (conn_status === converse.ROOMSTATUS.ENTERED) {
this.hideSpinner(); this.hideSpinner();
this.setChatState(_converse.ACTIVE); this.setChatState(_converse.ACTIVE);
this.scrollDown();
if (_converse.auto_focus) { if (_converse.auto_focus) {
this.focus(); this.focus();
} }
...@@ -763,6 +766,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -763,6 +766,7 @@ converse.plugins.add('converse-muc-views', {
ev.stopPropagation(); ev.stopPropagation();
} }
this.model.save({'hidden_occupants': true}); this.model.save({'hidden_occupants': true});
this.scrollDown();
}, },
toggleOccupants (ev) { toggleOccupants (ev) {
...@@ -774,6 +778,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -774,6 +778,7 @@ converse.plugins.add('converse-muc-views', {
ev.stopPropagation(); ev.stopPropagation();
} }
this.model.save({'hidden_occupants': !this.model.get('hidden_occupants')}); this.model.save({'hidden_occupants': !this.model.get('hidden_occupants')});
this.scrollDown();
}, },
onOccupantClicked (ev) { onOccupantClicked (ev) {
...@@ -1321,7 +1326,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -1321,7 +1326,7 @@ converse.plugins.add('converse-muc-views', {
return; return;
} }
if (!dayjs(el.getAttribute('data-isodate')).isSame(new Date(), "day")) { if (!dayjs(el.getAttribute('data-isodate')).isSame(new Date(), "day")) {
el = el.nextElementSibling; el = el.previousElementSibling;
continue; continue;
} }
if (data.join === nick || if (data.join === nick ||
...@@ -1330,7 +1335,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -1330,7 +1335,7 @@ converse.plugins.add('converse-muc-views', {
data.joinleave === nick) { data.joinleave === nick) {
return el; return el;
} }
el = el.nextElementSibling; el = el.previousElementSibling;
} }
}, },
...@@ -1341,7 +1346,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -1341,7 +1346,7 @@ converse.plugins.add('converse-muc-views', {
} }
const nick = occupant.get('nick'), const nick = occupant.get('nick'),
stat = _converse.muc_show_join_leave_status ? occupant.get('status') : null, stat = _converse.muc_show_join_leave_status ? occupant.get('status') : null,
prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.firstElementChild, nick), prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.lastElementChild, nick),
data = _.get(prev_info_el, 'dataset', {}); data = _.get(prev_info_el, 'dataset', {});
if (data.leave === nick) { if (data.leave === nick) {
...@@ -1359,8 +1364,8 @@ converse.plugins.add('converse-muc-views', { ...@@ -1359,8 +1364,8 @@ converse.plugins.add('converse-muc-views', {
'message': message 'message': message
}; };
this.content.removeChild(prev_info_el); this.content.removeChild(prev_info_el);
this.content.insertAdjacentHTML('afterBegin', tpl_info(data)); this.content.insertAdjacentHTML('beforeend', tpl_info(data));
const el = this.content.firstElementChild; const el = this.content.lastElementChild;
setTimeout(() => u.addClass('fade-out', el), 5000); setTimeout(() => u.addClass('fade-out', el), 5000);
setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500); setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500);
} else { } else {
...@@ -1379,12 +1384,13 @@ converse.plugins.add('converse-muc-views', { ...@@ -1379,12 +1384,13 @@ converse.plugins.add('converse-muc-views', {
}; };
if (prev_info_el) { if (prev_info_el) {
this.content.removeChild(prev_info_el); this.content.removeChild(prev_info_el);
this.content.insertAdjacentHTML('afterBegin', tpl_info(data)); this.content.insertAdjacentHTML('beforeend', tpl_info(data));
} else { } else {
this.content.insertAdjacentHTML('afterBegin', tpl_info(data)); this.content.insertAdjacentHTML('beforeend', tpl_info(data));
this.insertDayIndicator(this.content.firstElementChild); this.insertDayIndicator(this.content.lastElementChild);
} }
} }
this.scrollDown();
}, },
showLeaveNotification (occupant) { showLeaveNotification (occupant) {
...@@ -1395,7 +1401,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -1395,7 +1401,7 @@ converse.plugins.add('converse-muc-views', {
} }
const nick = occupant.get('nick'), const nick = occupant.get('nick'),
stat = _converse.muc_show_join_leave_status ? occupant.get('status') : null, stat = _converse.muc_show_join_leave_status ? occupant.get('status') : null,
prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.firstElementChild, nick), prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.lastElementChild, nick),
dataset = _.get(prev_info_el, 'dataset', {}); dataset = _.get(prev_info_el, 'dataset', {});
if (dataset.join === nick) { if (dataset.join === nick) {
...@@ -1413,8 +1419,8 @@ converse.plugins.add('converse-muc-views', { ...@@ -1413,8 +1419,8 @@ converse.plugins.add('converse-muc-views', {
'message': message 'message': message
}; };
this.content.removeChild(prev_info_el); this.content.removeChild(prev_info_el);
this.content.insertAdjacentHTML('afterBegin', tpl_info(data)); this.content.insertAdjacentHTML('beforeend', tpl_info(data));
const el = this.content.firstElementChild; const el = this.content.lastElementChild;
setTimeout(() => u.addClass('fade-out', el), 5000); setTimeout(() => u.addClass('fade-out', el), 5000);
setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500); setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500);
} else { } else {
...@@ -1433,12 +1439,13 @@ converse.plugins.add('converse-muc-views', { ...@@ -1433,12 +1439,13 @@ converse.plugins.add('converse-muc-views', {
} }
if (prev_info_el) { if (prev_info_el) {
this.content.removeChild(prev_info_el); this.content.removeChild(prev_info_el);
this.content.insertAdjacentHTML('afterBegin', tpl_info(data)); this.content.insertAdjacentHTML('beforeend', tpl_info(data));
} else { } else {
this.content.insertAdjacentHTML('afterBegin', tpl_info(data)); this.content.insertAdjacentHTML('beforeend', tpl_info(data));
this.insertDayIndicator(this.content.firstElementChild); this.insertDayIndicator(this.content.lastElementChild);
} }
} }
this.scrollDown();
}, },
renderAfterTransition () { renderAfterTransition () {
...@@ -1453,6 +1460,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -1453,6 +1460,7 @@ converse.plugins.add('converse-muc-views', {
} else { } else {
u.showElement(this.el.querySelector('.chat-area')); u.showElement(this.el.querySelector('.chat-area'));
u.showElement(this.el.querySelector('.occupants')); u.showElement(this.el.querySelector('.occupants'));
this.scrollDown();
} }
}, },
...@@ -1502,6 +1510,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -1502,6 +1510,7 @@ converse.plugins.add('converse-muc-views', {
'render_message': true 'render_message': true
})); }));
} }
this.scrollDown();
} }
}); });
......
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