From abe2be6b71c8124c0ffa340bb4f9f5188e0e69ef Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Wed, 9 Oct 2024 01:26:52 +0200 Subject: [PATCH] [mirotalkc2c] - improve chat UI --- backend/server.js | 2 +- frontend/css/chat.css | 184 ++++++++++++++++++++++++++-------------- frontend/css/client.css | 1 - frontend/js/client.js | 5 +- package.json | 2 +- 5 files changed, 126 insertions(+), 68 deletions(-) diff --git a/backend/server.js b/backend/server.js index df376bf..be76fe9 100644 --- a/backend/server.js +++ b/backend/server.js @@ -9,7 +9,7 @@ * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon: * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005 * @author Miroslav Pejic - miroslav.pejic.85@gmail.com - * @version 1.1.32 + * @version 1.1.33 */ require('dotenv').config(); diff --git a/frontend/css/chat.css b/frontend/css/chat.css index cce57b0..7e81bc4 100644 --- a/frontend/css/chat.css +++ b/frontend/css/chat.css @@ -1,59 +1,71 @@ +/* Chat Container */ .chat { z-index: 8; display: none; position: absolute; top: 0; right: 0; - width: var(--chat-width); + width: 350px; + max-width: 100%; height: 100%; - background: var(--chat-bg); + background: linear-gradient(145deg, #282c34, #1c1e24); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--border-radius) 0 0 var(--border-radius); + box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); + flex-direction: column; overflow: hidden; - border: var(--border); - border-radius: var(--border-radius) 0% 0%; + transition: + transform 0.3s ease, + opacity 0.3s ease; } -.chat .header, -.chat .body { - padding: 5px; -} +/* Header */ .chat .header { - height: 30px; - background: var(--chat-bg); - border-bottom: var(--border); - border-radius: var(--border-radius) 0% 0%; -} -.chat .body { - margin-top: 0; - min-height: 85%; - max-height: 85%; - background: var(--chat-bg); - overflow: auto; -} -.chat .footer { - position: fixed; - bottom: 0px; - width: var(--chat-width); - background: var(--chat-bg); + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; + background: var(--primary-color); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--border-radius) 0 0 0; } .chat .header .title { - padding: 8px; - float: left; - font-weight: bold; color: white; + font-weight: 600; + font-size: 1.4rem; + letter-spacing: 0.5px; } + .chat .header button { - padding: 5px; - float: right; + background: transparent; border: none; - font-size: 1.2rem; - color: var(--text-color); + color: white; + font-size: 1.5rem; + cursor: pointer; + transition: color 0.2s ease; +} + +.chat .header button:hover { + color: #ff4c4c; +} + +/* Chat Body */ +.chat .body { + padding: 10px; background: var(--chat-bg); + overflow-y: auto; + height: 80vh; + flex-grow: 1; + scrollbar-width: thin; + scrollbar-color: var(--primary-color) transparent; + transition: max-height 0.3s ease; } .chat .body .msg { - margin-top: 10px; + margin-bottom: 20px; } + .chat .body .msg .from { padding: 5px; font-weight: bold; @@ -62,49 +74,69 @@ } .chat .body .msg .text { padding: 5px; + border-radius: 10px; background: var(--chat-bg); color: var(--text-color); overflow: auto; + word-wrap: break-word; user-select: text; } -.chat .footer textarea { +.chat .body .msg .text:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +/* Footer */ +.chat .footer { position: absolute; - padding: 10px; - bottom: 0; - left: 0; + bottom: 0px; + width: 100%; + display: flex; + align-items: center; + padding: 5px; + background: #2b2d36; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.chat .footer textarea { + flex-grow: 1; + padding: 5px; height: 20px; - width: 93%; + border: 1px solid var(--primary-color); + border-radius: 8px; + background: #2b2d36; color: var(--text-color); - background: var(--chat-bg); - border: var(--border); - border-radius: var(--border-radius) 0% 0%; - -webkit-transition: height 1s; - -moz-transition: height 1s; - -ms-transition: height 1s; - -o-transition: height 1s; - transition: height 1s; resize: none; + font-size: 1rem; + transition: height 0.3s ease; } + .chat .footer textarea:focus { - border: 1px solid #439fff; + border-color: #439fff; + height: 60px; + outline: none; + box-shadow: 0 0 5px #439fff; } .chat .footer .buttons { - display: inline; + display: flex; + gap: 8px; + margin: 10px; } .chat .footer .buttons button { - position: relative; - bottom: 13px; - right: 5px; + background: #439fff; border: none; - float: right; - background: transparent; - color: #439fff; + color: white; + font-size: 1.4rem; + cursor: pointer; + border-radius: 50%; + padding: 6px; + transition: background-color 0.2s ease; } + .chat .footer .buttons button:hover { - color: var(--text-color); + background-color: var(--secondary-color); } .chat .body::-webkit-scrollbar, @@ -127,11 +159,39 @@ .chatEmojiPicker { position: absolute; - bottom: 0px; + bottom: 70px; + right: 10px; background: var(--chat-bg); - border: var(--border); - border-radius: 5px; - --rgb-background: var(--chat-bg); - --color-border-over: var(--chat-bg); - --font-family: 'Montserrat'; -} \ No newline at end of file + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + display: none; + padding: 10px; +} + +.chatEmojiPicker.show { + display: block; +} + +@media (max-width: 768px) { + .chat { + position: fixed; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + border-radius: 10px 10px 0 0; + } + + .chat .header .title { + font-size: 1rem; + } + + .chat .footer textarea { + height: 35px; + font-size: 0.9rem; + } + + .chat .footer .buttons button { + font-size: 1.3rem; + } +} diff --git a/frontend/css/client.css b/frontend/css/client.css index c66b3b3..a4ef044 100644 --- a/frontend/css/client.css +++ b/frontend/css/client.css @@ -19,7 +19,6 @@ --my-video-wrap-width: 360px; /* Safari */ --my-video-wrap-height: 205px; --settings-width: 280px; - --chat-width: 320px; --btn-hover-scale: scale(1.1); --box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 1); } diff --git a/frontend/js/client.js b/frontend/js/client.js index 842ebf8..a4749bd 100644 --- a/frontend/js/client.js +++ b/frontend/js/client.js @@ -9,7 +9,7 @@ * @license For private project or commercial purposes contact us at: license.mirotalk@gmail.com or purchase it directly via Code Canyon: * @license https://codecanyon.net/item/mirotalk-c2c-webrtc-real-time-cam-2-cam-video-conferences-and-screen-sharing/43383005 * @author Miroslav Pejic - miroslav.pejic.85@gmail.com - * @version 1.1.32 + * @version 1.1.33 */ const roomId = new URLSearchParams(window.location.search).get('room'); @@ -848,7 +848,6 @@ function handleEvents() { if (isMobileDevice) { elemDisplay(maxVideoQualityDiv, false); elemDisplay(pushToTalkDiv, false); - document.documentElement.style.setProperty('--chat-width', '100%'); } else { switchPushToTalk.onchange = (e) => { isPushToTalkActive = e.currentTarget.checked; @@ -1449,7 +1448,7 @@ function toggleChat() { } } -function toggleChatEmoji(){ +function toggleChatEmoji() { chatEmoji.classList.toggle('show'); } diff --git a/package.json b/package.json index d91743a..549c4e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalkc2c", - "version": "1.1.32", + "version": "1.1.33", "description": "A free WebRTC Cam-2-Cam browser-based video calls", "main": "server.js", "scripts": {