diff --git a/public/css/client.css b/public/css/client.css index 7c7903c3..b3da35d3 100755 --- a/public/css/client.css +++ b/public/css/client.css @@ -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)); } } diff --git a/public/js/client.js b/public/js/client.js index 0174dca5..bba42f08 100644 --- a/public/js/client.js +++ b/public/js/client.js @@ -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 ``; +} + +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 diff --git a/public/views/client.html b/public/views/client.html index 763d415f..d5d5379a 100755 --- a/public/views/client.html +++ b/public/views/client.html @@ -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" - > -
  • - -
  • -
  • - -
  • - -
  • - -
  • -
  • - -
  • -
  • - -
  • - + > @@ -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" - > -
  • - -
  • -
  • - -
  • - -
  • - -
  • -
  • - -
  • -
  • - -
  • - + >