scss clean up + creation service stream for column translation

src/app/components/stream/stream.component.scss

@@ -5,6 +5,7 @@
   background-color: #090b10;
   background-color: #0f111a;
 
+  outline: 1px dotted greenyellow;
 }
 
 #mam-stream-header {

src/app/components/streams-selection-footer/streams-selection-footer.component.html

@@ -1,5 +1,5 @@
 <div class="streams-selection-footer">
-  <a class="stream-selection" *ngFor="let str of streams" href >
+  <a class="stream-selection" *ngFor="let str of streams; let i=index" href (click)="onColumnSelection(i)" >
     <span class="stream-selection__column-reprensentation"></span>
   </a>
-</div>
+</div>

src/app/components/streams-selection-footer/streams-selection-footer.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { StreamElement } from '../../states/streams.state';
 import { Store } from '@ngxs/store';
+import { NavigationService } from '../../services/navigation.service';
 
 @Component({
   selector: 'app-streams-selection-footer',
@@ -12,14 +13,22 @@ export class StreamsSelectionFooterComponent implements OnInit {
   streams: StreamElement[] = [];
   private streams$: Observable<StreamElement[]>;
 
-  constructor(private readonly store: Store) { 
+  constructor(
+    private readonly navigationService: NavigationService,
+    private readonly store: Store) {
     this.streams$ = this.store.select(state => state.streamsstatemodel.streams);
   }
 
   ngOnInit() {
     this.streams$.subscribe((streams: StreamElement[]) => {
-     this.streams = streams;
+      this.streams = streams;
     });
   }
 
+  onColumnSelection(index: number): boolean {
+    console.warn(`column selected: ${index}`);
+    this.navigationService.columnSelected(index);
+    return false;
+  }
+
 }

src/app/pages/streams-main-display/streams-main-display.component.html

@@ -1,6 +1,5 @@
-<div id="mam-main-display" class="flexcroll">
-  <div *ngFor="let s of streams" class="mam-stream-column">
+<div class="main-display flexcroll">
+  <div class="main-display__stream-column" *ngFor="let s of streams">
     <app-stream [stream]="s"></app-stream>
   </div>
-
 </div>

src/app/pages/streams-main-display/streams-main-display.component.scss

@@ -1,53 +1,35 @@
-#mam-main-display {
-  width: calc(100%);
-  height: calc(100%); 
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  /* background: black; */
-  /*outline: 1px dotted red;*/
+@import "variables";
+.main-display {
+    width: calc(100%);
+    height: calc(100%);
+    overflow-x: auto;
+    overflow-y: hidden;
+    &__stream-column {
+        height: calc(100%);
+        width: $stream-column-width;
+        display: inline-block;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        white-space: normal;
+        margin: 0 0 0 $stream-column-separator;
+    }
 }
 
-
-.mam-stream-column {
-  height: calc(100%);
-  width: 320px;
-  display: inline-block;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  white-space: normal;
-  margin-left: 7px;
-}
-
-
-.flexcroll{
-  scrollbar-face-color: #08090d;
-  scrollbar-shadow-color: #08090d;
-  scrollbar-highlight-color: #08090d;
-  scrollbar-3dlight-color: #08090d;
-  scrollbar-darkshadow-color: #08090d;
-  scrollbar-track-color: #08090d;
-  scrollbar-arrow-color: #08090d; 
-}
-
-/* Let's get this party started */
-.flexcroll::-webkit-scrollbar {
-  /* width: 16px !important; */
-  height: 7px;
-}
-
-/* Track */
-/* .flexcroll::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-} */
-
-/* Handle */
-.flexcroll::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 0px;
-  border-radius: 0px;
-  /* background: rgba(255,0,0,0.8);  */
-  background: #08090d; 
-  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); 
+.flexcroll {
+    scrollbar-face-color: #08090d;
+    scrollbar-shadow-color: #08090d;
+    scrollbar-highlight-color: #08090d;
+    scrollbar-3dlight-color: #08090d;
+    scrollbar-darkshadow-color: #08090d;
+    scrollbar-track-color: #08090d;
+    scrollbar-arrow-color: #08090d;
+    &::-webkit-scrollbar {
+        height: 7px;
+    }
+    &::-webkit-scrollbar-thumb {
+        -webkit-border-radius: 0px;
+        border-radius: 0px;
+        background: #08090d;
+        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
+    }
 }

src/app/pages/streams-main-display/streams-main-display.component.ts

@@ -5,51 +5,52 @@ import { Observable, Subscription } from "rxjs";
 import { StreamElement } from "../../states/streams.state";
 import { Store } from "@ngxs/store";
 import { Http } from "@angular/http";
+import { NavigationService } from "../../services/navigation.service";
 
 
 @Component({
-  selector: "app-streams-main-display",
-  templateUrl: "./streams-main-display.component.html",
-  styleUrls: ["./streams-main-display.component.scss"]
+    selector: "app-streams-main-display",
+    templateUrl: "./streams-main-display.component.html",
+    styleUrls: ["./streams-main-display.component.scss"]
 })
 export class StreamsMainDisplayComponent implements OnInit, OnDestroy {
 
-  streams: Stream[] = [];
+    streams: Stream[] = [];
 
-  private streams$: Observable<StreamElement[]>;
-  private streamsStateSub: Subscription;
-  
-  constructor(
-    private readonly http: Http,
-    private readonly store: Store) {
-    this.streams$ = this.store.select(state => state.streamsstatemodel.streams);
-  }
+    private streams$: Observable<StreamElement[]>;
+    private streamsStateSub: Subscription;
+    private columnSelectedSub: Subscription;
 
-  ngOnInit() {
+    constructor(
+        private readonly navigationService: NavigationService,
+        private readonly http: Http,
+        private readonly store: Store) {
+        this.streams$ = this.store.select(state => state.streamsstatemodel.streams);
 
-    this.streamsStateSub = this.streams$.subscribe((streams: StreamElement[]) => {
-      this.streams.length = 0;
-      for (const stream of streams) {
-        const newStream = new Stream(this.http, stream.name, stream.type);
-        this.streams.push(newStream);
-      }
+    }
 
+    ngOnInit() {
+        this.streamsStateSub = this.streams$.subscribe((streams: StreamElement[]) => {
+            this.streams.length = 0;
+            for (const stream of streams) {
+                const newStream = new Stream(this.http, stream.name, stream.type);
+                this.streams.push(newStream);
+            }
 
-    });
+            this.columnSelectedSub = this.navigationService.columnSelectedSubject.subscribe((columnIndex: number) => {
+                this.focusOnColumn(columnIndex);
 
-    // this.streamService.streamsSubject.subscribe((streams: Stream[]) => {
-    //   for (let s of streams) {
-    //     this.streams.push(s);
-    //   }
-    // });
+            });
+        });
+    }
 
-    //for (let i = 0; i < 3; i++) {
-    //  this.streams.push(new Stream());
-    //}
-  }
+    ngOnDestroy(): void {
+        this.streamsStateSub.unsubscribe();
+        this.columnSelectedSub.unsubscribe();
+    }
 
-  ngOnDestroy(): void {
-    this.streamsStateSub.unsubscribe();
-  }
+    private focusOnColumn(columnIndex: number): void {
+        console.warn(`col selected: ${columnIndex}`);
+    }
 
 }

src/app/services/navigation.service.ts

@@ -4,7 +4,9 @@ import { AccountWrapper } from '../models/account.models';
 
 @Injectable()
 export class NavigationService {
+
   openColumnEditorSubject = new BehaviorSubject<AccountWrapper>(null);
+  columnSelectedSubject = new BehaviorSubject<number>(null);
 
   constructor() { }
 
@@ -15,4 +17,8 @@ export class NavigationService {
   closeColumnEditor() {
     this.openColumnEditorSubject.next(null);
   }
+
+  columnSelected(index: number): void {
+    this.columnSelectedSubject.next(index);    
+  }
 }

src/sass/_variables.scss

@@ -12,4 +12,7 @@ $small-font-size: 12px;
 
 
 // Block dispositions
-$stream-selector-height: 30px;
+$stream-selector-height: 30px;
+
+$stream-column-separator: 7px;
+$stream-column-width: 320px;