From 85ce134bac3df732aa5c9706ffc5eac0671ab83f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=9D=D0=B0=D0=B4=D0=B5?= =?UTF-8?q?=D0=B8=D0=BD?= Date: Mon, 12 Jan 2026 10:14:16 +0300 Subject: [PATCH] =?UTF-8?q?feat(chat):=20=D1=80=D0=B5=D1=84=D0=B0=D0=BA?= =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=20=D0=BC=D0=BE=D0=B1=D0=B8?= =?UTF-8?q?=D0=BB=D1=8C=D0=BD=D0=BE=D0=B9=20=D0=BD=D0=B0=D0=B2=D0=B8=D0=B3?= =?UTF-8?q?=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B8=20=D1=88=D0=B0=D0=BF=D0=BA?= =?UTF-8?q?=D0=B8=20=D1=87=D0=B0=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Реализован современный нижний navbar для мобильных (5 кнопок) - Скрытие нижнего navbar на странице чата - Новая шапка чата с аватарами и бейджами типа чата - Переработана HTML структура чата (убраны лишние Bootstrap контейнеры) - Добавлены стили для аватаров и бейджей типов чатов - Условное отображение: аватар OR иконка категории --- backend/static/css/components/navbar.css | 14 ++ backend/static/css/components/page-header.css | 91 +++++++++ .../templates/communications/chat_detail.html | 175 ++++++++++-------- 3 files changed, 202 insertions(+), 78 deletions(-) diff --git a/backend/static/css/components/navbar.css b/backend/static/css/components/navbar.css index c3c37229..28186cea 100644 --- a/backend/static/css/components/navbar.css +++ b/backend/static/css/components/navbar.css @@ -195,5 +195,19 @@ body { padding-bottom: 60px; } + + /* Скрыть bottom navbar на странице чата - композер заменяет навигацию */ + .chat-container ~ .bottom-navbar, + .chat-page ~ .bottom-navbar, + body:has(.chat-container) .bottom-navbar, + body:has(.chat-page) .bottom-navbar { + display: none; + } + + /* Убрать padding, когда navbar скрыт */ + body:has(.chat-container), + body:has(.chat-page) { + padding-bottom: 0; + } } diff --git a/backend/static/css/components/page-header.css b/backend/static/css/components/page-header.css index 76777b22..5308650f 100644 --- a/backend/static/css/components/page-header.css +++ b/backend/static/css/components/page-header.css @@ -75,6 +75,48 @@ z-index: 1; } +/* ===== CHAT AVATAR WITH TYPE BADGE ===== */ +.chat-avatar-wrapper { + position: relative; + width: 48px; + height: 48px; + flex-shrink: 0; +} + +.chat-avatar { + width: 100%; + height: 100%; + border-radius: 12px; + object-fit: cover; + display: block; + border: 1px solid var(--bs-border-color); +} + +.chat-type-badge { + position: absolute; + bottom: -2px; + right: -2px; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--bs-primary); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + border: 2px solid var(--bs-body-bg); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.chat-type-badge i { + line-height: 1; +} + +[data-bs-theme="dark"] .chat-type-badge { + border-color: var(--bs-body-bg); +} + /* При скролле - более выраженный фон */ .page-header.scrolled { background: linear-gradient( @@ -88,6 +130,55 @@ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } +/* ===== TOP BAR (заголовок + действия) ===== */ +.page-header-top { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-2); + width: 100%; +} + +.page-header-title { + display: flex; + align-items: center; + gap: var(--space-2); + flex: 1; + min-width: 0; +} + +.page-header-title h1 { + font-size: 1.5rem; + font-weight: 700; + margin: 0; + color: var(--bs-body-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.page-header-title i { + font-size: 1.75rem; + flex-shrink: 0; +} + +.page-header-actions { + display: flex; + align-items: center; + gap: var(--space-1); + flex-shrink: 0; +} + +@media (max-width: 767.98px) { + .page-header-title h1 { + font-size: 1.25rem; + } + + .page-header-title i { + font-size: 1.5rem; + } +} + /* ===== ЗАГОЛОВОК ===== */ .page-title { font-weight: 800; diff --git a/backend/templates/communications/chat_detail.html b/backend/templates/communications/chat_detail.html index f971ee60..5efd0f6c 100644 --- a/backend/templates/communications/chat_detail.html +++ b/backend/templates/communications/chat_detail.html @@ -5,6 +5,8 @@ {% block title %}Чат{% endblock %} {% block extra_css %} + + @@ -12,74 +14,91 @@ {% endblock %} {% block content %} -
-
-
- - -
- {% if chat.type == 'global' %} - -

Глобальный чат

- {% elif chat.type == 'department' %} - -

Чат отдела: {{ chat.department.name }}

- {% elif chat.type == 'announcement' %} - -

{{ chat.name|default:"Объявление" }}

- {% if chat.is_blocked %} - - Заблокировано - - {% endif %} - {% if not is_announcement_creator %} - - Только просмотр - - {% endif %} - {% else %} - -

- {% for u in chat.participants.all %} - {% if u != user %} - {% if not forloop.first %}, {% endif %} - - {{ u.get_full_name|default:u.username }} - + +
+ + +
+
+
+ {% if chat.avatar %} + +
+ {{ chat.name }} + + {% if chat.type == 'global' %} + + {% elif chat.type == 'department' %} + + {% elif chat.type == 'announcement' %} + + {% elif chat.type == 'group' %} + + {% elif chat.type == 'channel' %} + + {% else %} + {% endif %} - {% endfor %} -

- {% endif %} -
- {% if chat.type == 'announcement' and user.is_staff %} - {% if chat.is_blocked %} - - {% else %} - - {% endif %} + +
+

{{ chat.name|default:"Чат" }}

+ {% else %} + + {% if chat.type == 'global' %} + +

{{ chat.name|default:"Глобальный чат" }}

+ {% elif chat.type == 'department' %} + +

{{ chat.department.name|default:chat.name }}

+ {% elif chat.type == 'announcement' %} + +

{{ chat.name|default:"Объявление" }}

+ {% else %} + +

+ {% if chat.name %} + {{ chat.name }} + {% else %} + {% for u in chat.participants.all %} + {% if u != user %}{{ u.get_full_name|default:u.username }}{% endif %} + {% endfor %} + {% endif %} +

{% endif %} - - К чатам - -
+ {% endif %}
+ +
+ {% if chat.type == 'announcement' and user.is_staff %} + {% if chat.is_blocked %} + + {% else %} + + {% endif %} + {% endif %} + + + +
+
+
- -
+ +
{% if chat.is_blocked %} @@ -117,7 +136,7 @@
- +
Загружаем ранние сообщения… @@ -143,21 +162,18 @@

Загружаем сообщения...

- - -
-
- +
+ - Собеседник печатает… + Собеседник печатает…
-
+
{% if can_send_messages %}
{% endif %}
-
+ - - - + + + + {% endblock %} @@ -427,6 +446,6 @@ - + {% endblock %} \ No newline at end of file