(Scrumboard) board settings added + some refinements.

package.json

@@ -35,6 +35,7 @@
         "hammerjs": "2.0.8",
         "highlight.js": "9.12.0",
         "intl": "1.2.5",
+        "md2": "0.0.28",
         "moment": "2.18.1",
         "ngx-color-picker": "4.3.1",
         "ngx-cookie-service": "1.0.7",

src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -11,7 +11,7 @@ export class FuseScrumboardBoardAddListComponent implements OnInit
     formActive = false;
     form: FormGroup;
     @Output() onlistAdd = new EventEmitter();
-    @ViewChildren('nameInput') nameInputField;
+    @ViewChild('nameInput') nameInputField;
 
     constructor(
         private formBuilder: FormBuilder
@@ -41,7 +41,7 @@ export class FuseScrumboardBoardAddListComponent implements OnInit
     focusNameField()
     {
         setTimeout(() => {
-            this.nameInputField.first.nativeElement.focus();
+            this.nameInputField.nativeElement.focus();
         });
     }
 

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

@@ -74,8 +74,8 @@
                     <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
                           fxLayout="column" fxLayoutAlign="start end">
 
-                        <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex #newCheckListTitleField>
+                        <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex >
-                            <input mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
+                            <input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
                         </md-input-container>
 
                         <button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>

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

@@ -213,7 +213,7 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
     onChecklistMenuOpen()
     {
         setTimeout(() => {
-            this.newCheckListTitleField._mdInputChild.focus();
+            this.newCheckListTitleField.nativeElement.focus();
         });
     }
 

src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -12,7 +12,7 @@ export class FuseScrumboardEditBoardNameComponent implements OnInit
     form: FormGroup;
     @Input() board;
     @Output() onNameChanged = new EventEmitter();
-    @ViewChildren('nameInput') nameInputField;
+    @ViewChild('nameInput') nameInputField;
 
     constructor(
         private formBuilder: FormBuilder
@@ -42,7 +42,7 @@ export class FuseScrumboardEditBoardNameComponent implements OnInit
     focusNameField()
     {
         setTimeout(() => {
-            this.nameInputField.first.nativeElement.focus();
+            this.nameInputField.nativeElement.focus();
         });
     }
 

src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html

@@ -11,8 +11,8 @@
 
     <form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column">
 
-        <md-input-container fxFlex floatPlaceholder="never" #nameInput>
+        <md-input-container fxFlex floatPlaceholder="never" >
-            <input mdInput formControlName="name" placeholder="Card title" autocomplete="off" required>
+            <input #nameInput mdInput formControlName="name" placeholder="Card title" autocomplete="off" required>
         </md-input-container>
 
         <div class="pl-8" fxLayout="row" fxLayoutAlign="space-between center">

src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, ContentChildren, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -11,7 +11,7 @@ export class FuseScrumboardBoardAddCardComponent implements OnInit
     formActive = false;
     form: FormGroup;
     @Output() onCardAdd = new EventEmitter();
-    @ViewChildren('nameInput') nameInputField;
+    @ViewChild('nameInput') nameInputField;
 
     constructor(
         private formBuilder: FormBuilder
@@ -40,7 +40,7 @@ export class FuseScrumboardBoardAddCardComponent implements OnInit
     focusNameField()
     {
         setTimeout(() => {
-            this.nameInputField.first._mdInputChild.focus();
+            this.nameInputField.nativeElement.focus();
         });
     }
 

src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
@@ -12,7 +12,7 @@ export class FuseScrumboardBoardEditListNameComponent implements OnInit
     form: FormGroup;
     @Input() list;
     @Output() onNameChanged = new EventEmitter();
-    @ViewChildren('nameInput') nameInputField;
+    @ViewChild('nameInput') nameInputField;
 
     constructor(
         private formBuilder: FormBuilder
@@ -42,7 +42,7 @@ export class FuseScrumboardBoardEditListNameComponent implements OnInit
     focusNameField()
     {
         setTimeout(() => {
-            this.nameInputField.first.nativeElement.focus();
+            this.nameInputField.nativeElement.focus();
         });
     }
 

src/app/main/content/apps/scrumboard/board/list/list.component.html

@@ -40,7 +40,6 @@
     <div class="list-footer">
         <fuse-scrumboard-board-add-card (onCardAdd)="onCardAdd($event)">
         </fuse-scrumboard-board-add-card>
-        <!--<ms-sb-add-card ms-list-id="list.id"></ms-sb-add-card>-->
     </div>
     <!-- / NEW CARD BUTTON-->
 

src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html

@@ -1,3 +1,15 @@
-<p>
+<md-list class="colors">
-  board-color-selector works!
+    <!-- COLORS -->
-</p>
+    <md-list-item class="color m-8 mat-elevation-z1"
+                  [ngClass]="'md-'+color.key+'-bg'"
+                  *ngFor="let color of (colors | keys)"
+                  (click)="setColor(color.key)"
+                  md-ripple>
+        <p fxFlex>{{color.key}}</p>
+        <md-icon class="s-16" *ngIf="color.key === board.settings.color">check</md-icon>
+        <button md-icon-button *ngIf="color.key === board.settings.color"  (click)="$event.stopPropagation();setColor('')">
+            <md-icon class="s-16">delete</md-icon>
+        </button>
+    </md-list-item>
+    <!-- / COLORS -->
+</md-list>

src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss

@@ -0,0 +1,10 @@
+:host {
+
+    .colors {
+
+        .color {
+            position: relative;
+            cursor: pointer;
+        }
+    }
+}

src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts

@@ -1,15 +1,43 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatColors } from '../../../../../../../../core/matColors';
+import { ScrumboardService } from '../../../../scrumboard.service';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
-  selector: 'app-board-color-selector',
+    selector   : 'fuse-scrumboard-board-color-selector',
     templateUrl: './board-color-selector.component.html',
     styleUrls  : ['./board-color-selector.component.scss']
 })
-export class BoardColorSelectorComponent implements OnInit {
+export class FuseScrumboardBoardColorSelectorComponent implements OnInit, OnDestroy
+{
+    colors: any;
+    board: any;
+    onBoardChanged: Subscription;
 
-  constructor() { }
+    constructor(
-
+        private scrumboardService: ScrumboardService
-  ngOnInit() {
+    )
+    {
+        this.colors = MatColors.all;
     }
 
+    ngOnInit()
+    {
+        this.onBoardChanged =
+            this.scrumboardService.onBoardChanged
+                .subscribe(board => {
+                    this.board = board;
+                });
+    }
+
+    setColor(color)
+    {
+        this.board.settings.color = color;
+        this.scrumboardService.updateBoard();
+    }
+
+    ngOnDestroy()
+    {
+        this.onBoardChanged.unsubscribe();
+    }
 }

src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html

@@ -1,5 +1,9 @@
+<div [ngSwitch]="view" class="views" (click)="$event.stopPropagation()">
+
+    <div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
+
         <!-- SIDENAV HEADER -->
-<div class="header p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
+        <div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
             <div>Settings</div>
         </div>
         <!-- / SIDENAV HEADER -->
@@ -8,9 +12,8 @@
         <div class="content py-16" perfect-scrollbar>
 
             <div class="nav">
-
                 <div class="nav-item">
-            <div class="nav-link" md-ripple>
+                    <div class="nav-link" md-ripple (click)="view = 'board-color'">
                         <md-icon class="nav-link-icon">format_color_fill</md-icon>
                         <p class="title">Board Color</p>
                     </div>
@@ -50,3 +53,24 @@
             </div>
         </div>
         <!-- / SIDENAV CONTENT -->
+    </div>
+
+    <div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>
+
+        <!-- SIDENAV HEADER -->
+        <div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
+            <div>Background Color</div>
+            <button md-icon-button (click)="view ='main'">
+                <md-icon class="s-16">arrow_back</md-icon>
+            </button>
+        </div>
+        <!-- / SIDENAV HEADER -->
+
+        <!-- SIDENAV CONTENT -->
+        <div class="content p-8" perfect-scrollbar>
+            <fuse-scrumboard-board-color-selector></fuse-scrumboard-board-color-selector>
+        </div>
+        <!-- / SIDENAV CONTENT -->
+
+    </div>
+</div>

src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.scss

@@ -4,8 +4,33 @@
     flex: 1 0 auto;
     height: 100%;
 
+    .views {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+
+        .view {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+            display: flex;
+            flex-direction: column;
+
             > .header {
                 flex: 0 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            }
+
+            > .content {
+                flex: 1 1 auto;
+                overflow-y: auto;
+            }
+        }
     }
 }

src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.ts

@@ -1,15 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { ScrumboardService } from '../../../scrumboard.service';
+import { Animations } from '../../../../../../../core/animations';
 
 @Component({
     selector   : 'fuse-scrumboard-board-settings',
     templateUrl: './settings.component.html',
-    styleUrls  : ['./settings.component.scss']
+    styleUrls  : ['./settings.component.scss'],
+    animations : [Animations.slideInLeft, Animations.slideInRight]
 })
-export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit
+export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit, OnDestroy
 {
     board: any;
+    view = 'main';
     onBoardChanged: Subscription;
 
     constructor(
@@ -31,19 +34,17 @@ export class FuseScrumboardBoardSettingsSidenavComponent implements OnInit
     toggleCardCover()
     {
         this.board.settings.cardCoverImages = !this.board.settings.cardCoverImages;
-        this.updateBoard();
+        this.scrumboardService.updateBoard();
     }
 
     toggleSubcription()
     {
         this.board.settings.subscribed = !this.board.settings.subscribed;
-        this.updateBoard();
-    }
-
-    updateBoard()
-    {
-        this.scrumboardService.onBoardChanged.next(this.board);
         this.scrumboardService.updateBoard();
     }
 
+    ngOnDestroy()
+    {
+        this.onBoardChanged.unsubscribe();
+    }
 }

src/app/main/content/apps/scrumboard/scrumboard.module.ts

@@ -13,6 +13,7 @@ import { FuseScrumboardCardDialogComponent } from './board/dialogs/card/card.com
 import { FuseScrumboardLabelSelectorComponent } from './board/dialogs/card/label-selector/label-selector.component';
 import { FuseScrumboardEditBoardNameComponent } from './board/edit-board-name/edit-board-name.component';
 import { FuseScrumboardBoardSettingsSidenavComponent } from './board/sidenavs/settings/settings.component';
+import { FuseScrumboardBoardColorSelectorComponent } from './board/sidenavs/settings/board-color-selector/board-color-selector.component';
 
 const routes: Routes = [
     {
@@ -47,7 +48,8 @@ const routes: Routes = [
         FuseScrumboardCardDialogComponent,
         FuseScrumboardLabelSelectorComponent,
         FuseScrumboardEditBoardNameComponent,
-        FuseScrumboardBoardSettingsSidenavComponent
+        FuseScrumboardBoardSettingsSidenavComponent,
+        FuseScrumboardBoardColorSelectorComponent
     ],
     imports        : [
         SharedModule,

src/app/main/content/apps/todo/todo-details/todo-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChildren } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { TodoService } from '../todo.service';
 import { Todo } from '../todo.model';
 import { Subscription } from 'rxjs/Subscription';
@@ -16,7 +16,7 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
     tags: any[];
     formType: string;
     todoForm: FormGroup;
-    @ViewChildren('titleInput') titleInputField;
+    @ViewChild('titleInput') titleInputField;
 
     onFormChange: any;
     onCurrentTodoChanged: Subscription;
@@ -77,7 +77,7 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
     focusTitleField()
     {
         setTimeout(() => {
-            this.titleInputField.first.nativeElement.focus();
+            this.titleInputField.nativeElement.focus();
         });
     }