yvachot/chatless
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

try frontend...

Browse source
This commit is contained in:
wilfried 2021-05-30 10:40:48 +02:00
parent 1dcf975c97
commit 362a1f236b
3 changed files with 52 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/app/general/general.component.html
View file

@ -5,50 +5,47 @@
<div class="user-list-card"> <div class="user-list-card">
<div class="user-card" <div class="user-card"
[ngClass]="{'active' : user?.login === selectedUser?.login}"
*ngFor="let user of dataSource.data"
(click)="selectUserHandler(user.login)"
> >
<!----> <!---->
<img src="../../assets/image/user.png" height="25" width="25"/> <img src="../../assets/image/user.png" height="25" width="25"/>
<p class="username">{{user?.login}}</p> <p class="username">{{username}}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<div class="chat-container">
<ng-container >
<div class="chat-header"> <div class="chat-header">
<p class="username">{{username}}</p> <p class="username">General Chat</p>
</div> </div>
<div class="chat-body"> <div class="chat-body">
<div *ngFor="let item of messageArray">
<span><strong>{{item.user}} : </strong> {{item.message}}</span>
</div>
<ul #ulMessages id="messages"> <ul #ulMessages id="messages">
</ul> </ul>
</div> </div>
<div class="chat-footer">
<div class="row">
<div class="col-md-10"> <div class="chat-footer">
<div class="form-group mb-0"> <div class="row">
<input type="text" placeholder="Entrez votre message" class="form-control" <div class="col-md-10">
[(ngModel)]="msg"/> <div class="form-group mb-0">
</div> <input type="text" placeholder="Entrez votre message" class="form-control"
</div> [(ngModel)]="msg"/>
<div class="col-md-2 text-center align-self-center">
<button class="btn btn-primary btn-bm px-3 " (click)="sendButtonClick()">Envoyer</button>
</div>
</div> </div>
</div> </div>
</ng-container> <div class="col-md-2 text-center align-self-center">
<button class="btn btn-primary btn-bm px-3 " (click)="sendButtonClick()">Envoyer</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

2
frontend/src/app/general/general.component.ts
View file

@ -11,7 +11,7 @@ import {MessageService} from "../services/message/message.service";
}) })
export class GeneralComponent implements OnInit { export class GeneralComponent implements OnInit {
private username = sessionStorage.getItem('login'); public username = sessionStorage.getItem('login');
private room = 'general'; private room = 'general';
public msg = ''; public msg = '';

87
frontend/src/styles.scss
View file

@ -47,67 +47,42 @@ body {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.chat-header {
height: 70px; }
background-color: #E5E5E5;
.chat-header {
height: 70px;
border-radius: 10px;
background-color: #E5E5E5;
display: flex;
justify-content: flex-start;
align-items: center;
.username {
font-size: 20px;
font-weight: 500;
margin-bottom: 0;
margin-left: 20px;
display: flex; display: flex;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
.username {
font-size: 20px;
font-weight: 500;
margin-bottom: 0;
margin-left: 20px;
display: flex;
justify-content: center;
align-items: center;
}
} }
}
.chat-body { .chat-body {
background-image: url(./assets/image/fond.png); background-color: white;
background-repeat: no-repeat; border-radius: 10px;
background-size: cover; height: calc(89.5vh - 89.5px);
background-position: center center; overflow-y: auto;
height: calc(100vh - 125px); }
overflow-y: auto;
.message-container { .chat-footer {
background-color: white; border-radius: 10px;
padding: 7px; bottom: 0;
border-radius: 5px; left: 0;
width: fit-content; right: 0;
max-width: 90%; background-color: #EDEDED;
margin-bottom: 15px; padding: 10px 20px;
}
.same-user {
display: flex;
justify-content: flex-end;
.message-container {
background-color: lightskyblue;
}
}
}
.chat-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #EDEDED;
padding: 10px 20px;
.form-control {
background-color: white;
border: 1px solid #D8DDEC;
box-sizing: border-box;
font-size: 1rem;
color: black;
}
}
} }
.modal-footer { .modal-footer {