Update UI chatbox
This commit is contained in:
cuom1999
parent
5e21332911
commit
f773fb5e70
5 changed files with 117 additions and 50 deletions
|
|
@ -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),
|
||||
})
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<li class="message" id="message-{{ message.id }}">
|
||||
<img src="{{ gravatar(message.author, 32) }}" class="profile-pic">
|
||||
<li class="message" id="message-{{ message.id }}">
|
||||
<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 }}">
|
||||
|
|
|
|||
|
|
@ -1,24 +1,27 @@
|
|||
<h4>{{_('Admins')}}: </h4>
|
||||
<hr/>
|
||||
{% for user in admin_status %}
|
||||
<li style="padding-left: 1em">
|
||||
{% if user.is_online %}
|
||||
<span class="green-dot"></span>
|
||||
{% else %}
|
||||
<span class="red-dot"></span>
|
||||
{% endif %}
|
||||
<span style="padding-left:0.25em">
|
||||
{{ link_user(user.user) }}
|
||||
</span>
|
||||
</li>
|
||||
{% 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/>
|
||||
</div>
|
||||
<ul class="status-list toggled">
|
||||
{% for user in section.user_list %}
|
||||
<li style="padding-left: 0.1em" class="status-row">
|
||||
<div class="status-container">
|
||||
<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 %}
|
||||
{% 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 %}
|
||||
Loading…
Reference in a new issue