Add task displaying in active list component.

src/app/active-list-tasks/active-list-tasks.component.html

@@ -1 +1,7 @@
-<p>active-list-tasks works!</p>
+<div class="container">
+    <app-task-display class="task" *ngFor="let i of [0,1,2,3,4,5,6,7,8,9]" class="task"></app-task-display>
+    <div class="task new">
+        <mat-icon>add</mat-icon>
+        <input />
+    </div>
+</div>

src/app/active-list-tasks/active-list-tasks.component.scss

@@ -0,0 +1,32 @@
+.container {
+    max-width: 50rem;
+    width: 90%;
+    margin: 0 auto;
+
+    .task {
+        position: relative;
+        width: 100%;
+        height: 2.5rem;
+        display: flex;
+        align-items: center;
+        margin: .5rem 0;
+        
+        input {
+            width: 100%;
+            height: 100%;
+            padding: 0 3rem;
+            border-radius: .1rem;
+            border-style: none;
+            background-color: #444;
+        }
+
+        &.new {
+            margin-top: 1rem;
+
+            mat-icon {
+                position: absolute;
+                left: 1rem;
+            }
+        }
+    }
+}

src/app/active-list-tasks/task-display/task-display.component.html

@@ -0,0 +1,12 @@
+<div class="task">
+    <div class="header">
+        <mat-icon class="drag-n-drop">drag_handle</mat-icon>
+        <mat-checkbox class="example-margin"></mat-checkbox>
+        <div class="input-container">
+            <input type="text" [formControl]="taskNameControl" />
+        </div>
+        <button mat-button type="button" class="expand">
+            <mat-icon>expand_more</mat-icon>
+        </button>
+    </div>
+</div>

src/app/active-list-tasks/task-display/task-display.component.scss

@@ -0,0 +1,83 @@
+.task {
+    position: relative;
+    width: 100%;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    margin: .5rem 0;
+
+    .header {
+        border-radius: .1rem;
+        height: 2.5rem;
+        background-color: #444;
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .drag-n-drop {
+            padding: 0 1rem;
+            &:hover {
+                cursor: grab;
+            }
+        }
+
+        mat-checkbox {
+            // padding: 0 .5rem;
+        }
+
+        .input-container {
+            display: flex;
+            flex-grow: 1;
+
+            input {
+                border-style: none;
+                height: 1.8rem;
+                padding: 0 .8rem;
+                margin: 0 .8rem;
+                background-color: #444;
+
+                border-style: solid;
+                border-width: .1rem;
+                border-color: rgba(0,0,0, 0);
+                border-radius: .2rem;
+
+
+                width: 100%;
+
+                transition: background-color .2s ease-out,
+                        border-color .2s ease-out;
+
+                &:hover {
+                    border-color: rgb(53, 53, 53);
+                }
+            }
+        }
+
+        .expand {
+            display: flex;
+            justify-content: end;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0;
+            margin-right: .5rem;
+
+            border-style: solid;
+            border-width: .1rem;
+            border-color: rgba(0,0,0, 0);
+
+            width: 2rem;
+            height: 2rem;
+            min-width: 2rem;
+            min-height: 2rem;
+
+            transition: background-color .2s ease-out,
+                        border-color .2s ease-out;
+
+            &:hover {
+                background-color: #666;
+                border-color: rgb(53, 53, 53);
+            }
+        }
+    }
+}

src/app/active-list-tasks/task-display/task-display.component.spec.ts

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

src/app/active-list-tasks/task-display/task-display.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-task-display',
+  templateUrl: './task-display.component.html',
+  styleUrls: ['./task-display.component.scss']
+})
+export class TaskDisplayComponent implements OnInit {
+  taskNameControl = new FormControl(undefined);
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}

src/app/app.module.ts

@@ -18,6 +18,8 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import { HeaderComponent } from './core/components/header/header.component';
 import { ActiveListTasksComponent } from './active-list-tasks/active-list-tasks.component';
+import { TaskDisplayComponent } from './active-list-tasks/task-display/task-display.component';
+import {MatCheckboxModule} from '@angular/material/checkbox'; 
 
 @NgModule({
   declarations: [
@@ -28,7 +30,8 @@ import { ActiveListTasksComponent } from './active-list-tasks/active-list-tasks.
     TaskListsComponent,
     AddTaskListComponent,
     HeaderComponent,
-    ActiveListTasksComponent
+    ActiveListTasksComponent,
+    TaskDisplayComponent
   ],
   imports: [
     BrowserModule,
@@ -39,7 +42,8 @@ import { ActiveListTasksComponent } from './active-list-tasks/active-list-tasks.
     MatDialogModule,
     MatButtonModule,
     ReactiveFormsModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatCheckboxModule
   ],
   providers: [
     CookieService,

src/app/core/components/header/header.component.scss

@@ -6,7 +6,7 @@ nav {
   display: flex;
   align-items: center;
   height: 3.2rem;
-  background-color: #eee;
+  background-color: #666;
 
   &.selectionMode {
     font-weight: bold;

src/styles.scss

@@ -5,6 +5,7 @@ body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
   padding-top: 3.2rem;
+  background-color: #555;
 }