From c374c62b2f626474a2a2cac4c33769a27ddbfbcc Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Fri, 3 Apr 2026 16:46:23 +0200 Subject: [PATCH] [mirotalk] - feat: replace theme select dropdown with clickable icon cards in settings --- .env.template | 2 +- app/src/config.template.js | 2 +- app/src/server.js | 2 +- package-lock.json | 4 +- package.json | 2 +- public/css/client.css | 128 +++++++++++++++++++++++++++++++++++++ public/js/brand.js | 2 +- public/js/client.js | 29 ++++++++- public/views/client.html | 52 ++++++++++++--- 9 files changed, 205 insertions(+), 18 deletions(-) diff --git a/.env.template b/.env.template index f3536cea..5cdf4b6c 100644 --- a/.env.template +++ b/.env.template @@ -1,5 +1,5 @@ # ==================================================== -# MiroTalk P2P v.1.7.90 - Environment Configuration +# MiroTalk P2P v.1.7.91 - Environment Configuration # ==================================================== # App environment diff --git a/app/src/config.template.js b/app/src/config.template.js index 8113faf1..7c35b0c6 100644 --- a/app/src/config.template.js +++ b/app/src/config.template.js @@ -2,7 +2,7 @@ /** * ============================================== - * MiroTalk P2P v.1.7.90 - Configuration File + * MiroTalk P2P v.1.7.91 - Configuration File * ============================================== * * This file is the central configuration source. diff --git a/app/src/server.js b/app/src/server.js index 0c83fa71..66b0bf7c 100755 --- a/app/src/server.js +++ b/app/src/server.js @@ -45,7 +45,7 @@ dependencies: { * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661 * @author Miroslav Pejic - miroslav.pejic.85@gmail.com - * @version 1.7.90 + * @version 1.7.91 * */ diff --git a/package-lock.json b/package-lock.json index 5c53feb2..f7d099c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mirotalk", - "version": "1.7.90", + "version": "1.7.91", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "mirotalk", - "version": "1.7.90", + "version": "1.7.91", "license": "AGPL-3.0", "dependencies": { "@mattermost/client": "11.5.0", diff --git a/package.json b/package.json index 4079b616..8518a2cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalk", - "version": "1.7.90", + "version": "1.7.91", "description": "A free WebRTC browser-based video call", "main": "server.js", "scripts": { diff --git a/public/css/client.css b/public/css/client.css index ba871839..96718d4f 100755 --- a/public/css/client.css +++ b/public/css/client.css @@ -2677,6 +2677,134 @@ button { color: white; } +/*-------------------------------------------------------------- +# Settings - theme cards +--------------------------------------------------------------*/ + +.theme-cards-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; + margin-bottom: 10px; +} + +.theme-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + padding: 10px 4px; + border: 2px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + background: rgba(255, 255, 255, 0.05); + cursor: pointer; + transition: all 0.25s ease; + user-select: none; +} + +.theme-card i { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.7); + transition: color 0.25s ease; +} + +.theme-card span { + font-size: 0.7rem; + color: rgba(255, 255, 255, 0.6); + text-transform: capitalize; +} + +.theme-card:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.3); + transform: translateY(-2px); +} + +.theme-card.active { + border-color: var(--dd-color, #66beff); + background: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 12px rgba(102, 190, 255, 0.2); +} + +.theme-card.active i { + color: var(--dd-color, #66beff); +} + +.theme-card.active span { + color: #ffffff; +} + +.theme-card.disabled { + opacity: 0.4; + pointer-events: none; +} + +/* Theme card specific icon colors */ +.theme-card[data-theme='dark'] i { + color: #9a9abb; +} +.theme-card[data-theme='grey'] i { + color: #b0b0c0; +} +.theme-card[data-theme='green'] i { + color: #6fcf97; +} +.theme-card[data-theme='blue'] i { + color: #6ba3d6; +} +.theme-card[data-theme='red'] i { + color: #e07070; +} +.theme-card[data-theme='purple'] i { + color: #b07cc8; +} +.theme-card[data-theme='orange'] i { + color: #e8a560; +} +.theme-card[data-theme='yellow'] i { + color: #d4b85c; +} + +.theme-card.active[data-theme='dark'] { + border-color: #9a9abb; + box-shadow: 0 0 12px rgba(154, 154, 187, 0.15); +} +.theme-card.active[data-theme='grey'] { + border-color: #b0b0c0; + box-shadow: 0 0 12px rgba(176, 176, 192, 0.15); +} +.theme-card.active[data-theme='green'] { + border-color: #6fcf97; + box-shadow: 0 0 12px rgba(111, 207, 151, 0.2); +} +.theme-card.active[data-theme='blue'] { + border-color: #6ba3d6; + box-shadow: 0 0 12px rgba(107, 163, 214, 0.2); +} +.theme-card.active[data-theme='red'] { + border-color: #e07070; + box-shadow: 0 0 12px rgba(224, 112, 112, 0.2); +} +.theme-card.active[data-theme='purple'] { + border-color: #b07cc8; + box-shadow: 0 0 12px rgba(176, 124, 200, 0.2); +} +.theme-card.active[data-theme='orange'] { + border-color: #e8a560; + box-shadow: 0 0 12px rgba(232, 165, 96, 0.2); +} +.theme-card.active[data-theme='yellow'] { + border-color: #d4b85c; + box-shadow: 0 0 12px rgba(212, 184, 92, 0.2); +} + +@media screen and (max-width: 500px) { + .theme-cards-grid { + grid-template-columns: repeat(3, 1fr); + } +} + #themeColorPicker { z-index: 6; padding: 10px; diff --git a/public/js/brand.js b/public/js/brand.js index 5afdd045..3ce81a1a 100644 --- a/public/js/brand.js +++ b/public/js/brand.js @@ -107,7 +107,7 @@ let brand = { }, about: { imageUrl: '../images/mirotalk-logo.gif', - title: 'WebRTC P2P v1.7.90', + title: 'WebRTC P2P v1.7.91', html: `