better display of account management

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ElectronService } from 'ngx-electron';
 import { NavigationService } from './services/navigation.service';
 import { Subscription } from 'rxjs';
+import { AccountWrapper } from './models/account.models';
 
 
 @Component({
@@ -21,8 +22,8 @@ export class AppComponent implements OnInit, OnDestroy{
   }
   
   ngOnInit(): void {
-    this.columnEditorSub = this.navigationService.openColumnEditorSubject.subscribe((username: string) => {
-      if(username) {
+    this.columnEditorSub = this.navigationService.openColumnEditorSubject.subscribe((acc: AccountWrapper) => {
+      if(acc) {
         this.floatingColumnActive = true;
       } else {
         this.floatingColumnActive = false;

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

@@ -1,8 +1,14 @@
-<div class="column-editor">
-  <p>adding columns from: {{ username }} </p>
+<div class="account-editor">
+  <h3 class="account-editor__title">Manage Account</h3>
+
+  <div class="account-editor__display-avatar">
+    <img class="account-editor__avatar" src="{{account.avatar}}" title="{{ account.username }} " />
+  </div>
+
+  <h4 class="add-column__label">add column:</h4>
 
   <a class="add-column__link" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
-      {{ stream.name }}
+    {{ stream.name }}
   </a>
   <!-- <a class="add-column__link" href>
     Global Timeline

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

@@ -1,26 +1,43 @@
 @import "variables";
-
-.column-editor {
-    padding: 10px;
+.account-editor {
+    padding: 10px 10px 0 7px;
     font-size: $small-font-size;
+    &__title {
+        font-size: 13px;
+        text-transform: uppercase;
+        margin: 6px 0 12px 0;
+    }
+    &__display-avatar {
+        text-align: center;
+        margin-bottom: 30px;
+    }
+    &__avatar {
+        // display: block;
+        width: 75px;
+        border-radius: 50px;
+        transform: translateX(15px); // margin: auto;
+    }
 }
 
-.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;
+.add-column {
+    &__label {
+        // text-decoration: underline;
+        font-size: $small-font-size;
+        margin-left: 5px;
+        color: $font-color-secondary;
     }
-
-    &:hover {
-        background-color: darken(lightblue, 20);
+    &__link {
+        text-decoration: none;
+        display: block; // width: calc(100% - 20px);
+        width: 100%; // height: 30px;
+        padding: 5px 10px; // border: solid 1px black;
+        background-color: $color-primary;
+        color: #fff;
+        &:not(:last-child) {
+            margin-bottom: 5px;
+        }
+        &:hover {
+            background-color: lighten($color-primary, 15);
+        }
     }
 }

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

@@ -1,6 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { StreamElement, StreamTypeEnum, AddStream } from '../../../states/streams.state';
 import { Store } from '@ngxs/store';
+import { AccountsStateModel, AccountInfo } from '../../../states/accounts.state';
+import { AccountWrapper } from '../../../models/account.models';
 
 @Component({
   selector: 'app-columns-editor',
@@ -8,7 +10,7 @@ import { Store } from '@ngxs/store';
   styleUrls: ['./columns-editor.component.scss']
 })
 export class ColumnsEditorComponent implements OnInit {
-  @Input() username: string;
+  @Input() account: AccountWrapper;
 
   availableStreams: StreamElement[] = [];
 
@@ -16,10 +18,9 @@ export class ColumnsEditorComponent implements OnInit {
 
   ngOnInit() {
     this.availableStreams.length = 0;
-
-    this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Global Timeline', this.username));
-    this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.username));
-    this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Personnal Timeline', this.username));
+    this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Global Timeline', this.account.username));
+    this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.username));
+    this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Personnal Timeline', this.account.username));
   }
 
   addStream(stream: StreamElement): boolean {

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

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

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

@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 
 .floating-column {
     width: calc(100%);
@@ -6,8 +7,40 @@
     
     background-color: $color-secondary;
     overflow: hidden;
-    z-index: 9999;
+    z-index: 99;
     position: fixed;
     top: 0;
     bottom: $stream-selector-height;
+    padding: 0;
+
+    &__header {
+        
+        // @include clearfix;
+    }
+}
+
+
+.close-button {
+    // display: inline-block;
+    background-color: $color-primary;
+    color: darken(white, 30);
+    border-radius: 999px;
+    width: 26px;
+    height: 26px;
+    text-align: center;
+    text-decoration: none;
+    padding: 1px;
+
+    z-index: 9999;
+    float: right;
+    margin: 10px;
+
+    transition: all .2s;
+
+    &:hover {
+        background-color: lighten($color-primary, 20);
+        color: white;
+        // transform: scale(1.2);
+    }
+    
 }

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { NavigationService } from '../../services/navigation.service';
+import { AccountWrapper } from '../../models/account.models';
 
 @Component({
   selector: 'app-floating-column',
@@ -7,16 +8,16 @@ import { NavigationService } from '../../services/navigation.service';
   styleUrls: ['./floating-column.component.scss']
 })
 export class FloatingColumnComponent implements OnInit {
-  userAccountUsed: string;
+  userAccountUsed: AccountWrapper;
   columnEditorIsOpen: boolean;
   messageEditorIsOpen: boolean;
 
   constructor(private readonly navigationService: NavigationService) { }
 
   ngOnInit() {
-    this.navigationService.openColumnEditorSubject.subscribe((username: string) => {
-      this.userAccountUsed = username;
-      if(username) {
+    this.navigationService.openColumnEditorSubject.subscribe((acc: AccountWrapper) => {
+      this.userAccountUsed = acc;
+      if(this.userAccountUsed) {
         this.columnEditorIsOpen = true;        
       } else {
         this.columnEditorIsOpen = false;

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

@@ -55,13 +55,13 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
     this.sub.unsubscribe();
   }
 
-  onToogleAccountNotify(username: string) {
-    console.warn(`onToogleAccountNotify username ${username}`);
+  onToogleAccountNotify(acc: AccountWrapper) {
+    console.warn(`onToogleAccountNotify username ${acc.username}`);
   }
 
-  onOpenMenuNotify(username: string) {
-    console.warn(`onOpenMenuNotify username ${username}`);
-    this.navigationService.openColumnEditor(username);
+  onOpenMenuNotify(acc: AccountWrapper) {
+    console.warn(`onOpenMenuNotify username ${acc.username}`);
+    this.navigationService.openColumnEditor(acc);
   }
 
   createNewToot(): boolean {

src/app/components/left-side-bar/presentation/account-icon/account-icon.component.ts

@@ -8,8 +8,8 @@ import { AccountWrapper } from '../../../../models/account.models';
 })
 export class AccountIconComponent implements OnInit {
   @Input() account: AccountWrapper;
-  @Output() toogleAccountNotify = new EventEmitter<string>();
-  @Output() openMenuNotify = new EventEmitter<string>();
+  @Output() toogleAccountNotify = new EventEmitter<AccountWrapper>();
+  @Output() openMenuNotify = new EventEmitter<AccountWrapper>();
 
   isSelected: boolean = false;
 
@@ -19,13 +19,13 @@ export class AccountIconComponent implements OnInit {
   }
 
   toogleAccount(): boolean {
-    this.toogleAccountNotify.emit(this.account.username);
+    this.toogleAccountNotify.emit(this.account);
     this.isSelected = !this.isSelected;
     return false;
   }
 
   openMenu(event): boolean {
-    this.openMenuNotify.emit(this.account.username);
+    this.openMenuNotify.emit(this.account);
     return false;    
   }
 }

src/app/services/navigation.service.ts

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

src/sass/_mixins.scss

@@ -0,0 +1,7 @@
+@mixin clearfix {
+    &::after {
+        content: "";
+        display: table;
+        clear: both;        
+    }    
+}

src/sass/_variables.scss

@@ -1,4 +1,5 @@
 $font-color-primary: #e8eaf3;
+$font-color-secondary: darken(#fff, 25);
 
 $font-link-primary: #595c67;
 $font-link-primary-hover: #8f93a2;