ynerant/plateforme-tfjm2
1
0
Fork 0
mirror of https://gitlab.com/animath/si/plateforme.git synced 2025-06-23 03:58:25 +02:00
Code Issues Releases Wiki Activity

Setup chat UI

Browse Source 
Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
This commit is contained in:
Emmy D'Anello
2024-04-27 12:08:10 +02:00
parent 46fc5f39c8
commit f3a4a99b78
5 changed files with 161 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
chat/templates/chat/chat.html
View File

@ -4,6 +4,64 @@
{% load i18n %}
{% block content %}
<noscript>
{% trans "JavaScript must be enabled on your browser to access chat." %}
</noscript>
<div class="offcanvas offcanvas-start" tabindex="-1" id="channelSelector" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h4 class="offcanvas-title" id="offcanvasExampleLabel">{% trans "Chat channels" %}</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="list-group list-group-flush" id="nav-channels-tab">
{% for channel in channels %}
<li class="list-group-item" id="tab-channel-{{ channel.id }}" data-bs-dismiss="offcanvas"
onclick="selectChannel({{ channel.id }})">
<button class="nav-link">{{ channel.name }}</button>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="card tab-content w-100 mh-100" style="height: 95vh" id="nav-channels-content">
<div class="card-header">
<h3>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#channelSelector"
aria-controls="channelSelector" aria-expanded="false" aria-label="Toggle channel selector">
<span class="navbar-toggler-icon"></span>
</button>
<span id="channel-title"></span>
</h3>
</div>
<div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-messages">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="fw-bold">Emmy D'Anello (CNO)</div>
Message 1
</li>
<li class="list-group-item">
<div class="fw-bold">Emmy D'Anello (CNO)</div>
Message 2
</li>
<li class="list-group-item">
<div class="fw-bold">Emmy D'Anello (CNO)</div>
Message 3
</li>
</ul>
</div>
<div class="card-footer mt-auto">
<div class="input-group">
<label for="input-message" class="input-group-text">
<i class="fas fa-comment"></i>
</label>
<input type="text" class="form-control" id="input-message" placeholder="{% trans "Send message…" %}" autocomplete="off">
<button class="input-group-text btn btn-success">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
{% endblock %}
{% block extrajavascript %}