From 81324e63660ce8baffc775d294fa5e37bd8281f6 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 22 Oct 2018 00:25:36 -0400
Subject: [PATCH] creation of components for displaying
 profiles/threads/hashtags.

---
 src/app/app.module.ts                         |  8 ++-
 .../stream/hashtag/hashtag.component.html     |  3 +
 .../stream/hashtag/hashtag.component.scss     |  0
 .../stream/hashtag/hashtag.component.spec.ts  | 25 ++++++++
 .../stream/hashtag/hashtag.component.ts       | 15 +++++
 .../components/stream/stream.component.html   | 34 ++++++++---
 .../components/stream/stream.component.scss   | 57 ++++++++++++++++++-
 .../stream/thread/thread.component.html       |  3 +
 .../stream/thread/thread.component.scss       |  0
 .../stream/thread/thread.component.spec.ts    | 25 ++++++++
 .../stream/thread/thread.component.ts         | 15 +++++
 .../user-profile/user-profile.component.html  |  3 +
 .../user-profile/user-profile.component.scss  |  0
 .../user-profile.component.spec.ts            | 25 ++++++++
 .../user-profile/user-profile.component.ts    | 15 +++++
 src/sass/_variables.scss                      |  2 +-
 16 files changed, 218 insertions(+), 12 deletions(-)
 create mode 100644 src/app/components/stream/hashtag/hashtag.component.html
 create mode 100644 src/app/components/stream/hashtag/hashtag.component.scss
 create mode 100644 src/app/components/stream/hashtag/hashtag.component.spec.ts
 create mode 100644 src/app/components/stream/hashtag/hashtag.component.ts
 create mode 100644 src/app/components/stream/thread/thread.component.html
 create mode 100644 src/app/components/stream/thread/thread.component.scss
 create mode 100644 src/app/components/stream/thread/thread.component.spec.ts
 create mode 100644 src/app/components/stream/thread/thread.component.ts
 create mode 100644 src/app/components/stream/user-profile/user-profile.component.html
 create mode 100644 src/app/components/stream/user-profile/user-profile.component.scss
 create mode 100644 src/app/components/stream/user-profile/user-profile.component.spec.ts
 create mode 100644 src/app/components/stream/user-profile/user-profile.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 495660e2..e145e2b3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -35,6 +35,9 @@ import { ManageAccountComponent } from "./components/floating-column/manage-acco
 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';
+import { UserProfileComponent } from './components/stream/user-profile/user-profile.component';
+import { ThreadComponent } from './components/stream/thread/thread.component';
+import { HashtagComponent } from './components/stream/hashtag/hashtag.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -62,7 +65,10 @@ const routes: Routes = [
     SearchComponent,
     ActionBarComponent,
     WaitingAnimationComponent,
-    ReplyToStatusComponent
+    ReplyToStatusComponent,
+    UserProfileComponent,
+    ThreadComponent,
+    HashtagComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/stream/hashtag/hashtag.component.html b/src/app/components/stream/hashtag/hashtag.component.html
new file mode 100644
index 00000000..d58c9b76
--- /dev/null
+++ b/src/app/components/stream/hashtag/hashtag.component.html
@@ -0,0 +1,3 @@
+<p>
+  hashtag works!
+</p>
diff --git a/src/app/components/stream/hashtag/hashtag.component.scss b/src/app/components/stream/hashtag/hashtag.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/stream/hashtag/hashtag.component.spec.ts b/src/app/components/stream/hashtag/hashtag.component.spec.ts
new file mode 100644
index 00000000..5ee70649
--- /dev/null
+++ b/src/app/components/stream/hashtag/hashtag.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HashtagComponent } from './hashtag.component';
+
+describe('HashtagComponent', () => {
+  let component: HashtagComponent;
+  let fixture: ComponentFixture<HashtagComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HashtagComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HashtagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/stream/hashtag/hashtag.component.ts b/src/app/components/stream/hashtag/hashtag.component.ts
new file mode 100644
index 00000000..3cb9cf38
--- /dev/null
+++ b/src/app/components/stream/hashtag/hashtag.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hashtag',
+  templateUrl: './hashtag.component.html',
+  styleUrls: ['./hashtag.component.scss']
+})
+export class HashtagComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/components/stream/stream.component.html b/src/app/components/stream/stream.component.html
index 8bb78cbf..f2090758 100644
--- a/src/app/components/stream/stream.component.html
+++ b/src/app/components/stream/stream.component.html
@@ -1,11 +1,27 @@
 <div class="stream-column">
-  <div class="stream-column__stream-header">
-    <a href title="return to top" (click)="goToTop()"><h1>{{ streamElement.name.toUpperCase() }}</h1></a>
-  </div>
-  <div class="stream-toots flexcroll" #statusstream  (scroll)="onScroll()"> <!-- data-simplebar  -->
-    <div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
-      <app-status [statusWrapper]="statusWrapper" ></app-status>
+    <div class="stream-overlay">
+        <div class="stream-overlay__header">
+            <a href class="overlay-close">CLOSE</a>
+            <a href class="overlay-previous">PREV</a>
+            <a href class="overlay-next">NEXT</a>
+        </div>
+        <div class="stream-overlay__title">
+            Account
+        </div>
+        <app-user-profile></app-user-profile>
+        <app-hashtag></app-hashtag>
+        <app-thread></app-thread>
     </div>
-  </div>
-</div>
- 
\ No newline at end of file
+
+    <div class="stream-column__stream-header">
+        <a href title="return to top" (click)="goToTop()">
+            <h1>{{ streamElement.name.toUpperCase() }}</h1>
+        </a>
+    </div>
+    <div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
+        <!-- data-simplebar  -->
+        <div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
+            <app-status [statusWrapper]="statusWrapper"></app-status>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/stream/stream.component.scss b/src/app/components/stream/stream.component.scss
index e840844e..3b4eea19 100644
--- a/src/app/components/stream/stream.component.scss
+++ b/src/app/components/stream/stream.component.scss
@@ -1,5 +1,7 @@
 @import "variables";
 .stream-column {
+    position: relative;
+
     width: $stream-column-width;
     height: calc(100%);
     background-color: $column-color;
@@ -7,7 +9,7 @@
     &__stream-header {
         width: calc(100%);
         height: 30px;
-        background-color: black;
+        background-color: $column-header-background-color;
         border-bottom: 1px solid black;
         & h1 {
             color: whitesmoke;
@@ -47,4 +49,57 @@
         background: lighten($color-primary, 5);
         // -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
     }
+}
+
+.stream-overlay {
+    position: absolute;
+
+    z-index: 50;
+    width: $stream-column-width;
+    height: calc(100%);
+    background-color: rgba(#ff0000, 0.3);
+
+
+    // margin: 0 0 0 $stream-column-separator;
+    // outline: 1px red solid;
+    // float: left;
+    &__header {
+        width: calc(100%);
+        height: 30px;
+        background-color: $column-header-background-color;
+        padding: 6px 10px 0 10px;
+        & a {         
+            color: whitesmoke;
+            font-size: 0.8em;
+            font-weight: normal;
+            margin: 0;
+        }
+    }
+
+    &__title {
+        width: calc(100%);
+        height: 30px;
+        background-color: $column-header-background-color;
+        border-top: 1px solid whitesmoke;
+        border-bottom: 1px solid whitesmoke;
+        padding: 3px 10px 0 10px;
+    }
+}
+
+.overlay-previous {
+    display: block;
+    float: left;
+}
+
+
+.overlay-next {
+    display: block;
+    float: right;
+    padding-right: 20px;
+}
+
+
+.overlay-close {
+    display: block;
+    float: right;
 }
\ No newline at end of file
diff --git a/src/app/components/stream/thread/thread.component.html b/src/app/components/stream/thread/thread.component.html
new file mode 100644
index 00000000..5d42ddbd
--- /dev/null
+++ b/src/app/components/stream/thread/thread.component.html
@@ -0,0 +1,3 @@
+<p>
+  thread works!
+</p>
diff --git a/src/app/components/stream/thread/thread.component.scss b/src/app/components/stream/thread/thread.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/stream/thread/thread.component.spec.ts b/src/app/components/stream/thread/thread.component.spec.ts
new file mode 100644
index 00000000..7c883807
--- /dev/null
+++ b/src/app/components/stream/thread/thread.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThreadComponent } from './thread.component';
+
+describe('ThreadComponent', () => {
+  let component: ThreadComponent;
+  let fixture: ComponentFixture<ThreadComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ThreadComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThreadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/stream/thread/thread.component.ts b/src/app/components/stream/thread/thread.component.ts
new file mode 100644
index 00000000..d72da5ec
--- /dev/null
+++ b/src/app/components/stream/thread/thread.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-thread',
+  templateUrl: './thread.component.html',
+  styleUrls: ['./thread.component.scss']
+})
+export class ThreadComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/components/stream/user-profile/user-profile.component.html b/src/app/components/stream/user-profile/user-profile.component.html
new file mode 100644
index 00000000..be0a6801
--- /dev/null
+++ b/src/app/components/stream/user-profile/user-profile.component.html
@@ -0,0 +1,3 @@
+<p>
+  user-profile works!
+</p>
diff --git a/src/app/components/stream/user-profile/user-profile.component.scss b/src/app/components/stream/user-profile/user-profile.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/stream/user-profile/user-profile.component.spec.ts b/src/app/components/stream/user-profile/user-profile.component.spec.ts
new file mode 100644
index 00000000..e683b969
--- /dev/null
+++ b/src/app/components/stream/user-profile/user-profile.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserProfileComponent } from './user-profile.component';
+
+describe('UserProfileComponent', () => {
+  let component: UserProfileComponent;
+  let fixture: ComponentFixture<UserProfileComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserProfileComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/stream/user-profile/user-profile.component.ts b/src/app/components/stream/user-profile/user-profile.component.ts
new file mode 100644
index 00000000..2856d870
--- /dev/null
+++ b/src/app/components/stream/user-profile/user-profile.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-profile',
+  templateUrl: './user-profile.component.html',
+  styleUrls: ['./user-profile.component.scss']
+})
+export class UserProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index a39f8099..f8cb7a6f 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -6,7 +6,7 @@ $color-primary: #141824;
 $color-secondary: #090b10;
 
 $column-color: #0f111a;
-
+$column-header-background-color: black;