lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve chat UI

Browse source
This commit is contained in:
cuom1999 2022-02-02 16:03:57 +07:00
parent 59081eeb2d
commit 035749205d
4 changed files with 28 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/chatbox.scss
View file

@ -2,6 +2,7 @@
margin: 0; margin: 0;
padding-top: 0.1em; padding-top: 0.1em;
padding-bottom: 0.1em; padding-bottom: 0.1em;
overflow-wrap: anywhere;
} }
.chatbtn_remove_mess { .chatbtn_remove_mess {
float: right; float: right;
@ -60,8 +61,7 @@
#chat-input { #chat-input {
width: 100%; width: 100%;
padding: 0.4em; padding: 0.4em 4em 0.6em 1.2em;
padding-bottom: 0.6em;
border: 0; border: 0;
color: black; color: black;
border-top-left-radius: 0; border-top-left-radius: 0;
@ -172,6 +172,20 @@
cursor: pointer; cursor: pointer;
margin-top: 0.5em; margin-top: 0.5em;
} }
.message-text {
padding: 0.4em 0.6em 0.5em;
border-radius: 15px;
max-width: 70%;
width: fit-content;
}
.message-text-other {
background: #eeeeee;
color: black;
}
.message-text-myself {
background: rgb(0, 132, 255);
color: white;
}
@media (max-width: 799px) { @media (max-width: 799px) {
#chat-area { #chat-area {

7
templates/chat/chat.html
View file

@ -206,6 +206,7 @@ let META_HEADER = [
MathJax.Hub.Queue(["Typeset",MathJax.Hub]); MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
register_time($('.time-with-rel')); register_time($('.time-with-rel'));
remove_unread_current_user(); remove_unread_current_user();
merge_authors();
}, },
error: function (data) { error: function (data) {
console.log('Fail to check message'); console.log('Fail to check message');
@ -230,6 +231,12 @@ let META_HEADER = [
var time = moment($(this).find(".time-with-rel").attr('data-iso')); var time = moment($(this).find(".time-with-rel").attr('data-iso'));
var $content = $(this).children('.content-message'); var $content = $(this).children('.content-message');
if (username == window.user.name) {
$(this).find('.message-text').each(function() {
$(this).removeClass('message-text-other').addClass('message-text-myself');
});
}
if (username == last.username && time.diff(last.time, 'minutes') <= time_limit) { if (username == last.username && time.diff(last.time, 'minutes') <= time_limit) {
last.$content.append($body); last.$content.append($body);
$(this).parent().remove(); $(this).parent().remove();

6
templates/chat/chat_css.html
View file

@ -92,10 +92,8 @@
} }
.body-block { .body-block {
border-radius: 4px; border-radius: 4px;
padding-left: 0.2em; padding: 0.05em 0.6em;
} width: 100%;
.body-block:hover {
background: #eee;
} }
.active-span { .active-span {
margin-top: 1em; margin-top: 1em;

2
templates/chat/message.html
View file

@ -20,8 +20,10 @@
{{_('Delete')}} {{_('Delete')}}
</a> </a>
{% endif %} {% endif %}
<div class="message-text message-text-other">
{{message.body | markdown('comment', MATH_ENGINE)|reference|str|safe }} {{message.body | markdown('comment', MATH_ENGINE)|reference|str|safe }}
</div> </div>
</div>
</span> </span>
</div> </div>
<div class="clear"></div> <div class="clear"></div>