creation of new components for account panel

src/app/app.module.ts

@@ -50,6 +50,11 @@ import { NotificationService } from "./services/notification.service";
 import { MediaViewerComponent } from './components/media-viewer/media-viewer.component';
 import { CreateStatusComponent } from './components/create-status/create-status.component';
 import { MediaComponent } from './components/create-status/media/media.component';
+import { MyAccountComponent } from './components/floating-column/manage-account/my-account/my-account.component';
+import { FavoritesComponent } from './components/floating-column/manage-account/favorites/favorites.component';
+import { DirectMessagesComponent } from './components/floating-column/manage-account/direct-messages/direct-messages.component';
+import { MentionsComponent } from './components/floating-column/manage-account/mentions/mentions.component';
+import { NotificationsComponent } from './components/floating-column/manage-account/notifications/notifications.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -89,7 +94,12 @@ const routes: Routes = [
     NotificationHubComponent,
     MediaViewerComponent,
     CreateStatusComponent,
-    MediaComponent
+    MediaComponent,
+    MyAccountComponent,
+    FavoritesComponent,
+    DirectMessagesComponent,
+    MentionsComponent,
+    NotificationsComponent
   ],
   imports: [
     FontAwesomeModule,

src/app/components/floating-column/manage-account/direct-messages/direct-messages.component.html

@@ -0,0 +1,3 @@
+<p>
+  direct-messages works!
+</p>

src/app/components/floating-column/manage-account/direct-messages/direct-messages.component.spec.ts

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

src/app/components/floating-column/manage-account/direct-messages/direct-messages.component.ts

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

src/app/components/floating-column/manage-account/favorites/favorites.component.html

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

src/app/components/floating-column/manage-account/favorites/favorites.component.spec.ts

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

src/app/components/floating-column/manage-account/favorites/favorites.component.ts

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

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

@@ -5,20 +5,25 @@
         <img class="account__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
 
         <!-- <a href class="account__header--button"><fa-icon [icon]="faUserPlus"></fa-icon></a> -->
-        <a href class="account__header--button" 
-            [ngClass]="{ 'account__header--button--selected': true, 'account__header--button--notification': true }">
+        <a href class="account__header--button" title="favorites" (click)="loadSubPanel('favorites')"
+            [ngClass]="{ 'account__header--button--selected': subPanel === 'favorites' }">
             <fa-icon [icon]="faStar"></fa-icon>
         </a>
-        <a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': true }">
+        <a href class="account__header--button" title="DM" (click)="loadSubPanel('dm')"
+            [ngClass]="{ 'account__header--button--selected': subPanel === 'dm' }">
             <fa-icon [icon]="faEnvelope"></fa-icon>
         </a>
-        <a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': true }">
+        <a href class="account__header--button" title="mentions" (click)="loadSubPanel('mentions')"
+            [ngClass]="{ 'account__header--button--selected': subPanel === 'mentions', 'account__header--button--notification': hasMentions }">
             <fa-icon [icon]="faAt"></fa-icon>
         </a>
-        <a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': false }">
+        <a href class="account__header--button" title="notifications" (click)="loadSubPanel('notifications')"
+            [ngClass]="{ 'account__header--button--selected': subPanel === 'notifications', 
+            'account__header--button--notification': hasNotifications }">
             <fa-icon [icon]="faBell"></fa-icon>
         </a>
-        <a href class="account__header--button" [ngClass]="{ 'account__header--button--selected': true }">
+        <a href class="account__header--button" title="account" (click)="loadSubPanel('account')"
+            [ngClass]="{ 'account__header--button--selected': subPanel === 'account' }">
             <fa-icon [icon]="faUser"></fa-icon>
         </a>
     </div>

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

@@ -42,7 +42,7 @@ $account-header-height: 60px;
             &--notification {
                 color: rgb(250, 152, 41);
                 &:hover {
-                    color: rgb(250, 152, 41);
+                    color: rgb(255, 185, 106);
                 }
             }
         }

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

@@ -22,6 +22,10 @@ export class ManageAccountComponent implements OnInit {
     faStar = faStar;
     faUserPlus = faUserPlus;
 
+    subPanel = 'account';
+    hasNotifications = false;
+    hasMentions = false;
+
     @Input() account: AccountWrapper;
 
     availableStreams: StreamElement[] = [];
@@ -55,4 +59,9 @@ export class ManageAccountComponent implements OnInit {
         this.navigationService.closePanel();
         return false;
     }
+
+    loadSubPanel(subpanel: string): boolean {
+        this.subPanel = subpanel;
+        return false;
+    }
 }

src/app/components/floating-column/manage-account/mentions/mentions.component.html

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

src/app/components/floating-column/manage-account/mentions/mentions.component.spec.ts

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

src/app/components/floating-column/manage-account/mentions/mentions.component.ts

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

src/app/components/floating-column/manage-account/my-account/my-account.component.html

@@ -0,0 +1,3 @@
+<p>
+  my-account works!
+</p>

src/app/components/floating-column/manage-account/my-account/my-account.component.spec.ts

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

src/app/components/floating-column/manage-account/my-account/my-account.component.ts

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

src/app/components/floating-column/manage-account/notifications/notifications.component.html

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

src/app/components/floating-column/manage-account/notifications/notifications.component.spec.ts

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

src/app/components/floating-column/manage-account/notifications/notifications.component.ts

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