Angular 5.0.1 & Angular Material 5.0.0-rc0 compatibility (wip)

This commit is contained in:
Sercan Yemen 2017-11-12 22:36:14 +03:00
parent 06679343a4
commit 7f357306eb
18 changed files with 148 additions and 117 deletions

92
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "fuse2", "name": "fuse2",
"version": "1.2.0", "version": "1.2.1",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -43,17 +43,17 @@
} }
}, },
"@angular/animations": { "@angular/animations": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.0.1.tgz",
"integrity": "sha1-ta0ZnGf5P3WVREd+/+ZnnhVJkfs=", "integrity": "sha1-qSsrGGpuWjGp8VhJEd1qp+FsXeE=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/cdk": { "@angular/cdk": {
"version": "2.0.0-beta.12", "version": "5.0.0-rc0",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz", "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.0.0-rc0.tgz",
"integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=", "integrity": "sha512-wZg/mzHisiTieVt7Q/YNPB+r07PHvjoAT3+0mwyIP7wuC00W8BJLPhTZd/tIM5q7Nd69kuA1HSx1qLkcmlCZkw==",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
@ -124,25 +124,25 @@
} }
}, },
"@angular/common": { "@angular/common": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.0.1.tgz",
"integrity": "sha1-+W1mpRe5ldG6mygwnxXC41lnWCU=", "integrity": "sha1-QwBas8i4/68Xaq+zuGupMcPkvfk=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/compiler": { "@angular/compiler": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.0.1.tgz",
"integrity": "sha1-uf+/GMijnYt9rOxHMZOpDiTMK8k=", "integrity": "sha1-f9TH+ku770wUaWL6lGuCczCmyO0=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/compiler-cli": { "@angular/compiler-cli": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.0.1.tgz",
"integrity": "sha1-Dsu5N9hKT43ZTwwqR7B9LkaUyFM=", "integrity": "sha1-Um3BuzlPsWrZFmAe6pqgDrRLT/8=",
"dev": true, "dev": true,
"requires": { "requires": {
"chokidar": "1.7.0", "chokidar": "1.7.0",
@ -152,9 +152,9 @@
} }
}, },
"@angular/core": { "@angular/core": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.0.1.tgz",
"integrity": "sha1-T5dqIl993fNJkvLK2CTJVDpG9Mg=", "integrity": "sha1-pKdK/H4gWNMLgmPrbWbarOn0J7o=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
@ -168,55 +168,55 @@
} }
}, },
"@angular/forms": { "@angular/forms": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.0.1.tgz",
"integrity": "sha1-x/3fo1OWdZrphSkgowzdqMQe0d4=", "integrity": "sha1-afMDxME9o8qg3mNDdYg4i2rWKyE=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/http": { "@angular/http": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.0.1.tgz",
"integrity": "sha1-Byiivgz7sHhyfF64fUyF1T/smlE=", "integrity": "sha1-NQy99jz6yJOWE9dT/wce1YpgVhs=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/language-service": { "@angular/language-service": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.0.1.tgz",
"integrity": "sha1-bMu2n0dXJw3QTsWFfTdjSy8CxAw=", "integrity": "sha1-hp4J29bj2VwRfAYtId0f2SCtRNY=",
"dev": true "dev": true
}, },
"@angular/material": { "@angular/material": {
"version": "2.0.0-beta.12", "version": "5.0.0-rc0",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz", "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.0.0-rc0.tgz",
"integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=", "integrity": "sha512-ZW9gy3c8l2NbFfX9DRYSW+i67pPoL9DZoMCb16STQlhdDfwwAWNpjGF0etXkXw30hDnRCMGVVJVU+45cNXJspA==",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.0.1.tgz",
"integrity": "sha1-xwOPfN6AcFtiAUiXIx4YLuyXb+0=", "integrity": "sha1-FIld0w7Sow7nuZx2t2R0j0bBqGI=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/platform-browser-dynamic": { "@angular/platform-browser-dynamic": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.0.1.tgz",
"integrity": "sha1-iH4QbIsQOwQVz2FWpCXabYP0yJ0=", "integrity": "sha1-Fttn1S1FMVY6sVQpxr3+GLwb7cg=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
}, },
"@angular/router": { "@angular/router": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.0.1.tgz",
"integrity": "sha1-/ktSGmc4QIvOMPk6U0mRQMk6T3Y=", "integrity": "sha1-msCPKTAu9gzf08eBDZbCZd7EY9Y=",
"requires": { "requires": {
"tslib": "1.8.0" "tslib": "1.8.0"
} }
@ -268,9 +268,9 @@
"integrity": "sha512-918ksaRl8RvGWGOjpUCywTS1MnLTqHki53XXibyhZkmHGSP5yLkcArBAFhFLvtQTTbuX8KSz2WFKxwaJ3JuJFw==" "integrity": "sha512-918ksaRl8RvGWGOjpUCywTS1MnLTqHki53XXibyhZkmHGSP5yLkcArBAFhFLvtQTTbuX8KSz2WFKxwaJ3JuJFw=="
}, },
"@swimlane/ngx-datatable": { "@swimlane/ngx-datatable": {
"version": "10.4.0", "version": "11.0.3",
"resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-10.4.0.tgz", "resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-11.0.3.tgz",
"integrity": "sha512-wTV/64vEGPFlcpE+ezTN18baOsNXyfLLvdmhEoaDQt2OJtTKtNxJkze24w71utoJxutQRrfHJUVSkAF4CLNckA==" "integrity": "sha512-feJ9Ep0xddgC1IuNEqxWcTnoSPc3drzY+Bn27RFq+ztXYf3mHsLMxerMqFyVaLPnMrZKttZ7MX48gXzOkSVavw=="
}, },
"@types/jasmine": { "@types/jasmine": {
"version": "2.5.54", "version": "2.5.54",
@ -6425,9 +6425,9 @@
} }
}, },
"moment": { "moment": {
"version": "2.19.1", "version": "2.19.2",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.19.1.tgz", "resolved": "https://registry.npmjs.org/moment/-/moment-2.19.2.tgz",
"integrity": "sha1-VtoaLRy/AdOLfhr8McELz6GSkWc=" "integrity": "sha512-Rf6jiHPEfxp9+dlzxPTmRHbvoFXsh2L/U8hOupUMpnuecHQmI6cF6lUbJl3QqKPko1u6ujO+FxtcajLVfLpAtA=="
}, },
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",

View File

@ -1,6 +1,6 @@
{ {
"name": "fuse2", "name": "fuse2",
"version": "1.2.0", "version": "1.2.1",
"license": "", "license": "",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
@ -16,21 +16,21 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@agm/core": "1.0.0-beta.2", "@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.0.0", "@angular/animations": "5.0.1",
"@angular/cdk": "2.0.0-beta.12", "@angular/cdk": "5.0.0-rc0",
"@angular/common": "5.0.0", "@angular/common": "5.0.1",
"@angular/compiler": "5.0.0", "@angular/compiler": "5.0.1",
"@angular/core": "5.0.0", "@angular/core": "5.0.1",
"@angular/flex-layout": "2.0.0-beta.10", "@angular/flex-layout": "2.0.0-beta.10",
"@angular/forms": "5.0.0", "@angular/forms": "5.0.1",
"@angular/http": "5.0.0", "@angular/http": "5.0.1",
"@angular/material": "2.0.0-beta.12", "@angular/material": "5.0.0-rc0",
"@angular/platform-browser": "5.0.0", "@angular/platform-browser": "5.0.1",
"@angular/platform-browser-dynamic": "5.0.0", "@angular/platform-browser-dynamic": "5.0.1",
"@angular/router": "5.0.0", "@angular/router": "5.0.1",
"@ngx-translate/core": "8.0.0", "@ngx-translate/core": "8.0.0",
"@swimlane/ngx-charts": "6.1.0", "@swimlane/ngx-charts": "6.1.0",
"@swimlane/ngx-datatable": "10.4.0", "@swimlane/ngx-datatable": "11.0.3",
"@withinpixels/ngx-dnd": "3.1.0", "@withinpixels/ngx-dnd": "3.1.0",
"angular-calendar": "0.21.3", "angular-calendar": "0.21.3",
"angular-in-memory-web-api": "0.5.1", "angular-in-memory-web-api": "0.5.1",
@ -41,7 +41,7 @@
"hammerjs": "2.0.8", "hammerjs": "2.0.8",
"highlight.js": "9.12.0", "highlight.js": "9.12.0",
"intl": "1.2.5", "intl": "1.2.5",
"moment": "2.19.1", "moment": "2.19.2",
"ngx-color-picker": "4.4.0", "ngx-color-picker": "4.4.0",
"ngx-cookie-service": "1.0.9", "ngx-cookie-service": "1.0.9",
"perfect-scrollbar": "1.0.3", "perfect-scrollbar": "1.0.3",
@ -51,8 +51,8 @@
}, },
"devDependencies": { "devDependencies": {
"@angular/cli": "1.5.0", "@angular/cli": "1.5.0",
"@angular/compiler-cli": "5.0.0", "@angular/compiler-cli": "5.0.1",
"@angular/language-service": "5.0.0", "@angular/language-service": "5.0.1",
"@angularclass/hmr": "2.1.3", "@angularclass/hmr": "2.1.3",
"@types/jasmine": "2.5.54", "@types/jasmine": "2.5.54",
"@types/jasminewd2": "2.0.3", "@types/jasminewd2": "2.0.3",

View File

@ -2,7 +2,7 @@
type="button" type="button"
class="mat-elevation-z1" class="mat-elevation-z1"
[matMenuTriggerFor]="colorMenu" [matMenuTriggerFor]="colorMenu"
(onMenuOpen)="onMenuOpen()" (menuOpened)="onMenuOpen()"
[ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'"> [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
<mat-icon>palette</mat-icon> <mat-icon>palette</mat-icon>
</button> </button>

View File

@ -26,7 +26,7 @@
</div> </div>
<button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut" <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
(onMenuOpen)="onMenuOpen()"> (menuOpened)="onMenuOpen()">
<mat-icon class="amber-600-fg">star</mat-icon> <mat-icon class="amber-600-fg">star</mat-icon>
</button> </button>

View File

@ -149,7 +149,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
onMenuOpen() onMenuOpen()
{ {
this.searchInputField.nativeElement.focus(); setTimeout(() => {
this.searchInputField.nativeElement.focus();
});
} }
showMobileShortcutsPanel() showMobileShortcutsPanel()

View File

@ -59,3 +59,8 @@ mat-sidenav-container {
width: 14px; width: 14px;
height: 7px; height: 7px;
} }
// Fix: "Input underlines has wrong color opacity value"
.mat-form-field-underline {
background-color: rgba(0, 0, 0, 0.12);
}

View File

@ -4,7 +4,7 @@
<mat-toolbar> <mat-toolbar>
<!-- TOOLBAR TOP --> <!-- TOOLBAR TOP -->
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<!-- USER AVATAR WRAPPER --> <!-- USER AVATAR WRAPPER -->
<div class="avatar-wrapper"> <div class="avatar-wrapper">
@ -16,7 +16,8 @@
alt="{{user.name}}"/> alt="{{user.name}}"/>
<!-- / USER AVATAR --> <!-- / USER AVATAR -->
<mat-icon class="s-16 status" [ngClass]="user.status" [matMenuTriggerFor]="userStatusMenu"></mat-icon> <mat-icon class="s-16 status" [ngClass]="user.status"
[matMenuTriggerFor]="userStatusMenu"></mat-icon>
<!-- USER STATUS --> <!-- USER STATUS -->
<mat-menu id="user-status-menu" #userStatusMenu="matMenu"> <mat-menu id="user-status-menu" #userStatusMenu="matMenu">
@ -69,7 +70,8 @@
</button> </button>
</mat-menu> </mat-menu>
</div> </div>
</div>
</mat-toolbar-row>
<!-- / TOOLBAR TOP --> <!-- / TOOLBAR TOP -->
<!-- TOOLBAR BOTTOM --> <!-- TOOLBAR BOTTOM -->

View File

@ -5,20 +5,19 @@
<mat-toolbar> <mat-toolbar>
<!-- TOOLBAR TOP --> <!-- TOOLBAR TOP -->
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<button mat-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back"> <button mat-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back">
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>
</div> </mat-toolbar-row>
<!-- / TOOLBAR TOP --> <!-- / TOOLBAR TOP -->
<!-- TOOLBAR BOTTOM --> <!-- TOOLBAR BOTTOM -->
<mat-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center"> <mat-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
<img [src]="user.avatar" class="avatar user-avatar huge" alt="{{user.name}}"/> <img [src]="user.avatar" class="avatar user-avatar huge" alt="{{user.name}}"/>
<div class="user-name my-8">{{user.name}}</div> <div class="user-name my-8">{{user.name}}</div>
</mat-toolbar-row> </mat-toolbar-row>

View File

@ -5,7 +5,7 @@
<mat-toolbar> <mat-toolbar>
<!-- TOOLBAR TOP --> <!-- TOOLBAR TOP -->
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<div>Contact Info</div> <div>Contact Info</div>
@ -13,7 +13,7 @@
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </mat-toolbar-row>
<!-- / TOOLBAR TOP --> <!-- / TOOLBAR TOP -->
<!-- TOOLBAR BOTTOM --> <!-- TOOLBAR BOTTOM -->
@ -37,9 +37,9 @@
<mat-card> <mat-card>
<mat-form-field fxFlex> <mat-form-field fxFlex>
<textarea matInput placeholder="Mood" name="mood" <textarea matInput placeholder="Mood" name="mood"
[value]="contact.mood" rows="3" disabled> [value]="contact.mood" rows="3" disabled>
</textarea> </textarea>
</mat-form-field> </mat-form-field>
</mat-card> </mat-card>

View File

@ -1,13 +1,13 @@
<div class="dialog-content-wrapper"> <div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0"> <mat-toolbar matDialogTitle class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span> <span class="title dialog-title">{{dialogTitle}}</span>
<button mat-button class="mat-icon-button" <button mat-button class="mat-icon-button"
(click)="dialogRef.close()" (click)="dialogRef.close()"
aria-label="Close dialog"> aria-label="Close dialog">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </mat-toolbar-row>
<mat-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center"> <mat-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
<img [src]="contact.avatar" class=" avatar contact-avatar huge" <img [src]="contact.avatar" class=" avatar contact-avatar huge"

View File

@ -1,4 +1,4 @@
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ContactsService } from '../contacts.service'; import { ContactsService } from '../contacts.service';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component'; import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
@ -7,6 +7,7 @@ import { FuseConfirmDialogComponent } from '../../../../../core/components/confi
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { DataSource } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections';
import { fuseAnimations } from '../../../../../core/animations'; import { fuseAnimations } from '../../../../../core/animations';
import { Subscription } from 'rxjs/Subscription';
@Component({ @Component({
selector : 'fuse-contacts-contact-list', selector : 'fuse-contacts-contact-list',
@ -14,7 +15,7 @@ import { fuseAnimations } from '../../../../../core/animations';
styleUrls : ['./contact-list.component.scss'], styleUrls : ['./contact-list.component.scss'],
animations : fuseAnimations animations : fuseAnimations
}) })
export class FuseContactsContactListComponent implements OnInit export class FuseContactsContactListComponent implements OnInit, OnDestroy
{ {
@ViewChild('dialogContent') dialogContent: TemplateRef<any>; @ViewChild('dialogContent') dialogContent: TemplateRef<any>;
@ -25,6 +26,10 @@ export class FuseContactsContactListComponent implements OnInit
selectedContacts: any[]; selectedContacts: any[];
checkboxes: {}; checkboxes: {};
onContactsChangedSubscription: Subscription;
onSelectedContactsChangedSubscription: Subscription;
onUserDataChangedSubscription: Subscription;
dialogRef: any; dialogRef: any;
confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>; confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
@ -34,27 +39,30 @@ export class FuseContactsContactListComponent implements OnInit
public dialog: MatDialog public dialog: MatDialog
) )
{ {
this.contactsService.onContactsChanged.subscribe(contacts => { this.onContactsChangedSubscription =
this.contactsService.onContactsChanged.subscribe(contacts => {
this.contacts = contacts; this.contacts = contacts;
this.checkboxes = {}; this.checkboxes = {};
contacts.map(contact => { contacts.map(contact => {
this.checkboxes[contact.id] = false; this.checkboxes[contact.id] = false;
});
}); });
});
this.contactsService.onSelectedContactsChanged.subscribe(selectedContacts => { this.onSelectedContactsChangedSubscription =
for ( const id in this.checkboxes ) this.contactsService.onSelectedContactsChanged.subscribe(selectedContacts => {
{ for ( const id in this.checkboxes )
this.checkboxes[id] = selectedContacts.includes(id); {
} this.checkboxes[id] = selectedContacts.includes(id);
this.selectedContacts = selectedContacts; }
}); this.selectedContacts = selectedContacts;
});
this.contactsService.onUserDataChanged.subscribe(user => { this.onUserDataChangedSubscription =
this.user = user; this.contactsService.onUserDataChanged.subscribe(user => {
}); this.user = user;
});
} }
@ -63,6 +71,13 @@ export class FuseContactsContactListComponent implements OnInit
this.dataSource = new FilesDataSource(this.contactsService); this.dataSource = new FilesDataSource(this.contactsService);
} }
ngOnDestroy()
{
this.onContactsChangedSubscription.unsubscribe();
this.onSelectedContactsChangedSubscription.unsubscribe();
this.onUserDataChangedSubscription.unsubscribe();
}
editContact(contact) editContact(contact)
{ {
this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, { this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {

View File

@ -90,7 +90,7 @@
formControlName="categories"> formControlName="categories">
<mat-chip *ngFor="let category of product.categories" <mat-chip *ngFor="let category of product.categories"
removable="true" (remove)="product.removeCategory(category)"> removable="true" (removed)="product.removeCategory(category)">
{{category}} {{category}}
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
@ -109,7 +109,7 @@
formControlName="tags"> formControlName="tags">
<mat-chip *ngFor="let tag of product.tags" <mat-chip *ngFor="let tag of product.tags"
removable="true" (remove)="product.removeTag(tag)"> removable="true" (removed)="product.removeTag(tag)">
{{tag}} {{tag}}
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>

View File

@ -71,7 +71,7 @@
<!-- CHECKLIST --> <!-- CHECKLIST -->
<div class="due-date " fxFlex="0 1 auto"> <div class="due-date " fxFlex="0 1 auto">
<button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()"> <button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (menuOpened)="onChecklistMenuOpen()">
<mat-icon>check_box</mat-icon> <mat-icon>check_box</mat-icon>
</button> </button>

View File

@ -20,6 +20,10 @@
.mat-form-field-flex { .mat-form-field-flex {
align-items: center; align-items: center;
.mat-form-field-infix {
display: none;
}
.mat-input-element { .mat-input-element {
display: none; display: none;
} }

View File

@ -48,12 +48,13 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
this.todoForm = this.createTodoForm(); this.todoForm = this.createTodoForm();
this.onFormChange = this.todoForm.valueChanges this.onFormChange =
.debounceTime(500) this.todoForm.valueChanges
.distinctUntilChanged() .debounceTime(500)
.subscribe(data => { .distinctUntilChanged()
this.todoService.updateTodo(data); .subscribe(data => {
}); this.todoService.updateTodo(data);
});
} }
}); });
@ -65,15 +66,16 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
}); });
// Subscribe to update on tag change // Subscribe to update on tag change
this.onNewTodoClicked = this.todoService.onNewTodoClicked this.onNewTodoClicked =
.subscribe(() => { this.todoService.onNewTodoClicked
this.todo = new Todo({}); .subscribe(() => {
this.todo.id = FuseUtils.generateGUID(); this.todo = new Todo({});
this.formType = 'new'; this.todo.id = FuseUtils.generateGUID();
this.todoForm = this.createTodoForm(); this.formType = 'new';
this.focusTitleField(); this.todoForm = this.createTodoForm();
this.todoService.onCurrentTodoChanged.next([this.todo, 'new']); this.focusTitleField();
}); this.todoService.onCurrentTodoChanged.next([this.todo, 'new']);
});
} }
focusTitleField() focusTitleField()

View File

@ -5,7 +5,7 @@
</mat-icon> </mat-icon>
<mat-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()" <mat-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
class="mr-16" fxFlex="0 1 auto"> class="mr-16" fxFlex="0 1 auto" (click)="$event.stopPropagation()">
</mat-checkbox> </mat-checkbox>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex> <div fxLayout="row" fxLayoutAlign="start center" fxFlex>

View File

@ -1,7 +1,9 @@
<div class="dialog-content-wrapper"> <div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0"> <mat-toolbar matDialogTitle class="mat-accent m-0">
<span class="title dialog-title">{{data.article.title}}</span> <mat-toolbar-row>
<span class="title dialog-title">{{data.article.title}}</span>
</mat-toolbar-row>
</mat-toolbar> </mat-toolbar>
<div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar> <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>

View File

@ -25,7 +25,7 @@
<!-- CONTENT --> <!-- CONTENT -->
<div class="content"> <div class="content">
<mat-tab-group class="color-tabs" dynamicHeight="true" (selectChange)="selectColor($event)"> <mat-tab-group class="color-tabs" dynamicHeight="true" (selectedTabChange)="selectColor($event)">
<mat-tab *ngFor="let color of ['primary', 'accent', 'warn']" label="{{color}}"> <mat-tab *ngFor="let color of ['primary', 'accent', 'warn']" label="{{color}}">
<ng-template mat-tab-label> <ng-template mat-tab-label>