added remove button UI on media preview

src/app/components/create-status/create-status.component.html

@@ -1,6 +1,6 @@
 <form class="status-form" (ngSubmit)="onSubmit()">
     <div class="status-form__sending" *ngIf="isSending">
-        <app-waiting-animation class="waiting-icon status-form__sending--waiting"></app-waiting-animation>
+        <app-waiting-animation class="waiting-icon"></app-waiting-animation>
     </div>
 
     <input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off" placeholder="Title, Content Warning (optional)" title="title, content warning (optional)"/>

src/app/components/create-status/media/media.component.html

@@ -1,8 +1,14 @@
 <div *ngFor="let m of media" class="media">
-    <div *ngIf="m.attachment === null" class="media__loading">
-        uploading {{ m.file.name }}
+    <div *ngIf="m.attachment === null" class="media__loading" title="{{m.file.name}}">
+        <app-waiting-animation class="waiting-icon status-form__sending--waiting"></app-waiting-animation>
     </div>
-    <div *ngIf="m.attachment !== null" class="media__loaded">
-        <img class="media__preview" src="{{m.attachment.preview_url}}" />
+    <div *ngIf="m.attachment !== null" class="media__loaded" title="{{m.file.name}}">
+        <div class="media__loaded--hover">
+            <button class="media__loaded--button" title="remove" (click)="removeMedia(m)">
+                <fa-icon [icon]="faTimes"></fa-icon> 
+            </button>
+            <!-- <input></input> -->
+        </div>
+        <img class="media__loaded--preview" src="{{m.attachment.preview_url}}" />
     </div>
 </div>

src/app/components/create-status/media/media.component.scss

@@ -1,4 +1,6 @@
 @import "variables";
+@import "commons";
+@import "mixins";
 
 .media {
     width: calc(100%);
@@ -7,18 +9,54 @@
     &__loading{
         width: calc(100%);
         border: 1px solid $status-secondary-color;
-        background: rgb(0, 96, 134);
+        // background: rgb(0, 96, 134);
         overflow: hidden;
-        padding: 5px;
+        padding: 0;
     }
     &__loaded{
         width: calc(100%);
+        height: 75px;
         border: 1px solid $status-secondary-color;
+        position: relative;
+
+        &--hover {
+            position: absolute;
+            top:0;
+            bottom:0;
+            left:0;
+            right:0;
+            z-index: 10;
+            transition: all .2s;
+            opacity: 0;
+            background: rgba(black, .5); 
+        }
+        
+        &:hover &--hover {
+            opacity: 100;
+        }
+
+        &--button {
+            display: block;
+            border:1px solid red;
+            @include clearButton;
+            width: 10px;
+            height: 10px;
+            position: absolute;
+            top:5px;
+            right:7px;
+            color: white;
+        }
+
+        &--preview {
+            // display: block;
+
+            width: calc(100%);
+            height: calc(100%);
+         
+            object-fit: cover;
+            object-position: 50% 50%;    
+        }
+
     }
-    &__preview {
-        width: calc(100%);
-        height: 150px;
-        object-fit: cover;
-        object-position: 50% 50%;
-    }
+   
 }

src/app/components/create-status/media/media.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 
 import { MediaService, MediaWrapper } from '../../../services/media.service';
 import { Subscription } from 'rxjs';
@@ -9,6 +10,7 @@ import { Subscription } from 'rxjs';
     styleUrls: ['./media.component.scss']
 })
 export class MediaComponent implements OnInit, OnDestroy {
+    faTimes = faTimes;
     media: MediaWrapper[] = [];
     private mediaSub: Subscription;
 
@@ -23,4 +25,11 @@ export class MediaComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void {
         this.mediaSub.unsubscribe();
     }
+
+    removeMedia(media: MediaWrapper): boolean{
+        console.warn('delete');
+        console.warn(media);
+
+        return false;
+    }
 }