update page parametres

2026-04-30 17:49:38 +02:00
parent 520f28af7c
commit 89c3e3c790
11 changed files with 147 additions and 12 deletions
@@ -4,7 +4,7 @@ export const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
-        redirectTo: '/main/messages',
+        redirectTo: '/main/menu',
    },
    {
        path: 'main',
@@ -0,0 +1,44 @@
+.coordinates-btn {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 7px 105px 7px 5px;
+    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;
+}
+
+.coordinates-btn:hover {
+    transform: scale(1.02);
+    box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
+}
+
+.coordinates-btn:active {
+    transform: scale(0.98);
+}
+
+.coordinates-btn .icon-wrapper {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #c07070;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.coordinates-btn .icon-wrapper img {
+    width: 28px;
+    height: 28px;
+    filter: brightness(0) invert(1); /* rend l'icône blanche */
+}
+
+.coordinates-btn .username {
+    font-size: 18px;
+    font-weight: 500;
+    color: #c07070;
+    white-space: nowrap;
+}
@@ -0,0 +1,11 @@
+<button class="coordinates-btn">
+    <svg width="35" height="35" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+        <path d="M256 48c-114.9 0-208 93.1-208 208s93.1 208 208 208c42.6 0 81.8-12.8 114.4-34.7 6.6-4.5 8.3-13.5 3.8-20.1-4.5-6.6-13.5-8.3-20.1-3.8C325.9 420.6 292.2 432 256 432c-97 0-176-79-176-176S159 80 256 80s176 79 176 176v40c0 22.1-17.9 40-40 40s-40-17.9-40-40v-40c0-53-43-96-96-96s-96 43-96 96 43 96 96 96c22.1 0 42.4-7.5 58.6-20.1C328.7 354.2 358.1 368 392 368c39.7 0 72-32.3 72-72v-40c0-114.9-93.1-208-208-208zm0 272c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" fill="#BD5A5A" fill-opacity="0.8"
+                stroke="#BD5A5A"
+                stroke-width="8"
+                stroke-linejoin="round"
+                stroke-linecap="round"
+        />
+    </svg>
+    <span class="username">Modifier les coordonnées</span>
+</button>
@@ -0,0 +1,43 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FormsModule} from "@angular/forms";
+
+export interface Coordonnees {
+  phone: string;
+  email: string;
+}
+
+@Component({
+  selector: 'app-parameters-coordinates',
+  imports: [
+    FormsModule
+  ],
+  templateUrl: './parameters-coordinates.component.html',
+  styleUrl: './parameters-coordinates.component.css'
+})
+export class ParametersCoordinatesComponent {
+  @Input() isOpen: boolean = false;
+  @Output() closed = new EventEmitter<void>();
+  @Output() saved = new EventEmitter<Coordonnees>();
+
+  form: Coordonnees = { phone: '', email: '' };
+  phoneFocused = false;
+  emailFocused = false;
+
+  close(): void {
+    this.closed.emit();
+  }
+
+  save(): void {
+    if (this.form.phone || this.form.email) {
+      this.saved.emit({ ...this.form });
+      this.close();
+    }
+  }
+
+  onOverlayClick(event: MouseEvent): void {
+    if ((event.target as HTMLElement).classList.contains('modal-overlay')) {
+      this.close();
+    }
+  }
+
+}
@@ -0,0 +1,21 @@
+.hamburger-btn {
+    align-self: flex-start;
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: white;
+    border: none;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rosybrown;
+    cursor: pointer;
+    margin-bottom: 28px;
+    transition: box-shadow 0.2s, transform 0.15s;
+
+    &:active {
+        transform: scale(0.94);
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
+    }
+}
@@ -1,10 +1,6 @@
 <button class="hamburger-btn" (click)="exitParam()">
-    <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
-         width="64.000000pt" height="64.000000pt" viewBox="0 0 64.000000 64.000000"
-         preserveAspectRatio="xMidYMid meet">
-
-        <g transform="translate(0.000000,64.000000) scale(0.100000,-0.100000)"
-           fill="#000000" stroke="none">
-        </g>
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+        <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2.5"
+              stroke-linecap="round" stroke-linejoin="round" />
    </svg>
 </button>
@@ -1,5 +1,9 @@
 <div class="page-param" >
    <app-parameters-exit/>
-    <p>Paramètres !</p>
+
+    <div>
+        <app-parameters-coordinates/>
+        <app-parameters-profile/>
+    </div>

 </div>
@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
 import {ParametersExit} from "../parameters-exit/parameters-exit.component";
+import {ParametersCoordinatesComponent} from "../parameters-coordinates/parameters-coordinates.component";
+import {ParametersProfileComponent} from "../parameters-profile/parameters-profile.component";

@Component({
  selector: 'app-parameters-main',
-  imports: [
-    ParametersExit
-  ],
+    imports: [
+        ParametersExit,
+        ParametersCoordinatesComponent,
+        ParametersProfileComponent
+    ],
  templateUrl: './parameters-main.component.html',
  styleUrl: './parameters-main.component.css'
 })
@@ -0,0 +1 @@
+<p>parameters-profile works!</p>
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-parameters-profile',
+  imports: [],
+  templateUrl: './parameters-profile.component.html',
+  styleUrl: './parameters-profile.component.css'
+})
+export class ParametersProfileComponent {
+
+}