-
+
diff --git a/src/app/pages/streams-main-display/streams-main-display.component.scss b/src/app/pages/streams-main-display/streams-main-display.component.scss
index ee72bdab..3910920f 100644
--- a/src/app/pages/streams-main-display/streams-main-display.component.scss
+++ b/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);
+ }
}
\ No newline at end of file
diff --git a/src/app/pages/streams-main-display/streams-main-display.component.ts b/src/app/pages/streams-main-display/streams-main-display.component.ts
index f08de9a0..b576a99d 100644
--- a/src/app/pages/streams-main-display/streams-main-display.component.ts
+++ b/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
;
- private streamsStateSub: Subscription;
-
- constructor(
- private readonly http: Http,
- private readonly store: Store) {
- this.streams$ = this.store.select(state => state.streamsstatemodel.streams);
- }
+ private streams$: Observable;
+ 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}`);
+ }
}
diff --git a/src/app/services/navigation.service.ts b/src/app/services/navigation.service.ts
index 0604f64c..cb847fa4 100644
--- a/src/app/services/navigation.service.ts
+++ b/src/app/services/navigation.service.ts
@@ -4,7 +4,9 @@ import { AccountWrapper } from '../models/account.models';
@Injectable()
export class NavigationService {
+
openColumnEditorSubject = new BehaviorSubject(null);
+ columnSelectedSubject = new BehaviorSubject(null);
constructor() { }
@@ -15,4 +17,8 @@ export class NavigationService {
closeColumnEditor() {
this.openColumnEditorSubject.next(null);
}
+
+ columnSelected(index: number): void {
+ this.columnSelectedSubject.next(index);
+ }
}
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 2a47b345..29797028 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -12,4 +12,7 @@ $small-font-size: 12px;
// Block dispositions
-$stream-selector-height: 30px;
\ No newline at end of file
+$stream-selector-height: 30px;
+
+$stream-column-separator: 7px;
+$stream-column-width: 320px;
\ No newline at end of file