aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] #240 - refactor chat, unify participant and sidebar action dropdown UI

Browse Source
This commit is contained in:
Miroslav Pejic
2026-03-31 09:55:02 +02:00
parent 65979da07c
commit 57f267b87f
3 changed files with 35 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/client.css
+9 -98
View File
@@ -3737,18 +3737,22 @@ hr {
top: calc(100% + 10px);
right: 0;
left: auto;
min-width: 200px;
max-width: min(200px, calc(100vw - 32px));
min-width: 248px;
max-width: min(248px, calc(100vw - 32px));
}
.msger-room-actions-menu .msger-dropdown-divider {
height: 1px;
margin: 6px 4px;
margin: 2px 4px;
padding: 0;
list-style: none;
background: linear-gradient(90deg, rgba(214, 234, 238, 0.04), rgba(214, 234, 238, 0.12), rgba(214, 234, 238, 0.04));
}
.msger-room-actions-menu .msger-dropdown-divider + li {
margin-top: 2px;
}
.dropdown-menu-custom.show {
display: block;
}
@@ -3798,105 +3802,12 @@ hr {
backdrop-filter: blur(16px);
}
.msger-room-actions-menu li {
padding: 0;
}
.msger-room-actions-menu li + li {
margin-top: 4px;
}
.msger-room-actions-menu li button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 0;
padding: 9px 10px;
border: 0 !important;
border-radius: 10px;
outline: none !important;
box-shadow: none !important;
appearance: none;
-webkit-appearance: none;
font-size: 0.84rem;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
color: rgba(255, 255, 255, 0.88);
background: transparent;
transition:
background-color 0.18s ease,
color 0.18s ease;
}
.msger-room-actions-menu li button:hover {
color: #fff;
background: rgba(255, 255, 255, 0.06);
}
.msger-room-actions-menu .msger-participant-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
min-width: 24px;
height: 24px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.06);
color: rgba(232, 247, 249, 0.88);
transition:
background-color 0.18s ease,
color 0.18s ease;
}
.msger-room-actions-menu .msger-participant-action-label {
display: inline-flex;
align-items: center;
min-width: 0;
font-size: 0.84rem;
color: rgba(255, 255, 255, 0.88);
transition: color 0.18s ease;
}
.msger-room-actions-menu li button:hover .msger-participant-action-icon {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.msger-room-actions-menu li button:hover .msger-participant-action-label {
color: #fff;
}
.msger-room-actions-menu .msger-participant-action-danger .msger-participant-action-icon {
background: rgba(255, 95, 87, 0.12);
color: #ff8c84;
}
.msger-room-actions-menu .msger-participant-action-danger:hover {
color: #fff;
background: linear-gradient(90deg, rgba(255, 95, 87, 0.18), rgba(255, 95, 87, 0.08));
}
.msger-room-actions-menu .msger-participant-action-danger:hover .msger-participant-action-icon {
background: rgba(255, 95, 87, 0.18);
color: #ff6b60;
}
.msger-room-actions-menu .msger-participant-action-danger .msger-participant-action-label {
color: #ffd5cf;
}
.msger-room-actions-menu .msger-participant-action-danger:hover .msger-participant-action-label {
color: #fff;
}
@media (max-width: 820px) {
.msger-header-options .dropdown-custom > .msger-room-actions-menu {
right: 0;
left: auto;
min-width: min(214px, calc(100vw - 32px));
max-width: min(244px, calc(100vw - 32px));
min-width: min(248px, calc(100vw - 32px));
max-width: min(248px, calc(100vw - 32px));
}
}
public/js/client.js
+24
View File
@@ -231,6 +231,7 @@ const msgerDropDownMenuBtn = getId('msgerDropDownMenuBtn');
const msgerDropDownContent = getId('msgerDropDownContent');
const msgerSidebarDropDownMenuBtn = getId('msgerSidebarDropDownMenuBtn');
const msgerSidebarDropDownContent = getId('msgerSidebarDropDownContent');
const msgerClean = getId('msgerClean');
const msgerSaveBtn = getId('msgerSaveBtn');
const msgerRoomChatItem = getId('msgerRoomChatItem');
@@ -316,6 +317,9 @@ const searchPeerBarName = getId('searchPeerBarName');
const msgerCPDropDownMenuBtn = getId('msgerCPDropDownMenuBtn');
const msgerCPDropDownContent = getId('msgerCPDropDownContent');
renderMsgerRoomActionsDropdown(msgerCPDropDownContent);
renderMsgerRoomActionsDropdown(msgerSidebarDropDownContent, 'Desktop');
// Caption section
const captionDraggable = getId('captionDraggable');
const captionHeader = getId('captionHeader');
@@ -10596,6 +10600,26 @@ function getMsgerParticipantDropdownActionMarkup(buttonId, iconClass, label, var
`;
}
function getMsgerParticipantDropdownDividerMarkup() {
return `<li class="msger-dropdown-divider" aria-hidden="true"></li>`;
}
function getMsgerRoomActionsDropdownMarkup(idSuffix = '') {
return `
${getMsgerParticipantDropdownActionMarkup(`captionEveryoneBtn${idSuffix}`, 'fas fa-play', 'Start captions')}
${getMsgerParticipantDropdownActionMarkup(`captionEveryoneStopBtn${idSuffix}`, 'fas fa-stop', 'Stop captions')}
${getMsgerParticipantDropdownDividerMarkup()}
${getMsgerParticipantDropdownActionMarkup(`muteEveryoneBtn${idSuffix}`, 'fas fa-microphone', 'Mute everyone', 'danger')}
${getMsgerParticipantDropdownActionMarkup(`hideEveryoneBtn${idSuffix}`, 'fas fa-video', 'Hide everyone', 'danger')}
${getMsgerParticipantDropdownActionMarkup(`ejectEveryoneBtn${idSuffix}`, 'fas fa-right-from-bracket', 'Eject everyone', 'danger')}
`;
}
function renderMsgerRoomActionsDropdown(dropdownContent, idSuffix = '') {
if (!dropdownContent) return;
dropdownContent.innerHTML = getMsgerRoomActionsDropdownMarkup(idSuffix);
}
/**
* Add participants in the chat room lists
* @param {object} peers all peers info connected to the same room
public/views/client.html
+2 -116
View File
@@ -364,64 +364,7 @@ access to use this app.
id="msgerSidebarDropDownContent"
class="dropdown-menu-custom msger-participant-dropdown-menu msger-room-actions-menu"
aria-labelledby="msgerSidebarDropDownMenuBtn"
>
<li>
<button
id="captionEveryoneBtnDesktop"
class="dropdown-item msger-participant-action"
>
<span class="msger-participant-action-icon"
><i class="fas fa-play"></i
></span>
<span class="msger-participant-action-label">Start captions</span>
</button>
</li>
<li>
<button
id="captionEveryoneStopBtnDesktop"
class="dropdown-item msger-participant-action"
>
<span class="msger-participant-action-icon"
><i class="fas fa-stop"></i
></span>
<span class="msger-participant-action-label">Stop captions</span>
</button>
</li>
<li class="msger-dropdown-divider" aria-hidden="true"></li>
<li>
<button
id="muteEveryoneBtnDesktop"
class="dropdown-item msger-participant-action msger-participant-action-danger"
>
<span class="msger-participant-action-icon"
><i class="fas fa-microphone"></i
></span>
<span class="msger-participant-action-label">Mute everyone</span>
</button>
</li>
<li>
<button
id="hideEveryoneBtnDesktop"
class="dropdown-item msger-participant-action msger-participant-action-danger"
>
<span class="msger-participant-action-icon"
><i class="fas fa-video"></i
></span>
<span class="msger-participant-action-label">Hide everyone</span>
</button>
</li>
<li>
<button
id="ejectEveryoneBtnDesktop"
class="dropdown-item msger-participant-action msger-participant-action-danger"
>
<span class="msger-participant-action-icon"
><i class="fas fa-right-from-bracket"></i
></span>
<span class="msger-participant-action-label">Eject everyone</span>
</button>
</li>
</ul>
></ul>
</div>
<button id="msgerSidebarCloseBtn" class="fas fa-times"></button>
</div>
@@ -537,64 +480,7 @@ access to use this app.
id="msgerCPDropDownContent"
class="dropdown-menu-custom msger-participant-dropdown-menu msger-room-actions-menu"
aria-labelledby="msgerCPDropDownMenuBtn"
>
<li>
<button
id="captionEveryoneBtn"
class="dropdown-item msger-participant-action"
>
<span class="msger-participant-action-icon"
><i class="fas fa-play"></i
></span>
<span class="msger-participant-action-label">Start captions</span>
</button>
</li>
<li>
<button
id="captionEveryoneStopBtn"
class="dropdown-item msger-participant-action"
>
<span class="msger-participant-action-icon"
><i class="fas fa-stop"></i
></span>
<span class="msger-participant-action-label">Stop captions</span>
</button>
</li>
<li class="msger-dropdown-divider" aria-hidden="true"></li>
<li>
<button
id="muteEveryoneBtn"
class="dropdown-item msger-participant-action msger-participant-action-danger"
>
<span class="msger-participant-action-icon"
><i class="fas fa-microphone"></i
></span>
<span class="msger-participant-action-label">Mute everyone</span>
</button>
</li>
<li>
<button
id="hideEveryoneBtn"
class="dropdown-item msger-participant-action msger-participant-action-danger"
>
<span class="msger-participant-action-icon"
><i class="fas fa-video"></i
></span>
<span class="msger-participant-action-label">Hide everyone</span>
</button>
</li>
<li>
<button
id="ejectEveryoneBtn"
class="dropdown-item msger-participant-action msger-participant-action-danger"
>
<span class="msger-participant-action-icon"
><i class="fas fa-right-from-bracket"></i
></span>
<span class="msger-participant-action-label">Eject everyone</span>
</button>
</li>
</ul>
></ul>
</div>
<button id="msgerCPCloseBtn" class="fas fa-times"></button>
</div>