From f3dfac6bc77a524ce7dde1e3b1d0d41dbe3a9343 Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry@protonmail.com>
Date: Thu, 5 Sep 2024 09:23:25 +0200
Subject: [PATCH] Add delete button.

---
 .../publication/publication.component.html    | 18 +++++--
 .../publication/publication.component.scss    | 47 +++++++++++++++----
 2 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/pages/publication/publication.component.html b/frontend/src/app/pages/publication/publication.component.html
index 91ea2e4..1ae6442 100644
--- a/frontend/src/app/pages/publication/publication.component.html
+++ b/frontend/src/app/pages/publication/publication.component.html
@@ -15,11 +15,19 @@
             </header>
             <main [innerHTML]="publication.parsedText"></main>
             <footer>
-                <img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
-                Publication posted by {{ publication.author.name }}
-                <span class="publication-date">
-                    ({{ publication.creationDate | date: 'short' : 'fr-FR' }})
-                </span>
+                <div class="metadata">
+                    <img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
+                    Publication posted by {{ publication.author.name }}
+                    <span class="publication-date">
+                        ({{ publication.creationDate | date: 'short' : 'fr-FR' }})
+                    </span>
+                </div>
+                @if (isAuthorAndUserEquals) {
+                    <button type="button" matTooltip="Click to delete the publication" matTooltipPosition="left">
+                        <mat-icon>delete</mat-icon>
+                        Delete
+                    </button>
+                }
             </footer>
         </div>
     } @else {
diff --git a/frontend/src/app/pages/publication/publication.component.scss b/frontend/src/app/pages/publication/publication.component.scss
index aa16d26..d0bb8e6 100644
--- a/frontend/src/app/pages/publication/publication.component.scss
+++ b/frontend/src/app/pages/publication/publication.component.scss
@@ -79,23 +79,50 @@ $cardBorderRadius: .5em;
         footer {
             display: flex;
             flex-direction: row;
+            justify-content: space-between;
             align-items: center;
             background-color: #f0f0f0;
             border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
             padding: 1em 2em;
-            gap: 1em;
 
-            img {
-                $imageSize: 4em;
-                border-radius: 10em;
-                width: $imageSize;
-                height: $imageSize;
-                object-fit: cover;
+            .metadata {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                
+                gap: 1em;
+    
+                img {
+                    $imageSize: 4em;
+                    border-radius: 10em;
+                    width: $imageSize;
+                    height: $imageSize;
+                    object-fit: cover;
+                }
+    
+                .publication-date {
+                    font-style: italic;
+                    color: #bdbdbd;
+                }
             }
 
-            .publication-date {
-                font-style: italic;
-                color: #bdbdbd;
+            button {
+                padding: .8em 1.2em;
+                border-radius: 10em;
+                border: none;
+                background-color: #D50000;
+                color: white;
+                transition: background-color .2s ease-in-out;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                gap: .5em;
+            
+                &:hover {
+                    background-color: #B71C1C;
+                    cursor: pointer;
+                }
             }
         }
     }