Compare commits

base: retoor:ecb77cf361f0d55b512028701c67c1e347836e6e
Branches Tags
retoor:main
retoor:feat/make-database-async
..
compare: retoor:e7cd397e0fe98074833e08880d915516718adaf5
Branches Tags
retoor:main
retoor:feat/make-database-async

No commits in common. "ecb77cf361f0d55b512028701c67c1e347836e6e" and "e7cd397e0fe98074833e08880d915516718adaf5" have entirely different histories.
ecb77cf361 ... e7cd397e0f

2 changed files with 84 additions and 102 deletions
Show Stats Expand all files Collapse all files

28
src/snek/static/base.css
View File

@ -336,31 +336,3 @@ input[type="text"] {
display: block; display: block;
} }
} }
/* The entire scrollbar */
::-webkit-scrollbar {
width: 6px; /* Adjust this value for minimal width */
}
/* The track (background) of the scrollbar */
::-webkit-scrollbar-track {
background: #f1f1f1; /* Change this to your desired track color */
}
::-webkit-scrollbar-thumb {
background-color: #888; /* Change this to your desired thumb color */
border-radius: 3px; /* Rounded corners for a minimal look */
border: 1px solid #f1f1f1; /* Optional: creates a small padding effect */
}
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* Apply to the element that has the scrollbar */
.chat-messages{
/* Makes the scrollbar thinner */
scrollbar-width: thin;
/* Sets the thumb and track colors (thumb first, track second) */
scrollbar-color: #888 #f1f1f1;
}

108
src/snek/templates/web.html
View File

@ -1,89 +1,99 @@
{% extends "app.html" %} {% extends "app.html" %}
{% block main %} {% block main %}
<section class="chat-area" id="chat"> <section class="chat-area" id="chat">
<div class="chat-header"> <div class="chat-header"><h2>{{ channel.label.value }}</h2></div>
<h2>{{ channel.label.value }}</h2>
</div>
<div class="chat-messages"> <div class="chat-messages">
{% for message in messages %} {% for message in messages %}
{% autoescape false %} {% autoescape false %}
{{ message.html }} {{message.html}}
{% endautoescape %} {% endautoescape %}
<div style="display:none" class="message {% if loop.first or message.username != messages[loop.index0 - 1].username %}switch-user{% endif %}" data-uid="{{message.uid}}" data-color="{{message.color}}" data-user_nick="{{message.user_nick}}" data-created_at="{{message.created_at}}">
<div class="avatar no-select" style="background-color: {{message.color}}; color: black;">{{message.user_nick[0]}}</div>
<div class="message-content">
{% autoescape false %}
{{ message.html }}
{% endautoescape %}
<div class="time no-select" data-created_at="{{message.created_at}}">{{message.created_at}}</div>
</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
<chat-window style="display:none" class="chat-area"></chat-window> <chat-window style="display:none" class="chat-area"></chat-window>
<div class="chat-input"> <div class="chat-input">
<textarea placeholder="Type a message..." rows="2"></textarea> <textarea placeholder="Type a message..." rows="2"></textarea>
<upload-button channel="{{ channel.channel_uid.value }}"></upload-button> <upload-button channel="{{channel.channel_uid.value}}"></upload-button>
</div> </div>
</section> </section>
<script>
const channelUid = "{{channel.channel_uid.value}}"
<script> function initInputField(textBox){
const channelUid = "{{ channel.channel_uid.value }}";
function initInputField(textBox) {
textBox.addEventListener('change', (e) => { textBox.addEventListener('change', (e) => {
e.preventDefault(); e.preventDefault();
this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true })); this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true }));
}); });
textBox.addEventListener('keydown', (e) => { textBox.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
const message = e.target.value.trim(); const message = e.target.value.trim();
if (message) { if (!message) return;
app.rpc.sendMessage(channelUid, message); app.rpc.sendMessage(channelUid, e.target.value)
e.target.value = ''; e.target.value = '';
} }
}
}); });
} }
initInputField(document.querySelector("textarea"))
function updateTimes() { function updateTimes(){
document.querySelectorAll(".time").forEach((time) => { document.querySelectorAll(".time").forEach((time) => {
time.innerText = app.timeDescription(time.dataset.created_at); time.innerText = app.timeDescription(time.dataset.created_at)
}); })
} }
function updateLayout() { function updateLayout() {
const messagesContainer = document.querySelector(".chat-messages");
messagesContainer.scrollTop = messagesContainer.scrollHeight + 1000;
updateTimes(); document.querySelectorAll(".chat-messages").forEach((messages) => messages.scrollTop = messages.scrollHeight + 1000)
//document.querySelectorAll(".chat-messages .message:last-child").forEach((message) => message.scrollIntoView({block: "end"}))
updateTimes()
let previousUser = null; let previousUser = null;
document.querySelectorAll(".message").forEach((message) => { document.querySelectorAll(".message").forEach((message) => {
if (previousUser !== message.dataset.user_uid) { if(previousUser != message.dataset.user_uid) {
message.classList.add("switch-user"); message.classList.add("switch-user")
previousUser = message.dataset.user_uid; previousUser = message.dataset.user_uid
} else { }else{
message.classList.remove("switch-user"); message.classList.remove("switch-user")
} }
}); })
} }
setInterval(() => {
setInterval(updateTimes, 1000);
updateTimes()
}, 1000)
app.addEventListener("channel-message", (data) => { app.addEventListener("channel-message", (data) => {
if (data.channel_uid !== channelUid) return; if(data.channel_uid != channelUid) return
if(data.username != "{{user.username.value}}"){
if (data.username !== "{{ user.username.value }}") { app.playSound(0)
app.playSound(0);
} }
const message = document.createElement("div")
const message = document.createElement("div"); //message.classList.add("message")
message.dataset.color = data.color; message.dataset.color = data.color
message.dataset.created_at = data.created_at; message.dataset.created_at = data.created_at
message.dataset.user_nick = data.user_nick; message.dataset.user_nick = data.user_nick
message.dataset.uid = data.uid; message.dataset.uid = data.uid
message.innerHTML = data.html; message.innerHTML = data.html
document.querySelector(".chat-messages").appendChild(message.firstChild); document.querySelector(".chat-messages").appendChild(message.firstChild)
updateLayout(); setTimeout(()=>{
}); updateLayout()
},50)
initInputField(document.querySelector("textarea")); })
updateLayout(); updateLayout()
</script> //.scrollTop = document.querySelector(".chat-messages").scrollHeight + 5000
// })
</script>
{% endblock %} {% endblock %}