Skip to content

C
converse.js
Commit 80e5a5a2 authored by JC Brand's avatar JC Brand
Browse files
Options

Explore how to not cause jitter when typing notifications appear 

The idea is to have a separate container outside of the messages area
for showing notifications.

However, the extra space added by this container causes messages to look
like they're cut off prematurely when one scrolls up.

A redesign of the chat's textarea would be necessary to make things look
harmonious again.
parent 10fd902f
Hide whitespace changes
Inline Side-by-side
Showing with 232 additions and 218 deletions
css/converse.css
View file @ 80e5a5a2
......@@ -7445,7 +7445,9 @@ body.reset {
overflow-y: auto;
border: 0;
background-color: #ffffff;
line-height: 1.3em; }
line-height: 1.3em;
display: flex;
flex-direction: column; }
#conversejs .chatbox .chat-content video {
width: 100%; }
#conversejs .chatbox .chat-content progress {
......@@ -7507,7 +7509,7 @@ body.reset {
margin: 0;
padding: 0.25em;
display: block;
border-top: 8px solid #3AA569;
border-top: 4px solid #3AA569;
background-color: white;
color: #3AA569; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
......@@ -8672,7 +8674,7 @@ body.reset {
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar {
background-color: white;
border-top: 8px solid #E77051;
border-top: 4px solid #E77051;
color: #E77051; }
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
......@@ -8793,166 +8795,166 @@ body.reset {
border: 1.2em solid #E7A151;
border-top: 0.8em solid #E7A151; }
#conversejs .message.date-separator {
height: 2em;
margin: 0;
position: relative;
text-align: center;
z-index: 0; }
#conversejs .message.date-separator .separator {
border: 0.5px solid #3AA569;
margin: 0 1em;
position: relative;
top: 1em;
z-index: 5; }
#conversejs .message.date-separator .separator-text {
background: white;
bottom: 1px;
color: #555;
display: inline-block;
line-height: 2em;
padding: 0 1em;
#conversejs .message {
flex-shrink: 0; }
#conversejs .message.date-separator {
height: 2em;
margin: 0;
position: relative;
z-index: 5; }
#conversejs .message.chat-info {
color: #3AA569;
font-size: 14px;
line-height: 14px;
padding: 0.35rem 1rem; }
#conversejs .message.chat-info.badge {
color: white; }
#conversejs .message.chat-info.chat-state-notification {
font-style: italic; }
#conversejs .message.chat-info.chat-event {
clear: left;
text-align: center;
z-index: 0; }
#conversejs .message.date-separator .separator {
border: 0.5px solid #3AA569;
margin: 0 1em;
position: relative;
top: 1em;
z-index: 5; }
#conversejs .message.date-separator .separator-text {
background: white;
bottom: 1px;
color: #555;
display: inline-block;
line-height: 2em;
padding: 0 1em;
position: relative;
z-index: 5; }
#conversejs .message.chat-info {
color: #3AA569;
font-size: 14px;
line-height: 14px;
padding: 0.35rem 1rem; }
#conversejs .message.chat-info.badge {
color: white; }
#conversejs .message.chat-info.chat-event {
clear: left;
font-style: italic; }
#conversejs .message.chat-info.chat-error {
color: #D24E2B;
font-weight: bold; }
#conversejs .message .chat-image {
height: auto;
width: auto;
max-height: 15em;
max-width: 100%; }
#conversejs .message.chat-msg--action {
font-style: italic; }
#conversejs .message.chat-info.chat-error {
color: #D24E2B;
font-weight: bold; }
#conversejs .message .chat-image {
height: auto;
width: auto;
max-height: 15em;
max-width: 100%; }
#conversejs .message.chat-msg--action {
font-style: italic; }
#conversejs .message.chat-msg {
display: flex;
flex-direction: row;
overflow: auto;
padding: 0.25rem 1rem; }
#conversejs .message.chat-msg.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#conversejs .message.chat-msg:hover {
background-color: rgba(0, 0, 0, 0.035); }
#conversejs .message.chat-msg:hover .chat-msg__actions .chat-msg__action {
opacity: 1; }
#conversejs .message.chat-msg.correcting.groupchat {
background-color: #fadfd7; }
#conversejs .message.chat-msg.correcting:not(.groupchat) {
background-color: #e7f7ee; }
#conversejs .message.chat-msg .spoiler {
margin-top: 0.5em; }
#conversejs .message.chat-msg .spoiler-hint {
margin-bottom: 0.5em; }
#conversejs .message.chat-msg .spoiler-toggle {
color: white; }
#conversejs .message.chat-msg .spoiler-toggle i {
color: white;
padding-right: 0.5em; }
#conversejs .message.chat-msg .spoiler-toggle:before {
padding-right: 0.25em;
whitespace: nowrap; }
#conversejs .message.chat-msg .chat-msg__content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
margin-left: 0.5rem;
width: 100%; }
#conversejs .message.chat-msg .chat-msg__content--action {
margin-left: 0; }
#conversejs .message.chat-msg .chat-msg__body {
#conversejs .message.chat-msg {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%; }
#conversejs .message.chat-msg .chat-msg__message {
display: flex;
flex-direction: column;
width: 100%; }
#conversejs .message.chat-msg .chat-msg__edit-modal {
cursor: pointer;
padding-right: 0.5em; }
#conversejs .message.chat-msg.headline .chat-msg__body {
margin-left: 0; }
#conversejs .message.chat-msg .chat-msg__text {
padding: 0;
color: #555;
width: 100%; }
#conversejs .message.chat-msg .chat-msg__text a {
word-wrap: break-word;
word-break: break-all; }
#conversejs .message.chat-msg .chat-msg__text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg__media {
margin-top: 0.25rem;
word-break: break-all; }
#conversejs .message.chat-msg .chat-msg__media a {
word-wrap: break-word; }
#conversejs .message.chat-msg .chat-msg__media audio {
overflow: auto;
padding: 0.25rem 1rem; }
#conversejs .message.chat-msg.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#conversejs .message.chat-msg:hover {
background-color: rgba(0, 0, 0, 0.035); }
#conversejs .message.chat-msg:hover .chat-msg__actions .chat-msg__action {
opacity: 1; }
#conversejs .message.chat-msg.correcting.groupchat {
background-color: #fadfd7; }
#conversejs .message.chat-msg.correcting:not(.groupchat) {
background-color: #e7f7ee; }
#conversejs .message.chat-msg .spoiler {
margin-top: 0.5em; }
#conversejs .message.chat-msg .spoiler-hint {
margin-bottom: 0.5em; }
#conversejs .message.chat-msg .spoiler-toggle {
color: white; }
#conversejs .message.chat-msg .spoiler-toggle i {
color: white;
padding-right: 0.5em; }
#conversejs .message.chat-msg .spoiler-toggle:before {
padding-right: 0.25em;
whitespace: nowrap; }
#conversejs .message.chat-msg .chat-msg__content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
margin-left: 0.5rem;
width: 100%; }
#conversejs .message.chat-msg .chat-msg__actions .chat-msg__action {
height: 14px;
font-size: 14px;
padding: 0;
border: none;
opacity: 0;
background: transparent;
cursor: pointer; }
#conversejs .message.chat-msg .chat-msg__actions .chat-msg__action:focus {
#conversejs .message.chat-msg .chat-msg__content--action {
margin-left: 0; }
#conversejs .message.chat-msg .chat-msg__body {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%; }
#conversejs .message.chat-msg .chat-msg__message {
display: flex;
flex-direction: column;
width: 100%; }
#conversejs .message.chat-msg .chat-msg__edit-modal {
cursor: pointer;
padding-right: 0.5em; }
#conversejs .message.chat-msg.headline .chat-msg__body {
margin-left: 0; }
#conversejs .message.chat-msg .chat-msg__text {
padding: 0;
color: #555;
width: 100%; }
#conversejs .message.chat-msg .chat-msg__text a {
word-wrap: break-word;
word-break: break-all; }
#conversejs .message.chat-msg .chat-msg__text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg__media {
margin-top: 0.25rem;
word-break: break-all; }
#conversejs .message.chat-msg .chat-msg__media a {
word-wrap: break-word; }
#conversejs .message.chat-msg .chat-msg__media audio {
width: 100%; }
#conversejs .message.chat-msg .chat-msg__actions .chat-msg__action {
height: 14px;
font-size: 14px;
padding: 0;
border: none;
opacity: 0;
background: transparent;
cursor: pointer; }
#conversejs .message.chat-msg .chat-msg__actions .chat-msg__action:focus {
display: block; }
#conversejs .message.chat-msg .chat-msg__avatar {
margin-top: 0.5em;
height: 36px;
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg__heading {
width: 100%;
margin-top: 0.5em;
padding-right: 0.25rem;
padding-bottom: 0.25rem;
display: block; }
#conversejs .message.chat-msg .chat-msg__avatar {
margin-top: 0.5em;
height: 36px;
vertical-align: middle;
width: 36px; }
#conversejs .message.chat-msg .chat-msg__heading {
width: 100%;
margin-top: 0.5em;
padding-right: 0.25rem;
padding-bottom: 0.25rem;
display: block; }
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__author {
white-space: nowrap;
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
font-size: 115%; }
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__author .badge {
font-size: 80%;
font-family: "Helvetica", "Arial", sans-serif; }
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__time {
padding-left: 0.25em;
color: #8c8c8c; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__content {
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__text {
width: auto; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__heading {
margin-top: 0;
padding-bottom: 0;
width: auto; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__author {
font-size: 14px; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__time {
margin-left: 0; }
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__heading,
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__avatar {
display: none; }
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__content {
margin-left: 2.75rem; }
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__author {
white-space: nowrap;
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
font-size: 115%; }
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__author .badge {
font-size: 80%;
font-family: "Helvetica", "Arial", sans-serif; }
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__time {
padding-left: 0.25em;
color: #8c8c8c; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__content {
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__text {
width: auto; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__heading {
margin-top: 0;
padding-bottom: 0;
width: auto; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__author {
font-size: 14px; }
#conversejs .message.chat-msg.chat-msg--action .chat-msg__time {
margin-left: 0; }
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__heading,
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__avatar {
display: none; }
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__content {
margin-left: 2.75rem; }
#conversejs .chatroom-body .message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
......@@ -8965,6 +8967,14 @@ body.reset {
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) .message.chat-msg .chat-msg__author {
white-space: normal; } }
#conversejs .chat-state-notifications {
flex-basis: 1.8em;
flex-shrink: 0;
height: 1.8em;
background-color: white; }
#conversejs .message .chat-info.chat-state-notification {
font-style: italic; }
#conversejs.converse-overlayed #minimized-chats {
order: 100;
width: 130px;
......
dist/converse.js
View file @ 80e5a5a2
......@@ -69970,10 +69970,18 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
if (_.isNull(prev_msg_date) || moment(next_msg_date).isAfter(prev_msg_date, 'day')) {
const day_date = moment(next_msg_date).startOf('day');
next_msg_el.insertAdjacentHTML('beforeBegin', tpl_new_day({
'isodate': day_date.format(),
'datestring': day_date.format("dddd MMM Do YYYY")
}));
if (u.hasClass('chat-state-notification', next_msg_el)) {
next_msg_el.parentElement.insertAdjacentHTML('beforeBegin', tpl_new_day({
'isodate': day_date.format(),
'datestring': day_date.format("dddd MMM Do YYYY")
}));
} else {
next_msg_el.insertAdjacentHTML('beforeBegin', tpl_new_day({
'isodate': day_date.format(),
'datestring': day_date.format("dddd MMM Do YYYY")
}));
}
}
},
......@@ -70068,11 +70076,12 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
},
clearChatStateNotification(message, isodate) {
if (isodate) {
_.each(sizzle(`.chat-state-notification[data-csn="${message.get('from')}"][data-isodate="${isodate}"]`, this.content), u.removeElement);
} else {
_.each(sizzle(`.chat-state-notification[data-csn="${message.get('from')}"]`, this.content), u.removeElement);
}
this.el.querySelector('.chat-state-notifications').innerHTML = '';
},
insertChatStateNotification(view) {
const container = this.el.querySelector('.chat-state-notifications');
container.insertAdjacentElement('afterbegin', view.el);
},
shouldShowOnTextMessage() {
......@@ -70159,9 +70168,14 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
'model': message
});
this.clearChatStateNotification(message);
this.insertMessage(view);
this.insertDayIndicator(view.el);
this.setScrollPosition(view.el);
if (message.isOnlyChatStateNotification()) {
this.insertChatStateNotification(view);
} else {
this.insertMessage(view);
this.insertDayIndicator(view.el);
this.setScrollPosition(view.el);
}
if (u.isNewMessage(message)) {
if (message.get('sender') === 'me') {
......@@ -76257,6 +76271,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
this.el.innerHTML = tpl_chatroom();
this.renderHeading();
this.renderChatArea();
this.renderMessageForm();
if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
this.showSpinner();
......@@ -76276,14 +76291,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
if (_.isNull(this.el.querySelector('.chat-area'))) {
const container_el = this.el.querySelector('.chatroom-body');
container_el.insertAdjacentHTML('beforeend', tpl_chatarea({
'label_message': __('Message'),
'label_send': __('Send'),
'show_send_button': _converse.show_send_button,
'show_toolbar': _converse.show_toolbar,
'unread_msgs': __('You have unread messages')
'show_send_button': _converse.show_send_button
}));
container_el.insertAdjacentElement('beforeend', this.occupantsview.el);
this.renderToolbar(tpl_chatroom_toolbar);
this.content = this.el.querySelector('.chat-content');
this.toggleOccupants(null, true);
}
......@@ -84346,31 +84356,13 @@ return __p
var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
module.exports = function(o) {
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
var __t, __p = '', __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/chatarea.html -->\n<div class="chat-area col">\n <div class="chat-content ';
if (o.show_send_button) { ;
__p += 'chat-content-sendbutton';
} ;
__p += '"></div>\n <div class="new-msgs-indicator hidden">▼ ' +
__e( o.unread_msgs ) +
' ▼</div>\n <form class="sendXMPPMessage">\n ';
if (o.show_toolbar) { ;
__p += '\n <ul class="chat-toolbar no-text-select"></ul>\n ';
} ;
__p += '\n <textarea type="text" class="chat-textarea ';
if (o.show_send_button) { ;
__p += 'chat-textarea-send-button';
} ;
__p += '"\n placeholder="' +
__e(o.label_message) +
'"></textarea>\n ';
if (o.show_send_button) { ;
__p += '\n <button type="submit" class="pure-button send-button">' +
__e( o.label_send ) +
'</button>\n ';
} ;
__p += '\n </form>\n</div>\n';
__p += '"></div>\n <div class="message-form-container"/>\n</div>\n';
return __p
};
......@@ -84391,7 +84383,7 @@ __p += '<!-- src/templates/chatbox.html -->\n<div class="flyout box-flyout">\n
if (o.show_send_button) { ;
__p += 'chat-content-sendbutton';
} ;
__p += '"></div>\n <div class="message-form-container"/>\n </div>\n</div>\n';
__p += '"></div>\n <div class="chat-state-notifications"></div>\n <div class="message-form-container"/>\n </div>\n</div>\n';
return __p
};
sass/_chatbox.scss
View file @ 80e5a5a2
......@@ -197,6 +197,8 @@
border: 0;
background-color: #ffffff;
line-height: 1.3em;
display: flex;
flex-direction: column;
video {
width: 100%
......
sass/_messages.scss
View file @ 80e5a5a2
#conversejs {
.message {
flex-shrink: 0;
&.date-separator {
height: 2em;
......@@ -37,9 +38,6 @@
&.badge {
color: $chat-head-text-color;
}
&.chat-state-notification {
font-style: italic;
}
&.chat-event {
clear: left;
font-style: italic;
......
sass/converse.scss
View file @ 80e5a5a2
......@@ -48,6 +48,7 @@
@import "chatrooms";
@import "headline";
@import "messages";
@import "csn";
@import "minimized_chats";
@import "bookmarks";
@import "awesomplete";
......
src/converse-chatview.js
View file @ 80e5a5a2
......@@ -590,12 +590,21 @@
if (_.isNull(prev_msg_date) || moment(next_msg_date).isAfter(prev_msg_date, 'day')) {
const day_date = moment(next_msg_date).startOf('day');
next_msg_el.insertAdjacentHTML('beforeBegin',
tpl_new_day({
'isodate': day_date.format(),
'datestring': day_date.format("dddd MMM Do YYYY")
})
);
if (u.hasClass('chat-state-notification', next_msg_el)) {
next_msg_el.parentElement.insertAdjacentHTML('beforeBegin',
tpl_new_day({
'isodate': day_date.format(),
'datestring': day_date.format("dddd MMM Do YYYY")
})
);
} else {
next_msg_el.insertAdjacentHTML('beforeBegin',
tpl_new_day({
'isodate': day_date.format(),
'datestring': day_date.format("dddd MMM Do YYYY")
})
);
}
}
},
......@@ -682,14 +691,12 @@
},
clearChatStateNotification (message, isodate) {
if (isodate) {
_.each(
sizzle(`.chat-state-notification[data-csn="${message.get('from')}"][data-isodate="${isodate}"]`, this.content),
u.removeElement
);
} else {
_.each(sizzle(`.chat-state-notification[data-csn="${message.get('from')}"]`, this.content), u.removeElement);
}
this.el.querySelector('.chat-state-notifications').innerHTML = '';
},
insertChatStateNotification (view) {
const container = this.el.querySelector('.chat-state-notifications');
container.insertAdjacentElement('afterbegin', view.el);
},
shouldShowOnTextMessage () {
......@@ -710,7 +717,7 @@
}
}
const current_msg_date = moment(view.model.get('time')) || moment,
previous_msg_date = this.getLastMessageDate(current_msg_date);
previous_msg_date = this.getLastMessageDate(current_msg_date);
if (_.isNull(previous_msg_date)) {
this.content.insertAdjacentElement('afterbegin', view.el);
......@@ -773,10 +780,13 @@
*/
const view = new _converse.MessageView({'model': message});
this.clearChatStateNotification(message);
this.insertMessage(view);
this.insertDayIndicator(view.el);
this.setScrollPosition(view.el);
if (message.isOnlyChatStateNotification()) {
this.insertChatStateNotification(view);
} else {
this.insertMessage(view);
this.insertDayIndicator(view.el);
this.setScrollPosition(view.el);
}
if (u.isNewMessage(message)) {
if (message.get('sender') === 'me') {
// We remove the "scrolled" flag so that the chat area
......
src/templates/chatbox.html
View file @ 80e5a5a2
<div class="flyout box-flyout">
<div class="chat-body">
<div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
<div class="chat-state-notifications"></div>
<div class="message-form-container"/>
</div>
</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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7