Page messages PT2

2026-04-23 17:53:44 +02:00
parent 5a6d350147
commit 38417672f0
12 changed files with 239 additions and 24 deletions
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<router-outlet></router-outlet>
+<app-messages-main></app-messages-main>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -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'
 })
--- a/src/app/pages/messages/messages-infouser/messages-infouser.component.css
+++ b/src/app/pages/messages/messages-infouser/messages-infouser.component.css
@@ -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;
+}
--- a/src/app/pages/messages/messages-infouser/messages-infouser.component.html
+++ b/src/app/pages/messages/messages-infouser/messages-infouser.component.html
@@ -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>
--- a/src/app/pages/messages/messages-main/messages-main.component.css
+++ b/src/app/pages/messages/messages-main/messages-main.component.css
@@ -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;
+}
--- a/src/app/pages/messages/messages-main/messages-main.component.html
+++ b/src/app/pages/messages/messages-main/messages-main.component.html
@@ -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>
+
--- a/src/app/pages/messages/messages-main/messages-main.component.ts
+++ b/src/app/pages/messages/messages-main/messages-main.component.ts
@@ -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 {
--- a/src/app/pages/messages/messages-menu/messages-menu.component.css
+++ b/src/app/pages/messages/messages-menu/messages-menu.component.css
@@ -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);
+}
--- a/src/app/pages/messages/messages-menu/messages-menu.component.html
+++ b/src/app/pages/messages/messages-menu/messages-menu.component.html
@@ -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)">
--- a/src/app/pages/messages/messages-send/messages-send.component.css
+++ b/src/app/pages/messages/messages-send/messages-send.component.css
@@ -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); }
--- a/src/app/pages/messages/messages-send/messages-send.component.html
+++ b/src/app/pages/messages/messages-send/messages-send.component.html
@@ -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>
--- a/src/app/pages/messages/messages-send/messages-send.component.ts
+++ b/src/app/pages/messages/messages-send/messages-send.component.ts
@@ -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();
+  }
 }