rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show operator presence near reply box

Browse Source
This commit is contained in:
rajchales-monito
2026-07-30 12:16:17 +02:00
parent 9a0f7dd224
commit deb090a882
3 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+19
View File
@@ -1194,6 +1194,25 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
box-shadow: inset 0 0 0 2px var(--brand); box-shadow: inset 0 0 0 2px var(--brand);
background: #edf8f3; background: #edf8f3;
} }
.reply-operator-presence {
width: fit-content;
max-width: 100%;
border: 1px solid #dfe9e4;
border-radius: 999px;
padding: 4px 9px;
background: #f8fbf9;
color: var(--muted);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reply-operator-presence.hidden { display: none; }
.reply-operator-presence.typing {
border-color: #f7d8a8;
background: #fff8ed;
color: #8a5a00;
}
.reply-composer { .reply-composer {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) 44px 88px; grid-template-columns: minmax(0, 1fr) 44px 88px;
public/admin.html
+1
View File
@@ -74,6 +74,7 @@
<div id="messages" class="messages"></div> <div id="messages" class="messages"></div>
<div id="typingNotice" class="typing hidden">Zakaznik pise...</div> <div id="typingNotice" class="typing hidden">Zakaznik pise...</div>
<form id="replyForm" class="reply hidden"> <form id="replyForm" class="reply hidden">
<div id="replyOperatorPresence" class="reply-operator-presence hidden"></div>
<div class="reply-composer"> <div class="reply-composer">
<textarea name="message" rows="3" placeholder="Napsat odpoved..."></textarea> <textarea name="message" rows="3" placeholder="Napsat odpoved..."></textarea>
<label class="reply-icon-button attach-button" title="Pridat fotku" aria-label="Pridat fotku"> <label class="reply-icon-button attach-button" title="Pridat fotku" aria-label="Pridat fotku">
public/admin.js
+9 -5
View File
@@ -1106,8 +1106,8 @@ function renderActive() {
} }
function renderOperatorPresence() { function renderOperatorPresence() {
const box = $("#operatorPresence"); const boxes = [$("#operatorPresence"), $("#replyOperatorPresence")].filter(Boolean);
if (!box || !state.activeId) return; if (!boxes.length || !state.activeId) return;
const operators = (state.operatorPresence[state.activeId] || []) const operators = (state.operatorPresence[state.activeId] || [])
.filter((operator) => operator.username !== state.me?.username); .filter((operator) => operator.username !== state.me?.username);
const typing = state.operatorTyping[state.activeId]; const typing = state.operatorTyping[state.activeId];
@@ -1118,9 +1118,13 @@ function renderOperatorPresence() {
if (typing && typing.username !== state.me?.username) { if (typing && typing.username !== state.me?.username) {
parts.push(`${typing.name} pise...`); parts.push(`${typing.name} pise...`);
} }
box.textContent = parts.join(" · "); const text = parts.join(" · ");
box.classList.toggle("hidden", !parts.length); const isTyping = Boolean(typing && typing.username !== state.me?.username);
box.classList.toggle("typing", Boolean(typing && typing.username !== state.me?.username)); for (const box of boxes) {
box.textContent = text;
box.classList.toggle("hidden", !parts.length);
box.classList.toggle("typing", isTyping);
}
} }
function flashOperatorTyping(data) { function flashOperatorTyping(data) {