popup UI component + integration with course details

src/app/app.module.ts

@@ -22,6 +22,7 @@ import { CalendarComponent } from './calendar/calendar.component';
 import { AttendanceComponent } from './tabs/more/attendance/attendance.component';
 import { ForumComponent } from './reusable-components/forum/forum.component';
 import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component';
+import { ConfirmationPopupComponent } from './reusable-components/confirmation-popup/confirmation-popup.component';
 
 @NgModule({
 	declarations: [
@@ -39,6 +40,7 @@ import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component'
 		AttendanceComponent,
 		ForumComponent,
 		ForumPageComponent,
+		ConfirmationPopupComponent,
 	],
 	imports: [
 		BrowserModule,

src/app/reusable-components/confirmation-popup/confirmation-popup.component.html

@@ -0,0 +1,16 @@
+<section class="alert-box">
+    <header>
+        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
+        <h5> Delete Media </h5>
+    </header>
+    <p>
+        Are you sure you want to delete this?
+    </p>
+    <p>
+        <strong> Note: </strong> You can always download it back if you would like to.
+    </p>
+    <div class="action-buttons">
+        <button (click)="closePopup()"> Cancel </button>
+        <button class="confirmation-button" (click)="closePopup()"> Delete </button>
+    </div>
+</section>

src/app/reusable-components/confirmation-popup/confirmation-popup.component.scss

@@ -0,0 +1,55 @@
+.alert-box {
+    background-color: var(--ash-black);
+    border-radius: 5px;
+    width: 80%;
+    padding: 15px;
+    margin: 0 auto;
+
+    header {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        .icon {
+            width: 20px;
+            height: 20px;
+            fill: var(--danger);
+            margin-right: 10px;
+        }
+
+        h5 {
+            font-size: 16px;
+            color: var(--danger);
+            font-weight: 400;
+        }
+    }
+
+    p {
+        color: var(--light-grey);
+        font-size: 14px;
+        margin: 7px auto;
+        padding-left: 30px;
+    }
+
+    .action-buttons {
+        display: flex;
+        align-items: stretch;
+        justify-content: flex-end;
+        margin-top: 15px;
+
+        button {
+            background-color: transparent;
+            color: var(--light-grey);
+            font-size: 14px;
+            border-radius: 5px;
+            margin-left: 10px;
+            border: 0px;
+            padding: 7px 15px;
+
+            &.confirmation-button {
+                background-color: var(--dark-grey);
+                color: var(--danger);
+            }
+        }
+    }
+}

src/app/reusable-components/confirmation-popup/confirmation-popup.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmationPopupComponent } from './confirmation-popup.component';
+
+describe('ConfirmationPopupComponent', () => {
+  let component: ConfirmationPopupComponent;
+  let fixture: ComponentFixture<ConfirmationPopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfirmationPopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmationPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/reusable-components/confirmation-popup/confirmation-popup.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+
+@Component({
+	selector: 'app-confirmation-popup',
+	templateUrl: './confirmation-popup.component.html',
+	styleUrls: ['./confirmation-popup.component.scss']
+})
+export class ConfirmationPopupComponent implements OnInit {
+    @Output() popupTerminator = new EventEmitter();
+
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+
+    closePopup() {
+        this.popupTerminator.emit(true);
+    }
+
+}

src/app/tabs/courses/details/details.component.html

@@ -46,43 +46,51 @@
                     <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                 </div>
                 <ul class="topic-list">
-                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
+                    <li class="topic completed">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p>
+                            <p [routerLink]="['/video-chapter/', 'Topic-1']">
                                 <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                             </p>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                            <button class="action-button" (click)="showDeletePopup = true">
+                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                            </button>
                         </div>
                     </li>
 
-                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
+                    <li class="topic completed">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p>
+                            <p [routerLink]="['/video-chapter/', 'Topic-2']">
                                 <span class="type">  <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                             </p>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                            <button class="action-button" (click)="showDeletePopup = true">
+                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                            </button>
                         </div>
                     </li>
 
-                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-3']">
+                    <li class="topic completed">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p>
+                            <p [routerLink]="['/video-chapter/', 'Topic-3']">
                                 <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                             </p>
-                            <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                            <button class="action-button">
+                                <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                            </button>
                         </div>
                     </li>
 
-                    <li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
+                    <li class="topic">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p>
+                            <p [routerLink]="['/video-chapter/', 'Topic-4']">
                                 <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                             </p>
-                            <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                            <button class="action-button">
+                                <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                            </button>
                         </div>
                     </li>
                 </ul>
@@ -97,47 +105,59 @@
                     <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                 </div>
                 <ul class="topic-list">
-                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
+                    <li class="topic completed">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p>
+                            <p [routerLink]="['/video-chapter/', 'Topic-1']">
                                 <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                             </p>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                            <button class="action-button" (click)="showDeletePopup = true">
+                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                            </button>
                         </div>
                     </li>
 
-                    <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
+                    <li class="topic completed">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p>
+                            <p [routerLink]="['/video-chapter/', 'Topic-2']">
                                 <span class="type">  <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                             </p>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                            <button class="action-button" (click)="showDeletePopup = true">
+                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                            </button>
                         </div>
                     </li>
 
-                    <li class="topic" [routerLink]="['/video-chapter/', 'Topic-3']">
+                    <li class="topic">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p>
+                            <p [routerLink]="['/video-chapter/', 'Topic-3']">
                                 <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                             </p>
-                            <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                            <button class="action-button">
+                                <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                            </button>
                         </div>
                     </li>
 
-                    <li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
+                    <li class="topic">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p>
+                            <p [routerLink]="['/video-chapter/', 'Topic-4']">
                                 <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
                             </p>
-                            <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                            <button class="action-button">
+                                <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                            </button>
                         </div>
                     </li>
                 </ul>
             </li>
+
+            <div class="confirmation-popup" [ngClass]="{'active' : showDeletePopup }">
+                <app-confirmation-popup (popupTerminator)="getPopupDecision($event)"></app-confirmation-popup>
+            </div>
         </ul>
 
         <ul class="resources-list" *ngIf="selectedSegment === 'resources'">

src/app/tabs/courses/details/details.component.scss

@@ -228,6 +228,11 @@
         background-color: var(--black);
         border-bottom: 1px solid #333333;
 
+        .action-button {
+            background-color: transparent;
+            border: 0px;
+        }
+
         .icon {
             margin-top: 5px;
         }

src/app/tabs/courses/details/details.component.ts

@@ -13,6 +13,7 @@ export class DetailsComponent implements OnInit {
     heading: string;
     routeSubscription: Subscription;
     selectedChapter: number = 1;
+    showDeletePopup: boolean = false;
 
 	constructor(
         private route: ActivatedRoute,
@@ -33,4 +34,10 @@ export class DetailsComponent implements OnInit {
         this.location.back();
     }
 
+    getPopupDecision(e : boolean) {
+        if (e) {
+            this.showDeletePopup = false;            
+        }
+    }
+
 }

src/styles.scss

@@ -20,3 +20,36 @@
     --teal-green: #08c17e;
     --danger: #ea8b8b;
 }
+
+.confirmation-popup {
+    position: fixed;
+    left: 80%;
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    left: 0;
+    top: 0;
+    background-color: rgba(black, 0.8);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+
+    &.active {
+        opacity: 1;
+        pointer-events: all;
+
+        app-confirmation-popup {
+            opacity: 1;
+            transform: translateY(0vh);
+        }
+    }
+
+    app-confirmation-popup {
+        opacity: 0;
+        transform: translateY(20vh);
+        transition: opacity 0.3s, transform 0.3s;
+    }
+}