iarv/mc-webui
1
0
Fork 1
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-04-30 10:34:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add scroll-to-bottom button in DM view

Browse Source 
Reuses the same CSS styling as channel chat button.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-01-26 21:02:09 +01:00
parent 5f0151a691
commit 6eb63ccbda
2 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/static/js/dm.js
View File

@@ -119,6 +119,25 @@ function setupEventListeners() {
}
});
}
// Scroll-to-bottom button
const messagesContainer = document.getElementById('dmMessagesContainer');
const scrollToBottomBtn = document.getElementById('dmScrollToBottomBtn');
if (messagesContainer && scrollToBottomBtn) {
messagesContainer.addEventListener('scroll', function() {
const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop <= messagesContainer.clientHeight + 100;
if (isAtBottom) {
scrollToBottomBtn.classList.remove('visible');
} else {
scrollToBottomBtn.classList.add('visible');
}
});
scrollToBottomBtn.addEventListener('click', function() {
messagesContainer.scrollTop = messagesContainer.scrollHeight;
scrollToBottomBtn.classList.remove('visible');
});
}
}
/**

6
app/templates/dm.html
View File

@@ -74,7 +74,7 @@
</div>
<!-- Messages Container -->
<div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
<div class="col-12" style="height: 100%;">
<div class="col-12 position-relative" style="height: 100%;">
<div id="dmMessagesContainer" class="messages-container h-100 overflow-auto p-3">
<div id="dmMessagesList">
<!-- Placeholder shown when no conversation selected -->
@@ -85,6 +85,10 @@
</div>
</div>
</div>
<!-- Scroll to bottom button -->
<button id="dmScrollToBottomBtn" class="scroll-to-bottom-btn" title="Scroll to bottom">
<i class="bi bi-chevron-double-down"></i>
</button>
</div>
</div>