(Quick Panel) Simplified

src/app/fuse-fake-db/fuse-fake-db.service.ts

@@ -9,6 +9,7 @@ import { ContactsFakeDb } from './contacts';
 import { InvoiceFakeDb } from './invoice';
 import { FileManagerFakeDb } from './file-manager';
 import { SearchFakeDb } from './search';
+import { QuickPanelFakeDb } from './quick-panel';
 
 export class FuseFakeDbService implements InMemoryDbService
 {
@@ -34,7 +35,9 @@ export class FuseFakeDbService implements InMemoryDbService
             'invoice'              : InvoiceFakeDb.invoice,
             'file-manager'         : FileManagerFakeDb.files,
             'search-classic'       : SearchFakeDb.classic,
-            'search-table'         : SearchFakeDb.table
+            'search-table'         : SearchFakeDb.table,
+            'quick-panel-notes'    : QuickPanelFakeDb.notes,
+            'quick-panel-events'   : QuickPanelFakeDb.events
         };
     }
 }

src/app/fuse-fake-db/quick-panel.ts

@@ -0,0 +1,32 @@
+export class QuickPanelFakeDb
+{
+    public static notes = [
+        {
+            'title' : 'Best songs to listen while working',
+            'detail': 'Last edit: May 8th, 2015'
+        },
+        {
+            'title' : 'Useful subreddits',
+            'detail': 'Last edit: January 12th, 2015'
+        }
+    ];
+
+    public static events = [
+        {
+            'title' : 'Group Meeting',
+            'detail': 'In 32 Minutes, Room 1B'
+        },
+        {
+            'title' : 'Public Beta Release',
+            'detail': '11:00 PM'
+        },
+        {
+            'title' : 'Dinner with David',
+            'detail': '17:30 PM'
+        },
+        {
+            'title' : 'Q&A Session',
+            'detail': '20:30 PM'
+        }
+    ];
+}

src/app/main/main.component.html

@@ -44,7 +44,7 @@
 
     <!-- QUICK PANEL -->
     <md-sidenav fuseMdSidenavHelper="quick-panel" align="end">
-        quick-panel
+        <fuse-quick-panel></fuse-quick-panel>
     </md-sidenav>
     <!-- / QUICK PANEL -->
 

src/app/main/main.module.ts

@@ -8,6 +8,7 @@ import { FuseNavbarComponent } from './navbar/navbar.component';
 import { FuseToolbarComponent } from './toolbar/toolbar.component';
 import { FuseNavigationModule } from '../core/components/navigation/navigation.module';
 import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive';
+import { QuickPanelComponent } from './quick-panel/quick-panel.component';
 
 @NgModule({
     declarations: [
@@ -16,7 +17,8 @@ import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive';
         FuseMainComponent,
         FuseNavbarComponent,
         FuseToolbarComponent,
-        FuseNavbarToggleDirective
+        FuseNavbarToggleDirective,
+        QuickPanelComponent
     ],
     imports     : [
         SharedModule,

src/app/main/quick-panel/quick-panel.component.html

@@ -0,0 +1,69 @@
+<md-list class="date">
+
+    <h3 md-subheader>
+        <span>Today</span>
+    </h3>
+
+    <div class="secondary-text mat-display-1 mb-0 p-16">
+        <div class="mb-12">
+            {{date | date:'EEEE'}}
+        </div>
+        <div fxLayout="row" fxLayoutAlign="start start">
+            <span> {{date | date:'d'}}</span>
+            <span class="mat-subheading-1">th</span>
+            <span> {{date | date:'MMMM'}}</span>
+        </div>
+    </div>
+</md-list>
+
+<md-divider></md-divider>
+
+<md-list>
+    <h3 md-subheader>
+        <span>Events</span>
+    </h3>
+
+    <md-list-item *ngFor="let event of events">
+        <h3 md-line>{{event.title}}</h3>
+        <p md-line class="secondary-text">{{event.detail}}</p>
+    </md-list-item>
+</md-list>
+
+<md-divider></md-divider>
+
+<md-list>
+    <h3 md-subheader>
+        <span>Notes</span>
+    </h3>
+
+    <md-list-item *ngFor="let note of notes">
+        <h3 md-line>{{note.title}}</h3>
+        <p md-line class="secondary-text">{{note.detail}}</p>
+    </md-list-item>
+</md-list>
+
+<md-divider></md-divider>
+
+<md-list>
+    <h3 md-subheader>
+        <span>Quick Settings</span>
+    </h3>
+
+    <md-list-item>
+        <md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications" labelPosition="before">
+            <h3>Notifications</h3>
+        </md-slide-toggle>
+    </md-list-item>
+
+    <md-list-item>
+        <md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud" labelPosition="before">
+            <h3>Cloud Sync</h3>
+        </md-slide-toggle>
+    </md-list-item>
+
+    <md-list-item>
+        <md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters" labelPosition="before">
+            <h3>Retro Thrusters</h3>
+        </md-slide-toggle>
+    </md-list-item>
+</md-list>

src/app/main/quick-panel/quick-panel.component.scss

@@ -0,0 +1,12 @@
+fuse-quick-panel {
+    display: flex;
+    width: 330px;
+    min-width: 330px;
+    max-width: 330px;
+    z-index: 99;
+    flex-direction: column;
+
+    .mat-slide-toggle-content {
+        flex: 1;
+    }
+}

src/app/main/quick-panel/quick-panel.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Http } from '@angular/http';
+
+@Component({
+    selector     : 'fuse-quick-panel',
+    templateUrl  : './quick-panel.component.html',
+    styleUrls    : ['./quick-panel.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class QuickPanelComponent implements OnInit
+{
+    date: Date;
+    settings: any;
+    notes: any[];
+    events: any[];
+
+    constructor(private http: Http)
+    {
+        this.date = new Date();
+        this.settings = {
+            notify: true,
+            cloud : false,
+            retro : true
+        };
+
+    }
+
+    ngOnInit()
+    {
+        this.http.get('api/quick-panel-notes')
+            .subscribe(response => {
+                this.notes = response.json().data;
+            });
+
+        this.http.get('api/quick-panel-events')
+            .subscribe(response => {
+                this.events = response.json().data;
+            });
+
+    }
+
+}