From a5939ecc6bdd9f976b9e36c5a5e69e9180bc8461 Mon Sep 17 00:00:00 2001 From: mohsentaba Date: Tue, 19 May 2026 11:09:47 +0330 Subject: [PATCH] admin panel chat styles finalized better text input section with resizing automatically based on the context synced the background color gradient for empty pages too size and possision of chat context section enhanced to fit the screen. chat input sticks to the bottom of chat section + small padding and styles improvements --- static/css/live_chat.css | 52 +++++++++++++++++++++--- static/js/live_chat.js | 25 ++++++++++-- templates/admin/chat/live_chat.html | 63 +++++++++++++++-------------- 3 files changed, 99 insertions(+), 41 deletions(-) diff --git a/static/css/live_chat.css b/static/css/live_chat.css index b8d4e17..c794a08 100644 --- a/static/css/live_chat.css +++ b/static/css/live_chat.css @@ -24,12 +24,22 @@ html { width: 100% !important; height: calc(100vh - 140px); margin: 0 auto; + display: flex; + gap: 16px; } .rooms-sidebar { width: 320px; background: #FAF6E9; - /* جایگزین خاکستری ملایم با کرمی */ + border: 1px solid rgba(10, 82, 46, 0.15); + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + overflow: hidden; + display: flex; + flex-direction: column; + flex-shrink: 0; + position: relative; + z-index: 20; } @media (min-width: 1024px) { @@ -40,7 +50,27 @@ html { .dark .rooms-sidebar { background: #052B18; - /* پس‌زمینه سایدبار در حالت دارک: سبز تیره */ + border-color: rgba(250, 246, 233, 0.1); +} + +.chat-area { + flex: 1; + display: flex; + flex-direction: column; + position: relative; + z-index: 10; + height: 100%; + min-width: 0; + overflow: hidden; + border: 1px solid rgba(10, 82, 46, 0.15); + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + background: linear-gradient(to bottom, rgba(250, 246, 233, 0.8), rgba(255, 255, 255, 1)); +} + +.dark .chat-area { + border-color: rgba(250, 246, 233, 0.1); + background: linear-gradient(to bottom, rgba(5, 43, 24, 0.9), rgba(10, 82, 46, 0.4)); } /* ── Custom Scrollbar ── */ @@ -124,6 +154,14 @@ html { border: none; box-shadow: 0 2px 8px rgba(10, 82, 46, 0.2); backdrop-filter: blur(20px); + height: 64px; + padding: 0 24px; + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + flex-shrink: 0; + width: 100%; } .dark .telegram-header { @@ -132,6 +170,10 @@ html { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } +.telegram-header.justify-start { + justify-content: flex-start; +} + .user-avatar { width: 40px; height: 40px; @@ -145,16 +187,14 @@ html { /* ── Chat Area Background ── */ .chat-messages { - background: linear-gradient(to bottom, rgba(250, 246, 233, 0.8), rgba(255, 255, 255, 1)); - /* پس‌زمینه چت: کرمی محو شونده به سفید */ + background: transparent; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem; } .dark .chat-messages { - background: linear-gradient(to bottom, rgba(5, 43, 24, 0.9), rgba(10, 82, 46, 0.4)); - /* پس‌زمینه دارک: سبز تیره */ + background: transparent; } /* ── Message Bubbles (Telegram Style) ── */ diff --git a/static/js/live_chat.js b/static/js/live_chat.js index bb87e4e..b4c0327 100644 --- a/static/js/live_chat.js +++ b/static/js/live_chat.js @@ -11,6 +11,7 @@ document.addEventListener('DOMContentLoaded', function () { noChatSelected: document.getElementById('no-chat-selected'), chatHeader: document.getElementById('active-chat-header'), chatTitle: document.getElementById('active-chat-title'), + chatHeaderInfo: document.getElementById('chat-header-info'), messages: document.getElementById('chat-messages'), inputArea: document.getElementById('chat-input-area'), form: document.getElementById('chat-form'), @@ -75,7 +76,7 @@ document.addEventListener('DOMContentLoaded', function () { return `
-
+
${initial}
@@ -167,10 +168,11 @@ document.addEventListener('DOMContentLoaded', function () { lastMessageId = 0; isFetchingMessages = false; + // 🟢 تغییر invisible به hidden برای کارکرد درست بلوک‌ها UI.noChatSelected.classList.add('hidden'); - UI.chatHeader.classList.remove('invisible'); - UI.messages.classList.remove('invisible'); - UI.inputArea.classList.remove('invisible'); + UI.chatHeaderInfo.classList.remove('hidden'); // 🟢 تغییر یافته + UI.messages.classList.remove('hidden'); + UI.inputArea.classList.remove('hidden'); UI.chatTitle.textContent = title; UI.messages.innerHTML = '
autorenew
'; @@ -246,12 +248,27 @@ document.addEventListener('DOMContentLoaded', function () { UI.messages.scrollTo({ top: UI.messages.scrollHeight, behavior: 'smooth' }); } + // ── Textarea Auto-resize & Key Handling ── + UI.input.addEventListener('input', function() { + this.style.height = 'auto'; + this.style.height = (this.scrollHeight) + 'px'; + }); + + UI.input.addEventListener('keydown', function(e) { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + // Trigger form submit + UI.form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true })); + } + }); + UI.form.addEventListener('submit', async (e) => { e.preventDefault(); const text = UI.input.value.trim(); if (!text || !currentRoomId) return; UI.input.value = ''; + UI.input.style.height = 'auto'; // Reset height try { await fetch(`${window.CHAT_CONFIG.apiUrlSendBase}${currentRoomId}/`, { diff --git a/templates/admin/chat/live_chat.html b/templates/admin/chat/live_chat.html index 5eaa80a..e9aee4e 100644 --- a/templates/admin/chat/live_chat.html +++ b/templates/admin/chat/live_chat.html @@ -37,13 +37,11 @@ {% endblock %} {% block content %} -
+
-
+
-
+
forum @@ -69,20 +67,18 @@
-
+

{% trans "Select Contact" %}

-
- search - + search +
@@ -95,25 +91,17 @@
-
-
-
- chat -
-

{% trans "No Chat Selected" %}

-

{% trans "Select a chat from the sidebar to start messaging" %}

-
+
-