max_ronzhin/vidconf
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(chat): специфичность CSS эмодзи-поповера + сетка 6×5

Browse Source 
Кнопка эмодзи и все кнопки внутри поповера лежат в DOM внутри
.chat-input-row (форма отправки) — той же формы, что и круглая зелёная
кнопка «Отправить» (.chat-input-row button, специфичность 0,1,1). Голого
класса .chat-emoji-trigger/.chat-emoji-option (0,1,0) для победы над этим
правилом не хватало: все кнопки поповера красились в зелёный независимо от
порядка объявления в файле — оттуда и «поплывший» вид после добавления
коня, дело было не в самом коне. Каждый селектор уточнён родительским
классом (.chat-emoji-wrap/.chat-emoji-popover), чтобы обойти гонку
специфичности.

Заодно сетка приведена к ровным 5 колонкам × 6 строкам — добавлены
🦾 🚀 🦞 💯 🤷‍♂️, теперь 30 эмодзи без неполной последней строки.
This commit is contained in:
Ронжин Максим
2026-08-02 04:57:39 +03:00
parent daaa480f03
commit 826b7639b1
2 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/room/ChatPanel.tsx
View File

@@ -6,13 +6,15 @@ import { useModalDismiss } from '@/hooks/useModalDismiss'
/** /**
* Небольшой собственный набор популярных эмодзи — вместо библиотеки-пикера на * Небольшой собственный набор популярных эмодзи — вместо библиотеки-пикера на
* сотни килобайт ради десятка кнопок в поповере. * сотни килобайт ради десятка кнопок в поповере. Ровно 30 штук (6×5 —
* `.chat-emoji-popover` в room.css рассчитан на эту сетку без остатка;
* добавляя/убирая эмодзи, держи кратность 5).
*/ */
const EMOJI_OPTIONS = [ const EMOJI_OPTIONS = [
'😀', '😂', '😊', '😉', '😍', '🤔', '😅', '😢', '😀', '😂', '😊', '😉', '😍', '🤔', '😅', '😢',
'😮', '😎', '🙌', '👍', '👎', '👏', '🙏', '❤️', '😮', '😎', '🙌', '👍', '👎', '👏', '🙏', '❤️',
'🔥', '🎉', '✅', '❌', '⚠️', '💡', '👀', '🤝', '🔥', '🎉', '✅', '❌', '⚠️', '💡', '👀', '🤝',
'🐎', '🐎', '🦾', '🚀', '🦞', '💯', '🤷‍♂️',
] ]
interface ChatPanelProps { interface ChatPanelProps {

33
frontend/src/styles/room.css
View File

@@ -526,8 +526,16 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
} }
.chat-input-row button:disabled { opacity: 0.5; cursor: default; } .chat-input-row button:disabled { opacity: 0.5; cursor: default; }
/* Триггер и опции эмодзи-поповера лежат внутри `.chat-input-row` (форма
отправки) — тот же контейнер, что у круглой зелёной кнопки «Отправить»
(`.chat-input-row button`, специфичность 0,1,1). Голого класса
(`.chat-emoji-trigger`/`.chat-emoji-option`, 0,1,0) для победы над ней не
хватает — ЛЮБАЯ кнопка внутри формы (включая кнопки в самом поповере,
он тоже в этом поддереве) красилась в зелёный независимо от порядка
правил в файле. Каждый селектор ниже уточнён родительским классом ровно
затем, чтобы обойти именно эту гонку специфичности. */
.chat-emoji-wrap { position: relative; display: flex; flex-shrink: 0; } .chat-emoji-wrap { position: relative; display: flex; flex-shrink: 0; }
.chat-emoji-trigger { .chat-emoji-wrap .chat-emoji-trigger {
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 50%; border-radius: 50%;
@@ -539,35 +547,40 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
} }
.chat-emoji-trigger:hover { color: var(--color-room-text-primary); } .chat-emoji-wrap .chat-emoji-trigger:hover { color: var(--color-room-text-primary); }
.chat-emoji-trigger.is-open { color: var(--color-room-mic-on); border-color: var(--color-room-speaker-ring); } .chat-emoji-wrap .chat-emoji-trigger.is-open { color: var(--color-room-mic-on); border-color: var(--color-room-speaker-ring); }
.chat-emoji-trigger:disabled { opacity: 0.5; cursor: default; } .chat-emoji-wrap .chat-emoji-trigger:disabled { opacity: 0.5; cursor: default; }
/* 5 колонок × 6 строк — ровно 30 эмодзи в EMOJI_OPTIONS (ChatPanel.tsx), без
неполной последней строки. */
.chat-emoji-popover { .chat-emoji-popover {
position: absolute; position: absolute;
bottom: calc(100% + var(--space-2)); bottom: calc(100% + var(--space-2));
left: 0; left: 0;
z-index: 50; z-index: 50;
width: 224px; width: 220px;
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(5, 1fr);
gap: 2px; gap: 4px;
padding: var(--space-3); padding: var(--space-3);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid var(--color-room-tile-border); border: 1px solid var(--color-room-tile-border);
background: var(--color-room-surface-raised); background: var(--color-room-surface-raised);
box-shadow: var(--shadow-room-panel); box-shadow: var(--shadow-room-panel);
} }
.chat-emoji-option { .chat-emoji-popover .chat-emoji-option {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: none; background: none;
border: none; border: none;
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
padding: 6px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
} }
.chat-emoji-option:hover { background: var(--color-room-tile); } .chat-emoji-popover .chat-emoji-option:hover { background: var(--color-room-tile); }
@media (max-width: 900px) { @media (max-width: 900px) {
.chat-panel { .chat-panel {