Browse Source

minor frontend chat changes

master
Pheuw1 2 years ago
parent
commit
8ab8f90017
  1. 3
      front/volume/src/components/Channels.svelte
  2. 23
      front/volume/src/components/Chat.svelte

3
front/volume/src/components/Channels.svelte

@ -114,9 +114,10 @@
return; return;
} }
if (name) { if (name) {
if (channelMode === 'protected') if (channelMode === 'protected'){
await show_popup("Enter a password for the new channel:") await show_popup("Enter a password for the new channel:")
password = $content password = $content
}
name = "🚪 " + name; name = "🚪 " + name;
const response = await fetch(API_URL + "/channels", { const response = await fetch(API_URL + "/channels", {
credentials: "include", credentials: "include",

23
front/volume/src/components/Chat.svelte

@ -25,7 +25,7 @@
getMembers(); getMembers();
usersInterval = setInterval(async () => { usersInterval = setInterval(async () => {
getMembers(); getMembers();
}, 5000); }, 1000);
}); });
socket.on("messages", (msgs: Array<chatMessagesType>) => { socket.on("messages", (msgs: Array<chatMessagesType>) => {
@ -63,7 +63,6 @@
const sendMessage = () => { const sendMessage = () => {
if (newText !== "") { if (newText !== "") {
chatMessages = [...chatMessages.slice(-5 + 1)];
socket.emit("addMessage", { socket.emit("addMessage", {
text: newText, text: newText,
UserId: $store.ftId, UserId: $store.ftId,
@ -370,11 +369,12 @@
</div> </div>
{/if} {/if}
<form on:submit|preventDefault={sendMessage}> <form on:submit|preventDefault={sendMessage}>
<input type="text" placeholder="Type a message..." bind:value={newText} /> <input type="text" placeholder="Type a message..." bind:value={newText} />
<button> <button style="background:#dedede; margin:auto" >
<img src="img/send.png" alt="send" /> <img src="img/send.png" alt="send" />
</button> </button>
</form> </form>
<div>
<button on:click={leaveChannel}>Leave</button> <button on:click={leaveChannel}>Leave</button>
<button <button
on:click|stopPropagation={toggleChatMembers} on:click|stopPropagation={toggleChatMembers}
@ -382,9 +382,10 @@
> >
Chat Members Chat Members
</button> </button>
</div>
{#if showChatMembers} {#if showChatMembers}
<div <div
class="chatMembers"
on:click|stopPropagation on:click|stopPropagation
on:keydown|stopPropagation on:keydown|stopPropagation
/> />
@ -424,7 +425,8 @@
border: 1px solid #dedede; border: 1px solid #dedede;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
width: 300px; max-width: 90%;
width: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -439,8 +441,11 @@
.message { .message {
font-size: 14px; font-size: 14px;
max-width: 90%;
width: auto;
line-height: 1.4; line-height: 1.4;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
word-wrap:break-word;
} }
.message-name { .message-name {
@ -449,7 +454,7 @@
} }
input[type="text"] { input[type="text"] {
width: 100%; width: 80%;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #dedede; border: 1px solid #dedede;
border-radius: 5px; border-radius: 5px;
@ -486,7 +491,7 @@
border: 1px solid #dedede; border: 1px solid #dedede;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
max-height: 100px; max-height: 70%;
overflow-y: scroll; overflow-y: scroll;
z-index: 1; z-index: 1;
} }

Loading…
Cancel
Save