Merge branch 'master' of https://github.com/withinpixels/fuse2

src/app/core/scss/partials/_colors.scss

@@ -51,10 +51,13 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     // If the base text color is black...
     @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
 
-        &.secondary-text,
-        .secondary-text,
         .mat-icon,
         .icon {
+            color: rgba(0, 0, 0, 0.54);
+        }
+
+        &.secondary-text,
+        .secondary-text {
             color: rgba(0, 0, 0, 0.54) !important;
         }
 
@@ -80,7 +83,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
         .mat-icon,
         .icon {
-            color: rgba(255, 255, 255, 1) !important;
+            color: rgba(255, 255, 255, 1);
         }
 
         &.secondary-text,

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

@@ -0,0 +1,61 @@
+export class FaqFakeDb
+{
+    public static data = [
+        {
+            'question': 'Proident tempor est nulla irure ad est?',
+            'answer': 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.'
+        },
+        {
+            'question': 'Ullamco duis commodo sint ad aliqua aute?',
+            'answer': 'Sunt laborum enim nostrud ea fugiat cillum mollit aliqua exercitation ad elit.'
+        },
+        {
+            'question': 'Eiusmod non occaecat pariatur Lorem in ex?',
+            'answer': 'Nostrud anim mollit incididunt qui qui sit commodo duis. Anim amet irure aliquip duis nostrud sit quis fugiat ullamco non dolor labore. Lorem sunt voluptate laboris culpa proident. Aute eiusmod aliqua exercitation irure exercitation qui laboris mollit occaecat eu occaecat fugiat.'
+        },
+        {
+            'question': 'Lorem magna cillum consequat consequat mollit?',
+            'answer': 'Velit ipsum proident ea incididunt et. Consectetur eiusmod laborum voluptate duis occaecat ullamco sint enim proident.'
+        },
+        {
+            'question': 'Quis irure cupidatat ad consequat reprehenderit excepteur?',
+            'answer': 'Esse nisi mollit aliquip mollit aute consequat adipisicing. Do excepteur dolore proident cupidatat pariatur irure consequat incididunt.'
+        },
+        {
+            'question': 'Officia voluptate tempor ut mollit ea cillum?',
+            'answer': 'Deserunt veniam reprehenderit do elit magna ut.'
+        },
+        {
+            'question': 'Sunt fugiat officia nisi minim sunt duis?',
+            'answer': 'Eiusmod eiusmod sint aliquip exercitation cillum. Magna nulla officia ex consectetur ea ad excepteur in qui.'
+        },
+        {
+            'question': 'Non cupidatat enim quis aliquip minim laborum?',
+            'answer': 'Qui cillum eiusmod nostrud sunt dolore velit nostrud labore voluptate ad dolore. Eu Lorem anim pariatur aliqua. Ullamco ut dolor velit esse occaecat dolore eu cillum commodo qui. Nulla dolor consequat voluptate magna ut commodo magna consectetur non aute proident.'
+        },
+        {
+            'question': 'Dolor ex occaecat magna labore laboris qui?',
+            'answer': 'Incididunt qui excepteur eiusmod elit cillum occaecat voluptate cillum nostrud. Dolor ullamco ullamco eiusmod do sunt adipisicing pariatur. In esse esse labore id reprehenderit sint do. Pariatur culpa dolor tempor qui excepteur duis do anim minim ipsum.'
+        },
+        {
+            'question': 'Nisi et ullamco minim ea proident tempor?',
+            'answer': 'Dolor veniam dolor cillum Lorem magna nisi in occaecat nulla dolor ea eiusmod.'
+        },
+        {
+            'question': 'Amet sunt et quis amet commodo quis?',
+            'answer': 'Nulla dolore consequat aliqua sint consequat elit qui occaecat et.'
+        },
+        {
+            'question': 'Ut eiusmod ex ea eiusmod culpa incididunt?',
+            'answer': 'Fugiat non incididunt officia ex incididunt occaecat. Voluptate nostrud culpa aliquip mollit incididunt non dolore.'
+        },
+        {
+            'question': 'Proident reprehenderit laboris pariatur ut et nisi?',
+            'answer': 'Reprehenderit proident ut ad cillum quis velit quis aliqua ut aliquip tempor ullamco.'
+        },
+        {
+            'question': 'Aliqua aliquip aliquip aliquip et exercitation aute?',
+            'answer': 'Adipisicing Lorem tempor ex anim. Labore tempor laboris nostrud dolore voluptate ullamco. Fugiat ex deserunt anim minim esse velit laboris aute ea duis incididunt. Elit irure id Lorem incididunt laborum aliquip consectetur est irure sunt. Ut labore anim nisi aliqua tempor laborum nulla cillum. Duis irure consequat cillum magna cillum eiusmod ut. Et exercitation voluptate quis deserunt elit quis dolor deserunt ex ex esse ex.'
+        }
+    ];
+}

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

@@ -13,6 +13,7 @@ import { QuickPanelFakeDb } from './quick-panel';
 import { IconsFakeDb } from './icons';
 import { ProjectsDashboardDb } from './projects-dashboard';
 import { ScrumboardFakeDb } from './scrumboard';
+import { FaqFakeDb } from './faq';
 
 export class FuseFakeDbService implements InMemoryDbService
 {
@@ -44,7 +45,8 @@ export class FuseFakeDbService implements InMemoryDbService
             'icons'                      : IconsFakeDb.icons,
             'projects-dashboard-projects': ProjectsDashboardDb.projects,
             'projects-dashboard-widgets' : ProjectsDashboardDb.widgets,
-            'scrumboard-boards'          : ScrumboardFakeDb.boards
+            'scrumboard-boards'          : ScrumboardFakeDb.boards,
+            'faq'                        : FaqFakeDb.data
         };
     }
 }

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

@@ -181,7 +181,7 @@ export class ScrumboardFakeDb
                             'time'    : '45 mins. ago'
                         }
                     ],
-                    'due'              : 'Tue Aug 29 2017 13:16:34 GMT+0300 (Turkey Standard Time)'
+                    'due'              : '2017-08-29T10:16:34.000Z'
                 },
                 {
                     'id'               : '5637273da9b93bb84743a0f9',
@@ -274,7 +274,7 @@ export class ScrumboardFakeDb
                         }
                     ],
                     'activities'       : [],
-                    'due'              : 'Fri Sep 07 2018 15:00:00 GMT+0300 (Turkey Standard Time)'
+                    'due'              : '2018-09-07T12:00:00.000Z'
                 },
                 {
                     'id'               : 'f6b9d7a9247e5d794a081927',
@@ -365,7 +365,7 @@ export class ScrumboardFakeDb
                     'checkItemsChecked': 0,
                     'comments'         : [],
                     'activities'       : [],
-                    'due'              : 'Wed Mar 08 2017 12:00:00 GMT+0300 (Turkey Standard Time)'
+                    'due'              : '2017-03-08T09:00:00.000Z'
                 },
                 {
                     'id'               : '80ed.24ad3b18e2668.f28fbbceeeff9.5a834620a42f1.5909be19a2bf2.6c4a54947ce2d.da356b0c1',
@@ -536,7 +536,7 @@ export class ScrumboardFakeDb
                     'checkItemsChecked': 3,
                     'comments'         : [],
                     'activities'       : [],
-                    'due'              : 'Fri Feb 02 2017 14:20:34 GMT+0300 (Turkey Standard Time)'
+                    'due'              : '2017-02-02T11:20:34.000Z'
                 }
             ],
             'members' : [

src/app/main/content/apps/calendar/event-form/event-form.component.html

@@ -60,7 +60,9 @@
             <div fxFlex="1 0 auto" fxLayout="row">
 
                 <mat-form-field class="mr-24" fxFlex>
-                    <input matInput [matDatepicker]="startDatePicker" placeholder="Start Date">
+                    <input matInput [matDatepicker]="startDatePicker" placeholder="Start Date"
+                           name="start"
+                           formControlName="start">
                     <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
                     <mat-datepicker #startDatePicker></mat-datepicker>
                 </mat-form-field>
@@ -74,7 +76,9 @@
             <div fxFlex="1 0 auto" fxLayout="row">
 
                 <mat-form-field class="mr-24" fxFlex>
-                    <input matInput [matDatepicker]="endDatePicker" placeholder="End Date">
+                    <input matInput [matDatepicker]="endDatePicker" placeholder="End Date"
+                           name="end"
+                           formControlName="end">
                     <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
                     <mat-datepicker #endDatePicker></mat-datepicker>
                 </mat-form-field>

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html

@@ -16,7 +16,12 @@
                         <button mat-menu-item (click)="removeDueDate()">Remove Due Date</button>
                     </mat-menu>
 
-                    <!--<md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker>-->
+                    <mat-form-field *ngIf="!card.due">
+                        <input matInput [matDatepicker]="menuPicker" [(ngModel)]="card.due">
+                        <mat-datepicker-toggle matSuffix [for]="menuPicker"></mat-datepicker-toggle>
+                        <mat-datepicker #menuPicker></mat-datepicker>
+                    </mat-form-field>
+
                 </div>
                 <!-- / DUE DATE -->
 
@@ -140,7 +145,11 @@
             <!-- DUE DATE -->
             <div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">
 
-                <!--<md2-datepicker class="picker ml-8" [(ngModel)]="card.due" openOnFocus="true" type="datetime" format="dd/MM/y H:mm"></md2-datepicker>-->
+                <mat-form-field floatPlaceholder="never">
+                    <input matInput [matDatepicker]="picker" [(ngModel)]="card.due" placeholder="Choose a due date">
+                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                    <mat-datepicker #picker></mat-datepicker>
+                </mat-form-field>
 
                 <button mat-icon-button class="remove-due-date" (click)="removeDueDate()">
                     <mat-icon class="s-16">close</mat-icon>

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss

@@ -10,22 +10,19 @@
 
             .due-date {
 
-                md2-datepicker {
+                .mat-form-field {
-                    min-width: initial;
+                    width: auto;
+                    margin: 0 8px;
 
-                    .md2-datepicker-trigger {
+                    .mat-form-field-wrapper {
                         padding: 0;
 
-                        .md2-datepicker-button {
+                        .mat-form-field-flex {
-                            display: block;
+                            align-items: center;
-                            position: relative;
-                            top: 0;
-                            left: 0;
-                            line-height: normal;
-                        }
 
-                        .md2-datepicker-input {
+                            .mat-input-element {
-                            display: none;
+                                display: none;
+                            }
                         }
                     }
                 }
@@ -63,24 +60,6 @@
 
             .due-date {
 
-                md2-datepicker {
-                    width: 180px;
-                    min-width: 180px;
-
-                    .md2-datepicker-trigger {
-                        padding-top: 5px;
-                        padding-bottom: 5px;
-
-                        .md2-datepicker-button {
-                            top: 0;
-                        }
-
-                        .md2-datepicker-input {
-                            min-width: initial;
-                        }
-                    }
-                }
-
                 .remove-due-date {
                 }
             }

src/app/main/content/pages/faq/faq.component.html

@@ -0,0 +1,38 @@
+<div id="faq" class="page-layout simple" fusePerfectScrollbar>
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-16 p-sm-24"
+         fxLayout="column" fxLayoutAlign="center center">
+
+        <div class="hero-text mb-32">
+            <h1>We're here to help</h1>
+            <h3>Frequently asked questions</h3>
+        </div>
+
+        <div class="search mat-white-bg mat-elevation-z7" flex fxLayout="row" fxLayoutAlign="start center">
+            <mat-icon>search</mat-icon>
+            <input [formControl]="searchInput" placeholder="Search in faqs.." fxFlex>
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content px-16 py-24 px-sm-24 py-sm-32">
+
+        <mat-accordion class="faqs-accordion">
+
+            <mat-expansion-panel *ngFor="let faq of faqsFiltered; let i = index" [expanded]="step === i" (opened)="setStep(i)">
+                <mat-expansion-panel-header>
+                    <mat-panel-title flex fxLayout="row" fxLayoutAlign="start center">
+                        <mat-icon class="mr-8">help_outline</mat-icon>
+                        {{faq.question}}
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                {{faq.answer}}
+            </mat-expansion-panel>
+        </mat-accordion>
+    </div>
+    <!-- / CONTENT -->
+
+</div>

src/app/main/content/pages/faq/faq.component.scss

@@ -0,0 +1,71 @@
+@import "../../../../core/scss/fuse";
+
+:host {
+
+    .header {
+        height: 360px;
+        background: #1A237E;
+        background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
+
+        @include media-breakpoint('xs') {
+            height: 240px;
+            padding: 16px;
+        }
+
+        .hero-text {
+            margin-bottom: 32px;
+
+            @include media-breakpoint-down('xs') {
+            }
+
+            h1 {
+                color: white;
+                font-size: 48px;
+                font-weight: 300;
+                letter-spacing: 0.01em;
+                text-align: center;
+                margin-top: 0;
+                margin-bottom: 16px;
+
+                @include media-breakpoint-down('xs') {
+                    font-size: 24px;
+                }
+            }
+
+            h3 {
+                color: rgba(255, 255, 255, 0.75);
+                max-width: 480px;
+                text-align: center;
+                font-weight: 300;
+                letter-spacing: 0.03em;
+                margin: 0;
+
+                @include media-breakpoint-down('xs') {
+                    font-size: 14px;
+                }
+            }
+        }
+
+        .search {
+            width: 100%;
+            max-width: 640px;
+            height: 56px;
+            line-height: 56px;
+            padding: 18px;
+
+            input {
+                height: 56px;
+                padding-left: 16px;
+                color: rgba(0, 0, 0, 0.54);
+                border: none;
+                outline: none;
+            }
+        }
+    }
+
+    .content {
+        max-width: 960px;
+        width: 100%;
+        margin: 0 auto;
+    }
+}

src/app/main/content/pages/faq/faq.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Subscription } from 'rxjs/Subscription';
+import { FaqService } from './faq.service';
+import { FuseUtils } from '../../../../core/fuseUtils';
+
+@Component({
+    selector   : 'fuse-faq',
+    templateUrl: './faq.component.html',
+    styleUrls  : ['./faq.component.scss']
+})
+export class FuseFaqComponent implements OnInit, OnDestroy
+{
+    faqs: any;
+    faqsFiltered: any;
+    step = 0;
+    searchInput;
+    onFaqsChanged: Subscription;
+
+    constructor(private faqService: FaqService)
+    {
+        this.searchInput = new FormControl('');
+    }
+
+    ngOnInit()
+    {
+        this.onFaqsChanged =
+            this.faqService.onFaqsChanged
+                .subscribe(response => {
+                    this.faqs = response;
+                    this.faqsFiltered = response;
+                });
+
+        this.searchInput.valueChanges
+            .debounceTime(300)
+            .distinctUntilChanged()
+            .subscribe(searchText => {
+                this.faqsFiltered = FuseUtils.filterArrayByString(this.faqs, searchText);
+            });
+    }
+
+    setStep(index: number)
+    {
+        this.step = index;
+    }
+
+    nextStep()
+    {
+        this.step++;
+    }
+
+    prevStep()
+    {
+        this.step--;
+    }
+
+    ngOnDestroy()
+    {
+        this.onFaqsChanged.unsubscribe();
+    }
+}

src/app/main/content/pages/faq/faq.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+import { FuseFaqComponent } from './faq.component';
+import { FaqService } from './faq.service';
+
+const routes = [
+    {
+        path     : 'pages/faq',
+        component: FuseFaqComponent,
+        resolve  : {
+            search: FaqService
+        }
+    }
+];
+
+@NgModule({
+    declarations: [
+        FuseFaqComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    providers   : [
+        FaqService
+    ]
+})
+export class FaqModule
+{
+}

src/app/main/content/pages/faq/faq.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class FaqService implements Resolve<any>
+{
+    faqs: any;
+
+    onFaqsChanged: BehaviorSubject<any> = new BehaviorSubject({});
+
+    constructor(private http: HttpClient)
+    {
+    }
+
+    /**
+     * Resolve
+     * @param {ActivatedRouteSnapshot} route
+     * @param {RouterStateSnapshot} state
+     * @returns {Observable<any> | Promise<any> | any}
+     */
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
+    {
+        return new Promise((resolve, reject) => {
+            Promise.all([
+                this.getFaqs()
+            ]).then(
+                () => {
+                    resolve();
+                },
+                reject
+            );
+        });
+    }
+
+    /**
+     * Get faqs
+     */
+    getFaqs(): Promise<any[]>
+    {
+        return new Promise((resolve, reject) => {
+
+            this.http.get('api/faq')
+                .subscribe((response: any) => {
+                    this.faqs = response;
+                    this.onFaqsChanged.next(this.faqs);
+                    resolve(this.faqs);
+                }, reject);
+        });
+    }
+}

src/app/main/content/pages/pages.module.ts

@@ -19,6 +19,7 @@ import { MaintenanceModule } from './maintenance/maintenence.module';
 import { PricingModule } from './pricing/pricing.module';
 import { ProfileModule } from './profile/profile.module';
 import { SearchModule } from './search/search.module';
+import { FaqModule } from './faq/faq.module';
 
 @NgModule({
     imports: [
@@ -55,7 +56,10 @@ import { SearchModule } from './search/search.module';
         ProfileModule,
 
         // Search
-        SearchModule
+        SearchModule,
+
+        // Faq
+        FaqModule
     ]
 })
 export class PagesModule

src/app/navigation.model.ts

@@ -258,6 +258,12 @@ export class NavigationModel
                         'type' : 'item',
                         'icon' : 'search',
                         'url'  : '/pages/search'
+                    },
+                    {
+                        'title': 'Faq',
+                        'type' : 'item',
+                        'icon' : 'help',
+                        'url'  : '/pages/faq'
                     }
                 ]
             },