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-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"/>
<p class="username">{{user?.login}}</p>
<p class="username">{{username}}</p>
</div>
</div>
</div>
<div class="col-md-8">
<div class="chat-container">
<ng-container >
<div class="chat-header">
<p class="username">{{username}}</p>
<p class="username">General Chat</p>
</div>
<div class="chat-body">
<div *ngFor="let item of messageArray">
<span><strong>{{item.user}} : </strong> {{item.message}}</span>
</div>
<ul #ulMessages id="messages">
</ul>
</div>
<div class="chat-footer">
<div class="row">
<div class="col-md-10">
<div class="form-group mb-0">
<input type="text" placeholder="Entrez votre message" class="form-control"
[(ngModel)]="msg"/>
</div>
</div>
<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 class="chat-footer">
<div class="row">
<div class="col-md-10">
<div class="form-group mb-0">
<input type="text" placeholder="Entrez votre message" class="form-control"
[(ngModel)]="msg"/>
</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>

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 {
private username = sessionStorage.getItem('login');
public username = sessionStorage.getItem('login');
private room = 'general';
public msg = '';

87
frontend/src/styles.scss
View file

@ -47,67 +47,42 @@ body {
position: relative;
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;
justify-content: flex-start;
justify-content: 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 {
background-image: url(./assets/image/fond.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: calc(100vh - 125px);
overflow-y: auto;
.chat-body {
background-color: white;
border-radius: 10px;
height: calc(89.5vh - 89.5px);
overflow-y: auto;
}
.message-container {
background-color: white;
padding: 7px;
border-radius: 5px;
width: fit-content;
max-width: 90%;
margin-bottom: 15px;
}
.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;
}
}
.chat-footer {
border-radius: 10px;
bottom: 0;
left: 0;
right: 0;
background-color: #EDEDED;
padding: 10px 20px;
}
.modal-footer {