mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
(Scrumboard) board settings added + some refinements.
This commit is contained in:
mustafahlvc
parent
a0da9bd81e
commit
0bf158f8a5
135
package.json
135
package.json
|
|
@ -1,69 +1,70 @@
|
|||
{
|
||||
"name": "fuse2",
|
||||
"version": "1.0.2",
|
||||
"license": "",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.3.6",
|
||||
"@angular/cdk": "2.0.0-beta.10",
|
||||
"@angular/common": "4.3.6",
|
||||
"@angular/compiler": "4.3.6",
|
||||
"@angular/core": "4.3.6",
|
||||
"@angular/flex-layout": "2.0.0-beta.9",
|
||||
"@angular/forms": "4.3.6",
|
||||
"@angular/http": "4.3.6",
|
||||
"@angular/material": "2.0.0-beta.10",
|
||||
"@angular/platform-browser": "4.3.6",
|
||||
"@angular/platform-browser-dynamic": "4.3.6",
|
||||
"@angular/router": "4.3.6",
|
||||
"@swimlane/ngx-charts": "6.0.2",
|
||||
"@swimlane/ngx-datatable": "9.3.1",
|
||||
"@swimlane/ngx-dnd": "3.0.0",
|
||||
"angular-calendar": "0.19.0",
|
||||
"angular-in-memory-web-api": "0.3.2",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"core-js": "2.5.0",
|
||||
"d3": "4.10.0",
|
||||
"hammerjs": "2.0.8",
|
||||
"highlight.js": "9.12.0",
|
||||
"intl": "1.2.5",
|
||||
"moment": "2.18.1",
|
||||
"ngx-color-picker": "4.3.1",
|
||||
"ngx-cookie-service": "1.0.7",
|
||||
"ngx-perfect-scrollbar": "4.5.6",
|
||||
"rxjs": "5.4.3",
|
||||
"web-animations-js": "2.3.1",
|
||||
"zone.js": "0.8.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "^1.3.2",
|
||||
"@angular/compiler-cli": "4.3.6",
|
||||
"@angular/language-service": "4.3.6",
|
||||
"@ngtools/webpack": "^1.6.2",
|
||||
"@types/jasmine": "^2.5.54",
|
||||
"@types/jasminewd2": "^2.0.2",
|
||||
"@types/node": "^6.0.88",
|
||||
"codelyzer": "~3.0.1",
|
||||
"jasmine-core": "~2.6.2",
|
||||
"jasmine-spec-reporter": "~4.1.0",
|
||||
"karma": "~1.7.0",
|
||||
"karma-chrome-launcher": "~2.1.1",
|
||||
"karma-cli": "~1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "^1.2.1",
|
||||
"karma-jasmine": "~1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"node-sass": "^4.5.3",
|
||||
"protractor": "~5.1.2",
|
||||
"ts-node": "~3.0.4",
|
||||
"tslint": "~5.3.2",
|
||||
"typescript": "~2.3.3"
|
||||
}
|
||||
"name": "fuse2",
|
||||
"version": "1.0.2",
|
||||
"license": "",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.3.6",
|
||||
"@angular/cdk": "2.0.0-beta.10",
|
||||
"@angular/common": "4.3.6",
|
||||
"@angular/compiler": "4.3.6",
|
||||
"@angular/core": "4.3.6",
|
||||
"@angular/flex-layout": "2.0.0-beta.9",
|
||||
"@angular/forms": "4.3.6",
|
||||
"@angular/http": "4.3.6",
|
||||
"@angular/material": "2.0.0-beta.10",
|
||||
"@angular/platform-browser": "4.3.6",
|
||||
"@angular/platform-browser-dynamic": "4.3.6",
|
||||
"@angular/router": "4.3.6",
|
||||
"@swimlane/ngx-charts": "6.0.2",
|
||||
"@swimlane/ngx-datatable": "9.3.1",
|
||||
"@swimlane/ngx-dnd": "3.0.0",
|
||||
"angular-calendar": "0.19.0",
|
||||
"angular-in-memory-web-api": "0.3.2",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"core-js": "2.5.0",
|
||||
"d3": "4.10.0",
|
||||
"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",
|
||||
"ngx-perfect-scrollbar": "4.5.6",
|
||||
"rxjs": "5.4.3",
|
||||
"web-animations-js": "2.3.1",
|
||||
"zone.js": "0.8.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "^1.3.2",
|
||||
"@angular/compiler-cli": "4.3.6",
|
||||
"@angular/language-service": "4.3.6",
|
||||
"@ngtools/webpack": "^1.6.2",
|
||||
"@types/jasmine": "^2.5.54",
|
||||
"@types/jasminewd2": "^2.0.2",
|
||||
"@types/node": "^6.0.88",
|
||||
"codelyzer": "~3.0.1",
|
||||
"jasmine-core": "~2.6.2",
|
||||
"jasmine-spec-reporter": "~4.1.0",
|
||||
"karma": "~1.7.0",
|
||||
"karma-chrome-launcher": "~2.1.1",
|
||||
"karma-cli": "~1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "^1.2.1",
|
||||
"karma-jasmine": "~1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"node-sass": "^4.5.3",
|
||||
"protractor": "~5.1.2",
|
||||
"ts-node": "~3.0.4",
|
||||
"tslint": "~5.3.2",
|
||||
"typescript": "~2.3.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<input mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
|
||||
<md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex >
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
|
|||
onChecklistMenuOpen()
|
||||
{
|
||||
setTimeout(() => {
|
||||
this.newCheckListTitleField._mdInputChild.focus();
|
||||
this.newCheckListTitleField.nativeElement.focus();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
|
||||
<form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column">
|
||||
|
||||
<md-input-container fxFlex floatPlaceholder="never" #nameInput>
|
||||
<input mdInput formControlName="name" placeholder="Card title" autocomplete="off" required>
|
||||
<md-input-container fxFlex floatPlaceholder="never" >
|
||||
<input #nameInput mdInput formControlName="name" placeholder="Card title" autocomplete="off" required>
|
||||
</md-input-container>
|
||||
|
||||
<div class="pl-8" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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-->
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,15 @@
|
|||
<p>
|
||||
board-color-selector works!
|
||||
</p>
|
||||
<md-list class="colors">
|
||||
<!-- COLORS -->
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
:host {
|
||||
|
||||
.colors {
|
||||
|
||||
.color {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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',
|
||||
templateUrl: './board-color-selector.component.html',
|
||||
styleUrls: ['./board-color-selector.component.scss']
|
||||
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
|
||||
)
|
||||
{
|
||||
this.colors = MatColors.all;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +1,76 @@
|
|||
<!-- SIDENAV HEADER -->
|
||||
<div class="header p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
|
||||
<div>Settings</div>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
<div [ngSwitch]="view" class="views" (click)="$event.stopPropagation()">
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content py-16" perfect-scrollbar>
|
||||
<div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
|
||||
|
||||
<div class="nav">
|
||||
<!-- SIDENAV HEADER -->
|
||||
<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 -->
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-link" md-ripple>
|
||||
<md-icon class="nav-link-icon">format_color_fill</md-icon>
|
||||
<p class="title">Board Color</p>
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content py-16" perfect-scrollbar>
|
||||
|
||||
<div class="nav">
|
||||
<div class="nav-item">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-link" md-ripple (click)="toggleCardCover()">
|
||||
<md-icon class="nav-link-icon">photo</md-icon>
|
||||
<p fxFlex class="title">Card Cover Images</p>
|
||||
<md-icon *ngIf="board.settings.cardCoverImages" class="s-18">check</md-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-link" md-ripple (click)="toggleSubcription()">
|
||||
<md-icon class="nav-link-icon">remove_red_eye</md-icon>
|
||||
<p fxFlex class="title">Subscribe</p>
|
||||
<md-icon *ngIf="board.settings.subscribed" class="s-18">check</md-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-link" md-ripple>
|
||||
<md-icon class="nav-link-icon">content_copy</md-icon>
|
||||
<p class="title">Copy Board</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-link" md-ripple>
|
||||
<md-icon class="nav-link-icon">delete</md-icon>
|
||||
<p class="title">Delete Board</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<md-divider></md-divider>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / SIDENAV CONTENT -->
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-link" md-ripple (click)="toggleCardCover()">
|
||||
<md-icon class="nav-link-icon">photo</md-icon>
|
||||
<p fxFlex class="title">Card Cover Images</p>
|
||||
<md-icon *ngIf="board.settings.cardCoverImages" class="s-18">check</md-icon>
|
||||
</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 -->
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-link" md-ripple (click)="toggleSubcription()">
|
||||
<md-icon class="nav-link-icon">remove_red_eye</md-icon>
|
||||
<p fxFlex class="title">Subscribe</p>
|
||||
<md-icon *ngIf="board.settings.subscribed" class="s-18">check</md-icon>
|
||||
</div>
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content p-8" perfect-scrollbar>
|
||||
<fuse-scrumboard-board-color-selector></fuse-scrumboard-board-color-selector>
|
||||
</div>
|
||||
<!-- / SIDENAV CONTENT -->
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-link" md-ripple>
|
||||
<md-icon class="nav-link-icon">content_copy</md-icon>
|
||||
<p class="title">Copy Board</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-link" md-ripple>
|
||||
<md-icon class="nav-link-icon">delete</md-icon>
|
||||
<p class="title">Delete Board</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<md-divider></md-divider>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / SIDENAV CONTENT -->
|
||||
|
|
|
|||
|
|
@ -4,8 +4,33 @@
|
|||
flex: 1 0 auto;
|
||||
height: 100%;
|
||||
|
||||
> .header {
|
||||
flex: 0 1 auto;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
.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.1);
|
||||
}
|
||||
|
||||
> .content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user