Обновить UI для меню и языка

2026-08-29 15:56:01 +04:00
parent b47440dd72
commit 3e4583bbe9
12 changed files with 282 additions and 53 deletions
@@ -5,6 +5,7 @@ export function createDropdownMenu({
  minWidth = 210,
  offset = 7,
  align = 'right',
+  leftShift = 0,
  onOpen = null,
  onClose = null,
 } = {}) {
@@ -23,7 +24,8 @@ export function createDropdownMenu({
    const rect = anchorEl.getBoundingClientRect();
    const margin = 10;
    const menuWidth = portal.offsetWidth || minWidth;
-    const desiredLeft = align === 'left' ? rect.left : rect.right - menuWidth;
+    const baseLeft = align === 'left' ? rect.left : rect.right - menuWidth;
+    const desiredLeft = baseLeft - Number(leftShift || 0);
    const left = Math.max(margin, Math.min(window.innerWidth - menuWidth - margin, desiredLeft));
    let top = rect.bottom + offset;
    const menuHeight = portal.offsetHeight || 180;
@@ -36,6 +38,7 @@ export function createDropdownMenu({

  const open = () => {
    if (!anchorEl || portal) return;
+    document.dispatchEvent(new CustomEvent('shine:dropdown-open', { detail: { owner: anchorEl } }));
    const menu = document.createElement('div');
    menu.className = `dm-head-menu dm-head-menu--portal shared-dropdown-menu ${className}`.trim();
    menu.setAttribute('role', 'menu');
@@ -99,6 +102,10 @@ export function createDropdownMenu({
    if (portal.contains(event.target) || anchorEl?.contains(event.target)) return;
    close();
  };
+  const onPeerDropdownOpen = (event) => {
+    if (!portal || event?.detail?.owner === anchorEl) return;
+    close();
+  };
  const onKeydown = (event) => {
    if (event.key !== 'Escape' || !portal) return;
    close();
@@ -110,6 +117,7 @@ export function createDropdownMenu({
  anchorEl?.addEventListener('click', onAnchorClick);
  document.addEventListener('click', onOutsideClick);
  document.addEventListener('keydown', onKeydown);
+  document.addEventListener('shine:dropdown-open', onPeerDropdownOpen);
  window.addEventListener('resize', position, { passive: true });
  window.addEventListener('scroll', position, { passive: true, capture: true });

@@ -123,6 +131,7 @@ export function createDropdownMenu({
      anchorEl?.removeEventListener('click', onAnchorClick);
      document.removeEventListener('click', onOutsideClick);
      document.removeEventListener('keydown', onKeydown);
+      document.removeEventListener('shine:dropdown-open', onPeerDropdownOpen);
      window.removeEventListener('resize', position);
      window.removeEventListener('scroll', position, true);
    },
@@ -84,7 +84,7 @@ export function renderToolbar(currentPageId, navigate) {
        </span>
      `;
    } else if (isNetwork) {
-      btn.innerHTML = iconHtml(item);
+      btn.innerHTML = `${iconHtml(item)}<span>${item.label}</span>`;
      btn.setAttribute('aria-label', item.label);
      btn.title = item.label;
    } else {