From f773fb5e7059faaad08a274cd65eb9bead923f41 Mon Sep 17 00:00:00 2001 From: cuom1999 Date: Fri, 2 Jul 2021 01:38:48 -0500 Subject: [PATCH] Update UI chatbox --- chat_box/views.py | 36 ++++++++++++++++++--- resources/chatbox.scss | 24 +++----------- templates/chat/chat.html | 52 ++++++++++++++++++++++++++++++- templates/chat/message.html | 6 ++-- templates/chat/online_status.html | 49 +++++++++++++++-------------- 5 files changed, 117 insertions(+), 50 deletions(-) diff --git a/chat_box/views.py b/chat_box/views.py index 68d1d11..7ebfa24 100644 --- a/chat_box/views.py +++ b/chat_box/views.py @@ -5,6 +5,7 @@ from django.core.paginator import Paginator from django.core.exceptions import PermissionDenied from django.shortcuts import render from django.forms.models import model_to_dict +from django.db.models import Case, BooleanField from django.utils import timezone from django.contrib.auth.decorators import login_required @@ -43,8 +44,7 @@ class ChatView(ListView): context['title'] = self.title context['last_msg'] = event.last() - context['online_users'] = get_user_online_status() - context['admin_status'] = get_admin_online_status() + context['status_sections'] = get_status_context(self.request) context['today'] = timezone.now().strftime("%d-%m-%Y") return context @@ -112,6 +112,7 @@ def get_user_online_status(): return Profile.objects \ .filter(display_rank='user', last_access__gte = last_five_minutes)\ + .annotate(is_online=Case(default=True,output_field=BooleanField()))\ .order_by('-rating') @@ -129,9 +130,36 @@ def get_admin_online_status(): return ret +def get_status_context(request): + friend_list = request.profile.get_friends() + all_user_status = get_user_online_status() + friend_status = [] + user_status = [] + + for user in all_user_status: + if user.username in friend_list: + friend_status.append(user) + else: + user_status.append(user) + + return [ + { + 'title': 'Admins', + 'user_list': get_admin_online_status(), + }, + { + 'title': 'Following', + 'user_list': friend_status, + }, + { + 'title': 'Users', + 'user_list': user_status, + }, + ] + + @login_required def online_status_ajax(request): return render(request, 'chat/online_status.html', { - 'online_users': get_user_online_status(), - 'admin_status': get_admin_online_status(), + 'status_sections': get_status_context(request), }) \ No newline at end of file diff --git a/resources/chatbox.scss b/resources/chatbox.scss index 1cf0491..8416eab 100644 --- a/resources/chatbox.scss +++ b/resources/chatbox.scss @@ -68,14 +68,13 @@ #chat-online { border: 1px solid #ccc; border-radius: 4px; - overflow: hidden; - overflow-wrap: break-word; - overflow-y: scroll; - max-height: 81vh; } #chat-online-content { + overflow: hidden; + overflow-wrap: break-word; + overflow-y: auto; + max-height: 81vh; } - #chat-box { border: 1px solid #ccc; border-radius: 4px; @@ -104,21 +103,6 @@ width: 100%; } -.green-dot, .red-dot { - height: 0.8em; - width: 0.8em; - border-radius: 50%; - display: inline-block; - margin-bottom: -0.15em; -} -.green-dot { - background-color: #42f58d; -} - -.red-dot { - background-color: red; -} - @media (min-width: 800px) { #chat-container { display: flex; diff --git a/templates/chat/chat.html b/templates/chat/chat.html index 8bc2d49..d53ede4 100644 --- a/templates/chat/chat.html +++ b/templates/chat/chat.html @@ -192,7 +192,9 @@ console.log("Fail to retrieve data"); } else { - $('#chat-online-content').html(data); + $('#chat-online-content').html(data).find('.toggle').each(function () { + register_toggle($(this)); + });; } }) }) @@ -224,6 +226,54 @@ background: lightgreen; color: grey !important; } + .status-pic { + height: 1.3em; + width: 1.3em; + border-radius: 0.3em; + } + .status-container { + position: relative; + display: inline-flex; + } + .status-circle { + position: absolute; + bottom: 0; + right: 0; + cx: 18; + cy: 18; + r: 4.5; + stroke: white; + stroke-width: 1; + } + .status-row { + display: flex; + margin-bottom: 0.5em; + font-size: 15px; + } + .status-list { + padding: 0; + } + .status-section-title { + cursor: pointer; + } + ::-webkit-scrollbar { + width: 20px; + } + + ::-webkit-scrollbar-track { + background-color: transparent; + } + + ::-webkit-scrollbar-thumb { + background-color: #d6dee1; + border-radius: 20px; + border: 6px solid transparent; + background-clip: content-box; + } + + ::-webkit-scrollbar-thumb:hover { + background-color: #a8bbbf; + } {% endblock media %} diff --git a/templates/chat/message.html b/templates/chat/message.html index 5a33a50..c020a63 100644 --- a/templates/chat/message.html +++ b/templates/chat/message.html @@ -1,5 +1,7 @@ -
  • - +
  • + + +
    diff --git a/templates/chat/online_status.html b/templates/chat/online_status.html index a953943..ed62964 100644 --- a/templates/chat/online_status.html +++ b/templates/chat/online_status.html @@ -1,24 +1,27 @@ -

    {{_('Admins')}}:

    -
    -{% for user in admin_status %} -
  • - {% if user.is_online %} - - {% else %} - - {% endif %} - - {{ link_user(user.user) }} - -
    • +{% for section in status_sections %} + {% if section.user_list %} +
    +

    + {{_(section.title)}} +

    +
    +
    + +
    + {% endif %} {% endfor %} -

    {{_('Users')}}:

    -
    -{% for user in online_users %} -
  • - - - {{ link_user(user.user) }} - -
    • -{% endfor %} \ No newline at end of file