lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Upgrade graphic of the chat

Browse source
This commit is contained in:
GRL 2021-07-12 11:59:05 +02:00
parent 3cfbcc6b02
commit b9a2433283
4 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
front/src/Components/Chat/Chat.svelte
View file

@ -32,7 +32,7 @@
<aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}"> <aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
<section class="chatWindowTitle"> <section class="chatWindowTitle">
<h3>Here is your chat history <button on:click={closeChat}>❌</button></h3> <h3>Here is your chat history <span class="float-right" on:click={closeChat}>&times</span></h3>
</section> </section>
<section class="messagesList"> <section class="messagesList">
@ -50,7 +50,15 @@
<style lang="scss"> <style lang="scss">
h3 { h3 {
font-family: 'Whiteney'; font-family: 'Whiteney';
span.float-right {
font-size: 30px;
line-height: 25px;
font-weight: bold;
float: right;
}
} }
aside.chatWindow { aside.chatWindow {
z-index:100; z-index:100;
pointer-events: auto; pointer-events: auto;
@ -60,7 +68,7 @@
height: 100vh; height: 100vh;
width:30vw; width:30vw;
min-width: 350px; min-width: 350px;
background: #051f33; background: rgb(5, 31, 51, 0.9);
color: whitesmoke; color: whitesmoke;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

4
front/src/Components/Chat/ChatElement.svelte
View file

@ -25,9 +25,9 @@
<div class="chatElement"> <div class="chatElement">
<div class="messagePart"> <div class="messagePart">
{#if message.type === ChatMessageTypes.userIncoming} {#if message.type === ChatMessageTypes.userIncoming}
➡️: {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} ({renderDate(message.date)}) &gt;&gt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} enter ({renderDate(message.date)})
{:else if message.type === ChatMessageTypes.userOutcoming} {:else if message.type === ChatMessageTypes.userOutcoming}
⬅️: {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} ({renderDate(message.date)}) &lt;&lt; {#each targets as target}<ChatPlayerName player={target}></ChatPlayerName>{/each} left ({renderDate(message.date)})
{:else if message.type === ChatMessageTypes.me} {:else if message.type === ChatMessageTypes.me}
<h4>Me: ({renderDate(message.date)})</h4> <h4>Me: ({renderDate(message.date)})</h4>
{#each texts as text} {#each texts as text}

2
front/src/Components/Chat/ChatMessageForm.svelte
View file

@ -39,6 +39,8 @@
border: none; border: none;
font-size: 22px; font-size: 22px;
font-family: Whiteney; font-family: Whiteney;
min-width: 0; //Needed so that the input doesn't overflow the container in firefox
outline: none;
} }
button { button {

6
front/src/WebRtc/ColorGenerator.ts
View file

@ -1,5 +1,9 @@
export function getRandomColor(): string { export function getRandomColor(): string {
return hsv_to_rgb(Math.random(), 0.5, 0.95); const golden_ratio_conjugate = 0.618033988749895;
let hue = Math.random();
hue += golden_ratio_conjugate;
hue %= 1;
return hsv_to_rgb(hue, 0.5, 0.95);
} }
//todo: test this. //todo: test this.