From 730beea13a95e2af7849760f7d96097488a4d13c Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Mon, 28 Jan 2019 23:12:46 -0500
Subject: [PATCH] created the edition menu for the columns

---
 src/app/app.module.ts                         |  4 ++-
 .../stream-edition.component.html             |  5 +++
 .../stream-edition.component.scss             |  5 +++
 .../stream-edition.component.spec.ts          | 25 ++++++++++++++
 .../stream-edition.component.ts               | 29 ++++++++++++++++
 .../components/stream/stream.component.html   |  5 ++-
 .../components/stream/stream.component.scss   | 34 +++++++------------
 src/app/components/stream/stream.component.ts |  4 ++-
 8 files changed, 87 insertions(+), 24 deletions(-)
 create mode 100644 src/app/components/stream/stream-edition/stream-edition.component.html
 create mode 100644 src/app/components/stream/stream-edition/stream-edition.component.scss
 create mode 100644 src/app/components/stream/stream-edition/stream-edition.component.spec.ts
 create mode 100644 src/app/components/stream/stream-edition/stream-edition.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1246ddf8..601084fc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -44,6 +44,7 @@ import { StreamOverlayComponent } from './components/stream/stream-overlay/strea
 import { DatabindedTextComponent } from './components/stream/status/databinded-text/databinded-text.component';
 import { TimeAgoPipe } from './pipes/time-ago.pipe';
 import { StreamStatusesComponent } from './components/stream/stream-statuses/stream-statuses.component';
+import { StreamEditionComponent } from './components/stream/stream-edition/stream-edition.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -78,7 +79,8 @@ const routes: Routes = [
     StreamOverlayComponent,
     DatabindedTextComponent,
     TimeAgoPipe,
-    StreamStatusesComponent
+    StreamStatusesComponent,
+    StreamEditionComponent
   ],
   imports: [
     FontAwesomeModule,
diff --git a/src/app/components/stream/stream-edition/stream-edition.component.html b/src/app/components/stream/stream-edition/stream-edition.component.html
new file mode 100644
index 00000000..b98819cd
--- /dev/null
+++ b/src/app/components/stream/stream-edition/stream-edition.component.html
@@ -0,0 +1,5 @@
+<div class="stream-edition">
+    <button (click)="moveLeft()">Move left</button>
+    <button (click)="moveRight()">Move right</button>
+    <button (click)="delete()">Delete</button>
+</div>
\ No newline at end of file
diff --git a/src/app/components/stream/stream-edition/stream-edition.component.scss b/src/app/components/stream/stream-edition/stream-edition.component.scss
new file mode 100644
index 00000000..7e0f4b27
--- /dev/null
+++ b/src/app/components/stream/stream-edition/stream-edition.component.scss
@@ -0,0 +1,5 @@
+.stream-edition {
+    width: 100%;
+    min-height: 50px;
+    background-color: #222736;
+}
\ No newline at end of file
diff --git a/src/app/components/stream/stream-edition/stream-edition.component.spec.ts b/src/app/components/stream/stream-edition/stream-edition.component.spec.ts
new file mode 100644
index 00000000..54e63caf
--- /dev/null
+++ b/src/app/components/stream/stream-edition/stream-edition.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StreamEditionComponent } from './stream-edition.component';
+
+xdescribe('StreamEditionComponent', () => {
+  let component: StreamEditionComponent;
+  let fixture: ComponentFixture<StreamEditionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StreamEditionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StreamEditionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/stream/stream-edition/stream-edition.component.ts b/src/app/components/stream/stream-edition/stream-edition.component.ts
new file mode 100644
index 00000000..1d29cc06
--- /dev/null
+++ b/src/app/components/stream/stream-edition/stream-edition.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-stream-edition',
+    templateUrl: './stream-edition.component.html',
+    styleUrls: ['./stream-edition.component.scss']
+})
+export class StreamEditionComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+    moveLeft(): boolean {
+        console.log('move left');
+        return false;
+    }
+
+    moveRight(): boolean {
+        console.log('move right');
+        return false;
+    }
+
+    delete(): boolean {
+        console.log('delete');
+        return false;
+    }
+}
diff --git a/src/app/components/stream/stream.component.html b/src/app/components/stream/stream.component.html
index 57363ac5..3f6268f8 100644
--- a/src/app/components/stream/stream.component.html
+++ b/src/app/components/stream/stream.component.html
@@ -4,7 +4,7 @@
         [browseAccountData]="overlayAccountToBrowse" [browseHashtagData]="overlayHashtagToBrowse" [browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
 
     <div class="stream-column__stream-header">
-        <a class="stream-column__open-menu" href title="open menu"  (click)="openMenu()">
+        <a class="stream-column__open-menu" href title="edit column"  (click)="openEditionMenu()">
             <fa-icon class="stream-column__open-menu--icon" [icon]="menuFaIcon"></fa-icon>
         </a>
         <a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">            
@@ -12,6 +12,9 @@
             <h1 class="stream-column__stream-selector--title">{{ streamElement.name.toUpperCase() }}</h1>
         </a>
     </div>
+    
+    <app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen"></app-stream-edition>
+
     <app-stream-statuses class="stream-statuses" [streamElement]="streamElement" [goToTop]="goToTopSubject.asObservable()"
         (browseAccountEvent)="browseAccount($event)" (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-stream-statuses>
     <!-- <div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
diff --git a/src/app/components/stream/stream.component.scss b/src/app/components/stream/stream.component.scss
index 4531403e..94f70678 100644
--- a/src/app/components/stream/stream.component.scss
+++ b/src/app/components/stream/stream.component.scss
@@ -1,63 +1,55 @@
 @import "variables";
 @import "commons";
 $stream-header-height: 40px;
+.stream-edition {
+    width: $stream-column-width;
+    position: absolute;
+    z-index: 50;
+}
+
 .stream-column {
     position: relative;
     width: $stream-column-width;
     height: calc(100%);
     background-color: $column-color;
     margin: 0 0 0 $stream-column-separator;
-    &__stream-header {         
-        border-bottom: 1px solid #222736;       
+    &__stream-header {
+        border-bottom: 1px solid #222736;
     }
-
     &__open-menu {
         float: right;
         display: block;
         width: $stream-header-height - 10px;
         height: $stream-header-height - 10px;
         margin: 5px;
-
         &:hover &--icon {
-            color: darken(whitesmoke, 30); 
+            color: darken(whitesmoke, 30);
         }
-        
         &--icon {
-            color: whitesmoke;
-            // float: left;
+            color: whitesmoke; // float: left;
             position: relative;
-            top: 4px;            
+            top: 4px;
             left: 8px;
-
-            
         }
     }
-
     &__stream-selector {
         display: block;
         width: calc(100%);
         height: $stream-header-height;
         background-color: $column-header-background-color;
-        text-decoration: none;
-        
-        // &:hover {
-          
+        text-decoration: none; // &:hover {
         // }
-
         &--icon {
             color: whitesmoke;
             float: left;
             position: relative;
             left: 11px;
             top: 9px;
-            
         }
-
         &--title {
             color: whitesmoke;
             font-size: 0.8em;
-            font-weight: normal;
-            // margin: 0 0 0 25px;
+            font-weight: normal; // margin: 0 0 0 25px;
             padding: 14px 0 0 35px;
         }
     }
diff --git a/src/app/components/stream/stream.component.ts b/src/app/components/stream/stream.component.ts
index fb3e4a60..dfdf7afe 100644
--- a/src/app/components/stream/stream.component.ts
+++ b/src/app/components/stream/stream.component.ts
@@ -89,8 +89,10 @@ export class StreamComponent implements OnInit {
         this.overlayActive = false;
     }
 
-    openMenu(): bool {
+    editionPanelIsOpen: boolean;
+    openEditionMenu(): boolean {
         console.log('opened menu');
+        this.editionPanelIsOpen = !this.editionPanelIsOpen;
         return false;
     }
 }