carteronm/Knots-Front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Page messages PT2

Browse Source
This commit is contained in:
MathieuCarteron
2026-04-23 17:53:44 +02:00
parent 5a6d350147
commit 38417672f0
12 changed files with 239 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

@@ -1 +1 @@
<router-outlet></router-outlet>
<app-messages-main></app-messages-main>

4
src/app/app.component.ts
View File

@@ -1,11 +1,13 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {LoginFormComponent} from "./login-form/login-form.component";
import {MessagesInfoUser} from "./pages/messages/messages-infouser/messages-infouser.component";
import {MessagesMain} from "./pages/messages/messages-main/messages-main.component";
@Component({
selector: 'app-root',
imports: [RouterOutlet],
imports: [MessagesMain],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})

43
src/app/pages/messages/messages-infouser/messages-infouser.component.css
View File

@@ -0,0 +1,43 @@
.profile-btn {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 24px 10px 10px;
border: none;
cursor: pointer;
border-radius: 50px;
background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.12);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.profile-btn:hover {
transform: scale(1.02);
box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
}
.profile-btn:active {
transform: scale(0.98);
}
.profile-btn .icon-wrapper {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #c07070;
display: flex;
align-items: center;
justify-content: center;
}
.profile-btn .icon-wrapper img {
width: 28px;
height: 28px;
filter: brightness(0) invert(1); /* rend l'icône blanche */
}
.profile-btn .username {
font-size: 18px;
font-weight: 500;
color: #c07070;
}

11
src/app/pages/messages/messages-infouser/messages-infouser.component.html
View File

@@ -1,5 +1,6 @@
<button>
<img width="50" height="50" src="https://img.icons8.com/ios/50/user-male-circle--v1.png" alt="user-male-circle--v1"/>
</button>
<p>Nom User</p>
<button class="profile-btn">
<div class="icon-wrapper">
<img width="50" height="50" src="https://img.icons8.com/ios/50/user-male-circle--v1.png" alt="user"/>
</div>
<span class="username">Nom User</span>
</button>

61
src/app/pages/messages/messages-main/messages-main.component.css
View File

@@ -0,0 +1,61 @@
.page-mess {
min-height: 100vh;
display: flex;
flex-direction: column;
background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
padding: 16px;
gap: 12px;
}
.topbar {
display: flex;
align-items: center;
gap: 10px;
}
.messages {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
padding: 4px 0;
}
.message {
max-width: 75%;
display: flex;
flex-direction: column;
gap: 2px;
}
.message p {
background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 80%);
color: #555;
font-size: 14px;
line-height: 1.5;
padding: 12px 16px;
border-radius: 18px;
box-shadow: 0 2px 12px rgba(200, 120, 100, 0.1);
}
.message .timestamp {
font-size: 11px;
color: #c07070;
padding: 0 4px;
}
.message.received {
align-self: flex-start;
}
.message.sent {
align-self: flex-end;
}
.message.sent p {
background: radial-gradient(ellipse at 70% 30%, #fff 0%, #f9ece9 80%);
}
.bottombar {
margin-top: auto;
}

22
src/app/pages/messages/messages-main/messages-main.component.html
View File

@@ -1 +1,21 @@
<p>messages-main works!</p>
<div class="page-mess">
<div class="topbar">
<app-messages-menu/>
<app-messages-infouser/>
</div>
<div class="messages">
<div class="message received">
<p>Salut, comment tu vas ?</p>
<span class="timestamp">15:33, Aujd.</span>
</div>
</div>
<div class="bottombar">
<app-messages-send/>
</div>
</div>

12
src/app/pages/messages/messages-main/messages-main.component.ts
View File

@@ -1,22 +1,16 @@
import { Component } from '@angular/core';
import {MessagesMenu} from "../messages-menu/messages-menu.component";
import {MessagesInfoUser} from "../messages-infouser/messages-infouser.component";
import {MessagesSendComponent} from "../messages-send/messages-send.component";
import {MessagesSend} from "../messages-send/messages-send.component";
@Component({
selector: 'app-messages-main',
imports: [
MessagesMenu,
MessagesInfoUser,
MessagesSendComponent
MessagesSend
],
template: `
<app-messages-menu/>
<app-messages-infouser/>
<p>Message</p>
<app-messages-send/>
<
`,
templateUrl: './messages-main.component.html',
styleUrl: './messages-main.component.css'
})
export class MessagesMain {

29
src/app/pages/messages/messages-menu/messages-menu.component.css
View File

@@ -0,0 +1,29 @@
.hamburger-btn {
width: 60px;
height: 60px;
border: none;
cursor: pointer;
border-radius: 22px;
/* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
/* Légère ombre rosée */
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
display: flex;
align-items: center;
justify-content: center;
/* Transitions pour l'hover */
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hamburger-btn:hover {
transform: scale(1.04);
box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
}
.hamburger-btn:active {
transform: scale(0.97);
}

2
src/app/pages/messages/messages-menu/messages-menu.component.html
View File

@@ -1,4 +1,4 @@
<button>
<button class="hamburger-btn">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
<g fill-opacity="0.8" fill="#bd5a5a" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-size="none" style="mix-blend-mode: normal">
<g transform="scale(3.55556,3.55556)">

44
src/app/pages/messages/messages-send/messages-send.component.css
View File

@@ -0,0 +1,44 @@
/* === MESSAGE FORM === */
.message-form {
display: flex;
align-items: center;
background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
border-radius: 50px;
padding: 10px 10px 10px 24px;
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
gap: 12px;
}
.message-form input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 17px;
color: #c07070;
}
.message-form input::placeholder {
color: rgba(192, 112, 112, 0.35);
}
.message-form .send-btn {
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease;
}
.message-form .send-btn svg {
width: 22px;
height: 22px;
}
.message-form .send-btn:hover { transform: scale(1.1); }
.message-form .send-btn:active { transform: scale(0.95); }

13
src/app/pages/messages/messages-send/messages-send.component.html
View File

@@ -0,0 +1,13 @@
<form class="message-form" (ngSubmit)="onSubmit()">
<input
type="text"
[formControl]="sendMessage"
placeholder="Envoyez un message..."
/>
<button type="submit" class="send-btn">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12L3 3L21 12L3 21L5 12Z" fill="#b05050"/>
<path d="M5 12H21" stroke="#b05050" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</form>

20
src/app/pages/messages/messages-send/messages-send.component.ts
View File

@@ -7,13 +7,21 @@ import {FormControl, FormsModule, ReactiveFormsModule} from "@angular/forms";
FormsModule,
ReactiveFormsModule
],
template: `
<ng-form>
<input type="text" [formControl]="sendMessage" />
</ng-form>`,
templateUrl:'./messages-send.component.html',
styleUrl: './messages-send.component.css'
})
export class MessagesSendComponent {
export class MessagesSend {
sendMessage = new FormControl();
onSubmit() {
const message = this.sendMessage.value;
if (!message || message.trim() === '') return;
console.log('Message envoyé :', message);
// Logique d'envoi
this.sendMessage.reset();
}
}