Update UI chatbox

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['status_sections'] = get_status_context(self.request)
-        context['admin_status'] = get_admin_online_status()
         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(),
+            'status_sections': get_status_context(request),
-            'admin_status': get_admin_online_status(),
         })

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;

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;
+        }
     </style>
 {% endblock media %}
 

templates/chat/message.html

@@ -1,5 +1,7 @@
 <li class="message" id="message-{{ message.id }}">
-    <img src="{{ gravatar(message.author, 32) }}" class="profile-pic">
+    <a href="{{ url('user_page', message.author.user.username) }}"> 
+        <img src="{{ gravatar(message.author, 135) }}" class="profile-pic">
+    </a>
     <div class="body-message">
         <div class="user-time">
             <span class="username {{ message.author.css_class }}">

templates/chat/online_status.html

@@ -1,24 +1,27 @@
-<h4>{{_('Admins')}}: </h4>
+{% for section in status_sections %}
+    {% if section.user_list %}
+        <div class="status-section-title toggle open">
+            <h4>
+                <i class="fa fa-chevron-right fa-fw"></i>{{_(section.title)}}
+            </h4>
             <hr/>
-{% for user in admin_status %}
+        </div>
-    <li style="padding-left: 1em">
+        <ul class="status-list toggled">
-        {% if user.is_online %}
+        {% for user in section.user_list %}
-        <span class="green-dot"></span>
+            <li style="padding-left: 0.1em" class="status-row">
-        {% else %}
+                <div class="status-container">
-        <span class="red-dot"></span>
+                    <img src="{{ gravatar(user.user, 135) }}" class="status-pic">
+                    <svg style="position:absolute;" height="32" width="32">
+                        <circle class="status-circle" 
+                                fill="{{'green' if user.is_online else 'red'}}"/>
+                    </svg>
+                </div>
+                <span style="padding-left:0.3em" class="username {{ user.user.css_class }}">
+                    {{ link_user(user.user) }}
+                </span>
+            </li>
+        {% endfor %}
+        </ul>
+        <br>
     {% endif %}
-        <span style="padding-left:0.25em">
-            {{ link_user(user.user) }}
-        </span>
-    </li>
-{% endfor %}
-<h4 style="margin-top:1em;">{{_('Users')}}: </h4>
-<hr/>
-{% for user in online_users %}
-    <li style="padding-left: 1em">
-        <span class="green-dot"></span>
-        <span style="padding-left:0.25em">
-            {{ link_user(user.user) }}
-        </span>
-    </li>
 {% endfor %}