Игорь Надеин
aba011731f
- Created comprehensive badges-telegram-style.css (240 lines) based on Telegram Web K - Updated all badge markup in templates (navbar, sidebar, chat_list, chat_detail, chat_title) - Replaced Bootstrap badge classes with .badge-telegram classes - Implemented Telegram specifications: 20px height, 10px radius, 11px font, 600 weight - Added smooth animations: pulse (on update), animate-in (on mount), animate-out (on unmount) - Updated JavaScript: replaced .d-none with style.display for badge visibility - Updated 5 JS files: bottom-navbar, notification-manager, chatBadgeHandler, chatBadgeManager, chatListRealtime - Added pulse animation on badge value increase - Improved shadows and transitions with cubic-bezier easing - Added badges-telegram-style.css to base.html for global availability - Created documentation: TELEGRAM_BADGES_GUIDE.md, TELEGRAM_BADGES_UPDATE.md Technical details: - Research: Analyzed 50+ files from Telegram Web K GitHub repository - Perfect circles: border-radius: 10px (not 50%) - Spring animation: cubic-bezier(0.175, 0.885, 0.32, 1.275) - Auto-hide: :empty and [data-count='0'] selectors - Responsive design + dark theme support
32 lines
1.7 KiB
HTML
32 lines
1.7 KiB
HTML
{# includes/components/chat_title.html #}
|
|
{# Заголовок для карточки чата в списке #}
|
|
{% load static %}
|
|
|
|
<div class="d-flex align-items-center gap-2 flex-wrap">
|
|
<a href="{% url 'communications:chat_detail' chat.pk %}" class="card-title text-decoration-none stretched-link" data-chat-name="{% if chat.type == 'global' %}{{ chat.name|default:"Глобальный чат" }}{% elif chat.type == 'department' %}{{ chat.name|default:"Основной чат" }}{% elif chat.type == 'private' %}{% for u in chat.participants.all %}{% if u.id != user.id %}{{ u.get_full_name|default:u.username }}{% endif %}{% endfor %}{% else %}{{ chat.name }}{% endif %}">
|
|
{% if chat.type == 'global' %}
|
|
{{ chat.name|default:"Глобальный чат" }}
|
|
|
|
{% elif chat.type == 'department' %}
|
|
{{ chat.name|default:"Основной чат" }}
|
|
|
|
{% elif chat.type == 'private' %}
|
|
{# Показываем имена участников (кроме текущего) #}
|
|
{% for u in chat.participants.all %}{% if u.id != user.id %}{% cycle '' ', ' %}{{ u.get_full_name|default:u.username }}{% endif %}{% endfor %}
|
|
|
|
{% else %}
|
|
{{ chat.name }}
|
|
{% endif %}
|
|
|
|
{# Бейдж "Основной" #}
|
|
{% if chat.is_main %}
|
|
<span class="badge-telegram badge-telegram-primary badge-telegram-inline ms-1">
|
|
<i class="bi-star-fill"></i> Основной
|
|
</span>
|
|
{% endif %}
|
|
</a>
|
|
|
|
{# Счётчик непрочитанных #}
|
|
<span class="badge-telegram animate-in" data-unread {% if not chat.unread_count %}style="display: none;"{% endif %}>+<span data-unread-count>{{ chat.unread_count|default:0 }}</span></span>
|
|
</div>
|