Compare commits
2 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
362a1f236b | ||
|
|
1dcf975c97 |
6 changed files with 94 additions and 82 deletions
|
|
@ -1,25 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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; }
|
||||
<div class="container-fluid" >
|
||||
<div class="row">
|
||||
|
||||
#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); }
|
||||
#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; }
|
||||
<div class="col-md-4">
|
||||
|
||||
#messages { list-style-type: none; margin: 0; padding: 0; }
|
||||
#messages > li { padding: 0.5rem 1rem; }
|
||||
#messages > li:nth-child(odd) { background: #efefef; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul #ulMessages id="messages">
|
||||
</ul>
|
||||
<form id="form" action="">
|
||||
<input id="input" autocomplete="off" name="message" [(ngModel)]="msg"/><button (click)="sendButtonClick()">Send</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
<div class="user-list-card">
|
||||
<div class="user-card"
|
||||
|
||||
>
|
||||
<!---->
|
||||
|
||||
<img src="../../assets/image/user.png" height="25" width="25"/>
|
||||
<p class="username">{{username}}</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
|
||||
|
||||
|
||||
<div class="chat-header">
|
||||
<p class="username">General Chat</p>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
|
||||
|
|
|
|||
|
|
@ -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 Générale</button>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<p class="alert alert-danger" role="alert" *ngIf="errorMessage !== ''">{{errorMessage}}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ export class AuthService {
|
|||
|
||||
// @ts-ignore
|
||||
islog: boolean;
|
||||
// @ts-ignore
|
||||
public currentUser;
|
||||
|
||||
constructor(private messageService: MessageService) { }
|
||||
|
||||
|
|
|
|||
|
|
@ -25,3 +25,4 @@ export class MessageService {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ body {
|
|||
.container-fluid {
|
||||
padding: 50px 200px;
|
||||
overflow: hidden;
|
||||
background-color: #87CEEB;
|
||||
}
|
||||
|
||||
.user-list-card {
|
||||
|
|
@ -46,64 +47,44 @@ 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: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-body {
|
||||
background-image: url(./assets/image/user.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
height: calc(100vh - 125px);
|
||||
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-body {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
height: calc(89.5vh - 89.5px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.chat-footer {
|
||||
border-radius: 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #EDEDED;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue