Improve chat UX

This commit is contained in:
cuom1999 2021-11-21 20:24:55 -06:00
parent b6f998a235
commit 9d1f71513e
2 changed files with 12 additions and 3 deletions

View file

@ -24,6 +24,8 @@ let message_template = `
window.other_user_id = "{{other_user.id if other_user else ''}}"; window.other_user_id = "{{other_user.id if other_user else ''}}";
window.num_pages = {{paginator.num_pages}}; window.num_pages = {{paginator.num_pages}};
window.lock = false; window.lock = false;
window.lock_click_space = false;
let isMobile = window.matchMedia("only screen and (max-width: 799px)").matches;
function load_page(page, refresh_html=false) { function load_page(page, refresh_html=false) {
var param = { var param = {
@ -296,6 +298,8 @@ let message_template = `
} }
function load_room(encrypted_user) { function load_room(encrypted_user) {
if (window.lock_click_space) return;
function callback() { function callback() {
history.replaceState(null, '', "{{url('chat', '')}}" + window.room_id); history.replaceState(null, '', "{{url('chat', '')}}" + window.room_id);
load_page(window.currentPage, true, refresh_status); load_page(window.currentPage, true, refresh_status);
@ -303,6 +307,7 @@ let message_template = `
refresh_status(); refresh_status();
$('#chat-input').focus(); $('#chat-input').focus();
} }
window.lock_click_space = true;
if (encrypted_user) { if (encrypted_user) {
$.get("{{url('get_or_create_room')}}" + `?other=${encrypted_user}`) $.get("{{url('get_or_create_room')}}" + `?other=${encrypted_user}`)
.done(function(data) { .done(function(data) {
@ -321,6 +326,7 @@ let message_template = `
window.other_user_id = ''; window.other_user_id = '';
callback(); callback();
} }
window.lock_click_space = false;
} }
function register_click_space() { function register_click_space() {
@ -336,6 +342,9 @@ let message_template = `
load_room(null); load_room(null);
} }
}); });
if (isMobile) {
$('#chat-tab a').click();
}
} }
function update_last_seen() { function update_last_seen() {

View file

@ -19,7 +19,7 @@
</div> </div>
<ul class="status-list toggled"> <ul class="status-list toggled">
{% for user in section.user_list %} {% for user in section.user_list %}
<li class="status-row"> <li class="click_space status-row" id="click_space_{{user.user.id}}" value="{{user.url}}">
<div class="status-container"> <div class="status-container">
<img src="{{ gravatar(user.user, 135) }}" class="status-pic"> <img src="{{ gravatar(user.user, 135) }}" class="status-pic">
<svg style="position:absolute;" height="32" width="32"> <svg style="position:absolute;" height="32" width="32">
@ -28,9 +28,9 @@
</svg> </svg>
</div> </div>
<span style="padding-left:0.3em" class="username {{ user.user.css_class }}"> <span style="padding-left:0.3em" class="username {{ user.user.css_class }}">
{{ link_user(user.user) }} {{ user.user.username }}
</span> </span>
<span class="click_space spacer" value="{{user.url}}" id="click_space_{{user.user.id}}"> <span class="spacer">
<span class="unread-count" id="unread-count-{{user.user.id}}">{{user.unread_count if user.unread_count}}</span> <span class="unread-count" id="unread-count-{{user.user.id}}">{{user.unread_count if user.unread_count}}</span>
</span> </span>
</li> </li>