added the reply module

src/app/app.module.ts

@@ -34,6 +34,7 @@ import { AddNewStatusComponent } from "./components/floating-column/add-new-stat
 import { ManageAccountComponent } from "./components/floating-column/manage-account/manage-account.component";
 import { ActionBarComponent } from './components/stream/status/action-bar/action-bar.component';
 import { WaitingAnimationComponent } from './components/waiting-animation/waiting-animation.component';
+import { ReplyToStatusComponent } from './components/stream/status/reply-to-status/reply-to-status.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -60,7 +61,8 @@ const routes: Routes = [
     AddNewAccountComponent,
     SearchComponent,
     ActionBarComponent,
-    WaitingAnimationComponent
+    WaitingAnimationComponent,
+    ReplyToStatusComponent
   ],
   imports: [
     BrowserModule,

src/app/components/stream/status/action-bar/action-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { Store } from '@ngxs/store';
 
 import { StatusWrapper } from '../../stream.component';
@@ -16,6 +16,7 @@ import { Status, Results } from '../../../../services/models/mastodon.interfaces
 export class ActionBarComponent implements OnInit, OnDestroy {
 
     @Input() statusWrapper: StatusWrapper;
+    @Output() replyEvent = new EventEmitter();
 
     isFavorited: boolean;
     isBoosted: boolean;
@@ -80,7 +81,7 @@ export class ActionBarComponent implements OnInit, OnDestroy {
     }
 
     reply(): boolean {
-        console.warn('reply');
+        this.replyEvent.emit();
         return false;
     }
 

src/app/components/stream/status/reply-to-status/reply-to-status.component.html

@@ -0,0 +1,8 @@
+<form (ngSubmit)="onSubmit()">
+    <textarea [(ngModel)]="status" name="status" class="form-control form-control-sm" style="min-width: 100%" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
+
+    <select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy" [(ngModel)]="selectedPrivacy">
+        <option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
+    </select>
+    <button type="submit" class="btn btn-sm btn-custom-primary">REPLY!</button>
+</form>

src/app/components/stream/status/reply-to-status/reply-to-status.component.scss

@@ -0,0 +1,36 @@
+@import "variables";
+@import "panel";
+@import "buttons";
+
+
+$btn-send-status-width: 60px;
+
+.form-control { 
+    margin-bottom: 5px;
+
+    &--privacy{
+        display: inline-block; 
+        width: calc(100% - 5px - #{$btn-send-status-width});
+    }
+}
+
+.btn-custom-primary {
+    display: inline-block;
+    width: $btn-send-status-width;
+    position: relative;
+    top: -1px;
+    left: 5px;
+    // background-color: orange;
+    // border-color: orange;
+    // color: black;
+    font-weight: 500;
+
+    // &:hover {
+
+    // }
+
+    // &:focus {
+    //     border-color: darkblue;
+    // }
+}
+

src/app/components/stream/status/reply-to-status/reply-to-status.component.spec.ts

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

src/app/components/stream/status/reply-to-status/reply-to-status.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-reply-to-status',
+    templateUrl: './reply-to-status.component.html',
+    styleUrls: ['./reply-to-status.component.scss']
+})
+export class ReplyToStatusComponent implements OnInit {
+
+    
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

src/app/components/stream/status/status.component.html

@@ -18,5 +18,7 @@
 
     <app-attachements *ngIf="hasAttachments" class="attachments" [attachments]="displayedStatus.media_attachments"></app-attachements>
 
-    <app-action-bar [statusWrapper]="statusWrapper"></app-action-bar>
+    <app-action-bar [statusWrapper]="statusWrapper" (replyEvent)="openReply()"></app-action-bar>
+
+    <app-reply-to-status *ngIf="replyingToStatus" ></app-reply-to-status>
 </div>

src/app/components/stream/status/status.component.ts

@@ -14,6 +14,7 @@ export class StatusComponent implements OnInit {
     displayedStatus: Status;
     reblog: boolean;
     hasAttachments: boolean;
+    replyingToStatus: boolean;
 
     private _statusWrapper: StatusWrapper;
     status: Status;
@@ -66,4 +67,9 @@ export class StatusComponent implements OnInit {
        
         return formatDate(date, 'MM/dd', this.locale);
     }
+
+    openReply(): boolean{
+        this.replyingToStatus = !this.replyingToStatus;
+        return false;
+    }
 }