purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Scrumboard) board settings added + some refinements.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-30 14:21:14 +03:00
parent a0da9bd81e
commit 0bf158f8a5
17 changed files with 255 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

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

@ -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();
});
}

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

@ -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>

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

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

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

@ -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();
});
}

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

@ -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">

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

@ -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();
});
}

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

@ -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();
});
}

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

@ -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-->

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

@ -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>

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

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

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

@ -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() { }
ngOnInit() {
constructor(
private scrumboardService: ScrumboardService
)
{
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();
}
}

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

@ -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>

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

@ -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;
}
}
}
}

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

@ -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();
}
}

4
src/app/main/content/apps/scrumboard/scrumboard.module.ts
View File

@ -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,

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

@ -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();
});
}