rr
This commit is contained in:
wilfried
parent
7c35bbaeb7
commit
1dcf975c97
5 changed files with 66 additions and 26 deletions
|
|
@ -1,25 +1,55 @@
|
||||||
<!DOCTYPE html>
|
<div class="container-fluid" >
|
||||||
<html>
|
<div class="row">
|
||||||
<head>
|
|
||||||
<title>Socket.IO chat</title>
|
|
||||||
<style>
|
|
||||||
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
|
|
||||||
|
|
||||||
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
|
<div class="col-md-4">
|
||||||
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
|
|
||||||
#input:focus { outline: none; }
|
|
||||||
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
|
|
||||||
|
|
||||||
#messages { list-style-type: none; margin: 0; padding: 0; }
|
<div class="user-list-card">
|
||||||
#messages > li { padding: 0.5rem 1rem; }
|
<div class="user-card"
|
||||||
#messages > li:nth-child(odd) { background: #efefef; }
|
[ngClass]="{'active' : user?.login === selectedUser?.login}"
|
||||||
</style>
|
*ngFor="let user of dataSource.data"
|
||||||
</head>
|
(click)="selectUserHandler(user.login)"
|
||||||
<body>
|
>
|
||||||
<ul #ulMessages id="messages">
|
<!---->
|
||||||
</ul>
|
|
||||||
<form id="form" action="">
|
<img src="../../assets/image/user.png" height="25" width="25"/>
|
||||||
<input id="input" autocomplete="off" name="message" [(ngModel)]="msg"/><button (click)="sendButtonClick()">Send</button>
|
<p class="username">{{user?.login}}</p>
|
||||||
</form>
|
|
||||||
</body>
|
</div>
|
||||||
</html>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8">
|
||||||
|
|
||||||
|
<div class="chat-container">
|
||||||
|
<ng-container >
|
||||||
|
<div class="chat-header">
|
||||||
|
<p class="username">{{username}}</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>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -24,5 +24,6 @@
|
||||||
<button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Privée</button>
|
<button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Privée</button>
|
||||||
<button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Générale</button>
|
<button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Générale</button>
|
||||||
</div>
|
</div>
|
||||||
|
<br>
|
||||||
|
<p class="alert alert-danger" role="alert" *ngIf="errorMessage !== ''">{{errorMessage}}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,8 @@ export class AuthService {
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
islog: boolean;
|
islog: boolean;
|
||||||
|
// @ts-ignore
|
||||||
|
public currentUser;
|
||||||
|
|
||||||
constructor(private messageService: MessageService) { }
|
constructor(private messageService: MessageService) { }
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,3 +25,4 @@ export class MessageService {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ body {
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
padding: 50px 200px;
|
padding: 50px 200px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background-color: #87CEEB;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-list-card {
|
.user-list-card {
|
||||||
|
|
@ -54,9 +55,10 @@ body {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
font-size: 14px;
|
font-size: 20px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
margin-left: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -64,7 +66,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-body {
|
.chat-body {
|
||||||
background-image: url(./assets/image/user.png);
|
background-image: url(./assets/image/fond.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
|
|
@ -107,3 +109,7 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
|
||||||
Reference in a new issue