mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-08-10 18:52:55 +02:00
refactor: Move action buttons inside message bubbles
- Move Reply, Quote, Map, Resend buttons inside message bubbles - Unify Map button style (outline-secondary like others) - Add subtle separator line between message and buttons - Slightly smaller buttons (28px) for better fit inside bubbles Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -133,7 +133,9 @@ main {
|
||||
.message-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Message Bubbles */
|
||||
@@ -851,13 +853,13 @@ main {
|
||||
|
||||
/* Icon-only action buttons on message bubbles */
|
||||
.btn-msg-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
||||
+17
-17
@@ -719,11 +719,11 @@ function createMessageElement(msg) {
|
||||
</div>
|
||||
<div class="message own">
|
||||
<div class="message-content">${processMessageContent(msg.content)}</div>
|
||||
</div>
|
||||
<div class="message-actions justify-content-end">
|
||||
<button class="btn btn-outline-secondary btn-msg-action" onclick='resendMessage(${JSON.stringify(msg.content)})' title="Resend">
|
||||
<i class="bi bi-arrow-repeat"></i>
|
||||
</button>
|
||||
<div class="message-actions justify-content-end">
|
||||
<button class="btn btn-outline-secondary btn-msg-action" onclick='resendMessage(${JSON.stringify(msg.content)})' title="Resend">
|
||||
<i class="bi bi-arrow-repeat"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -747,19 +747,19 @@ function createMessageElement(msg) {
|
||||
<div class="message other">
|
||||
<div class="message-content">${processMessageContent(msg.content)}</div>
|
||||
${metaInfo ? `<div class="message-meta">${metaInfo}</div>` : ''}
|
||||
</div>
|
||||
<div class="message-actions">
|
||||
<button class="btn btn-outline-secondary btn-msg-action" onclick="replyTo('${escapeHtml(msg.sender)}')" title="Reply">
|
||||
<i class="bi bi-reply"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-msg-action" onclick='quoteTo(${JSON.stringify(msg.sender)}, ${JSON.stringify(msg.content)})' title="Quote">
|
||||
<i class="bi bi-quote"></i>
|
||||
</button>
|
||||
${contactsGeoCache[msg.sender] ? `
|
||||
<button class="btn btn-outline-primary btn-msg-action" onclick="showContactOnMap('${escapeHtml(msg.sender)}', ${contactsGeoCache[msg.sender].lat}, ${contactsGeoCache[msg.sender].lon})" title="Show on map">
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
<div class="message-actions">
|
||||
<button class="btn btn-outline-secondary btn-msg-action" onclick="replyTo('${escapeHtml(msg.sender)}')" title="Reply">
|
||||
<i class="bi bi-reply"></i>
|
||||
</button>
|
||||
` : ''}
|
||||
<button class="btn btn-outline-secondary btn-msg-action" onclick='quoteTo(${JSON.stringify(msg.sender)}, ${JSON.stringify(msg.content)})' title="Quote">
|
||||
<i class="bi bi-quote"></i>
|
||||
</button>
|
||||
${contactsGeoCache[msg.sender] ? `
|
||||
<button class="btn btn-outline-secondary btn-msg-action" onclick="showContactOnMap('${escapeHtml(msg.sender)}', ${contactsGeoCache[msg.sender].lat}, ${contactsGeoCache[msg.sender].lon})" title="Show on map">
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user