creation of panel to add new columns

src/app/app.component.html

@@ -5,6 +5,9 @@
 </app-streams-main-display>-->
 
 <div id="display-zone">
+  <app-floating-column id="floating-column" *ngIf="floatingColumnActive">
+
+  </app-floating-column>
   <router-outlet>
   </router-outlet>
 </div>

src/app/app.component.scss

@@ -1,7 +1,3 @@
-app-left-side-bar {
-  
-}
-
 #display-zone {
   position: absolute;
   top: 0;
@@ -13,6 +9,14 @@ app-left-side-bar {
   white-space: nowrap;
 }
 
+#floating-column {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+}
+
+
 app-streams-selection-footer {
   position: absolute;
   height: 30px;

src/app/app.component.ts

@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ElectronService } from 'ngx-electron';
+import { NavigationService } from './services/navigation.service';
+import { Subscription } from 'rxjs';
 
 
 @Component({
@@ -7,15 +9,29 @@ import { ElectronService } from 'ngx-electron';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy{
+ 
   title = 'app';
 
-  constructor(private _electronService: ElectronService) {
+  private floatingColumnActive: boolean;
+  private columnEditorSub: Subscription;
 
+  constructor(private readonly navigationService: NavigationService) {
+   
+  }
+  
+  ngOnInit(): void {
+    this.columnEditorSub = this.navigationService.openColumnEditorSubject.subscribe((username: string) => {
+      if(username) {
+        this.floatingColumnActive = true;
+      } else {
+        this.floatingColumnActive = false;
+      }
+    });
   }
 
-  launchWindow(){
-  	this._electronService.shell.openExternal('http://google.com');
-
+  ngOnDestroy(): void {
+    this.columnEditorSub.unsubscribe();
   }
+  
 }

src/app/app.module.ts

@@ -24,6 +24,10 @@ import { StreamingService } from "./services/streaming.service";
 import { RegisteredAppsState } from "./states/registered-apps.state";
 import { AccountsState } from "./states/accounts.state";
 import { AccountIconComponent } from './components/left-side-bar/presentation/account-icon/account-icon.component';
+import { NavigationService } from "./services/navigation.service";
+import { FloatingColumnComponent } from './components/floating-column/floating-column.component';
+import { ColumnsEditorComponent } from './components/floating-column/columns-editor/columns-editor.component';
+import { MessageEditorComponent } from './components/floating-column/message-editor/message-editor.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -41,7 +45,10 @@ const routes: Routes = [
     StreamsSelectionFooterComponent,
     TootComponent,
     RegisterNewAccountComponent,
-    AccountIconComponent
+    AccountIconComponent,
+    FloatingColumnComponent,
+    ColumnsEditorComponent,
+    MessageEditorComponent
   ],
   imports: [
     BrowserModule,
@@ -57,7 +64,7 @@ const routes: Routes = [
     ]),
     NgxsStoragePluginModule.forRoot()
   ],
-  providers: [AuthService, AccountsService, StreamsService, StreamingService, { provide: APP_INITIALIZER, useFactory: settingsServiceFactory, deps: [AccountsService], multi: true }],
+  providers: [AuthService, NavigationService, AccountsService, StreamsService, StreamingService, { provide: APP_INITIALIZER, useFactory: settingsServiceFactory, deps: [AccountsService], multi: true }],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/floating-column/columns-editor/columns-editor.component.html

@@ -0,0 +1,17 @@
+<div class="column-editor">
+  <p>adding columns from: {{ username }} </p>
+
+  <a class="add-column__link" href *ngFor="let col of availableColumns" (click)="addColumn(col)">
+      {{ col.name }}
+  </a>
+  <!-- <a class="add-column__link" href>
+    Global Timeline
+  </a>
+  <a class="add-column__link" href>
+    Personnal Timeline
+  </a>
+  <a class="add-column__link" href>
+    Lists, Favs, Activitires, etc
+  </a> -->
+
+</div>

src/app/components/floating-column/columns-editor/columns-editor.component.scss

@@ -0,0 +1,26 @@
+@import "variables";
+
+.column-editor {
+    padding: 10px;
+    font-size: $small-font-size;
+}
+
+.add-column__link {
+    display: block;
+    // width: calc(100% - 20px);
+    width: 100%;
+    // height: 30px;
+    padding: 5px 10px;
+    border: solid 1px gray;
+
+    background-color: lightblue;
+    color: #000;
+
+    &:not(:last-child){
+        margin-bottom: 5px;
+    }
+
+    &:hover {
+        background-color: darken(lightblue, 20);
+    }
+}

src/app/components/floating-column/columns-editor/columns-editor.component.spec.ts

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

src/app/components/floating-column/columns-editor/columns-editor.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-columns-editor',
+  templateUrl: './columns-editor.component.html',
+  styleUrls: ['./columns-editor.component.scss']
+})
+export class ColumnsEditorComponent implements OnInit {
+  @Input() username: string;
+
+  availableColumns: ColumnElement[] = [];
+
+  constructor() { }
+
+  ngOnInit() {
+    this.availableColumns.length = 0;
+
+    this.availableColumns.push(new ColumnElement(ColumnTypeEnum.global, 'Global Timeline', this.username));
+    this.availableColumns.push(new ColumnElement(ColumnTypeEnum.local, 'Local Timeline', this.username));
+    this.availableColumns.push(new ColumnElement(ColumnTypeEnum.personnal, 'Personnal Timeline', this.username));
+  }
+
+  addColumn(column: ColumnElement): boolean {
+    console.warn(column);
+    return false;
+  }
+
+}
+
+export class ColumnElement {
+  constructor(public type: ColumnTypeEnum, public name: string, public username: string) {
+    
+  }
+}
+
+export enum ColumnTypeEnum {
+  unknown = 0,
+  global = 1,
+  local = 2,
+  personnal = 3,
+  favorites = 4,
+  activity = 5,
+  list = 6,
+  directmessages = 7, 
+}

src/app/components/floating-column/floating-column.component.html

@@ -0,0 +1,9 @@
+<div class="floating-column">
+  <div>
+    <a href (click)="closePanel()">close panel</a>
+  </div>
+
+  <app-columns-editor *ngIf="columnEditorIsOpen" [username]="userAccountUsed"></app-columns-editor>
+  <app-message-editor *ngIf="messageEditorIsOpen"></app-message-editor>
+
+</div>

src/app/components/floating-column/floating-column.component.scss

@@ -0,0 +1,6 @@
+.floating-column {
+    width: calc(100%);
+    max-width: 400px;
+    height: 100%;
+    background-color: #000;
+}

src/app/components/floating-column/floating-column.component.spec.ts

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

src/app/components/floating-column/floating-column.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { NavigationService } from '../../services/navigation.service';
+
+@Component({
+  selector: 'app-floating-column',
+  templateUrl: './floating-column.component.html',
+  styleUrls: ['./floating-column.component.scss']
+})
+export class FloatingColumnComponent implements OnInit {
+  userAccountUsed: string;
+  columnEditorIsOpen: boolean;
+  messageEditorIsOpen: boolean;
+
+  constructor(private readonly navigationService: NavigationService) { }
+
+  ngOnInit() {
+    this.navigationService.openColumnEditorSubject.subscribe((username: string) => {
+      this.userAccountUsed = username;
+      if(username) {
+        this.columnEditorIsOpen = true;        
+      } else {
+        this.columnEditorIsOpen = false;
+      }
+      
+    });
+  }
+
+  closePanel(): boolean {
+    this.navigationService.closeColumnEditor();
+    return false;
+  }
+
+}

src/app/components/floating-column/message-editor/message-editor.component.html

@@ -0,0 +1,3 @@
+<p>
+  message-editor works!
+</p>

src/app/components/floating-column/message-editor/message-editor.component.spec.ts

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

src/app/components/floating-column/message-editor/message-editor.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-message-editor',
+  templateUrl: './message-editor.component.html',
+  styleUrls: ['./message-editor.component.scss']
+})
+export class MessageEditorComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/left-side-bar/left-side-bar.component.ts

@@ -6,6 +6,7 @@ import { Account } from "../../services/models/mastodon.interfaces";
 import { AccountWrapper } from "../../models/account.models";
 import { AccountsService } from "../../services/accounts.service";
 import { AccountsStateModel, AccountInfo } from "../../states/accounts.state";
+import { NavigationService } from "../../services/navigation.service";
 
 
 @Component({
@@ -21,6 +22,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
   private sub: Subscription;
 
   constructor(
+    private readonly navigationService: NavigationService,
     private readonly accountsService: AccountsService,
     private readonly store: Store) {
 
@@ -59,8 +61,9 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
 
   onOpenMenuNotify(username: string) {
     console.warn(`onOpenMenuNotify username ${username}`);
+    this.navigationService.openColumnEditor(username);
   }
-  
+
   createNewToot(): boolean {
     return false;
   }

src/app/services/navigation.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { NavigationService } from './navigation.service';
+
+describe('NavigationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NavigationService]
+    });
+  });
+
+  it('should be created', inject([NavigationService], (service: NavigationService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/navigation.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable()
+export class NavigationService {
+  openColumnEditorSubject = new BehaviorSubject<string>(null);
+
+  constructor() { }
+
+  openColumnEditor(username: string) {
+    this.openColumnEditorSubject.next(username);
+  }
+
+  closeColumnEditor() {
+    this.openColumnEditorSubject.next(null);
+  }
+}

src/sass/_variables.scss

@@ -6,4 +6,5 @@ $font-link-primary-hover: #8f93a2;
 $color-primary: #141824;
 $color-secondary: #090b10;
 
-$default-font-size: 15px;
+$default-font-size: 15px;
+$small-font-size: 12px;