[mirotalk] - profile tab UI improvements

This commit is contained in:
Miroslav Pejic
2026-04-29 23:21:52 +02:00
parent fec645697b
commit 37aebdb2f7
9 changed files with 50 additions and 22 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
# ====================================================
# MiroTalk P2P v.1.8.22 - Environment Configuration
# MiroTalk P2P v.1.8.23 - Environment Configuration
# ====================================================
# App environment
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.8.22 - Configuration File
* MiroTalk P2P v.1.8.23 - Configuration File
* ==============================================
*
* This file is the central configuration source.
+1 -1
View File
@@ -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.8.22
* @version 1.8.23
*
*/
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.8.22",
"version": "1.8.23",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.8.22",
"version": "1.8.23",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.6.0",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.8.22",
"version": "1.8.23",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
+30 -2
View File
@@ -3318,7 +3318,7 @@ button {
--------------------------------------------------------------*/
#myPeerNameSet {
width: 50%;
flex: 1;
padding: 10px;
border: var(--border);
border-radius: 8px;
@@ -3331,6 +3331,19 @@ button {
margin-bottom: 5px;
}
#myProfileAvatarContainer {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
#myProfileAvatarBtns {
display: flex;
flex-direction: column;
gap: 6px;
}
#myProfileAvatar {
margin-top: 10px;
width: 64px;
@@ -3419,7 +3432,22 @@ button {
#myProfileAvatarUploadBtn,
#myProfileAvatarResetBtn {
margin-top: 6px;
margin-top: 0;
}
#myPeerNameSetContainer {
display: flex;
align-items: stretch;
gap: 8px;
}
#myPeerNameSetBtn {
padding: 10px 8px;
font-size: 0.75rem;
white-space: nowrap;
width: fit-content;
flex-shrink: 0;
box-sizing: border-box;
}
/*--------------------------------------------------------------
+1 -1
View File
@@ -109,7 +109,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.8.22',
title: 'WebRTC P2P v1.8.23',
html: `
<button
id="support-button"
+2 -2
View File
@@ -15,7 +15,7 @@
* @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.8.22
* @version 1.8.23
*
*/
@@ -15580,7 +15580,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.22',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.23',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
+11 -11
View File
@@ -1062,16 +1062,16 @@ access to use this app.
<div id="tabProfile" class="tabcontent">
<div id="tabRoomPeerName">
<div>
<div id="myProfileAvatarContainer">
<img id="myProfileAvatar" />
</div>
<div>
<button id="myProfileAvatarUploadBtn">
<i class="fas fa-image"></i>&nbsp;Set avatar
</button>
<button id="myProfileAvatarResetBtn" class="hidden">
<i class="fas fa-rotate-left"></i>&nbsp;Reset avatar
</button>
<div id="myProfileAvatarBtns">
<button id="myProfileAvatarUploadBtn">
<i class="fas fa-image"></i>&nbsp;Set avatar
</button>
<button id="myProfileAvatarResetBtn" class="hidden">
<i class="fas fa-rotate-left"></i>&nbsp;Reset avatar
</button>
</div>
</div>
<br />
<div class="title">
@@ -1079,9 +1079,9 @@ access to use this app.
<p>Name</p>
</div>
<br /><br />
<div>
<div id="myPeerNameSetContainer">
<input id="myPeerNameSet" type="text" placeholder="Change name..." maxlength="254" />
<button id="myPeerNameSetBtn"><i class="fas fa-user-edit"></i>&nbsp;Change name</button>
<button id="myPeerNameSetBtn"><i class="fas fa-user-edit"></i>&nbsp;Change</button>
</div>
</div>
<br />