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

@angular/material v2.0.0-beta.12 compability update,

Browse Source 
Lots of breaking changes,
all "md" prefixes changed with "mat" due to angular material deprecation of "md",
md2 package removed, its not compatible with latest material version, will be replaced with another date picker later.
This commit is contained in:
mustafahlvc 2017-10-10 16:37:14 +03:00
parent 55e1d8b2bc
commit c06e99dc97
394 changed files with 5513 additions and 4945 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
package-lock.json generated
View File

@ -43,17 +43,17 @@
} }
}, },
"@angular/animations": { "@angular/animations": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.4.tgz",
"integrity": "sha1-OWxKW/sihH+eRYJFuplfnBMMDPM=", "integrity": "sha1-ovk1NgQ0er4V35gpIFiEL1Lwi8I=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/cdk": { "@angular/cdk": {
"version": "2.0.0-beta.11", "version": "2.0.0-beta.12",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.11.tgz", "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz",
"integrity": "sha512-sbOqPoC439SDmpLiMq2XjidMMCJ6ofToDew4IXd9ne0jLSd0gGU20tTrRHf79HMTmlAySP7PBOq4Wv1eOFu/8A==", "integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
@ -124,32 +124,41 @@
} }
}, },
"@angular/common": { "@angular/common": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.4.tgz",
"integrity": "sha1-+SrGiwK+xfDm02A6hDKU3JbJYHQ=", "integrity": "sha1-rgqBiqoMaj8JAee4C9lOHCLrk2U=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/compiler": { "@angular/compiler": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.4.tgz",
"integrity": "sha1-jwEWPa19s0CEl9mdOHVUtrGFrWY=", "integrity": "sha1-Mm6wAp2aNUGqyhJN75rcUcNvK0E=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/compiler-cli": { "@angular/compiler-cli": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.4.tgz",
"integrity": "sha1-GDr4HxQRhrjWYLBkKVktQLdUCko=", "integrity": "sha1-BjCApJfZF1OWglBQIixxfaGE9s8=",
"dev": true, "dev": true,
"requires": { "requires": {
"@angular/tsc-wrapped": "4.4.3", "@angular/tsc-wrapped": "4.4.4",
"minimist": "1.2.0", "minimist": "1.2.0",
"reflect-metadata": "0.1.10" "reflect-metadata": "0.1.10"
}, },
"dependencies": { "dependencies": {
"@angular/tsc-wrapped": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.4.tgz",
"integrity": "sha1-mEGCHlVha4JsoWAlD+heFfx0/8M=",
"dev": true,
"requires": {
"tsickle": "0.21.6"
}
},
"minimist": { "minimist": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
@ -159,9 +168,9 @@
} }
}, },
"@angular/core": { "@angular/core": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.4.tgz",
"integrity": "sha1-5x0rB76qy6tIq39R1OIobqXXDhU=", "integrity": "sha1-vTfs9UFY+XSJmWyThr0iL4CjL1w=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
@ -175,68 +184,59 @@
} }
}, },
"@angular/forms": { "@angular/forms": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.4.tgz",
"integrity": "sha1-JbQburWL8dqHJBHIUXwQ18U3PY4=", "integrity": "sha1-TbN5BQm2sQ8duKfBt/Uhh89kz9Q=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/http": { "@angular/http": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.4.tgz",
"integrity": "sha1-tVftJBRKrMRLE2zUd+hNL1eAiQM=", "integrity": "sha1-Zn+vYWu2JBaOr65u6S5euiOp0fI=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/language-service": { "@angular/language-service": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.4.tgz",
"integrity": "sha1-RScBGllJZ6OW7/PAXtFb1MhtUbc=", "integrity": "sha1-D2hgUuOVDBkSjxO3Qp/BS6/mm9Q=",
"dev": true "dev": true
}, },
"@angular/material": { "@angular/material": {
"version": "2.0.0-beta.11", "version": "2.0.0-beta.12",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.11.tgz", "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz",
"integrity": "sha512-k4eyil3n8aHqqS3Fq4N77XvF3bcXA2Ttgf9ujDZwXmMd2NlR4XL+LJrguPLwNSQ6i3EYT+ovE2p4XUu2nkHVeQ==", "integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.4.tgz",
"integrity": "sha1-I/mkW9Pcf0TZeHf7+OYDLez8ncs=", "integrity": "sha1-o4mOLnup2E/6DUcUTGlxF5x1ruY=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/platform-browser-dynamic": { "@angular/platform-browser-dynamic": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.4.tgz",
"integrity": "sha1-5B3dglJDJ3UxDqtZQM3Y3wYY8IQ=", "integrity": "sha1-w8nrhUpShVagcFQSeTLlJ/qTLhQ=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/router": { "@angular/router": {
"version": "4.4.3", "version": "4.4.4",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.3.tgz", "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.4.tgz",
"integrity": "sha1-JsyUd1o4YJRq6vHC6PYPTUTpCZE=", "integrity": "sha1-e+ORCW6EPLPgT58F0dZaiN+bx88=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/tsc-wrapped": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.3.tgz",
"integrity": "sha1-LT84IQodTbA/yG3PHglYErhc0Rk=",
"dev": true,
"requires": {
"tsickle": "0.21.6"
}
},
"@angularclass/hmr": { "@angularclass/hmr": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/@angularclass/hmr/-/hmr-2.1.3.tgz", "resolved": "https://registry.npmjs.org/@angularclass/hmr/-/hmr-2.1.3.tgz",
@ -7882,6 +7882,15 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true "dev": true
}, },
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"string-width": { "string-width": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@ -7909,15 +7918,6 @@
} }
} }
}, },
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"stringstream": { "stringstream": {
"version": "0.0.5", "version": "0.0.5",
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",

27
package.json
View File

@ -15,18 +15,18 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "4.4.3", "@angular/animations": "4.4.4",
"@angular/cdk": "2.0.0-beta.11", "@angular/cdk": "2.0.0-beta.12",
"@angular/common": "4.4.3", "@angular/common": "4.4.4",
"@angular/compiler": "4.4.3", "@angular/compiler": "4.4.4",
"@angular/core": "4.4.3", "@angular/core": "4.4.4",
"@angular/flex-layout": "2.0.0-beta.9", "@angular/flex-layout": "2.0.0-beta.9",
"@angular/forms": "4.4.3", "@angular/forms": "4.4.4",
"@angular/http": "4.4.3", "@angular/http": "4.4.4",
"@angular/material": "2.0.0-beta.11", "@angular/material": "2.0.0-beta.12",
"@angular/platform-browser": "4.4.3", "@angular/platform-browser": "4.4.4",
"@angular/platform-browser-dynamic": "4.4.3", "@angular/platform-browser-dynamic": "4.4.4",
"@angular/router": "4.4.3", "@angular/router": "4.4.4",
"@swimlane/ngx-charts": "6.0.2", "@swimlane/ngx-charts": "6.0.2",
"@swimlane/ngx-datatable": "9.3.1", "@swimlane/ngx-datatable": "9.3.1",
"@swimlane/ngx-dnd": "3.0.0", "@swimlane/ngx-dnd": "3.0.0",
@ -39,7 +39,6 @@
"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",
"md2": "0.0.28",
"moment": "2.18.1", "moment": "2.18.1",
"ngx-color-picker": "4.3.1", "ngx-color-picker": "4.3.1",
"ngx-cookie-service": "1.0.7", "ngx-cookie-service": "1.0.7",
@ -51,8 +50,8 @@
}, },
"devDependencies": { "devDependencies": {
"@angular/cli": "1.4.2", "@angular/cli": "1.4.2",
"@angular/compiler-cli": "4.4.3", "@angular/compiler-cli": "4.4.4",
"@angular/language-service": "4.4.3", "@angular/language-service": "4.4.4",
"@angularclass/hmr": "2.1.3", "@angularclass/hmr": "2.1.3",
"@ngtools/webpack": "1.7.1", "@ngtools/webpack": "1.7.1",
"@types/jasmine": "2.6.0", "@types/jasmine": "2.6.0",

10
src/app/core/components/confirm-dialog/confirm-dialog.component.html
View File

@ -1,6 +1,6 @@
<h1 md-dialog-title>Confirm</h1> <h1 matDialogTitle>Confirm</h1>
<div md-dialog-content>{{confirmMessage}}</div> <div mat-dialog-content>{{confirmMessage}}</div>
<div md-dialog-actions class="pt-24"> <div mat-dialog-actions class="pt-24">
<button md-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button> <button mat-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
<button md-button (click)="dialogRef.close(false)">Cancel</button> <button mat-button (click)="dialogRef.close(false)">Cancel</button>
</div> </div>

4
src/app/core/components/confirm-dialog/confirm-dialog.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MdDialogRef } from '@angular/material'; import { MatDialogRef } from '@angular/material';
@Component({ @Component({
selector : 'fuse-confirm-dialog', selector : 'fuse-confirm-dialog',
@ -10,7 +10,7 @@ export class FuseConfirmDialogComponent implements OnInit
{ {
public confirmMessage: string; public confirmMessage: string;
constructor(public dialogRef: MdDialogRef<FuseConfirmDialogComponent>) constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
{ {
} }

15
src/app/core/components/copier/copier.service.ts
View File

@ -9,12 +9,14 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
@Injectable() @Injectable()
export class CopierService { export class CopierService
{
private textarea: HTMLTextAreaElement; private textarea: HTMLTextAreaElement;
/** Copy the text value to the clipboard. */ /** Copy the text value to the clipboard. */
copyText(text: string): boolean { copyText(text: string): boolean
{
this.createTextareaAndSelect(text); this.createTextareaAndSelect(text);
const copySuccessful = document.execCommand('copy'); const copySuccessful = document.execCommand('copy');
@ -27,7 +29,8 @@ export class CopierService {
* Creates a hidden textarea element, sets its value from `text` property, * Creates a hidden textarea element, sets its value from `text` property,
* and makes a selection on it. * and makes a selection on it.
*/ */
private createTextareaAndSelect(text: string) { private createTextareaAndSelect(text: string)
{
// Create a fake element to hold the contents to copy // Create a fake element to hold the contents to copy
this.textarea = document.createElement('textarea'); this.textarea = document.createElement('textarea');
@ -51,8 +54,10 @@ export class CopierService {
} }
/** Remove the text area from the DOM. */ /** Remove the text area from the DOM. */
private removeFake() { private removeFake()
if (this.textarea) { {
if ( this.textarea )
{
document.body.removeChild(this.textarea); document.body.removeChild(this.textarea);
this.textarea = null; this.textarea = null;
} }

100
src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html
View File

@ -1,100 +1,100 @@
<div class="demo-sidenav"> <div class="demo-sidenav">
<md-list> <mat-list>
<h3 md-subheader>Sidenav Demo</h3> <h3 matSubheader>Sidenav Demo</h3>
<md-list-item> <mat-list-item>
<span>Sidenav Item 1</span> <span>Sidenav Item 1</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 2</span> <span>Sidenav Item 2</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 3</span> <span>Sidenav Item 3</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 4</span> <span>Sidenav Item 4</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 5</span> <span>Sidenav Item 5</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 6</span> <span>Sidenav Item 6</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 7</span> <span>Sidenav Item 7</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 8</span> <span>Sidenav Item 8</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 9</span> <span>Sidenav Item 9</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 10</span> <span>Sidenav Item 10</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 11</span> <span>Sidenav Item 11</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 12</span> <span>Sidenav Item 12</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 13</span> <span>Sidenav Item 13</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 14</span> <span>Sidenav Item 14</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 15</span> <span>Sidenav Item 15</span>
</md-list-item> </mat-list-item>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-list-item> <mat-list-item>
<span>Sidenav Item 16</span> <span>Sidenav Item 16</span>
</md-list-item> </mat-list-item>
</md-list> </mat-list>
</div> </div>

32
src/app/core/components/material-color-picker/material-color-picker.component.html
View File

@ -1,23 +1,23 @@
<button md-icon-button <button mat-icon-button
type="button" type="button"
class="mat-elevation-z1" class="mat-elevation-z1"
[mdMenuTriggerFor]="colorMenu" [matMenuTriggerFor]="colorMenu"
(onMenuOpen)="onMenuOpen()" (onMenuOpen)="onMenuOpen()"
[ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'"> [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
<md-icon>palette</md-icon> <mat-icon>palette</mat-icon>
</button> </button>
<md-menu #colorMenu="mdMenu" class="fuse-material-color-picker-menu"> <mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
<header [ngClass]="selectedColor?.class || 'md-accent-bg'" <header [ngClass]="selectedColor?.class || 'mat-accent-bg'"
class="mat-elevation-z4" class="mat-elevation-z4"
fxLayout="row" fxLayout="row"
fxLayoutAlign="space-between center"> fxLayoutAlign="space-between center">
<button md-icon-button <button mat-icon-button
[style.visibility]="view==='hues'?'visible':'hidden'" [style.visibility]="view==='hues'?'visible':'hidden'"
(click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette"> (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
<md-icon class="s-20">arrow_back</md-icon> <mat-icon class="s-20">arrow_back</mat-icon>
</button> </button>
<span *ngIf="selectedColor?.palette"> <span *ngIf="selectedColor?.palette">
@ -28,11 +28,11 @@
Select Color Select Color
</span> </span>
<button md-icon-button <button mat-icon-button
class="remove-color-button" class="remove-color-button"
(click)="removeColor()" (click)="removeColor()"
aria-label="Remove Color"> aria-label="Remove Color">
<md-icon class="s-20">delete</md-icon> <mat-icon class="s-20">delete</mat-icon>
</button> </button>
</header> </header>
@ -47,10 +47,10 @@
fxLayoutAlign="start start" fxLayoutAlign="start start"
class="colors" fusePerfectScrollbar> class="colors" fusePerfectScrollbar>
<div class="color" <div class="color"
[ngClass]="'md-'+color.key+'-bg'" [ngClass]="'mat-'+color.key+'-bg'"
*ngFor="let color of (colors | keys)" *ngFor="let color of (colors | keys)"
(click)="$event.stopPropagation();selectPalette(color.key)" (click)="$event.stopPropagation();selectPalette(color.key)"
fxLayout="row" fxLayoutAlign="start end" md-ink-ripple> fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
<span class="label"> <span class="label">
{{color.key}} {{color.key}}
</span> </span>
@ -67,16 +67,16 @@
<div class="color" <div class="color"
*ngFor="let hue of hues" *ngFor="let hue of hues"
[fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'" [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
[ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'" [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
(click)="selectHue(hue)" (click)="selectHue(hue)"
fxLayout="row" fxLayoutAlign="start end" md-ink-ripple> fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
<span class="label"> <span class="label">
{{hue}} {{hue}}
</span> </span>
<md-icon *ngIf="selectedHue === hue" class="s-16">check</md-icon> <mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</md-menu> </mat-menu>

4
src/app/core/components/material-color-picker/material-color-picker.component.scss
View File

@ -11,7 +11,7 @@
overflow: hidden; overflow: hidden;
min-height: 258px; min-height: 258px;
height: 308px; height: 308px;
background-color: #f7f7f7; background-color: #F7F7F7;
.view { .view {
position: absolute; position: absolute;
@ -39,7 +39,7 @@
font-size: 10px; font-size: 10px;
} }
md-icon { mat-icon {
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 2px; right: 2px;

2
src/app/core/components/material-color-picker/material-color-picker.component.ts
View File

@ -129,7 +129,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
{ {
this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue]; this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]; this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg'; this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
} }
else else
{ {

6
src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
View File

@ -1,7 +1,7 @@
<a class="nav-link" md-ripple> <a class="nav-link" matRipple>
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span> <span class="nav-link-title">{{item.title}}</span>
<md-icon class="collapse-arrow">keyboard_arrow_right</md-icon> <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
</a> </a>
<div class="children" [ngClass]="{'open': isOpen}"> <div class="children" [ngClass]="{'open': isOpen}">

4
src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
View File

@ -1,6 +1,6 @@
<a class="nav-link" md-ripple <a class="nav-link" matRipple
[routerLink]="[item.url]" routerLinkActive="active"> [routerLink]="[item.url]" routerLinkActive="active">
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span> <span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span> <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
</a> </a>

6
src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
View File

@ -1,7 +1,7 @@
<a class="nav-link" md-ripple (click)="toggleOpen($event)"> <a class="nav-link" matRipple (click)="toggleOpen($event)">
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span> <span class="nav-link-title">{{item.title}}</span>
<md-icon class="collapse-arrow">keyboard_arrow_right</md-icon> <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
</a> </a>
<div class="children" [@slideInOut]="isOpen"> <div class="children" [@slideInOut]="isOpen">
<ng-container *ngFor="let item of item.children"> <ng-container *ngFor="let item of item.children">

4
src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
View File

@ -1,6 +1,6 @@
<a class="nav-link" md-ripple <a class="nav-link" matRipple
[routerLink]="[item.url]" routerLinkActive="active"> [routerLink]="[item.url]" routerLinkActive="active">
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title">{{item.title}}</span> <span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span> <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
</a> </a>

10
src/app/core/components/search-bar/search-bar.component.html
View File

@ -1,20 +1,20 @@
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto"> <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
<div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex> <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
<label for="fuse-search-bar-input"> <label for="fuse-search-bar-input">
<button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()" <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
*ngIf="collapsed"> *ngIf="collapsed">
<md-icon class="s-24">search</md-icon> <mat-icon class="s-24">search</mat-icon>
</button> </button>
<!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed"> <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
<md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner> <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
</span>--> </span>-->
</label> </label>
<input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex> <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
<button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()" <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
aria-label="Collapse Search Bar"> aria-label="Collapse Search Bar">
<md-icon class="s-24">close</md-icon> <mat-icon class="s-24">close</mat-icon>
</button> </button>
</div> </div>

60
src/app/core/components/shortcuts/shortcuts.component.html
View File

@ -2,8 +2,8 @@
<div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center" <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
fxHide fxShow.lt-md> fxHide fxShow.lt-md>
<button md-icon-button (click)="showMobileShortcutsPanel()"> <button mat-icon-button (click)="showMobileShortcutsPanel()">
<md-icon class="amber-600-fg">star</md-icon> <mat-icon class="amber-600-fg">star</mat-icon>
</button> </button>
</div> </div>
@ -16,8 +16,8 @@
<div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center" <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
*ngFor="let shortcutItem of shortcutItems"> *ngFor="let shortcutItem of shortcutItems">
<a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url"> <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
<md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon> <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
<span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold"> <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
{{shortcutItem.title.substr(0, 1).toUpperCase()}} {{shortcutItem.title.substr(0, 1).toUpperCase()}}
</span> </span>
@ -25,64 +25,64 @@
</div> </div>
<button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut" <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
(onMenuOpen)="onMenuOpen()"> (onMenuOpen)="onMenuOpen()">
<md-icon class="amber-600-fg">star</md-icon> <mat-icon class="amber-600-fg">star</mat-icon>
</button> </button>
</div> </div>
<div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md> <div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
<button md-icon-button (click)="hideMobileShortcutsPanel()"> <button mat-icon-button (click)="hideMobileShortcutsPanel()">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
</div> </div>
<md-menu #addMenu="mdMenu" class="w-240"> <mat-menu #addMenu="matMenu" class="w-240">
<md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never"> <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
<input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)"> <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
</md-input-container> </mat-form-field>
<md-divider></md-divider> <mat-divider></mat-divider>
<md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar> <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
<md-list-item *ngFor="let shortcutItem of shortcutItems" <mat-list-item *ngFor="let shortcutItem of shortcutItems"
(click)="toggleShortcut($event, shortcutItem)"> (click)="toggleShortcut($event, shortcutItem)">
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center"> <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
<md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon> <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row" <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
fxLayoutAlign="center center" *ngIf="!shortcutItem.icon"> fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
{{shortcutItem.title.substr(0, 1).toUpperCase()}} {{shortcutItem.title.substr(0, 1).toUpperCase()}}
</span> </span>
<p md-line fxFlex>{{shortcutItem.title}}</p> <p matLine fxFlex>{{shortcutItem.title}}</p>
<md-icon class="ml-8">star</md-icon> <mat-icon class="ml-8">star</mat-icon>
</div> </div>
</md-list-item> </mat-list-item>
<md-list-item *ngIf="shortcutItems.length === 0"> <mat-list-item *ngIf="shortcutItems.length === 0">
<p> <p>
<small>No shortcuts yet!</small> <small>No shortcuts yet!</small>
</p> </p>
</md-list-item> </mat-list-item>
</md-nav-list> </mat-nav-list>
<md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar> <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
<md-list-item *ngFor="let navigationItem of filteredNavigationItems" <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
(click)="toggleShortcut($event, navigationItem)"> (click)="toggleShortcut($event, navigationItem)">
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center"> <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
<md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-icon> <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row" <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
fxLayoutAlign="center center" *ngIf="!navigationItem.icon"> fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
{{navigationItem.title.substr(0, 1).toUpperCase()}} {{navigationItem.title.substr(0, 1).toUpperCase()}}
</span> </span>
<p md-line fxFlex>{{navigationItem.title}}</p> <p matLine fxFlex>{{navigationItem.title}}</p>
<md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon> <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
</div> </div>
</md-list-item> </mat-list-item>
</md-nav-list> </mat-nav-list>
</md-menu> </mat-menu>
</div> </div>

82
src/app/core/components/theme-options/theme-options.component.html
View File

@ -1,50 +1,50 @@
<button #openButton md-icon-button class="open-button md-primary-bg mat-elevation-z2" (click)="openBar()"> <button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
<md-icon>settings</md-icon> <mat-icon>settings</mat-icon>
</button> </button>
<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div> <div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
<div #panel class="theme-options-panel md-white-bg mat-elevation-z8"> <div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
<button md-icon-button class="close-button" (click)="closeBar()"> <button mat-icon-button class="close-button" (click)="closeBar()">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
<div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start"> <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
<h3>Navigation:</h3> <h3>Navigation:</h3>
<md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()" <mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="top">Top</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</md-radio-group> </mat-radio-group>
<h3 class="mt-24">Toolbar:</h3> <h3 class="mt-24">Toolbar:</h3>
<md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()" <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</md-radio-group> </mat-radio-group>
<h3 class="mt-24">Footer:</h3> <h3 class="mt-24">Footer:</h3>
<md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()" <mat-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
</md-radio-group> </mat-radio-group>
<h3 class="mt-24">Layout Mode:</h3> <h3 class="mt-24">Layout Mode:</h3>
<md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()" <mat-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap> fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
<md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
<md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button> <mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
</md-radio-group> </mat-radio-group>
<md-divider></md-divider> <mat-divider></mat-divider>
<h3>Colors:</h3> <h3>Colors:</h3>
<div class="colors"> <div class="colors">
@ -69,29 +69,29 @@
</div> </div>
<md-divider></md-divider> <mat-divider></mat-divider>
<h3>Router Animation:</h3> <h3>Router Animation:</h3>
<md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation"> <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
<md-option value="none"> <mat-option value="none">
None None
</md-option> </mat-option>
<md-option value="slideUp"> <mat-option value="slideUp">
Slide up Slide up
</md-option> </mat-option>
<md-option value="slideDown"> <mat-option value="slideDown">
Slide down Slide down
</md-option> </mat-option>
<md-option value="slideRight"> <mat-option value="slideRight">
Slide right Slide right
</md-option> </mat-option>
<md-option value="slideLeft"> <mat-option value="slideLeft">
Slide left Slide left
</md-option> </mat-option>
<md-option value="fadeIn"> <mat-option value="fadeIn">
Fade in Fade in
</md-option> </mat-option>
</md-select> </mat-select>
</div> </div>

3
src/app/core/components/theme-options/theme-options.component.scss
View File

@ -14,6 +14,7 @@
display: block; display: block;
right: 0; right: 0;
top: 160px; top: 160px;
z-index: 998;
&.bar-closed .theme-options-panel { &.bar-closed .theme-options-panel {
display: none; display: none;
@ -102,7 +103,7 @@
opacity: .75; opacity: .75;
z-index: 998; z-index: 998;
md-icon { mat-icon {
animation: rotating 3s linear infinite; animation: rotating 3s linear infinite;
} }

2
src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
View File

@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked
{ {
setTimeout(() => { setTimeout(() => {
this.viewContainer.createEmbeddedView(this.templateRef); this.viewContainer.createEmbeddedView(this.templateRef);
}, 350); }, 300);
this.isCreated = true; this.isCreated = true;
} }
else if ( this.isCreated && !document.body.contains(this.element.nativeElement) ) else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )

99
src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts Normal file
View File

@ -0,0 +1,99 @@
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
import { FuseMatchMedia } from '../../services/match-media.service';
import { ObservableMedia } from '@angular/flex-layout';
import { Subscription } from 'rxjs/Subscription';
@Directive({
selector: '[fuseMatSidenavHelper]'
})
export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
{
matchMediaSubscription: Subscription;
@HostBinding('class.mat-is-locked-open') isLockedOpen = true;
@HostBinding('class.mat-stop-transition') stopTransition = true;
@Input('fuseMatSidenavHelper') id: string;
@Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
constructor(
private fuseMatSidenavService: FuseMatSidenavHelperService,
private fuseMatchMedia: FuseMatchMedia,
private observableMedia: ObservableMedia,
private matSidenav: MatSidenav
)
{
}
ngOnInit()
{
this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav);
if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
{
setTimeout(() => {
this.isLockedOpen = true;
this.matSidenav.mode = 'side';
this.matSidenav.open();
});
this.stopTransition = false;
}
else
{
setTimeout(() => {
this.isLockedOpen = false;
this.matSidenav.mode = 'over';
this.matSidenav.close();
});
setTimeout(() => {
this.stopTransition = false;
}, 3000);
}
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
{
setTimeout(() => {
this.isLockedOpen = true;
this.matSidenav.mode = 'side';
this.matSidenav.open();
});
}
else
{
setTimeout(() => {
this.isLockedOpen = false;
this.matSidenav.mode = 'over';
this.matSidenav.close();
});
}
});
}
ngOnDestroy()
{
this.matchMediaSubscription.unsubscribe();
}
}
@Directive({
selector: '[fuseMatSidenavToggler]'
})
export class FuseMatSidenavTogglerDirective
{
@Input('fuseMatSidenavToggler') id;
constructor(private fuseMatSidenavService: FuseMatSidenavHelperService)
{
}
@HostListener('click')
onClick()
{
this.fuseMatSidenavService.getSidenav(this.id).toggle();
}
}

6
src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts → src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts
View File

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { MdSidenav } from '@angular/material'; import { MatSidenav } from '@angular/material';
@Injectable() @Injectable()
export class FuseMdSidenavHelperService export class FuseMatSidenavHelperService
{ {
sidenavInstances: MdSidenav[]; sidenavInstances: MatSidenav[];
constructor() constructor()
{ {

99
src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
View File

@ -1,99 +0,0 @@
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
import { MdSidenav } from '@angular/material';
import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
import { FuseMatchMedia } from '../../services/match-media.service';
import { ObservableMedia } from '@angular/flex-layout';
import { Subscription } from 'rxjs/Subscription';
@Directive({
selector: '[fuseMdSidenavHelper]'
})
export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
{
matchMediaSubscription: Subscription;
@HostBinding('class.md-is-locked-open') isLockedOpen = true;
@HostBinding('class.md-stop-transition') stopTransition = true;
@Input('fuseMdSidenavHelper') id: string;
@Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string;
constructor(
private fuseMdSidenavService: FuseMdSidenavHelperService,
private fuseMatchMedia: FuseMatchMedia,
private observableMedia: ObservableMedia,
private mdSidenav: MdSidenav
)
{
}
ngOnInit()
{
this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav);
if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
{
setTimeout(() => {
this.isLockedOpen = true;
this.mdSidenav.mode = 'side';
this.mdSidenav.open();
});
this.stopTransition = false;
}
else
{
setTimeout(() => {
this.isLockedOpen = false;
this.mdSidenav.mode = 'over';
this.mdSidenav.close();
});
setTimeout(() => {
this.stopTransition = false;
}, 3000);
}
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
{
setTimeout(() => {
this.isLockedOpen = true;
this.mdSidenav.mode = 'side';
this.mdSidenav.open();
});
}
else
{
setTimeout(() => {
this.isLockedOpen = false;
this.mdSidenav.mode = 'over';
this.mdSidenav.close();
});
}
});
}
ngOnDestroy()
{
this.matchMediaSubscription.unsubscribe();
}
}
@Directive({
selector: '[fuseMdSidenavToggler]'
})
export class FuseMdSidenavTogglerDirective
{
@Input('fuseMdSidenavToggler') id;
constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
{
}
@HostListener('click')
onClick()
{
this.fuseMdSidenavService.getSidenav(this.id).toggle();
}
}

188
src/app/core/modules/material.module.ts
View File

@ -1,106 +1,108 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { import {
MdAutocompleteModule, MatAutocompleteModule,
MdButtonModule, MatButtonModule,
MdButtonToggleModule, MatButtonToggleModule,
MdCheckboxModule, MatCheckboxModule,
MdToolbarModule, MatToolbarModule,
MdTooltipModule, MatTooltipModule,
MdCardModule, MatCardModule,
MdChipsModule, MatChipsModule,
MdDatepickerModule, MatDatepickerModule,
MdDialogModule, MatDialogModule,
MdExpansionModule, MatExpansionModule,
MdGridListModule, MatFormFieldModule,
MdIconModule, MatGridListModule,
MdInputModule, MatIconModule,
MdListModule, MatInputModule,
MdMenuModule, MatListModule,
MdNativeDateModule, MatMenuModule,
MdPaginatorModule, MatNativeDateModule,
MdProgressBarModule, MatPaginatorModule,
MdProgressSpinnerModule, MatProgressBarModule,
MdRadioModule, MatProgressSpinnerModule,
MdRippleModule, MatRadioModule,
MdSelectModule, MatRippleModule,
MdSidenavModule, MatSelectModule,
MdSliderModule, MatSidenavModule,
MdSlideToggleModule, MatSliderModule,
MdSnackBarModule, MatSlideToggleModule,
MdStepperModule, MatSnackBarModule,
MdSortModule, MatSortModule,
MdTableModule, MatTableModule,
MdTabsModule MatTabsModule,
MatStepperModule
} from '@angular/material'; } from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table'; import { CdkTableModule } from '@angular/cdk/table';
@NgModule({ @NgModule({
imports: [ imports: [
MdAutocompleteModule, MatAutocompleteModule,
MdButtonModule, MatButtonModule,
MdButtonToggleModule, MatButtonToggleModule,
MdCardModule, MatCardModule,
MdCheckboxModule, MatCheckboxModule,
MdChipsModule, MatChipsModule,
MdDatepickerModule, MatDatepickerModule,
MdDialogModule, MatDialogModule,
MdExpansionModule, MatExpansionModule,
MdGridListModule, MatFormFieldModule,
MdIconModule, MatGridListModule,
MdInputModule, MatIconModule,
MdListModule, MatInputModule,
MdMenuModule, MatListModule,
MdNativeDateModule, MatMenuModule,
MdPaginatorModule, MatNativeDateModule,
MdProgressBarModule, MatPaginatorModule,
MdProgressSpinnerModule, MatProgressBarModule,
MdRadioModule, MatProgressSpinnerModule,
MdRippleModule, MatRadioModule,
MdSelectModule, MatRippleModule,
MdSidenavModule, MatSelectModule,
MdSliderModule, MatSidenavModule,
MdSlideToggleModule, MatSliderModule,
MdSnackBarModule, MatSlideToggleModule,
MdStepperModule, MatSnackBarModule,
MdSortModule, MatStepperModule,
MdTableModule, MatSortModule,
MdTabsModule, MatTableModule,
MdToolbarModule, MatTabsModule,
MdTooltipModule, MatToolbarModule,
MatTooltipModule,
CdkTableModule CdkTableModule
], ],
exports: [ exports: [
MdAutocompleteModule, MatAutocompleteModule,
MdButtonModule, MatButtonModule,
MdButtonToggleModule, MatButtonToggleModule,
MdCardModule, MatCardModule,
MdCheckboxModule, MatCheckboxModule,
MdChipsModule, MatChipsModule,
MdDatepickerModule, MatDatepickerModule,
MdDialogModule, MatDialogModule,
MdExpansionModule, MatExpansionModule,
MdGridListModule, MatGridListModule,
MdIconModule, MatIconModule,
MdInputModule, MatInputModule,
MdListModule, MatListModule,
MdMenuModule, MatMenuModule,
MdNativeDateModule, MatNativeDateModule,
MdPaginatorModule, MatPaginatorModule,
MdProgressBarModule, MatProgressBarModule,
MdProgressSpinnerModule, MatProgressSpinnerModule,
MdRadioModule, MatRadioModule,
MdRippleModule, MatRippleModule,
MdSelectModule, MatSelectModule,
MdSidenavModule, MatSidenavModule,
MdSliderModule, MatSliderModule,
MdSlideToggleModule, MatSlideToggleModule,
MdSnackBarModule, MatSnackBarModule,
MdStepperModule, MatStepperModule,
MdSortModule, MatSortModule,
MdTableModule, MatTableModule,
MdTabsModule, MatTabsModule,
MdToolbarModule, MatToolbarModule,
MdTooltipModule, MatTooltipModule,
CdkTableModule CdkTableModule
] ]
}) })

17
src/app/core/modules/shared.module.ts
View File

@ -8,25 +8,24 @@ import { ColorPickerModule } from 'ngx-color-picker';
import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive'; import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';
import { FusePipesModule } from '../pipes/pipes.module'; import { FusePipesModule } from '../pipes/pipes.module';
import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component'; import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
import { FuseCountdownComponent } from '../components/countdown/countdown.component'; import { FuseCountdownComponent } from '../components/countdown/countdown.component';
import { FuseMatchMedia } from '../services/match-media.service'; import { FuseMatchMedia } from '../services/match-media.service';
import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service'; import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service'; import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service';
import { FuseHljsComponent } from '../components/hljs/hljs.component'; import { FuseHljsComponent } from '../components/hljs/hljs.component';
import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive'; import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component'; import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
import { Md2Module } from 'md2';
import { CookieService } from 'ngx-cookie-service'; import { CookieService } from 'ngx-cookie-service';
import { MarkdownModule } from 'angular2-markdown'; import { MarkdownModule } from 'angular2-markdown';
@NgModule({ @NgModule({
declarations : [ declarations : [
FuseMdSidenavHelperDirective, FuseMatSidenavHelperDirective,
FuseMdSidenavTogglerDirective, FuseMatSidenavTogglerDirective,
FuseConfirmDialogComponent, FuseConfirmDialogComponent,
FuseCountdownComponent, FuseCountdownComponent,
FuseHljsComponent, FuseHljsComponent,
@ -44,7 +43,6 @@ import { MarkdownModule } from 'angular2-markdown';
ColorPickerModule, ColorPickerModule,
NgxDnDModule, NgxDnDModule,
NgxDatatableModule, NgxDatatableModule,
Md2Module,
MarkdownModule MarkdownModule
], ],
exports : [ exports : [
@ -52,8 +50,8 @@ import { MarkdownModule } from 'angular2-markdown';
MaterialModule, MaterialModule,
CommonModule, CommonModule,
FormsModule, FormsModule,
FuseMdSidenavHelperDirective, FuseMatSidenavHelperDirective,
FuseMdSidenavTogglerDirective, FuseMatSidenavTogglerDirective,
FusePipesModule, FusePipesModule,
FuseCountdownComponent, FuseCountdownComponent,
FuseHljsComponent, FuseHljsComponent,
@ -64,7 +62,6 @@ import { MarkdownModule } from 'angular2-markdown';
NgxDatatableModule, NgxDatatableModule,
FuseIfOnDomDirective, FuseIfOnDomDirective,
FuseMaterialColorPickerComponent, FuseMaterialColorPickerComponent,
Md2Module,
MarkdownModule MarkdownModule
], ],
entryComponents: [ entryComponents: [
@ -74,7 +71,7 @@ import { MarkdownModule } from 'angular2-markdown';
CookieService, CookieService,
FuseMatchMedia, FuseMatchMedia,
FuseNavbarVerticalService, FuseNavbarVerticalService,
FuseMdSidenavHelperService FuseMatSidenavHelperService
] ]
}) })

6
src/app/core/scss/partials/_angular-material-fix.scss
View File

@ -7,11 +7,11 @@
} }
// Fix: "Sidenav opening with animations for the first time" // Fix: "Sidenav opening with animations for the first time"
md-sidenav-container { mat-sidenav-container {
md-sidenav { mat-sidenav {
&[md-is-locked-open].md-stop-transition { &[mat-is-locked-open].mat-stop-transition {
transition: none !important; transition: none !important;
transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important;
opacity: 0; opacity: 0;

2
src/app/core/scss/partials/_colors.scss
View File

@ -164,7 +164,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
background-color: $color !important; background-color: $color !important;
} }
.md-#{$colorName}#{$hue}-bg { .mat-#{$colorName}#{$hue}-bg {
background-color: $color !important; background-color: $color !important;
color: $contrastColor !important; color: $contrastColor !important;

2
src/app/core/scss/partials/_global.scss
View File

@ -1,6 +1,6 @@
body { body {
> md-sidenav-container { > mat-sidenav-container {
height: 100%; height: 100%;
} }
} }

2
src/app/core/scss/partials/_icons.scss
View File

@ -1,5 +1,5 @@
i, i,
md-icon { mat-icon {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
font-size: 24px; font-size: 24px;
width: 24px; width: 24px;

10
src/app/core/scss/partials/_material.scss
View File

@ -46,14 +46,14 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
md-icon.status { mat-icon.status {
position: absolute; position: absolute;
top: 28px; top: 28px;
left: 28px; left: 28px;
} }
} }
md-icon.status { mat-icon.status {
border-radius: 50%; border-radius: 50%;
&.online { &.online {
@ -116,7 +116,7 @@ md-icon.status {
max-height: 48px; max-height: 48px;
height: 48px; height: 48px;
md-icon { mat-icon {
margin: 0 16px 0 0; margin: 0 16px 0 0;
} }
@ -142,7 +142,7 @@ md-icon.status {
} }
} }
md-divider { mat-divider {
margin: 8px 0; margin: 8px 0;
} }
} }
@ -234,7 +234,7 @@ md-icon.status {
} }
} }
md-divider { mat-divider {
margin: 16px 32px; margin: 16px 32px;
} }

28
src/app/core/scss/partials/_page-layouts.scss
View File

@ -112,12 +112,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Single scroll // Single scroll
&.single-scroll { &.single-scroll {
> md-sidenav-container { > mat-sidenav-container {
flex: 1 0 auto; flex: 1 0 auto;
} }
} }
> md-sidenav-container { > mat-sidenav-container {
display: flex; display: flex;
flex: 1; flex: 1;
background: none; background: none;
@ -136,7 +136,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
overflow-y: hidden; overflow-y: hidden;
@include mat-elevation(7); @include mat-elevation(7);
&.md-is-locked-open { &.mat-is-locked-open {
background: none; background: none;
box-shadow: none; box-shadow: none;
} }
@ -216,11 +216,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav { &.left-sidenav {
// Sidenav // Sidenav
> md-sidenav-container { > mat-sidenav-container {
.sidenav { .sidenav {
&.md-is-locked-open { &.mat-is-locked-open {
~ .mat-sidenav-content, ~ .mat-sidenav-content,
~ .mat-drawer-content { ~ .mat-drawer-content {
@ -238,12 +238,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.right-sidenav { &.right-sidenav {
// Sidenav // Sidenav
> md-sidenav-container { > mat-sidenav-container {
.sidenav { .sidenav {
order: 999; order: 999;
&.md-is-locked-open { &.mat-is-locked-open {
~ .mat-sidenav-content, ~ .mat-sidenav-content,
~ .mat-drawer-content { ~ .mat-drawer-content {
@ -295,7 +295,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Single scroll // Single scroll
&.single-scroll { &.single-scroll {
> md-sidenav-container { > mat-sidenav-container {
flex: 1 0 auto; flex: 1 0 auto;
> .mat-sidenav-content, > .mat-sidenav-content,
@ -309,7 +309,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Inner Sidenav // Inner Sidenav
&.inner-sidenav { &.inner-sidenav {
> md-sidenav-container { > mat-sidenav-container {
flex: 1; flex: 1;
.sidenav { .sidenav {
@ -338,7 +338,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
} }
} }
> md-sidenav-container { > mat-sidenav-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
//flex-direction: row; //flex-direction: row;
@ -354,7 +354,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
z-index: 51; z-index: 51;
@include mat-elevation(7); @include mat-elevation(7);
&.md-is-locked-open { &.mat-is-locked-open {
width: 220px; width: 220px;
min-width: 220px; min-width: 220px;
max-width: 220px; max-width: 220px;
@ -440,7 +440,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav, &.left-sidenav,
&.right-sidenav { &.right-sidenav {
> md-sidenav-container { > mat-sidenav-container {
flex: 1 0 auto; flex: 1 0 auto;
} }
} }
@ -458,7 +458,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav, &.left-sidenav,
&.right-sidenav { &.right-sidenav {
> md-sidenav-container { > mat-sidenav-container {
flex: 1 0 auto !important; flex: 1 0 auto !important;
> .mat-sidenav-content, > .mat-sidenav-content,
@ -483,7 +483,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav, &.left-sidenav,
&.right-sidenav { &.right-sidenav {
> md-sidenav-container { > mat-sidenav-container {
> .mat-sidenav-content, > .mat-sidenav-content,
> .mat-drawer-content { > .mat-drawer-content {

4
src/app/core/scss/partials/_reset.scss
View File

@ -28,7 +28,7 @@ html, body {
} }
// Reset non angular-material input's default browser/os styles // Reset non angular-material input's default browser/os styles
*:not(md-input-container) { *:not(mat-input-container) {
> input { > input {
border: none; border: none;
@ -55,7 +55,7 @@ html, body {
} }
} }
*:not(md-input-container) { *:not(mat-input-container) {
> input[type="button"], > input[type="button"],
> button, > button,

6
src/app/core/services/config.service.ts
View File

@ -28,9 +28,9 @@ export class FuseConfigService
mode : 'fullwidth' // 'boxed', 'fullwidth' mode : 'fullwidth' // 'boxed', 'fullwidth'
}, },
colorClasses : { colorClasses : {
toolbar: 'md-white-500-bg', toolbar: 'mat-white-500-bg',
navbar : 'md-fuse-dark-500-bg', navbar : 'mat-fuse-dark-500-bg',
footer : 'md-fuse-dark-700-bg' footer : 'mat-fuse-dark-700-bg'
}, },
customScrollbars: true, customScrollbars: true,
routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft

10
src/app/fuse-fake-db/projects-dashboard.ts
View File

@ -1622,7 +1622,7 @@ export class ProjectsDashboardDb
[ [
{ {
'value' : 'Wireframing', 'value' : 'Wireframing',
'classes': 'md-primary-bg', 'classes': 'mat-primary-bg',
'icon' : '' 'icon' : ''
}, },
{ {
@ -1654,7 +1654,7 @@ export class ProjectsDashboardDb
[ [
{ {
'value' : 'Design', 'value' : 'Design',
'classes': 'md-green-bg', 'classes': 'mat-green-bg',
'icon' : '' 'icon' : ''
}, },
{ {
@ -1686,7 +1686,7 @@ export class ProjectsDashboardDb
[ [
{ {
'value' : 'Coding', 'value' : 'Coding',
'classes': 'md-red-bg', 'classes': 'mat-red-bg',
'icon' : '' 'icon' : ''
}, },
{ {
@ -1718,7 +1718,7 @@ export class ProjectsDashboardDb
[ [
{ {
'value' : 'Marketing', 'value' : 'Marketing',
'classes': 'md-accent-bg', 'classes': 'mat-accent-bg',
'icon' : '' 'icon' : ''
}, },
{ {
@ -1750,7 +1750,7 @@ export class ProjectsDashboardDb
[ [
{ {
'value' : 'Extra', 'value' : 'Extra',
'classes': 'md-orange-bg', 'classes': 'mat-orange-bg',
'icon' : '' 'icon' : ''
}, },
{ {

14
src/app/fuse-fake-db/scrumboard.ts
View File

@ -565,22 +565,22 @@ export class ScrumboardFakeDb
{ {
'id' : '26022e4129ad3a5sc28b36cd', 'id' : '26022e4129ad3a5sc28b36cd',
'name' : 'High Priority', 'name' : 'High Priority',
'color': 'md-red-500-bg' 'color': 'mat-red-500-bg'
}, },
{ {
'id' : '56027e4119ad3a5dc28b36cd', 'id' : '56027e4119ad3a5dc28b36cd',
'name' : 'Design', 'name' : 'Design',
'color': 'md-orange-400-bg' 'color': 'mat-orange-400-bg'
}, },
{ {
'id' : '5640635e19ad3a5dc21416b2', 'id' : '5640635e19ad3a5dc21416b2',
'name' : 'App', 'name' : 'App',
'color': 'md-blue-600-bg' 'color': 'mat-blue-600-bg'
}, },
{ {
'id' : '6540635g19ad3s5dc31412b2', 'id' : '6540635g19ad3s5dc31412b2',
'name' : 'Feature', 'name' : 'Feature',
'color': 'md-green-400-bg' 'color': 'mat-green-400-bg'
} }
] ]
}, },
@ -769,17 +769,17 @@ export class ScrumboardFakeDb
{ {
'id' : '56027e4119ad3a5dc28b36cd', 'id' : '56027e4119ad3a5dc28b36cd',
'name' : 'Design', 'name' : 'Design',
'color': 'md-red-500-bg' 'color': 'mat-red-500-bg'
}, },
{ {
'id' : '5640635e19ad3a5dc21416b2', 'id' : '5640635e19ad3a5dc21416b2',
'name' : 'App', 'name' : 'App',
'color': 'md-blue-500-bg' 'color': 'mat-blue-500-bg'
}, },
{ {
'id' : '6540635g19ad3s5dc31412b2', 'id' : '6540635g19ad3s5dc31412b2',
'name' : 'Feature', 'name' : 'Feature',
'color': 'md-green-400-bg' 'color': 'mat-green-400-bg'
} }
] ]
} }

42
src/app/main/content/apps/calendar/calendar.component.html
View File

@ -9,7 +9,7 @@
<div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center"> <div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">today</md-icon> <mat-icon class="logo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">today</mat-icon>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Calendar</span> <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Calendar</span>
@ -18,32 +18,32 @@
<!-- TOOLBAR --> <!-- TOOLBAR -->
<div class="toolbar" fxLayout="row" fxLayoutAlign="start center"> <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search"> <button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search">
<md-icon>search</md-icon> <mat-icon>search</mat-icon>
</button> </button>
<button md-button class="mat-icon-button" <button mat-button class="mat-icon-button"
mwlCalendarToday mwlCalendarToday
[(viewDate)]="viewDate" [(viewDate)]="viewDate"
(viewDateChange)="selectedDay = {date:$event}" (viewDateChange)="selectedDay = {date:$event}"
aria-label="Today" md-tooltip="Today"> aria-label="Today" matTooltip="Today">
<!--(click)="selectedDay = viewDate"--> <!--(click)="selectedDay = viewDate"-->
<md-icon>today</md-icon> <mat-icon>today</mat-icon>
</button> </button>
<button md-button class="mat-icon-button" (click)="view='day'" <button mat-button class="mat-icon-button" (click)="view='day'"
aria-label="Day" md-tooltip="Day"> aria-label="Day" matTooltip="Day">
<md-icon>view_day</md-icon> <mat-icon>view_day</mat-icon>
</button> </button>
<button md-button class="mat-icon-button" (click)="view='week'" <button mat-button class="mat-icon-button" (click)="view='week'"
aria-label="Week" md-tooltip="Week"> aria-label="Week" matTooltip="Week">
<md-icon>view_week</md-icon> <mat-icon>view_week</mat-icon>
</button> </button>
<button md-button class="mat-icon-button" (click)="view='month'" <button mat-button class="mat-icon-button" (click)="view='month'"
aria-label="Month" md-tooltip="Month"> aria-label="Month" matTooltip="Month">
<md-icon>view_module</md-icon> <mat-icon>view_module</mat-icon>
</button> </button>
</div> </div>
</div> </div>
@ -53,35 +53,35 @@
<div class="header-bottom" fxLayout="row" fxLayoutAlign="center center" <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}"> *fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}">
<button md-button class="mat-icon-button arrow" <button mat-button class="mat-icon-button arrow"
mwlCalendarPreviousView mwlCalendarPreviousView
[view]="view" [view]="view"
[(viewDate)]="viewDate" [(viewDate)]="viewDate"
(viewDateChange)="selectedDay = {date:$event}" (viewDateChange)="selectedDay = {date:$event}"
aria-label="Previous"> aria-label="Previous">
<md-icon>chevron_left</md-icon> <mat-icon>chevron_left</mat-icon>
</button> </button>
<div class="title"> <div class="title">
{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }} {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
</div> </div>
<button md-button class="mat-icon-button arrow" <button mat-button class="mat-icon-button arrow"
mwlCalendarNextView mwlCalendarNextView
[view]="view" [view]="view"
[(viewDate)]="viewDate" [(viewDate)]="viewDate"
(viewDateChange)="selectedDay = {date:$event}" (viewDateChange)="selectedDay = {date:$event}"
aria-label="Next"> aria-label="Next">
<md-icon>chevron_right</md-icon> <mat-icon>chevron_right</mat-icon>
</button> </button>
</div> </div>
<!-- / HEADER BOTTOM --> <!-- / HEADER BOTTOM -->
</div> </div>
<!-- ADD EVENT BUTTON --> <!-- ADD EVENT BUTTON -->
<button md-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event" <button mat-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}"> *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
<md-icon>add</md-icon> <mat-icon>add</mat-icon>
</button> </button>
<!-- / ADD EVENT BUTTON --> <!-- / ADD EVENT BUTTON -->
</div> </div>

2
src/app/main/content/apps/calendar/calendar.component.scss
View File

@ -303,7 +303,7 @@
z-index: 10; z-index: 10;
} }
md-icon { mat-icon {
color: #FFFFFF; color: #FFFFFF;
} }
} }

6
src/app/main/content/apps/calendar/calendar.component.ts
View File

@ -1,7 +1,7 @@
import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns'; import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs/Subject';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MatDialog, MatDialogRef } from '@angular/material';
import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component'; import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { CalendarEventModel } from './event.model'; import { CalendarEventModel } from './event.model';
@ -38,12 +38,12 @@ export class FuseCalendarComponent implements OnInit
dialogRef: any; dialogRef: any;
confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>; confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
selectedDay: any; selectedDay: any;
constructor( constructor(
public dialog: MdDialog, public dialog: MatDialog,
public calendarService: CalendarService public calendarService: CalendarService
) )
{ {

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

@ -1,40 +1,40 @@
<div class="dialog-content-wrapper"> <div class="dialog-content-wrapper">
<md-toolbar md-dialog-title class="mat-accent m-0"> <mat-toolbar matDialogTitle class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span> <span class="title dialog-title">{{dialogTitle}}</span>
<button md-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">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
</md-toolbar> </mat-toolbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar> <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex> <form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
<md-input-container class="w-100-p"> <mat-form-field class="w-100-p">
<input mdInput <input matInput
name="title" name="title"
formControlName="title" formControlName="title"
placeholder="Title" placeholder="Title"
required> required>
</md-input-container> </mat-form-field>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row"> <div class="py-16" fxFlex="1 0 auto" fxLayout="row">
<md-slide-toggle <mat-slide-toggle
name="allDay" name="allDay"
formControlName="allDay" formControlName="allDay"
class="mr-24" class="mr-24"
aria-label="All day"> aria-label="All day">
All Day All Day
</md-slide-toggle> </mat-slide-toggle>
</div> </div>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color"> <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
<md-input-container class="mr-24" fxFlex> <mat-form-field class="mr-24" fxFlex>
<input mdInput <input matInput
name="primary color" name="primary color"
formControlName="primary" formControlName="primary"
placeholder="Primary color" placeholder="Primary color"
@ -43,9 +43,9 @@
[cpPresetColors]="presetColors" [cpPresetColors]="presetColors"
[style.background]="event.color.primary" [style.background]="event.color.primary"
(colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/> (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
</md-input-container> </mat-form-field>
<md-input-container fxFlex> <mat-form-field fxFlex>
<input mdInput <input matInput
name="secondary color" name="secondary color"
formControlName="secondary" formControlName="secondary"
placeholder="Secondary color" placeholder="Secondary color"
@ -54,62 +54,62 @@
[cpPresetColors]="presetColors" [cpPresetColors]="presetColors"
[style.background]="event.color.secondary" [style.background]="event.color.secondary"
(colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/> (colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
</md-input-container> </mat-form-field>
</div> </div>
<div fxFlex="1 0 auto" fxLayout="row"> <div fxFlex="1 0 auto" fxLayout="row">
<md-form-field class="mr-24" fxFlex> <mat-form-field class="mr-24" fxFlex>
<input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date"> <input matInput [matDatepicker]="startDatePicker" placeholder="Start Date">
<md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
<md-datepicker #startDatePicker></md-datepicker> <mat-datepicker #startDatePicker></mat-datepicker>
</md-form-field> </mat-form-field>
<md-input-container class="no-errors-spacer" fxFlex md-no-float> <mat-form-field class="no-errors-spacer" fxFlex mat-no-float>
<input mdInput placeholder="Start Time"> <input matInput placeholder="Start Time">
</md-input-container> </mat-form-field>
</div> </div>
<div fxFlex="1 0 auto" fxLayout="row"> <div fxFlex="1 0 auto" fxLayout="row">
<md-form-field class="mr-24" fxFlex> <mat-form-field class="mr-24" fxFlex>
<input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date"> <input matInput [matDatepicker]="endDatePicker" placeholder="End Date">
<md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
<md-datepicker #endDatePicker></md-datepicker> <mat-datepicker #endDatePicker></mat-datepicker>
</md-form-field> </mat-form-field>
<md-input-container class="no-errors-spacer" fxFlex md-no-float> <mat-form-field class="no-errors-spacer" fxFlex mat-no-float>
<input mdInput placeholder="End Time"> <input matInput placeholder="End Time">
</md-input-container> </mat-form-field>
</div> </div>
<md-input-container formGroupName="meta" class="w-100-p"> <mat-form-field formGroupName="meta" class="w-100-p">
<input mdInput <input matInput
name="location" name="location"
formControlName="location" formControlName="location"
placeholder="Location"> placeholder="Location">
</md-input-container> </mat-form-field>
<md-input-container formGroupName="meta" class="w-100-p"> <mat-form-field formGroupName="meta" class="w-100-p">
<textarea mdInput <textarea matInput
formControlName="notes" formControlName="notes"
placeholder="Notes" placeholder="Notes"
md-maxlength="250" mat-maxlength="250"
max-rows="4"> max-rows="4">
</textarea> </textarea>
</md-input-container> </mat-form-field>
</form> </form>
</div> </div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<button *ngIf="action !=='edit'" <button *ngIf="action !=='edit'"
md-raised-button mat-raised-button
(click)="dialogRef.close(eventForm)" (click)="dialogRef.close(eventForm)"
class="save-button mat-accent" class="save-button mat-accent"
[disabled]="eventForm.invalid" [disabled]="eventForm.invalid"
@ -118,7 +118,7 @@
</button> </button>
<button *ngIf="action ==='edit'" <button *ngIf="action ==='edit'"
md-raised-button mat-raised-button
(click)="dialogRef.close(['save',eventForm])" (click)="dialogRef.close(['save',eventForm])"
class="save-button mat-accent" class="save-button mat-accent"
[disabled]="eventForm.invalid" [disabled]="eventForm.invalid"
@ -127,12 +127,12 @@
</button> </button>
<button *ngIf="action ==='edit'" <button *ngIf="action ==='edit'"
md-button mat-button
class="mat-icon-button" class="mat-icon-button"
(click)="dialogRef.close(['delete',eventForm])" (click)="dialogRef.close(['delete',eventForm])"
aria-label="Delete" aria-label="Delete"
md-tooltip="Delete"> matTooltip="Delete">
<md-icon>delete</md-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
</div> </div>

6
src/app/main/content/apps/calendar/event-form/event-form.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { CalendarEvent } from 'angular-calendar'; import { CalendarEvent } from 'angular-calendar';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { CalendarEventModel } from '../event.model'; import { CalendarEventModel } from '../event.model';
@ -22,8 +22,8 @@ export class FuseCalendarEventFormDialogComponent implements OnInit
presetColors = MatColors.presets; presetColors = MatColors.presets;
constructor( constructor(
public dialogRef: MdDialogRef<FuseCalendarEventFormDialogComponent>, public dialogRef: MatDialogRef<FuseCalendarEventFormDialogComponent>,
@Inject(MD_DIALOG_DATA) private data: any, @Inject(MAT_DIALOG_DATA) private data: any,
private formBuilder: FormBuilder private formBuilder: FormBuilder
) )
{ {

4
src/app/main/content/apps/chat/chat-start/chat-start.component.html
View File

@ -3,7 +3,7 @@
<div class="big-circle mat-elevation-z1 app-logo" fxLayout="column" fxLayoutAlign="center center" <div class="big-circle mat-elevation-z1 app-logo" fxLayout="column" fxLayoutAlign="center center"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}"> *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<md-icon class="s-64 s-md-128">chat</md-icon> <mat-icon class="s-64 s-mat-128">chat</mat-icon>
</div> </div>
@ -11,7 +11,7 @@
<span fxHide fxShow.gt-md class="app-message" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">Select contact to start the chat!..</span> <span fxHide fxShow.gt-md class="app-message" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">Select contact to start the chat!..</span>
<button md-raised-button fxHide.gt-md class="" fuseMdSidenavToggler="chat-left-sidenav"> <button mat-raised-button fxHide.gt-md class="" fuseMatSidenavToggler="chat-left-sidenav">
Select contact to start the chat!.. Select contact to start the chat!..
</button> </button>

2
src/app/main/content/apps/chat/chat-start/chat-start.component.scss
View File

@ -19,7 +19,7 @@
line-height: 160px; line-height: 160px;
} }
md-icon { mat-icon {
color: mat-color($accent); color: mat-color($accent);
} }
} }

36
src/app/main/content/apps/chat/chat-view/chat-view.component.html
View File

@ -2,23 +2,23 @@
<div class="chat" fxFlex fxLayout="column"> <div class="chat" fxFlex fxLayout="column">
<!-- CHAT TOOLBAR --> <!-- CHAT TOOLBAR -->
<md-toolbar class="chat-toolbar"> <mat-toolbar class="chat-toolbar">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<!-- RESPONSIVE CHATS BUTTON--> <!-- RESPONSIVE CHATS BUTTON-->
<div md-button fxHide.gt-md class="responsive-chats-button mat-icon-button mr-16" <div mat-button fxHide.gt-md class="responsive-chats-button mat-icon-button mr-16"
fuseMdSidenavToggler="chat-left-sidenav" fuseMatSidenavToggler="chat-left-sidenav"
aria-label="chats button"> aria-label="chats button">
<md-icon class="s-36">chat</md-icon> <mat-icon class="s-36">chat</mat-icon>
</div> </div>
<!-- / RESPONSIVE CHATS BUTTON--> <!-- / RESPONSIVE CHATS BUTTON-->
<!-- CHAT CONTACT--> <!-- CHAT CONTACT-->
<div class="chat-contact" fxLayout="row" fxLayoutAlign="start center" <div class="chat-contact" fxLayout="row" fxLayoutAlign="start center"
fuseMdSidenavToggler="chat-right-sidenav" (click)="selectContact()"> fuseMatSidenavToggler="chat-right-sidenav" (click)="selectContact()">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
@ -26,9 +26,9 @@
class="avatar" class="avatar"
alt="{{contact.name}}"/> alt="{{contact.name}}"/>
<md-icon class="s-16 status" <mat-icon class="s-16 status"
[ngClass]="contact.status"> [ngClass]="contact.status">
</md-icon> </mat-icon>
</div> </div>
<div class="chat-contact-name"> <div class="chat-contact-name">
@ -40,20 +40,20 @@
</div> </div>
<div> <div>
<button md-button class="mat-icon-button" [mdMenuTriggerFor]="contactMenu" <button mat-button class="mat-icon-button" [matMenuTriggerFor]="contactMenu"
aria-label="more"> aria-label="more">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<md-menu #contactMenu="mdMenu"> <mat-menu #contactMenu="matMenu">
<button md-menu-item fuseMdSidenavToggler="chat-right-sidenav" (click)="selectContact()"> <button mat-menu-item fuseMatSidenavToggler="chat-right-sidenav" (click)="selectContact()">
Contact Info Contact Info
</button> </button>
</md-menu> </mat-menu>
</div> </div>
</div> </div>
</md-toolbar> </mat-toolbar>
<!-- / CHAT TOOLBAR --> <!-- / CHAT TOOLBAR -->
<!-- CHAT CONTENT --> <!-- CHAT CONTENT -->
@ -98,13 +98,13 @@
fxLayout="row" fxLayout="row"
fxLayoutAlign="start center"> fxLayoutAlign="start center">
<md-input-container class="" fxFlex floatPlaceholder="never"> <mat-form-field class="" fxFlex floatPlaceholder="never">
<textarea mdInput #replyInput placeholder="Type and hit enter to send message" <textarea matInput #replyInput placeholder="Type and hit enter to send message"
ngModel name="message"></textarea> ngModel name="message"></textarea>
</md-input-container> </mat-form-field>
<button md-fab class="" type="submit" aria-label="Send message"> <button mat-fab class="" type="submit" aria-label="Send message">
<md-icon>send</md-icon> <mat-icon>send</mat-icon>
</button> </button>
</form> </form>

6
src/app/main/content/apps/chat/chat-view/chat-view.component.scss
View File

@ -107,7 +107,7 @@
.reply-form { .reply-form {
md-input-container { mat-form-field {
margin: 0; margin: 0;
padding-right: 16px; padding-right: 16px;
@ -120,12 +120,12 @@
} }
} }
.md-errors-spacer { .mat-errors-spacer {
display: none; display: none;
} }
} }
.md-button { .mat-button {
margin: 0; margin: 0;
} }
} }

18
src/app/main/content/apps/chat/chat.component.html
View File

@ -1,7 +1,7 @@
<div id="chat" class="page-layout carded fullwidth"> <div id="chat" class="page-layout carded fullwidth">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg md-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND --> <!-- / TOP BACKGROUND -->
<!-- CENTER --> <!-- CENTER -->
@ -10,13 +10,13 @@
<!-- CONTENT CARD --> <!-- CONTENT CARD -->
<div class="content-card"> <div class="content-card">
<md-sidenav-container> <mat-sidenav-container>
<!-- LEFT SIDENAV --> <!-- LEFT SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side" <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
fuseMdSidenavHelper="chat-left-sidenav" md-is-locked-open="gt-md"> fuseMatSidenavHelper="chat-left-sidenav" mat-is-locked-open="gt-md">
<fuse-chat-left-sidenav></fuse-chat-left-sidenav> <fuse-chat-left-sidenav></fuse-chat-left-sidenav>
</md-sidenav> </mat-sidenav>
<!-- / LEFT SIDENAV --> <!-- / LEFT SIDENAV -->
<!-- CONTENT --> <!-- CONTENT -->
@ -26,13 +26,13 @@
<!-- / CONTENT --> <!-- / CONTENT -->
<!-- RIGHT SIDENAV --> <!-- RIGHT SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="false" mode="over" <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="false" mode="over"
fuseMdSidenavHelper="chat-right-sidenav"> fuseMatSidenavHelper="chat-right-sidenav">
<fuse-chat-right-sidenav></fuse-chat-right-sidenav> <fuse-chat-right-sidenav></fuse-chat-right-sidenav>
</md-sidenav> </mat-sidenav>
<!-- / RIGHT SIDENAV --> <!-- / RIGHT SIDENAV -->
</md-sidenav-container> </mat-sidenav-container>
</div> </div>
<!-- / CONTENT CARD --> <!-- / CONTENT CARD -->

2
src/app/main/content/apps/chat/chat.component.scss
View File

@ -37,7 +37,7 @@
max-width: 100%; max-width: 100%;
} }
md-sidenav { mat-sidenav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 400px; width: 400px;

62
src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
View File

@ -1,7 +1,7 @@
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div class="sidenav-header"> <div class="sidenav-header">
<!-- CHATS TOOLBAR --> <!-- CHATS TOOLBAR -->
<md-toolbar> <mat-toolbar>
<!-- TOOLBAR TOP --> <!-- TOOLBAR TOP -->
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@ -12,75 +12,75 @@
<!-- USER AVATAR --> <!-- USER AVATAR -->
<img (click)="changeLeftSidenavView('user')" <img (click)="changeLeftSidenavView('user')"
src="{{user.avatar}}" src="{{user.avatar}}"
class="md-avatar avatar" class="mat-avatar avatar"
alt="{{user.name}}"/> alt="{{user.name}}"/>
<!-- / USER AVATAR --> <!-- / USER AVATAR -->
<md-icon class="s-16 status" [ngClass]="user.status" [mdMenuTriggerFor]="userStatusMenu"></md-icon> <mat-icon class="s-16 status" [ngClass]="user.status" [matMenuTriggerFor]="userStatusMenu"></mat-icon>
<!-- USER STATUS --> <!-- USER STATUS -->
<md-menu id="user-status-menu" #userStatusMenu="mdMenu"> <mat-menu id="user-status-menu" #userStatusMenu="matMenu">
<button md-menu-item (click)="setUserStatus('online')"> <button mat-menu-item (click)="setUserStatus('online')">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-16 status online"></md-icon> <mat-icon class="s-16 status online"></mat-icon>
<span>Online</span> <span>Online</span>
</div> </div>
</button> </button>
<button md-menu-item (click)="setUserStatus('away')"> <button mat-menu-item (click)="setUserStatus('away')">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-16 status away"></md-icon> <mat-icon class="s-16 status away"></mat-icon>
<span>Away</span> <span>Away</span>
</div> </div>
</button> </button>
<button md-menu-item (click)="setUserStatus('do-not-disturb')"> <button mat-menu-item (click)="setUserStatus('do-not-disturb')">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-16 status do-not-disturb"></md-icon> <mat-icon class="s-16 status do-not-disturb"></mat-icon>
<span>Do not disturb</span> <span>Do not disturb</span>
</div> </div>
</button> </button>
<button md-menu-item (click)="setUserStatus('offline')"> <button mat-menu-item (click)="setUserStatus('offline')">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-16 status offline"></md-icon> <mat-icon class="s-16 status offline"></mat-icon>
<span>Offline</span> <span>Offline</span>
</div> </div>
</button> </button>
</md-menu> </mat-menu>
<!-- / USER STATUS --> <!-- / USER STATUS -->
</div> </div>
<!-- / USER AVATAR --> <!-- / USER AVATAR -->
<div> <div>
<button md-button class="mat-icon-button" <button mat-button class="mat-icon-button"
[mdMenuTriggerFor]="userMenu" [matMenuTriggerFor]="userMenu"
aria-label="more"> aria-label="more">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<md-menu #userMenu="mdMenu"> <mat-menu #userMenu="matMenu">
<button md-menu-item (click)="changeLeftSidenavView('user')"> <button mat-menu-item (click)="changeLeftSidenavView('user')">
Profile Profile
</button> </button>
<button md-menu-item (click)="logout()"> <button mat-menu-item (click)="logout()">
Logout Logout
</button> </button>
</md-menu> </mat-menu>
</div> </div>
</div> </div>
<!-- / TOOLBAR TOP --> <!-- / TOOLBAR TOP -->
<!-- TOOLBAR BOTTOM --> <!-- TOOLBAR BOTTOM -->
<md-toolbar-row> <mat-toolbar-row>
<!-- SEARCH --> <!-- SEARCH -->
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon>search</md-icon> <mat-icon>search</mat-icon>
<input [(ngModel)]="searchText" type="text" placeholder="Search or start new chat" fxFlex> <input [(ngModel)]="searchText" type="text" placeholder="Search or start new chat" fxFlex>
@ -88,10 +88,10 @@
</div> </div>
<!-- / SEARCH --> <!-- / SEARCH -->
</md-toolbar-row> </mat-toolbar-row>
<!-- / TOOLBAR BOTTOM --> <!-- / TOOLBAR BOTTOM -->
</md-toolbar> </mat-toolbar>
<!-- / CHATS TOOLBAR --> <!-- / CHATS TOOLBAR -->
</div> </div>
@ -106,11 +106,11 @@
<!-- CHATS LIST--> <!-- CHATS LIST-->
<div class="chat-list" fxLayout="column"> <div class="chat-list" fxLayout="column">
<div md-subheader *ngIf="(user.chatList | filter: searchText).length > 0"> <div matSubheader *ngIf="(user.chatList | filter: searchText).length > 0">
Chats Chats
</div> </div>
<button md-button class="contact" <button mat-button class="contact"
*ngFor="let chat of user.chatList | filter: searchText" *ngFor="let chat of user.chatList | filter: searchText"
(click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}" (click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}"
[@animate]="{value:'*',params:{y:'100%'}}"> [@animate]="{value:'*',params:{y:'100%'}}">
@ -121,7 +121,7 @@
<img [src]="contacts |getById:chat.contactId:'avatar'" <img [src]="contacts |getById:chat.contactId:'avatar'"
class="avatar" class="avatar"
alt="{{contacts |getById:chat.contactId:'name'}}"/> alt="{{contacts |getById:chat.contactId:'name'}}"/>
<md-icon class="s-16 status" [ngClass]="contacts |getById:chat.contactId:'status'"></md-icon> <mat-icon class="s-16 status" [ngClass]="contacts |getById:chat.contactId:'status'"></mat-icon>
</div> </div>
<div fxLayout="row" fxFlex> <div fxLayout="row" fxFlex>
@ -146,19 +146,19 @@
<!-- CONTACTS LIST--> <!-- CONTACTS LIST-->
<div class="contact-list" fxLayout="column"> <div class="contact-list" fxLayout="column">
<div md-subheader *ngIf="(contacts| filter: searchText).length > 0"> <div matSubheader *ngIf="(contacts| filter: searchText).length > 0">
Contacts Contacts
</div> </div>
<button md-button class="contact" <button mat-button class="contact"
*ngFor="let contact of contacts| filter: searchText" *ngFor="let contact of contacts| filter: searchText"
(click)="getChat(contact.id)" (click)="getChat(contact.id)"
[@animate]="{value:'*',params:{y:'100%'}}"> [@animate]="{value:'*',params:{y:'100%'}}">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<div class="avatar-wrapper" fxFlex="0 1 auto"> <div class="avatar-wrapper" fxFlex="0 1 auto">
<img src="{{contact.avatar}}" class="md-avatar avatar" alt="{{contact.name}}"/> <img src="{{contact.avatar}}" class="mat-avatar avatar" alt="{{contact.name}}"/>
<md-icon class="s-16 status" [ngClass]="contact.status"></md-icon> <mat-icon class="s-16 status" [ngClass]="contact.status"></mat-icon>
</div> </div>
<div class="" fxLayout="column" fxLayoutAlign="center start"> <div class="" fxLayout="column" fxLayoutAlign="center start">

2
src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.scss
View File

@ -7,7 +7,7 @@
.sidenav-header { .sidenav-header {
md-toolbar { mat-toolbar {
border-bottom: 1px solid rgba(0, 0, 0, .08); border-bottom: 1px solid rgba(0, 0, 0, .08);
.avatar-wrapper { .avatar-wrapper {

6
src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ChatService } from '../../../chat.service'; import { ChatService } from '../../../chat.service';
import { FuseMdSidenavHelperService } from '../../../../../../../core/directives/md-sidenav-helper/md-sidenav-helper.service'; import { FuseMatSidenavHelperService } from '../../../../../../../core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
import { ObservableMedia } from '@angular/flex-layout'; import { ObservableMedia } from '@angular/flex-layout';
import { fuseAnimations } from '../../../../../../../core/animations'; import { fuseAnimations } from '../../../../../../../core/animations';
@ -20,7 +20,7 @@ export class FuseChatChatsSidenavComponent implements OnInit
constructor( constructor(
private chatService: ChatService, private chatService: ChatService,
private fuseMdSidenavService: FuseMdSidenavHelperService, private fuseMatSidenavService: FuseMatSidenavHelperService,
public media: ObservableMedia public media: ObservableMedia
) )
{ {
@ -50,7 +50,7 @@ export class FuseChatChatsSidenavComponent implements OnInit
if ( !this.media.isActive('gt-md') ) if ( !this.media.isActive('gt-md') )
{ {
this.fuseMdSidenavService.getSidenav('chat-left-sidenav').toggle(); this.fuseMatSidenavService.getSidenav('chat-left-sidenav').toggle();
} }
} }

50
src/app/main/content/apps/chat/sidenavs/left/user/user.component.html
View File

@ -2,29 +2,29 @@
<div class="sidenav-header"> <div class="sidenav-header">
<!-- USER TOOLBAR --> <!-- USER TOOLBAR -->
<md-toolbar> <mat-toolbar>
<!-- TOOLBAR TOP --> <!-- TOOLBAR TOP -->
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<button md-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back"> <button mat-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back">
<md-icon>arrow_back</md-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>
</div> </div>
<!-- / TOOLBAR TOP --> <!-- / TOOLBAR TOP -->
<!-- TOOLBAR BOTTOM --> <!-- TOOLBAR BOTTOM -->
<md-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>
</md-toolbar-row> </mat-toolbar-row>
<!-- / TOOLBAR BOTTOM --> <!-- / TOOLBAR BOTTOM -->
</md-toolbar> </mat-toolbar>
<!-- / USER TOOLBAR --> <!-- / USER TOOLBAR -->
</div> </div>
@ -32,47 +32,47 @@
<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex> <div class="sidenav-content p-16" fusePerfectScrollbar fxFlex>
<!-- USER MOOD --> <!-- USER MOOD -->
<md-card> <mat-card>
<form [formGroup]="userForm" fxLayout="column"> <form [formGroup]="userForm" fxLayout="column">
<md-input-container class="mb-24" fxFlex="0 1 auto"> <mat-form-field class="mb-24" fxFlex="0 1 auto">
<textarea mdInput placeholder="Mood" name="mood" <textarea matInput placeholder="Mood" name="mood"
formControlName="mood" rows="3"></textarea> formControlName="mood" rows="3"></textarea>
</md-input-container> </mat-form-field>
<md-radio-group formControlName="status" fxLayout="column"> <mat-radio-group formControlName="status" fxLayout="column">
<md-radio-button value="online" class="py-8"> <mat-radio-button value="online" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="status online mr-8"></md-icon> <mat-icon class="status online mr-8"></mat-icon>
<span class="mat-h4 m-0">Online</span> <span class="mat-h4 m-0">Online</span>
</div> </div>
</md-radio-button> </mat-radio-button>
<md-radio-button value="away" class="py-8"> <mat-radio-button value="away" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="status away mr-8"></md-icon> <mat-icon class="status away mr-8"></mat-icon>
<span class="mat-h4 m-0">Away</span> <span class="mat-h4 m-0">Away</span>
</div> </div>
</md-radio-button> </mat-radio-button>
<md-radio-button value="do-not-disturb" class="py-8"> <mat-radio-button value="do-not-disturb" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="status do-not-disturb mr-8"></md-icon> <mat-icon class="status do-not-disturb mr-8"></mat-icon>
<span class="mat-h4 m-0">Do not disturb</span> <span class="mat-h4 m-0">Do not disturb</span>
</div> </div>
</md-radio-button> </mat-radio-button>
<md-radio-button value="offline" class="py-8"> <mat-radio-button value="offline" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="status offline mr-8"></md-icon> <mat-icon class="status offline mr-8"></mat-icon>
<span class="mat-h4 m-0">Offline</span> <span class="mat-h4 m-0">Offline</span>
</div> </div>
</md-radio-button> </mat-radio-button>
</md-radio-group> </mat-radio-group>
</form> </form>
</md-card> </mat-card>
<!-- / USER MOOD --> <!-- / USER MOOD -->
</div> </div>

2
src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss
View File

@ -5,7 +5,7 @@
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
md-toolbar { mat-toolbar {
background-color: mat-color($accent); background-color: mat-color($accent);
color: map-get($accent, default-contrast); color: map-get($accent, default-contrast);

22
src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html
View File

@ -2,31 +2,31 @@
<div class="sidenav-header" *ngIf="contact"> <div class="sidenav-header" *ngIf="contact">
<!-- CONTACT TOOLBAR --> <!-- CONTACT TOOLBAR -->
<md-toolbar> <mat-toolbar>
<!-- TOOLBAR TOP --> <!-- TOOLBAR TOP -->
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<div>Contact Info</div> <div>Contact Info</div>
<button md-button class="mat-icon-button" fuseMdSidenavToggler="chat-right-sidenav" aria-label="close"> <button mat-button class="mat-icon-button" fuseMatSidenavToggler="chat-right-sidenav" aria-label="close">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
<!-- / TOOLBAR TOP --> <!-- / TOOLBAR TOP -->
<!-- TOOLBAR BOTTOM --> <!-- TOOLBAR BOTTOM -->
<md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center"> <mat-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
<img [src]="contact.avatar" class="avatar contact-avatar huge" alt="{{contact.name}}"/> <img [src]="contact.avatar" class="avatar contact-avatar huge" alt="{{contact.name}}"/>
<div class="contact-name my-8">{{contact.name}}</div> <div class="contact-name my-8">{{contact.name}}</div>
</md-toolbar-row> </mat-toolbar-row>
<!-- / TOOLBAR BOTTOM --> <!-- / TOOLBAR BOTTOM -->
</md-toolbar> </mat-toolbar>
<!-- / CONTACT TOOLBAR --> <!-- / CONTACT TOOLBAR -->
</div> </div>
@ -34,14 +34,14 @@
<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex *ngIf="contact"> <div class="sidenav-content p-16" fusePerfectScrollbar fxFlex *ngIf="contact">
<!-- CONTACT MOOD --> <!-- CONTACT MOOD -->
<md-card> <mat-card>
<md-input-container fxFlex> <mat-form-field fxFlex>
<textarea mdInput placeholder="Mood" name="mood" <textarea matInput placeholder="Mood" name="mood"
[value]="contact.mood" rows="3" disabled> [value]="contact.mood" rows="3" disabled>
</textarea> </textarea>
</md-input-container> </mat-form-field>
</md-card> </mat-card>
<!-- / CONTACT MOOD --> <!-- / CONTACT MOOD -->
</div> </div>

2
src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss
View File

@ -5,7 +5,7 @@
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
md-toolbar { mat-toolbar {
background-color: mat-color($accent); background-color: mat-color($accent);
color: map-get($accent, default-contrast); color: map-get($accent, default-contrast);

108
src/app/main/content/apps/contacts/contact-form/contact-form.component.html
View File

@ -1,104 +1,104 @@
<div class="dialog-content-wrapper"> <div class="dialog-content-wrapper">
<md-toolbar md-dialog-title class="mat-accent m-0"> <mat-toolbar matDialogTitle class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span> <span class="title dialog-title">{{dialogTitle}}</span>
<button md-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">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
<md-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"
[alt]="contact.name"/> [alt]="contact.name"/>
<div class="contact-name">{{contact.name}}</div> <div class="contact-name">{{contact.name}}</div>
</md-toolbar-row> </mat-toolbar-row>
</md-toolbar> </mat-toolbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar> <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form [formGroup]="contactForm"> <form [formGroup]="contactForm">
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">account_circle</md-icon> <mat-icon class="mr-12 mt-12">account_circle</mat-icon>
<md-input-container fxFlex> <mat-form-field fxFlex>
<input name="name" formControlName="name" placeholder="Name" mdInput required> <input name="name" formControlName="name" placeholder="Name" matInput required>
</md-input-container> </mat-form-field>
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12"></md-icon> <mat-icon class="mr-12 mt-12"></mat-icon>
<md-input-container fxFlex> <mat-form-field fxFlex>
<input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput> <input name="lastName" formControlName="lastName" placeholder="Lastname" matInput>
</md-input-container> </mat-form-field>
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">star</md-icon> <mat-icon class="mr-12 mt-12">star</mat-icon>
<md-input-container fxFlex> <mat-form-field fxFlex>
<input name="nickname" formControlName="nickname" mdInput placeholder="Nickname"> <input name="nickname" formControlName="nickname" matInput placeholder="Nickname">
</md-input-container> </mat-form-field>
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">phone</md-icon> <mat-icon class="mr-12 mt-12">phone</mat-icon>
<md-input-container fxFlex> <mat-form-field fxFlex>
<input formControlName="phone" mdInput placeholder="Phone number"> <input formControlName="phone" matInput placeholder="Phone number">
</md-input-container> </mat-form-field>
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">email</md-icon> <mat-icon class="mr-12 mt-12">email</mat-icon>
<md-input-container fxFlex> <mat-form-field fxFlex>
<input name="email" formControlName="email" mdInput type="email" placeholder="Email"> <input name="email" formControlName="email" matInput type="email" placeholder="Email">
</md-input-container> </mat-form-field>
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">domain</md-icon> <mat-icon class="mr-12 mt-12">domain</mat-icon>
<md-input-container fxFlex> <mat-form-field fxFlex>
<input name="company" formControlName="company" mdInput placeholder="Company"> <input name="company" formControlName="company" matInput placeholder="Company">
</md-input-container> </mat-form-field>
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">work</md-icon> <mat-icon class="mr-12 mt-12">work</mat-icon>
<md-input-container fxFlex> <mat-form-field fxFlex>
<input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title"> <input name="jobTitle" formControlName="jobTitle" matInput placeholder="Job title">
</md-input-container> </mat-form-field>
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-form-field class="mr-24" fxFlex> <mat-form-field class="mr-24" fxFlex>
<input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday"> <input matInput [matDatepicker]="birthdayDatePicker" placeholder="Birthday">
<md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="birthdayDatePicker"></mat-datepicker-toggle>
<md-datepicker #birthdayDatePicker></md-datepicker> <mat-datepicker #birthdayDatePicker></mat-datepicker>
</md-form-field> </mat-form-field>
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">home</md-icon> <mat-icon class="mr-12 mt-12">home</mat-icon>
<md-input-container fxFlex> <mat-form-field fxFlex>
<input name="address" formControlName="address" mdInput placeholder="Address"> <input name="address" formControlName="address" matInput placeholder="Address">
</md-input-container> </mat-form-field>
</div> </div>
<div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start"> <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">note</md-icon> <mat-icon class="mr-12 mt-12">note</mat-icon>
<md-input-container fxFlex> <mat-form-field fxFlex>
<textarea name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea> <textarea name="notes" formControlName="notes" placeholder="Notes" matInput type="text" max-rows="4"></textarea>
</md-input-container> </mat-form-field>
</div> </div>
</form> </form>
</div> </div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<button *ngIf="action !=='edit'" <button *ngIf="action !=='edit'"
md-raised-button mat-raised-button
(click)="dialogRef.close(contactForm)" (click)="dialogRef.close(contactForm)"
class="save-button mat-accent" class="save-button mat-accent"
[disabled]="contactForm.invalid" [disabled]="contactForm.invalid"
@ -107,7 +107,7 @@
</button> </button>
<button *ngIf="action ==='edit'" <button *ngIf="action ==='edit'"
md-raised-button mat-raised-button
(click)="dialogRef.close(['save',contactForm])" (click)="dialogRef.close(['save',contactForm])"
class="save-button mat-accent" class="save-button mat-accent"
[disabled]="contactForm.invalid" [disabled]="contactForm.invalid"
@ -116,12 +116,12 @@
</button> </button>
<button *ngIf="action ==='edit'" <button *ngIf="action ==='edit'"
md-button mat-button
class="mat-icon-button" class="mat-icon-button"
(click)="dialogRef.close(['delete',contactForm])" (click)="dialogRef.close(['delete',contactForm])"
aria-label="Delete" aria-label="Delete"
md-tooltip="Delete"> matTooltip="Delete">
<md-icon>delete</md-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>

6
src/app/main/content/apps/contacts/contact-form/contact-form.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { CalendarEvent } from 'angular-calendar'; import { CalendarEvent } from 'angular-calendar';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
import 'rxjs/Rx'; import 'rxjs/Rx';
@ -21,8 +21,8 @@ export class FuseContactsContactFormDialogComponent implements OnInit
contact: Contact; contact: Contact;
constructor( constructor(
public dialogRef: MdDialogRef<FuseContactsContactFormDialogComponent>, public dialogRef: MatDialogRef<FuseContactsContactFormDialogComponent>,
@Inject(MD_DIALOG_DATA) private data: any, @Inject(MAT_DIALOG_DATA) private data: any,
private formBuilder: FormBuilder private formBuilder: FormBuilder
) )
{ {

84
src/app/main/content/apps/contacts/contact-list/contact-list.component.html
View File

@ -1,106 +1,106 @@
<md-table #table [dataSource]="dataSource" <mat-table #table [dataSource]="dataSource"
[@animateStagger]="{value:'50'}"> [@animateStagger]="{value:'50'}">
<!-- Checkbox Column --> <!-- Checkbox Column -->
<ng-container cdkColumnDef="checkbox"> <ng-container cdkColumnDef="checkbox">
<md-header-cell *cdkHeaderCellDef></md-header-cell> <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
<md-cell *cdkCellDef="let contact"> <mat-cell *cdkCellDef="let contact">
<md-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)" <mat-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
(click)="$event.stopPropagation()"> (click)="$event.stopPropagation()">
</md-checkbox> </mat-checkbox>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Avatar Column --> <!-- Avatar Column -->
<ng-container cdkColumnDef="avatar"> <ng-container cdkColumnDef="avatar">
<md-header-cell *cdkHeaderCellDef></md-header-cell> <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
<md-cell *cdkCellDef="let contact"> <mat-cell *cdkCellDef="let contact">
<img class="avatar" *ngIf="contact.avatar" [alt]="contact.name" <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
[src]="contact.avatar"/> [src]="contact.avatar"/>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="name"> <ng-container cdkColumnDef="name">
<md-header-cell *cdkHeaderCellDef>Name</md-header-cell> <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
<md-cell *cdkCellDef="let contact"> <mat-cell *cdkCellDef="let contact">
<p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p> <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Email Column --> <!-- Email Column -->
<ng-container cdkColumnDef="email"> <ng-container cdkColumnDef="email">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
<p class="email text-truncate"> <p class="email text-truncate">
{{contact.email}} {{contact.email}}
</p> </p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Phone Column --> <!-- Phone Column -->
<ng-container cdkColumnDef="phone"> <ng-container cdkColumnDef="phone">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
<p class="phone text-truncate"> <p class="phone text-truncate">
{{contact.phone}} {{contact.phone}}
</p> </p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Job Title Column --> <!-- Job Title Column -->
<ng-container cdkColumnDef="jobTitle"> <ng-container cdkColumnDef="jobTitle">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Job title</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
<p class="job-title text-truncate"> <p class="job-title text-truncate">
{{contact.jobTitle}} {{contact.jobTitle}}
</p> </p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Company Column --> <!-- Company Column -->
<ng-container cdkColumnDef="company"> <ng-container cdkColumnDef="company">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Company</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
<p class="company text-truncate"> <p class="company text-truncate">
{{contact.company}} {{contact.company}}
</p> </p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Buttons Column --> <!-- Buttons Column -->
<ng-container cdkColumnDef="buttons"> <ng-container cdkColumnDef="buttons">
<md-header-cell *cdkHeaderCellDef></md-header-cell> <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
<md-cell *cdkCellDef="let contact"> <mat-cell *cdkCellDef="let contact">
<div fxFlex="row" fxLayoutAlign="end center"> <div fxFlex="row" fxLayoutAlign="end center">
<button md-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star"> <button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
<md-icon *ngIf="user.starred.includes(contact.id)">star</md-icon> <mat-icon *ngIf="user.starred.includes(contact.id)">star</mat-icon>
<md-icon *ngIf="!user.starred.includes(contact.id)">star_outline</md-icon> <mat-icon *ngIf="!user.starred.includes(contact.id)">star_outline</mat-icon>
</button> </button>
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="More" <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More"
(click)="$event.stopPropagation();"> (click)="$event.stopPropagation();">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<md-menu #moreMenu="mdMenu"> <mat-menu #moreMenu="matMenu">
<button md-menu-item aria-label="remove" (click)="deleteContact(contact)"> <button mat-menu-item aria-label="remove" (click)="deleteContact(contact)">
<md-icon>delete</md-icon> <mat-icon>delete</mat-icon>
<span>Remove</span> <span>Remove</span>
</button> </button>
</md-menu> </mat-menu>
</div> </div>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
<md-row *cdkRowDef="let contact; columns: displayedColumns;" <mat-row *cdkRowDef="let contact; columns: displayedColumns;"
class="contact" class="contact"
(click)="editContact(contact)" (click)="editContact(contact)"
[ngClass]="{'md-light-blue-50-bg':checkboxes[contact.id]}" [ngClass]="{'mat-light-blue-50-bg':checkboxes[contact.id]}"
md-ripple matRipple
[@animate]="{value:'*',params:{y:'100%'}}"> [@animate]="{value:'*',params:{y:'100%'}}">
</md-row> </mat-row>
</md-table> </mat-table>

6
src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
View File

@ -2,7 +2,7 @@ import { Component, 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';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MatDialog, MatDialogRef } from '@angular/material';
import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component'; import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { DataSource } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections';
@ -27,11 +27,11 @@ export class FuseContactsContactListComponent implements OnInit
dialogRef: any; dialogRef: any;
confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>; confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
constructor( constructor(
private contactsService: ContactsService, private contactsService: ContactsService,
public dialog: MdDialog public dialog: MatDialog
) )
{ {
this.contactsService.onContactsChanged.subscribe(contacts => { this.contactsService.onContactsChanged.subscribe(contacts => {

36
src/app/main/content/apps/contacts/contacts.component.html
View File

@ -1,20 +1,20 @@
<div id="contacts" class="page-layout simple left-sidenav inner-sidenav"> <div id="contacts" class="page-layout simple left-sidenav inner-sidenav">
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start" <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"> fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
<!-- APP TITLE --> <!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button sidenav-toggle mr-12" <button mat-button class="mat-icon-button sidenav-toggle mr-12"
fuseMdSidenavToggler="contacts-main-sidenav" fuseMatSidenavToggler="contacts-main-sidenav"
fxHide.gt-md> fxHide.gt-md>
<md-icon>menu</md-icon> <mat-icon>menu</mat-icon>
</button> </button>
<div class="logo" fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box</md-icon> <mat-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box</mat-icon>
<span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Contacts</span> <span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Contacts</span>
</div> </div>
@ -24,11 +24,11 @@
<!-- SEARCH --> <!-- SEARCH -->
<div class="search-input-wrapper mt-16 ml-8 m-sm-0" fxLayout="row" fxLayoutAlign="start center"> <div class="search-input-wrapper mt-16 ml-8 m-sm-0" fxLayout="row" fxLayoutAlign="start center">
<label for="search" class="mr-8"> <label for="search" class="mr-8">
<md-icon>search</md-icon> <mat-icon>search</mat-icon>
</label> </label>
<md-input-container md-no-float class="m-0" floatPlaceholder="never"> <mat-form-field mat-no-float class="m-0" floatPlaceholder="never">
<input mdInput [formControl]="searchInput" id="search" placeholder="Search for anything"> <input matInput [formControl]="searchInput" id="search" placeholder="Search for anything">
</md-input-container> </mat-form-field>
</div> </div>
<!-- / SEARCH --> <!-- / SEARCH -->
@ -36,25 +36,25 @@
<!-- / HEADER --> <!-- / HEADER -->
<!-- SELECTED BAR --> <!-- SELECTED BAR -->
<fuse-selected-bar class="md-accent-600-bg" *ngIf="hasSelectedContacts" [@slideInTop]></fuse-selected-bar> <fuse-selected-bar class="mat-accent-600-bg" *ngIf="hasSelectedContacts" [@slideInTop]></fuse-selected-bar>
<!-- / SELECTED BAR --> <!-- / SELECTED BAR -->
<md-sidenav-container> <mat-sidenav-container>
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side" <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
fuseMdSidenavHelper="contacts-main-sidenav" md-is-locked-open="gt-sm"> fuseMatSidenavHelper="contacts-main-sidenav" mat-is-locked-open="gt-sm">
<fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav> <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>
</md-sidenav> </mat-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar> <div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
<!-- CONTENT --> <!-- CONTENT -->
<div class="content md-white-bg mat-elevation-z4"> <div class="content mat-white-bg mat-elevation-z4">
<fuse-contacts-contact-list></fuse-contacts-contact-list> <fuse-contacts-contact-list></fuse-contacts-contact-list>
@ -64,13 +64,13 @@
</div> </div>
<!-- / CENTER --> <!-- / CENTER -->
</md-sidenav-container> </mat-sidenav-container>
</div> </div>
<!-- ADD CONTACT BUTTON --> <!-- ADD CONTACT BUTTON -->
<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact" <button mat-fab class="mat-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}"> *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
<md-icon>person_add</md-icon> <mat-icon>person_add</mat-icon>
</button> </button>
<!-- / ADD CONTACT BUTTON --> <!-- / ADD CONTACT BUTTON -->

1
src/app/main/content/apps/contacts/contacts.component.scss
View File

@ -4,6 +4,7 @@
overflow: hidden; overflow: hidden;
} }
} }
#add-contact-button { #add-contact-button {
position: absolute; position: absolute;
bottom: 12px; bottom: 12px;

4
src/app/main/content/apps/contacts/contacts.component.ts
View File

@ -3,7 +3,7 @@ import { ContactsService } from './contacts.service';
import { fuseAnimations } from '../../../../core/animations'; import { fuseAnimations } from '../../../../core/animations';
import { FormControl, FormGroup } from '@angular/forms'; import { FormControl, FormGroup } from '@angular/forms';
import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component'; import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
import { MdDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
@Component({ @Component({
selector : 'fuse-contacts', selector : 'fuse-contacts',
@ -20,7 +20,7 @@ export class FuseContactsComponent implements OnInit
constructor( constructor(
private contactsService: ContactsService, private contactsService: ContactsService,
public dialog: MdDialog public dialog: MatDialog
) )
{ {
this.searchInput = new FormControl(''); this.searchInput = new FormControl('');

20
src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
View File

@ -1,8 +1,8 @@
<div fxFlex fxLayout="row" fxLayoutAlign="start center" class="p-24"> <div fxFlex fxLayout="row" fxLayoutAlign="start center" class="p-24">
<div class="close-button-wrapper" fxFlex="0 1 auto" fxFlex.gt-sm="220px" (click)="deselectAll()"> <div class="close-button-wrapper" fxFlex="0 1 auto" fxFlex.gt-sm="220px" (click)="deselectAll()">
<button class="p-8" md-button fxLayout="row" fxLayoutAlign="start center"> <button class="p-8" mat-button fxLayout="row" fxLayoutAlign="start center">
<md-icon class="mr-8">arrow_back</md-icon> <mat-icon class="mr-8">arrow_back</mat-icon>
<span class="text-uppercase">Back</span> <span class="text-uppercase">Back</span>
</button> </button>
</div> </div>
@ -15,19 +15,19 @@
<span>selected</span> <span>selected</span>
</span> </span>
<button md-icon-button [mdMenuTriggerFor]="selectMenu"> <button mat-icon-button [matMenuTriggerFor]="selectMenu">
<md-icon>arrow_drop_down</md-icon> <mat-icon>arrow_drop_down</mat-icon>
</button> </button>
<md-menu #selectMenu="mdMenu"> <mat-menu #selectMenu="matMenu">
<button md-menu-item (click)="selectAll()">Select all</button> <button mat-menu-item (click)="selectAll()">Select all</button>
<button md-menu-item (click)="deselectAll()">Deselect all</button> <button mat-menu-item (click)="deselectAll()">Deselect all</button>
</md-menu> </mat-menu>
</div> </div>
<div class="multi-select-actions"> <div class="multi-select-actions">
<button md-icon-button (click)="deleteSelectedContacts()" aria-label="delete selected"> <button mat-icon-button (click)="deleteSelectedContacts()" aria-label="delete selected">
<md-icon>delete</md-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>

6
src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ContactsService } from '../contacts.service'; import { ContactsService } from '../contacts.service';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MatDialog, MatDialogRef } from '@angular/material';
import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component'; import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
@Component({ @Component({
@ -13,11 +13,11 @@ export class FuseContactsSelectedBarComponent implements OnInit
selectedContacts: string[]; selectedContacts: string[];
hasSelectedContacts: boolean; hasSelectedContacts: boolean;
isIndeterminate: boolean; isIndeterminate: boolean;
confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>; confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
constructor( constructor(
private contactsService: ContactsService, private contactsService: ContactsService,
public dialog: MdDialog public dialog: MatDialog
) )
{ {
this.contactsService.onSelectedContactsChanged this.contactsService.onSelectedContactsChanged

8
src/app/main/content/apps/contacts/sidenavs/main/main.component.html
View File

@ -1,6 +1,6 @@
<div class="sidenav-content"> <div class="sidenav-content">
<div class="card md-white-bg"> <div class="card mat-white-bg">
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div class="header p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header p-24" fxLayout="row" fxLayoutAlign="start center">
@ -18,19 +18,19 @@
<div class="nav"> <div class="nav">
<div class="nav-item" aria-label="inbox"> <div class="nav-item" aria-label="inbox">
<a class="nav-link" md-ripple (click)="changeFilter('all')" [ngClass]="{'active':filterBy ==='all'}"> <a class="nav-link" matRipple (click)="changeFilter('all')" [ngClass]="{'active':filterBy ==='all'}">
<span class="title">All Contacts</span> <span class="title">All Contacts</span>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="frequently contacted" (click)="changeFilter('frequent')"> <div class="nav-item" aria-label="frequently contacted" (click)="changeFilter('frequent')">
<a class="nav-link" md-ripple [ngClass]="{'active':filterBy ==='frequent'}"> <a class="nav-link" matRipple [ngClass]="{'active':filterBy ==='frequent'}">
<div class="title">Freequently contacted</div> <div class="title">Freequently contacted</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred" (click)="changeFilter('starred')"> <div class="nav-item" aria-label="starred" (click)="changeFilter('starred')">
<a class="nav-link" md-ripple [ngClass]="{'active':filterBy ==='starred'}"> <a class="nav-link" matRipple [ngClass]="{'active':filterBy ==='starred'}">
<div class="title">Starred Contacts</div> <div class="title">Starred Contacts</div>
</a> </a>
</div> </div>

228
src/app/main/content/apps/dashboards/project/project.component.html
View File

@ -1,19 +1,19 @@
<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row"> <div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row">
<md-sidenav-container> <mat-sidenav-container>
<!-- CENTER --> <!-- CENTER -->
<div class="center" fxFlex fusePerfectScrollbar> <div class="center" fxFlex fusePerfectScrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between"> <div class="header mat-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between">
<div fxLayout="row" fxLayoutAlign="space-between start"> <div fxLayout="row" fxLayoutAlign="space-between start">
<span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!</span> <span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!</span>
<button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md> <button mat-icon-button fuseMatSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
<md-icon>menu</md-icon> <mat-icon>menu</mat-icon>
</button> </button>
</div> </div>
@ -21,15 +21,15 @@
<div class="selected-project">{{selectedProject.name}}</div> <div class="selected-project">{{selectedProject.name}}</div>
<button md-icon-button class="project-selector" [mdMenuTriggerFor]="projectsMenu" aria-label="Select project"> <button mat-icon-button class="project-selector" [matMenuTriggerFor]="projectsMenu" aria-label="Select project">
<md-icon>more_horiz</md-icon> <mat-icon>more_horiz</mat-icon>
</button> </button>
<md-menu #projectsMenu="mdMenu"> <mat-menu #projectsMenu="matMenu">
<button md-menu-item *ngFor="let project of projects" (click)="selectedProject = project"> <button mat-menu-item *ngFor="let project of projects" (click)="selectedProject = project">
<span>{{project.name}}</span> <span>{{project.name}}</span>
</button> </button>
</md-menu> </mat-menu>
</div> </div>
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->
@ -37,9 +37,9 @@
<!-- CONTENT --> <!-- CONTENT -->
<div class="content"> <div class="content">
<md-tab-group dynamicHeight> <mat-tab-group dynamicHeight>
<md-tab label="Home"> <mat-tab label="Home">
<div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
@ -47,18 +47,18 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<md-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange" <mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
aria-label="Change range"> aria-label="Change range">
<md-option *ngFor="let range of widgets.widget1.ranges | keys" <mat-option *ngFor="let range of widgets.widget1.ranges | keys"
[value]="range.key"> [value]="range.key">
{{range.value}} {{range.value}}
</md-option> </mat-option>
</md-select> </mat-select>
<button md-icon-button fuseWidgetToggle aria-label="more"> <button mat-icon-button fuseWidgetToggle aria-label="more">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -78,10 +78,10 @@
<!-- / Front --> <!-- / Front -->
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="Flip widget"> aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <mat-icon class="s-16">close</mat-icon>
</button> </button>
<div> <div>
@ -97,12 +97,12 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget2.title}}</div> <div class="h3">{{widgets.widget2.title}}</div>
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more"> <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -121,10 +121,10 @@
<!-- / Front --> <!-- / Front -->
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="Flip widget"> aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <mat-icon class="s-16">close</mat-icon>
</button> </button>
<div> <div>
@ -140,12 +140,12 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget3.title}}</div> <div class="h3">{{widgets.widget3.title}}</div>
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more"> <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -164,10 +164,10 @@
<!-- / Front --> <!-- / Front -->
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="Flip widget"> aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <mat-icon class="s-16">close</mat-icon>
</button> </button>
<div> <div>
@ -183,12 +183,12 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget4.title}}</div> <div class="h3">{{widgets.widget4.title}}</div>
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more"> <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -206,10 +206,10 @@
<!-- / Front --> <!-- / Front -->
<!-- Back --> <!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2"> <div class="fuse-widget-back p-16 pt-32 mat-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" <button mat-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
aria-label="Flip widget"> aria-label="Flip widget">
<md-icon class="s-16">close</md-icon> <mat-icon class="s-16">close</mat-icon>
</button> </button>
<div> <div>
@ -226,14 +226,14 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutWrap> <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutWrap>
<div fxFlex class="py-8 h3">{{widgets.widget5.title}}</div> <div fxFlex class="py-8 h3">{{widgets.widget5.title}}</div>
<div fxFlex="0 1 auto" class="py-8" fxLayout="row"> <div fxFlex="0 1 auto" class="py-8" fxLayout="row">
<button md-button class="px-16" <button mat-button class="px-16"
*ngFor="let range of widgets.widget5.ranges | keys" *ngFor="let range of widgets.widget5.ranges | keys"
(click)="widget5.currentRange = range.key" (click)="widget5.currentRange = range.key"
[disabled]="widget5.currentRange == range.key"> [disabled]="widget5.currentRange == range.key">
@ -302,17 +302,17 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget6.title}}</div> <div class="h3">{{widgets.widget6.title}}</div>
<div class="py-16"> <div class="py-16">
<md-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range"> <mat-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
<md-option *ngFor="let range of widgets.widget6.ranges | keys" <mat-option *ngFor="let range of widgets.widget6.ranges | keys"
[value]="range.key"> [value]="range.key">
{{range.value}} {{range.value}}
</md-option> </mat-option>
</md-select> </mat-select>
</div> </div>
</div> </div>
@ -352,19 +352,19 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget7.title}}</div> <div class="h3">{{widgets.widget7.title}}</div>
<div class="py-16"> <div class="py-16">
<md-select class="simplified" [(ngModel)]="widget7.currentRange" <mat-select class="simplified" [(ngModel)]="widget7.currentRange"
aria-label="Change range"> aria-label="Change range">
<md-option *ngFor="let range of widgets.widget7.ranges | keys" <mat-option *ngFor="let range of widgets.widget7.ranges | keys"
[value]="range.key"> [value]="range.key">
{{range.value}} {{range.value}}
</md-option> </mat-option>
</md-select> </mat-select>
</div> </div>
</div> </div>
@ -378,8 +378,8 @@
</div> </div>
</div> </div>
<button md-icon-button aria-label="More information"> <button mat-icon-button aria-label="More information">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -393,9 +393,9 @@
<!-- / WIDGET GROUP --> <!-- / WIDGET GROUP -->
</md-tab> </mat-tab>
<md-tab label="Budget Summary"> <mat-tab label="Budget Summary">
<!-- WIDGET GROUP --> <!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
@ -404,12 +404,12 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="h3 p-16"> <div class="h3 p-16">
{{widgets.widget8.title}} {{widgets.widget8.title}}
</div> </div>
<md-divider></md-divider> <mat-divider></mat-divider>
<div class="h-400"> <div class="h-400">
<ngx-charts-pie-chart <ngx-charts-pie-chart
@ -435,17 +435,17 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget9.title}}</div> <div class="h3">{{widgets.widget9.title}}</div>
<div class="py-16"> <div class="py-16">
<md-select [(ngModel)]="widget9.currentRange" aria-label="Change range"> <mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
<md-option *ngFor="let range of widgets.widget9.ranges | keys" <mat-option *ngFor="let range of widgets.widget9.ranges | keys"
[value]="range.key"> [value]="range.key">
{{range.value}} {{range.value}}
</md-option> </mat-option>
</md-select> </mat-select>
</div> </div>
</div> </div>
@ -549,7 +549,7 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="simple-table-container" ms-responsive-table> <div class="simple-table-container" ms-responsive-table>
<div class=" table-title"> <div class=" table-title">
@ -572,7 +572,7 @@
<span class="p-4" [class]="cell.classes"> <span class="p-4" [class]="cell.classes">
{{cell.value}} {{cell.value}}
</span> </span>
<md-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</md-icon> <mat-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</mat-icon>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -588,9 +588,9 @@
</div> </div>
<!-- / WIDGET GROUP --> <!-- / WIDGET GROUP -->
</md-tab> </mat-tab>
<md-tab label="Team Members"> <mat-tab label="Team Members">
<!-- WIDGET GROUP --> <!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">
@ -599,7 +599,7 @@
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="p-24 mb-8 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="p-24 mb-8 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h2">{{widgets.widget11.title}}</div> <div class="h2">{{widgets.widget11.title}}</div>
@ -608,70 +608,70 @@
</div> </div>
</div> </div>
<md-table #table [dataSource]="widget11.dataSource"> <mat-table #table [dataSource]="widget11.dataSource">
<!-- Avatar Column --> <!-- Avatar Column -->
<ng-container cdkColumnDef="avatar"> <ng-container cdkColumnDef="avatar">
<md-header-cell fxFlex="64px" *cdkHeaderCellDef></md-header-cell> <mat-header-cell fxFlex="64px" *cdkHeaderCellDef></mat-header-cell>
<md-cell fxFlex="64px" *cdkCellDef="let contact"> <mat-cell fxFlex="64px" *cdkCellDef="let contact">
<img class="avatar" *ngIf="contact.avatar" [alt]="contact.name" <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
[src]="contact.avatar"/> [src]="contact.avatar"/>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="name"> <ng-container cdkColumnDef="name">
<md-header-cell *cdkHeaderCellDef>Name</md-header-cell> <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
<md-cell *cdkCellDef="let contact"> <mat-cell *cdkCellDef="let contact">
<p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p> <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Position Column --> <!-- Position Column -->
<ng-container cdkColumnDef="position"> <ng-container cdkColumnDef="position">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position</mat-header-cell>
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
<p class="position text-truncate"> <p class="position text-truncate">
{{contact.position}} {{contact.position}}
</p> </p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Office Column --> <!-- Office Column -->
<ng-container cdkColumnDef="office"> <ng-container cdkColumnDef="office">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office</mat-header-cell>
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
<p class="office text-truncate"> <p class="office text-truncate">
{{contact.office}} {{contact.office}}
</p> </p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Email Column --> <!-- Email Column -->
<ng-container cdkColumnDef="email"> <ng-container cdkColumnDef="email">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
<p class="email text-truncate"> <p class="email text-truncate">
{{contact.email}} {{contact.email}}
</p> </p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Phone Column --> <!-- Phone Column -->
<ng-container cdkColumnDef="phone"> <ng-container cdkColumnDef="phone">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
<md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md> <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
<p class="phone text-truncate"> <p class="phone text-truncate">
{{contact.phone}} {{contact.phone}}
</p> </p>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<md-header-row *cdkHeaderRowDef="widgets.widget11.table.columns"></md-header-row> <mat-header-row *cdkHeaderRowDef="widgets.widget11.table.columns"></mat-header-row>
<md-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;"> <mat-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;">
</md-row> </mat-row>
</md-table> </mat-table>
</div> </div>
<!-- / Front --> <!-- / Front -->
@ -681,8 +681,8 @@
</div> </div>
<!-- / WIDGET GROUP --> <!-- / WIDGET GROUP -->
</md-tab> </mat-tab>
</md-tab-group> </mat-tab-group>
</div> </div>
<!-- / CONTENT --> <!-- / CONTENT -->
@ -691,7 +691,7 @@
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" opened="true" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md"> <mat-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" opened="true" fuseMatSidenavHelper="dashboards-right-sidenav" mat-is-locked-open="gt-md">
<div class="sidenav-content" fusePerfectScrollbar> <div class="sidenav-content" fusePerfectScrollbar>
@ -709,15 +709,15 @@
<div class="h3">{{dateNow | date: 'EEEE, h:m:ss'}}</div> <div class="h3">{{dateNow | date: 'EEEE, h:m:ss'}}</div>
<div> <div>
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more"> <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<md-menu #moreMenu="mdMenu"> <mat-menu #moreMenu="matMenu">
<button md-menu-item aria-label="Flip widget"> <button mat-menu-item aria-label="Flip widget">
Details Details
</button> </button>
</md-menu> </mat-menu>
</div> </div>
</div> </div>
@ -735,7 +735,7 @@
</div> </div>
</div> </div>
<md-divider></md-divider> <mat-divider></mat-divider>
</div> </div>
<!-- / Front --> <!-- / Front -->
@ -751,28 +751,28 @@
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h4" fxLayout="row" fxLayoutAlign="start center"> <div class="h4" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="mr-8">place</md-icon> <mat-icon class="mr-8">place</mat-icon>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}} {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
</div> </div>
<div> <div>
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more"> <button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<md-menu #moreMenu="mdMenu"> <mat-menu #moreMenu="matMenu">
<button md-menu-item aria-label="Flip widget"> <button mat-menu-item aria-label="Flip widget">
Details Details
</button> </button>
</md-menu> </mat-menu>
</div> </div>
</div> </div>
<div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center"> <div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
<div fxLayout="row" fxLayoutAlign="center center"> <div fxLayout="row" fxLayoutAlign="center center">
<md-icon fontSet="meteocons" [fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon" <mat-icon fontSet="meteocons" [fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
class="icon s-40 mr-16"></md-icon> class="icon s-40 mr-16"></mat-icon>
<span class="mat-display-2 m-0 font-weight-300 secondary-text"> <span class="mat-display-2 m-0 font-weight-300 secondary-text">
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}} {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
</span> </span>
@ -783,7 +783,7 @@
<div class="grey-300-bg p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="grey-300-bg p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" fontIcon="icon-windy" class="mr-8 s-16"></md-icon> <mat-icon fontSet="meteocons" fontIcon="icon-windy" class="mr-8 s-16"></mat-icon>
<span> <span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}} {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
</span> </span>
@ -791,12 +791,12 @@
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></md-icon> <mat-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></mat-icon>
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}</span> <span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}</span>
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></md-icon> <mat-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></mat-icon>
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}</span> <span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}</span>
</div> </div>
</div> </div>
@ -806,7 +806,7 @@
*ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days"> *ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
<span class="h4">{{day.name}}</span> <span class="h4">{{day.name}}</span>
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></md-icon> <mat-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></mat-icon>
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span> <span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
<span class="h2 font-weight-300 secondary-text text-super">&deg;</span> <span class="h2 font-weight-300 secondary-text text-super">&deg;</span>
<span class="h2 font-weight-300 secondary-text">{{widgets.weatherWidget.tempUnit}}</span> <span class="h2 font-weight-300 secondary-text">{{widgets.weatherWidget.tempUnit}}</span>
@ -814,7 +814,7 @@
</div> </div>
</div> </div>
<md-divider></md-divider> <mat-divider></mat-divider>
</div> </div>
<!-- / Front --> <!-- / Front -->
@ -826,9 +826,9 @@
<!-- / WIDGET GROUP --> <!-- / WIDGET GROUP -->
</div> </div>
</md-sidenav> </mat-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->
</md-sidenav-container> </mat-sidenav-container>
</div> </div>

6
src/app/main/content/apps/dashboards/project/project.component.scss
View File

@ -1,6 +1,6 @@
#dashboard-project { #dashboard-project {
md-sidenav-container { mat-sidenav-container {
.center { .center {
@ -23,7 +23,7 @@
border-radius: 0; border-radius: 0;
background: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.12);
md-icon { mat-icon {
color: #FFFFFF; color: #FFFFFF;
} }
} }
@ -32,7 +32,7 @@
> .content { > .content {
flex: 1; flex: 1;
md-tab-group { mat-tab-group {
height: 100%; height: 100%;
.mat-tab-body-wrapper { .mat-tab-body-wrapper {

54
src/app/main/content/apps/file-manager/file-list/file-list.component.html
View File

@ -1,60 +1,60 @@
<md-table #table [dataSource]="dataSource" *fuseIfOnDom [@animateStagger]="{value:'50'}"> <mat-table #table [dataSource]="dataSource" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- Type Column --> <!-- Type Column -->
<ng-container cdkColumnDef="icon"> <ng-container cdkColumnDef="icon">
<md-header-cell *cdkHeaderCellDef fxFlex="64px"></md-header-cell> <mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell>
<md-cell *cdkCellDef="let row" fxFlex="64px"> <mat-cell *cdkCellDef="let row" fxFlex="64px">
<md-icon class="type-icon" [class]="row.type"></md-icon> <mat-icon class="type-icon" [class]="row.type"></mat-icon>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="name"> <ng-container cdkColumnDef="name">
<md-header-cell *cdkHeaderCellDef>Name</md-header-cell> <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
<md-cell *cdkCellDef="let row"> {{row.name}}</md-cell> <mat-cell *cdkCellDef="let row"> {{row.name}}</mat-cell>
</ng-container> </ng-container>
<!-- Type Column --> <!-- Type Column -->
<ng-container cdkColumnDef="type"> <ng-container cdkColumnDef="type">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
<md-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</md-cell> <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
</ng-container> </ng-container>
<!-- Owner Column --> <!-- Owner Column -->
<ng-container cdkColumnDef="owner"> <ng-container cdkColumnDef="owner">
<md-header-cell *cdkHeaderCellDef fxHide.xs>Owner</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide.xs>Owner</mat-header-cell>
<md-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</md-cell> <mat-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
</ng-container> </ng-container>
<!-- Size Column --> <!-- Size Column -->
<ng-container cdkColumnDef="size"> <ng-container cdkColumnDef="size">
<md-header-cell *cdkHeaderCellDef fxHide.xs>Size</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide.xs>Size</mat-header-cell>
<md-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</md-cell> <mat-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
</ng-container> </ng-container>
<!-- Modified Column --> <!-- Modified Column -->
<ng-container cdkColumnDef="modified"> <ng-container cdkColumnDef="modified">
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</md-header-cell> <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
<md-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</md-cell> <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
</ng-container> </ng-container>
<!-- Detail Button Column --> <!-- Detail Button Column -->
<ng-container cdkColumnDef="detail-button"> <ng-container cdkColumnDef="detail-button">
<md-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></md-header-cell> <mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
<md-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md> <mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
<button md-icon-button class="sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-right-sidenav"> fuseMatSidenavToggler="file-manager-right-sidenav">
<md-icon>info</md-icon> <mat-icon>info</mat-icon>
</button> </button>
</md-cell> </mat-cell>
</ng-container> </ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;" <mat-row *cdkRowDef="let row; columns: displayedColumns;"
(click)="onSelect(row)" (click)="onSelect(row)"
[ngClass]="{'md-light-blue-50-bg':row == selected}" [ngClass]="{'mat-light-blue-50-bg':row == selected}"
md-ripple matRipple
[@animate]="{value:'*',params:{y:'100%'}}" [@animate]="{value:'*',params:{y:'100%'}}"
> >
</md-row> </mat-row>
</md-table> </mat-table>

36
src/app/main/content/apps/file-manager/file-manager.component.html
View File

@ -1,33 +1,33 @@
<div id="file-manager" class="page-layout simple right-sidenav" fusePerfectScrollbar> <div id="file-manager" class="page-layout simple right-sidenav" fusePerfectScrollbar>
<md-sidenav-container> <mat-sidenav-container>
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over" <mat-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
fuseMdSidenavHelper="file-manager-left-sidenav"> fuseMatSidenavHelper="file-manager-left-sidenav">
<fuse-file-manager-main-sidenav></fuse-file-manager-main-sidenav> <fuse-file-manager-main-sidenav></fuse-file-manager-main-sidenav>
</md-sidenav> </mat-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center" fxFlex> <div class="center" fxFlex>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start"> <div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<!-- TOOLBAR --> <!-- TOOLBAR -->
<div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start"> <div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
<div class="left-side" fxLayout="row"> <div class="left-side" fxLayout="row">
<button md-icon-button class="sidenav-toggle" <button mat-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-left-sidenav"> fuseMatSidenavToggler="file-manager-left-sidenav">
<md-icon>menu</md-icon> <mat-icon>menu</mat-icon>
</button> </button>
</div> </div>
<div class="right-side" fxLayout="row"> <div class="right-side" fxLayout="row">
<button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search"> <button mat-button class="mat-icon-button" aria-label="Search" matTooltip="Search">
<md-icon>search</md-icon> <mat-icon>search</mat-icon>
</button> </button>
</div> </div>
</div> </div>
@ -38,7 +38,7 @@
*fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}"> *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
<div *ngFor="let path of pathArr; last as isLast" fxLayout="row" fxLayoutAlign="start center"> <div *ngFor="let path of pathArr; last as isLast" fxLayout="row" fxLayoutAlign="start center">
<span>{{path}}</span> <span>{{path}}</span>
<md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon> <mat-icon *ngIf="!isLast" class="separator">chevron_right</mat-icon>
</div> </div>
</div> </div>
<!-- / BREADCRUMB --> <!-- / BREADCRUMB -->
@ -46,12 +46,12 @@
<!-- ADD FILE BUTTON --> <!-- ADD FILE BUTTON -->
<div class="file-uploader"> <div class="file-uploader">
<input hidden type="file" #fileInput/> <input hidden type="file" #fileInput/>
<button md-fab <button mat-fab
class="add-file-button mat-warn" class="add-file-button mat-warn"
(click)="fileInput.click()" (click)="fileInput.click()"
aria-label="Add file" aria-label="Add file"
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}"> *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}">
<md-icon>add</md-icon> <mat-icon>add</mat-icon>
</button> </button>
</div> </div>
<!-- / ADD FILE BUTTON --> <!-- / ADD FILE BUTTON -->
@ -60,7 +60,7 @@
<!-- / HEADER --> <!-- / HEADER -->
<!-- CONTENT --> <!-- CONTENT -->
<div class="content md-white-bg" fusePerfectScrollbar> <div class="content mat-white-bg" fusePerfectScrollbar>
<fuse-file-list></fuse-file-list> <fuse-file-list></fuse-file-list>
</div> </div>
<!-- / CONTENT --> <!-- / CONTENT -->
@ -69,11 +69,11 @@
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav right-sidenav mat-sidenav-opened" align="end" opened="true" mode="side" <mat-sidenav class="sidenav right-sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMdSidenavHelper="file-manager-right-sidenav" md-is-locked-open="gt-md"> fuseMatSidenavHelper="file-manager-right-sidenav" mat-is-locked-open="gt-md">
<fuse-file-manager-details-sidenav></fuse-file-manager-details-sidenav> <fuse-file-manager-details-sidenav></fuse-file-manager-details-sidenav>
</md-sidenav> </mat-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->
</md-sidenav-container> </mat-sidenav-container>
</div> </div>

2
src/app/main/content/apps/file-manager/file-manager.component.scss
View File

@ -2,7 +2,7 @@
#file-manager { #file-manager {
md-sidenav-container { mat-sidenav-container {
.sidenav { .sidenav {
width: 320px !important; width: 320px !important;

20
src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
View File

@ -1,18 +1,18 @@
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between"> <div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between">
<div class="toolbar" fxLayout="row" fxLayoutAlign="end center"> <div class="toolbar" fxLayout="row" fxLayoutAlign="end center">
<button md-icon-button class="mat-icon-button" md-tooltip="Delete"> <button mat-icon-button class="mat-icon-button" matTooltip="Delete">
<md-icon>delete</md-icon> <mat-icon>delete</mat-icon>
</button> </button>
<button md-icon-button class="" aria-label="Download" md-tooltip="Download"> <button mat-icon-button class="" aria-label="Download" matTooltip="Download">
<md-icon>file_download</md-icon> <mat-icon>file_download</mat-icon>
</button> </button>
<button md-icon-button class="mat-icon-button" aria-label="More" md-tooltip="More"> <button mat-icon-button class="mat-icon-button" aria-label="More" matTooltip="More">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
@ -27,17 +27,17 @@
<!-- / SIDENAV HEADER --> <!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDENAV CONTENT -->
<div class="content p-24 md-white-bg" fusePerfectScrollbar> <div class="content p-24 mat-white-bg" fusePerfectScrollbar>
<div class="file-details" <div class="file-details"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}"> *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
<div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center"> <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
<md-icon class="type-icon s-48" [class]="selected.type"></md-icon> <mat-icon class="type-icon s-48" [class]="selected.type"></mat-icon>
</div> </div>
<div class="offline-switch"> <div class="offline-switch">
<md-slide-toggle ([ngModel])="selected.offline" labelPosition="before">Available Offline</md-slide-toggle> <mat-slide-toggle ([ngModel])="selected.offline" labelPosition="before">Available Offline</mat-slide-toggle>
</div> </div>
<div class="title">Info</div> <div class="title">Info</div>

22
src/app/main/content/apps/file-manager/sidenavs/main/main.component.html
View File

@ -2,7 +2,7 @@
<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between"> <div class="header p-24" fxLayout="column" fxLayoutAlign="space-between">
<div class="logo" fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon mr-16">folder</md-icon> <mat-icon class="logo-icon mr-16">folder</mat-icon>
<span class="logo-text h1">File Manager</span> <span class="logo-text h1">File Manager</span>
</div> </div>
@ -15,36 +15,36 @@
<div class="nav"> <div class="nav">
<div class="nav-item" aria-label="inbox"> <div class="nav-item" aria-label="inbox">
<a class="nav-link" md-ripple> <a class="nav-link" matRipple>
<md-icon class="nav-link-icon">folder</md-icon> <mat-icon class="nav-link-icon">folder</mat-icon>
<span class="title">My Files</span> <span class="title">My Files</span>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" md-ripple> <a class="nav-link" matRipple>
<md-icon class="nav-link-icon">star</md-icon> <mat-icon class="nav-link-icon">star</mat-icon>
<div class="title">Starred</div> <div class="title">Starred</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" md-ripple> <a class="nav-link" matRipple>
<md-icon class="nav-link-icon">folder_shared</md-icon> <mat-icon class="nav-link-icon">folder_shared</mat-icon>
<div class="title">Sharred with me</div> <div class="title">Sharred with me</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" md-ripple> <a class="nav-link" matRipple>
<md-icon class="nav-link-icon">access_time</md-icon> <mat-icon class="nav-link-icon">access_time</mat-icon>
<div class="title">Recent</div> <div class="title">Recent</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" md-ripple> <a class="nav-link" matRipple>
<md-icon class="nav-link-icon">not_interested</md-icon> <mat-icon class="nav-link-icon">not_interested</mat-icon>
<div class="title">Offline</div> <div class="title">Offline</div>
</a> </a>
</div> </div>

68
src/app/main/content/apps/mail/dialogs/compose/compose.component.html
View File

@ -1,62 +1,62 @@
<div class="dialog-content-wrapper"> <div class="dialog-content-wrapper">
<md-toolbar md-dialog-title class="mat-accent m-0"> <mat-toolbar matDialogTitle class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">New Message</span> <span class="title dialog-title">New Message</span>
<button md-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">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
</md-toolbar> </mat-toolbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar> <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex> <form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
<md-input-container> <mat-form-field>
<input mdInput name="from" <input matInput name="from"
placeholder="From" placeholder="From"
formControlName="from" formControlName="from"
type="email"> type="email">
</md-input-container> </mat-form-field>
<md-input-container> <mat-form-field>
<input mdInput name="to" <input matInput name="to"
placeholder="To" placeholder="To"
formControlName="to" formControlName="to"
type="email" required> type="email" required>
</md-input-container> </mat-form-field>
<md-input-container> <mat-form-field>
<input mdInput <input matInput
name="cc" name="cc"
placeholder="Cc" placeholder="Cc"
formControlName="cc" formControlName="cc"
type="email"> type="email">
</md-input-container> </mat-form-field>
<md-input-container> <mat-form-field>
<input mdInput <input matInput
name="bcc" name="bcc"
placeholder="Bcc" placeholder="Bcc"
formControlName="bcc" formControlName="bcc"
type="email"> type="email">
</md-input-container> </mat-form-field>
<md-input-container> <mat-form-field>
<input mdInput name="subject" <input matInput name="subject"
placeholder="Subject" placeholder="Subject"
formControlName="subject"> formControlName="subject">
</md-input-container> </mat-form-field>
<md-input-container> <mat-form-field>
<textarea mdInput name="message" <textarea matInput name="message"
placeholder="Message" placeholder="Message"
formControlName="message" formControlName="message"
rows="6"> rows="6">
</textarea> </textarea>
</md-input-container> </mat-form-field>
<div class="attachment-list"> <div class="attachment-list">
@ -66,8 +66,8 @@
<span class="size">(12 Kb)</span> <span class="size">(12 Kb)</span>
</div> </div>
<button md-icon-button aria-label="Delete attachment"> <button mat-icon-button aria-label="Delete attachment">
<md-icon class="s-16">close</md-icon> <mat-icon class="s-16">close</mat-icon>
</button> </button>
</div> </div>
@ -77,17 +77,17 @@
<span class="size">(350 Kb)</span> <span class="size">(350 Kb)</span>
</div> </div>
<button md-icon-button aria-label="Delete attachment"> <button mat-icon-button aria-label="Delete attachment">
<md-icon class="s-16">close</md-icon> <mat-icon class="s-16">close</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div> <div>
<button md-raised-button <button mat-raised-button
(click)="dialogRef.close(['send',composeForm])" (click)="dialogRef.close(['send',composeForm])"
class="save-button mat-accent" class="save-button mat-accent"
[disabled]="composeForm.invalid" [disabled]="composeForm.invalid"
@ -95,17 +95,17 @@
SEND SEND
</button> </button>
<button md-icon-button md-tooltip="Attach a file"> <button mat-icon-button matTooltip="Attach a file">
<md-icon>attach_file</md-icon> <mat-icon>attach_file</mat-icon>
</button> </button>
</div> </div>
<button md-button <button mat-button
class="mat-icon-button" class="mat-icon-button"
(click)="dialogRef.close(['delete',composeForm])" (click)="dialogRef.close(['delete',composeForm])"
aria-label="Delete" aria-label="Delete"
md-tooltip="Delete"> matTooltip="Delete">
<md-icon>delete</md-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
</div> </div>

2
src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
View File

@ -5,7 +5,7 @@
.compose-form { .compose-form {
.mat-input-container { .mat-form-field {
width: 100%; width: 100%;
} }

6
src/app/main/content/apps/mail/dialogs/compose/compose.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { FormControl, FormGroup } from '@angular/forms'; import { FormControl, FormGroup } from '@angular/forms';
@Component({ @Component({
@ -13,8 +13,8 @@ export class FuseMailComposeDialogComponent implements OnInit
composeForm: FormGroup; composeForm: FormGroup;
constructor( constructor(
public dialogRef: MdDialogRef<FuseMailComposeDialogComponent>, public dialogRef: MatDialogRef<FuseMailComposeDialogComponent>,
@Inject(MD_DIALOG_DATA) private data: any @Inject(MAT_DIALOG_DATA) private data: any
) )
{ {
this.composeForm = this.createComposeForm(); this.composeForm = this.createComposeForm();

34
src/app/main/content/apps/mail/mail-details/mail-details.component.html
View File

@ -1,5 +1,5 @@
<div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<md-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">email</md-icon> <mat-icon class="s-128 mb-16 select-message-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">email</mat-icon>
<span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a message to read</span> <span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select a message to read</span>
</div> </div>
@ -21,14 +21,14 @@
</div> </div>
<div class="actions" fxLayout="row" fxLayoutAlign="start center"> <div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star"> <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
<md-icon *ngIf="mail.starred">star</md-icon> <mat-icon *ngIf="mail.starred">star</mat-icon>
<md-icon *ngIf="!mail.starred">star_outline</md-icon> <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
</button> </button>
<button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important"> <button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
<md-icon *ngIf="mail.important">label</md-icon> <mat-icon *ngIf="mail.important">label</mat-icon>
<md-icon *ngIf="!mail.important">label_outline</md-icon> <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
</button> </button>
</div> </div>
</div> </div>
@ -84,27 +84,27 @@
</div> </div>
</div> </div>
<button md-button [mdMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button" <button mat-button [matMenuTriggerFor]="moreMenu" aria-label="More" class="mat-icon-button"
(click)="$event.stopPropagation()"> (click)="$event.stopPropagation()">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<md-menu #moreMenu="mdMenu"> <mat-menu #moreMenu="matMenu">
<button md-menu-item aria-label="Reply"> <button mat-menu-item aria-label="Reply">
<md-icon>reply</md-icon> <mat-icon>reply</mat-icon>
<span>Reply</span> <span>Reply</span>
</button> </button>
<button md-menu-item aria-label="Forward"> <button mat-menu-item aria-label="Forward">
<md-icon>forward</md-icon> <mat-icon>forward</mat-icon>
<span>Forward</span> <span>Forward</span>
</button> </button>
<button md-menu-item aria-label="Print"> <button mat-menu-item aria-label="Print">
<md-icon>print</md-icon> <mat-icon>print</mat-icon>
<span>Print</span> <span>Print</span>
</button> </button>
</md-menu> </mat-menu>
</div> </div>
<div [innerHTML]="mail.message"></div> <div [innerHTML]="mail.message"></div>

18
src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
View File

@ -1,7 +1,7 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()" <mat-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
(click)="$event.stopPropagation();"></md-checkbox> (click)="$event.stopPropagation();"></mat-checkbox>
<div class="info" fxFlex FlexLayout="column"> <div class="info" fxFlex FlexLayout="column">
@ -11,7 +11,7 @@
<img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/> <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
<div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div> <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
<span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span> <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
<md-icon *ngIf="mail.hasAttachments">attachment</md-icon> <mat-icon *ngIf="mail.hasAttachments">attachment</mat-icon>
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
@ -20,15 +20,15 @@
<!--<div class="actions" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-sm> <!--<div class="actions" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-sm>
<button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star"> <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
<md-icon *ngIf="mail.starred">star</md-icon> <mat-icon *ngIf="mail.starred">star</mat-icon>
<md-icon *ngIf="!mail.starred">star_outline</md-icon> <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
</button> </button>
<button md-button class="mat-icon-button" (click)="toggleImportant($event)" <button mat-button class="mat-icon-button" (click)="toggleImportant($event)"
aria-label="Toggle important"> aria-label="Toggle important">
<md-icon *ngIf="mail.important">label</md-icon> <mat-icon *ngIf="mail.important">label</mat-icon>
<md-icon *ngIf="!mail.important">label_outline</md-icon> <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
</button> </button>
</div>--> </div>-->

4
src/app/main/content/apps/mail/mail-list/mail-list.component.html
View File

@ -1,9 +1,9 @@
<div *ngIf="mails.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="mails.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
<span class="no-messages-text hint-text">There are no messages!</span> <span class="no-messages-text hint-text">There are no messages!</span>
</div> </div>
<div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<fuse-mail-list-item md-ripple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)" <fuse-mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
[ngClass]="{'current-mail':mail?.id == currentMail?.id}" [ngClass]="{'current-mail':mail?.id == currentMail?.id}"
[@animate]="{value:'*',params:{y:'100%'}}"> [@animate]="{value:'*',params:{y:'100%'}}">
</fuse-mail-list-item> </fuse-mail-list-item>

80
src/app/main/content/apps/mail/mail.component.html
View File

@ -1,16 +1,16 @@
<div id="mail" class="page-layout carded left-sidenav" fusePerfectScrollbar> <div id="mail" class="page-layout carded left-sidenav" fusePerfectScrollbar>
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg md-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND --> <!-- / TOP BACKGROUND -->
<md-sidenav-container> <mat-sidenav-container>
<!-- SIDENAV --> <!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side" <mat-sidenav class="sidenav mat-sidenav-opened" align="start" mode="side" opened="true"
fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md"> fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<fuse-mail-main-sidenav></fuse-mail-main-sidenav> <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
</md-sidenav> </mat-sidenav>
<!-- / SIDENAV --> <!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
@ -21,14 +21,14 @@
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button sidenav-toggle" <button mat-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="carded-left-sidenav" fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav"> fxHide.gt-md aria-label="Toggle Sidenav">
<md-icon>menu</md-icon> <mat-icon>menu</mat-icon>
</button> </button>
<div class="search md-white-bg" flex fxLayout="row" fxLayoutAlign="start center"> <div class="search mat-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
<md-icon>search</md-icon> <mat-icon>search</mat-icon>
<input [formControl]="searchInput" placeholder="Search for an e-mail or contact" fxFlex> <input [formControl]="searchInput" placeholder="Search for an e-mail or contact" fxFlex>
</div> </div>
</div> </div>
@ -37,57 +37,57 @@
<!-- / CONTENT HEADER --> <!-- / CONTENT HEADER -->
<!-- CONTENT CARD --> <!-- CONTENT CARD -->
<div class="content-card md-white-bg" [ngClass]="{'current-mail-selected':currentMail}"> <div class="content-card mat-white-bg" [ngClass]="{'current-mail-selected':currentMail}">
<!-- CONTENT TOOLBAR --> <!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8"> <div class="toolbar px-24 py-8">
<div class="mail-selection" fxFlex="row" fxLayoutAlign="start center"> <div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails" <mat-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
[indeterminate]="isIndeterminate"></md-checkbox> [indeterminate]="isIndeterminate"></mat-checkbox>
<button md-icon-button [mdMenuTriggerFor]="selectMenu"> <button mat-icon-button [matMenuTriggerFor]="selectMenu">
<md-icon>arrow_drop_down</md-icon> <mat-icon>arrow_drop_down</mat-icon>
</button> </button>
<md-menu #selectMenu="mdMenu"> <mat-menu #selectMenu="matMenu">
<button md-menu-item (click)="selectMails()">All</button> <button mat-menu-item (click)="selectMails()">All</button>
<button md-menu-item (click)="deselectMails()">None</button> <button mat-menu-item (click)="deselectMails()">None</button>
<button md-menu-item (click)="selectMails('read', true)">Read</button> <button mat-menu-item (click)="selectMails('read', true)">Read</button>
<button md-menu-item (click)="selectMails('read', false)">Unread</button> <button mat-menu-item (click)="selectMails('read', false)">Unread</button>
<button md-menu-item (click)="selectMails('starred', true)">Starred</button> <button mat-menu-item (click)="selectMails('starred', true)">Starred</button>
<button md-menu-item (click)="selectMails('starred', false)">Unstarred</button> <button mat-menu-item (click)="selectMails('starred', false)">Unstarred</button>
<button md-menu-item (click)="selectMails('important', true)">Important</button> <button mat-menu-item (click)="selectMails('important', true)">Important</button>
<button md-menu-item (click)="selectMails('important', false)">Unimportant</button> <button mat-menu-item (click)="selectMails('important', false)">Unimportant</button>
</md-menu> </mat-menu>
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div> <div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
<button md-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails"> <button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
<md-icon>delete</md-icon> <mat-icon>delete</mat-icon>
</button> </button>
<button md-icon-button [mdMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails"> <button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
<md-icon>folder</md-icon> <mat-icon>folder</mat-icon>
</button> </button>
<md-menu #folderMenu="mdMenu"> <mat-menu #folderMenu="matMenu">
<button md-menu-item *ngFor="let folder of folders" <button mat-menu-item *ngFor="let folder of folders"
(click)="setFolderOnSelectedMails(folder.id)">{{folder.title}} (click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
</button> </button>
</md-menu> </mat-menu>
<button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails"> <button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<md-icon>label</md-icon> <mat-icon>label</mat-icon>
</button> </button>
<md-menu #labelMenu="mdMenu"> <mat-menu #labelMenu="matMenu">
<button md-menu-item *ngFor="let label of labels" <button mat-menu-item *ngFor="let label of labels"
(click)="toggleLabelOnSelectedMails(label.id)">{{label.title}} (click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
</button> </button>
</md-menu> </mat-menu>
</div> </div>
<div *ngIf="currentMail" fxHide.gt-lg> <div *ngIf="currentMail" fxHide.gt-lg>
<button md-icon-button (click)="deSelectCurrentMail()"> <button mat-icon-button (click)="deSelectCurrentMail()">
<md-icon>arrow_back</md-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>
</div> </div>
</div> </div>
@ -109,6 +109,6 @@
</div> </div>
<!-- / CENTER --> <!-- / CENTER -->
</md-sidenav-container> </mat-sidenav-container>
</div> </div>

26
src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
View File

@ -1,20 +1,20 @@
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start" <div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg"> class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</md-icon> <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span> <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
</div> </div>
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}"> <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
<div class="title">John Doe</div> <div class="title">John Doe</div>
<md-select class="account-selection" placeholder="Mail Selection" <mat-select class="account-selection" placeholder="Mail Selection"
floatPlaceholder="never" floatPlaceholder="never"
[ngModel]="selectedAccount"> [ngModel]="selectedAccount">
<md-option *ngFor="let account of (accounts | keys)" [value]="account.key"> <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
{{account.value}} {{account.value}}
</md-option> </mat-option>
</md-select> </mat-select>
</div> </div>
</div> </div>
@ -24,7 +24,7 @@
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}"> <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24"> <div class="p-24">
<button md-raised-button fxFlex <button mat-raised-button fxFlex
class="mat-accent compose-dialog-button" class="mat-accent compose-dialog-button"
(click)="composeDialog()" (click)="composeDialog()"
aria-label="Compose"> aria-label="Compose">
@ -37,8 +37,8 @@
<div class="nav-subheader">FOLDERS</div> <div class="nav-subheader">FOLDERS</div>
<div class="nav-item" *ngFor="let folder of folders"> <div class="nav-item" *ngFor="let folder of folders">
<a class="nav-link" md-ripple [routerLink]="'/apps/mail/' + folder.handle" routerLinkActive="active"> <a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle" routerLinkActive="active">
<md-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</md-icon> <mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
<span>{{folder.title}}</span> <span>{{folder.title}}</span>
</a> </a>
</div> </div>
@ -46,8 +46,8 @@
<div class="nav-subheader">FILTERS</div> <div class="nav-subheader">FILTERS</div>
<div class="nav-item" *ngFor="let filter of filters"> <div class="nav-item" *ngFor="let filter of filters">
<a class="nav-link" md-ripple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active"> <a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
<md-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</md-icon> <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<span>{{filter.title}}</span> <span>{{filter.title}}</span>
</a> </a>
</div> </div>
@ -55,8 +55,8 @@
<div class="nav-subheader">LABELS</div> <div class="nav-subheader">LABELS</div>
<div class="nav-item" *ngFor="let label of labels"> <div class="nav-item" *ngFor="let label of labels">
<a class="nav-link" md-ripple [routerLink]="'/apps/mail/label/' + label.handle" routerLinkActive="active"> <a class="nav-link" matRipple [routerLink]="'/apps/mail/label/' + label.handle" routerLinkActive="active">
<md-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</md-icon> <mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon>
<span>{{label.title}}</span> <span>{{label.title}}</span>
</a> </a>
</div> </div>

4
src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.ts
View File

@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { MailService } from '../../mail.service'; import { MailService } from '../../mail.service';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component'; import { FuseMailComposeDialogComponent } from '../../dialogs/compose/compose.component';
import { MdDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { fuseAnimations } from '../../../../../../core/animations'; import { fuseAnimations } from '../../../../../../core/animations';
@ -27,7 +27,7 @@ export class FuseMailMainSidenavComponent implements OnInit, OnDestroy
constructor( constructor(
private mailService: MailService, private mailService: MailService,
public dialog: MdDialog public dialog: MatDialog
) )
{ {
// Data // Data

6
src/app/main/content/apps/scrumboard/board.model.ts
View File

@ -6,17 +6,17 @@ const sampleLabels = [
{ {
'id' : '56027e4119ad3a5dc28b36cd', 'id' : '56027e4119ad3a5dc28b36cd',
'name' : 'Design', 'name' : 'Design',
'color': 'md-red-500-bg' 'color': 'mat-red-500-bg'
}, },
{ {
'id' : '5640635e19ad3a5dc21416b2', 'id' : '5640635e19ad3a5dc21416b2',
'name' : 'App', 'name' : 'App',
'color': 'md-blue-500-bg' 'color': 'mat-blue-500-bg'
}, },
{ {
'id' : '6540635g19ad3s5dc31412b2', 'id' : '6540635g19ad3s5dc31412b2',
'name' : 'Feature', 'name' : 'Feature',
'color': 'md-green-400-bg' 'color': 'mat-green-400-bg'
} }
]; ];

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

@ -1,8 +1,8 @@
<div class="list new-list mat-elevation-z1"> <div class="list new-list mat-elevation-z1">
<button *ngIf="!formActive" md-button class="new-list-form-button" (click)="openForm()"> <button *ngIf="!formActive" mat-button class="new-list-form-button" (click)="openForm()">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="md-red-bg">add</md-icon> <mat-icon class="mat-red-bg">add</mat-icon>
<span>Add a list</span> <span>Add a list</span>
</div> </div>
</button> </button>
@ -12,11 +12,11 @@
<input formControlName="name" #nameInput fxFlex placeholder="Write a list Name"> <input formControlName="name" #nameInput fxFlex placeholder="Write a list Name">
<button md-icon-button fxFlex="0 1 auto"> <button mat-icon-button fxFlex="0 1 auto">
<md-icon>check</md-icon> <mat-icon>check</mat-icon>
</button> </button>
<button md-icon-button fxFlex="0 1 auto" (click)="closeForm()"> <button mat-icon-button fxFlex="0 1 auto" (click)="closeForm()">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</form> </form>
</div> </div>

2
src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss
View File

@ -11,7 +11,7 @@
margin: 0; margin: 0;
width: 100%; width: 100%;
md-icon { mat-icon {
border-radius: 50%; border-radius: 50%;
height: 40px; height: 40px;
width: 40px; width: 40px;

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

@ -1,31 +1,31 @@
<md-sidenav-container> <mat-sidenav-container>
<div id="board"> <div id="board">
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-16 p-md-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column"> <div class="header mat-accent-bg p-16 p-mat-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="column">
<div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap> <div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
<!-- BOARD SELECTION BUTTON --> <!-- BOARD SELECTION BUTTON -->
<div fxLayout="row" fxLayoutAlign="center center" fxFlexOrder="2" fxFlexOrder.gt-xs="1"> <div fxLayout="row" fxLayoutAlign="center center" fxFlexOrder="2" fxFlexOrder.gt-xs="1">
<button md-raised-button class="mat-accent header-boards-button" <button mat-raised-button class="mat-accent header-boards-button"
[class]="'md-'+board.settings.color+'-700-bg'" [class]="'mat-'+board.settings.color+'-700-bg'"
routerLink="/apps/scrumboard/boards" routerLink="/apps/scrumboard/boards"
aria-label="boards button"> aria-label="boards button">
<md-icon>assessment</md-icon> <mat-icon>assessment</mat-icon>
<span>BOARDS</span> <span>BOARDS</span>
</button> </button>
</div> </div>
<!-- / BOARD SELECTION BUTTON --> <!-- / BOARD SELECTION BUTTON -->
<!-- BOARD NAME --> <!-- BOARD NAME -->
<div class="header-board-name mb-8 mb-md-0" <div class="header-board-name mb-8 mb-mat-0"
fxLayout="row" fxLayoutAlign="center center" fxLayout="row" fxLayoutAlign="center center"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="center center"
fxFlex="1 0 100%" fxFlex.gt-xs="1 0 auto" fxFlex="1 0 100%" fxFlex.gt-xs="1 0 auto"
fxFlexOrder="1" fxFlexOrder.gt-xs="2"> fxFlexOrder="1" fxFlexOrder.gt-xs="2">
<md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon> <mat-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</mat-icon>
<fuse-scrumboard-edit-board-name <fuse-scrumboard-edit-board-name
[board]="board" [board]="board"
(onNameChanged)="onBoardNameChanged($event)"> (onNameChanged)="onBoardNameChanged($event)">
@ -37,9 +37,9 @@
<div class="toolbar" fxLayout="row" fxLayoutAlign="space-between center" fxFlexOrder="3"> <div class="toolbar" fxLayout="row" fxLayoutAlign="space-between center" fxFlexOrder="3">
<!-- BOARD SETTINGS BUTTON --> <!-- BOARD SETTINGS BUTTON -->
<button md-icon-button (click)="settingsSidenav.toggle()" <button mat-icon-button (click)="settingsSidenav.toggle()"
aria-label="Settings" md-tooltip="Settings"> aria-label="Settings" matTooltip="Settings">
<md-icon>settings</md-icon> <mat-icon>settings</mat-icon>
</button> </button>
<!-- / BOARD SETTINGS BUTTON --> <!-- / BOARD SETTINGS BUTTON -->
</div> </div>
@ -50,10 +50,10 @@
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->
<div fxFlex class="board-content-wrapper p-16 p-md-24" [class]="board.settings.color+'-100-bg'"> <div fxFlex class="board-content-wrapper p-16 p-mat-24" [class]="board.settings.color+'-100-bg'">
<!-- BOARD --> <!-- BOARD -->
<div class="board-content ngx-dnd-container p-16 p-md-24" fxLayout="row" <div class="board-content ngx-dnd-container p-16 p-mat-24" fxLayout="row"
ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)" ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)"
*fuseIfOnDom [@animateStagger]="{value:'50'}"> *fuseIfOnDom [@animateStagger]="{value:'50'}">
@ -80,8 +80,8 @@
<!-- primary content --> <!-- primary content -->
</div> </div>
<md-sidenav #settingsSidenav align="end"> <mat-sidenav #settingsSidenav align="end">
<fuse-scrumboard-board-settings></fuse-scrumboard-board-settings> <fuse-scrumboard-board-settings></fuse-scrumboard-board-settings>
</md-sidenav> </mat-sidenav>
</md-sidenav-container> </mat-sidenav-container>

10
src/app/main/content/apps/scrumboard/board/board.component.scss
View File

@ -2,19 +2,19 @@
:host { :host {
md-sidenav-container { mat-sidenav-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
md-sidenav { mat-sidenav {
width: 320px !important; width: 320px !important;
min-width: 320px !important; min-width: 320px !important;
max-width: 320px !important; max-width: 320px !important;
} }
#board { #board {
flex-direction: column;
display: flex; display: flex;
flex-direction: column !important;
height: 100%; height: 100%;
> .header { > .header {
@ -38,7 +38,7 @@
.editable-buttons { .editable-buttons {
md-icon { mat-icon {
color: #FFFFFF !important; color: #FFFFFF !important;
} }
} }
@ -46,7 +46,7 @@
.right-side { .right-side {
> .md-button:last-child { > .mat-button:last-child {
margin-right: 0; margin-right: 0;
} }
} }

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

@ -1,5 +1,5 @@
<div class="dialog-content-wrapper"> <div class="dialog-content-wrapper">
<md-toolbar *ngIf="card" md-dialog-title class="md-accent-bg m-0"> <mat-toolbar *ngIf="card" matDialogTitle class="mat-accent-bg m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@ -8,123 +8,123 @@
<!-- DUE DATE --> <!-- DUE DATE -->
<div class="due-date" fxFlex="0 1 auto"> <div class="due-date" fxFlex="0 1 auto">
<button *ngIf="card.due" md-icon-button class="" [mdMenuTriggerFor]="dueDateMenu"> <button *ngIf="card.due" mat-icon-button class="" [matMenuTriggerFor]="dueDateMenu">
<md-icon>today</md-icon> <mat-icon>today</mat-icon>
</button> </button>
<md-menu #dueDateMenu="mdMenu" [overlapTrigger]="false"> <mat-menu #dueDateMenu="matMenu" [overlapTrigger]="false">
<button md-menu-item (click)="removeDueDate()">Remove Due Date</button> <button mat-menu-item (click)="removeDueDate()">Remove Due Date</button>
</md-menu> </mat-menu>
<md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker> <!--<md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker>-->
</div> </div>
<!-- / DUE DATE --> <!-- / DUE DATE -->
<!-- LABELS --> <!-- LABELS -->
<div class="labels" fxFlex="0 1 auto"> <div class="labels" fxFlex="0 1 auto">
<button md-icon-button [mdMenuTriggerFor]="labelsMenu"> <button mat-icon-button [matMenuTriggerFor]="labelsMenu">
<md-icon>label</md-icon> <mat-icon>label</mat-icon>
</button> </button>
<md-menu #labelsMenu="mdMenu" [overlapTrigger]="false" class="scrumboard-labels-menu"> <mat-menu #labelsMenu="matMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">
<fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector> <fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
</md-menu> </mat-menu>
</div> </div>
<!-- / LABELS --> <!-- / LABELS -->
<!-- MEMBERS --> <!-- MEMBERS -->
<div class="members" fxFlex="0 1 auto"> <div class="members" fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="membersMenu"> <button mat-icon-button class="" [matMenuTriggerFor]="membersMenu">
<md-icon>account_circle</md-icon> <mat-icon>account_circle</mat-icon>
</button> </button>
<md-menu #membersMenu="mdMenu" [overlapTrigger]="false"> <mat-menu #membersMenu="matMenu" [overlapTrigger]="false">
<div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()"> <div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()">
<md-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1" <mat-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
*ngFor="let member of board.members" *ngFor="let member of board.members"
(change)="toggleInArray(member.id, card.idMembers);updateCard()"> (change)="toggleInArray(member.id, card.idMembers);updateCard()">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<img [alt]="member.name" [src]=" member.avatar" class="avatar"/> <img [alt]="member.name" [src]=" member.avatar" class="avatar"/>
<p class="member-name">{{ member.name }}</p> <p class="member-name">{{ member.name }}</p>
</div> </div>
</md-checkbox> </mat-checkbox>
</div> </div>
</md-menu> </mat-menu>
</div> </div>
<!-- / MEMBERS --> <!-- / MEMBERS -->
<!-- ATTACHMENT --> <!-- ATTACHMENT -->
<button md-icon-button aria-label="Attachment"> <button mat-icon-button aria-label="Attachment">
<md-icon>attachment</md-icon> <mat-icon>attachment</mat-icon>
</button> </button>
<!-- / ATTACHMENT --> <!-- / ATTACHMENT -->
<!-- CHECKLIST --> <!-- CHECKLIST -->
<div class="due-date " fxFlex="0 1 auto"> <div class="due-date " fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="mdMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()"> <button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()">
<md-icon>check_box</md-icon> <mat-icon>check_box</mat-icon>
</button> </button>
<md-menu #checklistMenu="mdMenu" [overlapTrigger]="false"> <mat-menu #checklistMenu="matMenu" [overlapTrigger]="false">
<form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()" <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
fxLayout="column" fxLayoutAlign="start end"> fxLayout="column" fxLayoutAlign="start end">
<md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex> <mat-form-field floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
<input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required> <input #newCheckListTitleField matInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
</md-input-container> </mat-form-field>
<button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button> <button mat-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
</form> </form>
</md-menu> </mat-menu>
</div> </div>
<!-- / CHECKLIST --> <!-- / CHECKLIST -->
<!-- SUBSCRIBE --> <!-- SUBSCRIBE -->
<div class="subscribe " fxFlex="0 1 auto"> <div class="subscribe " fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="subscribeMenu"> <button mat-icon-button class="" [matMenuTriggerFor]="subscribeMenu">
<md-icon>remove_red_eye</md-icon> <mat-icon>remove_red_eye</mat-icon>
</button> </button>
<md-menu #subscribeMenu="mdMenu" [overlapTrigger]="false"> <mat-menu #subscribeMenu="matMenu" [overlapTrigger]="false">
<button *ngIf="card.subscribed" md-menu-item (click)="toggleSubscribe()"> <button *ngIf="card.subscribed" mat-menu-item (click)="toggleSubscribe()">
Unsubscribe Unsubscribe
</button> </button>
<button *ngIf="!card.subscribed" md-menu-item (click)="toggleSubscribe()"> <button *ngIf="!card.subscribed" mat-menu-item (click)="toggleSubscribe()">
Subscribe Subscribe
</button> </button>
</md-menu> </mat-menu>
</div> </div>
<!-- / SUBSCRIBE --> <!-- / SUBSCRIBE -->
<!-- OPTIONS --> <!-- OPTIONS -->
<div class="options " fxFlex="0 1 auto"> <div class="options " fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="optionsMenu"> <button mat-icon-button class="" [matMenuTriggerFor]="optionsMenu">
<md-icon>more_horiz</md-icon> <mat-icon>more_horiz</mat-icon>
</button> </button>
<md-menu #optionsMenu="mdMenu" [overlapTrigger]="false"> <mat-menu #optionsMenu="matMenu" [overlapTrigger]="false">
<button md-menu-item (click)="removeCard()"> <button mat-menu-item (click)="removeCard()">
Remove Card Remove Card
</button> </button>
</md-menu> </mat-menu>
</div> </div>
<!-- / OPTIONS --> <!-- / OPTIONS -->
</div> </div>
<!-- CLOSE DIALOG BUTTON --> <!-- CLOSE DIALOG BUTTON -->
<button md-icon-button (click)="dialogRef.close()" aria-label="Close Dialog"> <button mat-icon-button (click)="dialogRef.close()" aria-label="Close Dialog">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
<!-- / CLOSE DIALOG BUTTON --> <!-- / CLOSE DIALOG BUTTON -->
</div> </div>
</md-toolbar> </mat-toolbar>
<div *ngIf="card" md-dialog-content class="p-24 m-0" fusePerfectScrollbar> <div *ngIf="card" mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center" <div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
fxLayout.xs="column" fxLayoutAlign="center center"> fxLayout.xs="column" fxLayoutAlign="center center">
@ -132,7 +132,7 @@
<!-- BREADCRUMB --> <!-- BREADCRUMB -->
<div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center"> <div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
<span>{{board.name}}</span> <span>{{board.name}}</span>
<md-icon class="s-20">chevron_right</md-icon> <mat-icon class="s-20">chevron_right</mat-icon>
<span>{{list.name}}</span> <span>{{list.name}}</span>
</div> </div>
<!-- / BREADCRUMB --> <!-- / BREADCRUMB -->
@ -140,10 +140,10 @@
<!-- DUE DATE --> <!-- DUE DATE -->
<div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center"> <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> <!--<md2-datepicker class="picker ml-8" [(ngModel)]="card.due" openOnFocus="true" type="datetime" format="dd/MM/y H:mm"></md2-datepicker>-->
<button md-icon-button class="remove-due-date" (click)="removeDueDate()"> <button mat-icon-button class="remove-due-date" (click)="removeDueDate()">
<md-icon class="s-16">close</md-icon> <mat-icon class="s-16">close</mat-icon>
</button> </button>
</div> </div>
<!-- / DUE DATE --> <!-- / DUE DATE -->
@ -152,20 +152,20 @@
<!-- NAME --> <!-- NAME -->
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</md-icon> <mat-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</mat-icon>
<div class="card-name"> <div class="card-name">
<md-input-container floatPlaceholder="never" fxFlex> <mat-form-field floatPlaceholder="never" fxFlex>
<input mdInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()"> <input matInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
</md-input-container> </mat-form-field>
</div> </div>
</div> </div>
<!-- / NAME --> <!-- / NAME -->
<!-- DESCRIPTION --> <!-- DESCRIPTION -->
<div class="description"> <div class="description">
<md-input-container fxFlex> <mat-form-field fxFlex>
<textarea mdInput [(ngModel)]="card.description" placeholder="Description" columns="1" md-maxlength="150" max-rows="4" (change)="updateCard()"></textarea> <textarea matInput [(ngModel)]="card.description" placeholder="Description" columns="1" mat-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
</md-input-container> </mat-form-field>
</div> </div>
<!-- / DESCRIPTION --> <!-- / DESCRIPTION -->
@ -178,36 +178,36 @@
<div *ngIf="card.idLabels[0]" fxFlex class="labels"> <div *ngIf="card.idLabels[0]" fxFlex class="labels">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center"> <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">label</md-icon> <mat-icon class="s-20">label</mat-icon>
<span class="section-title">Labels</span> <span class="section-title">Labels</span>
</div> </div>
<div class="section-content"> <div class="section-content">
<md-chip-list class="label-chips"> <mat-chip-list class="label-chips">
<md-chip class="label-chip mb-4" <mat-chip class="label-chip mb-4"
*ngFor="let labelId of card.idLabels" *ngFor="let labelId of card.idLabels"
[class]="board.labels | getById:labelId:'color'" [class]="board.labels | getById:labelId:'color'"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<span>{{board.labels|getById:labelId:'name'}}</span> <span>{{board.labels|getById:labelId:'name'}}</span>
<md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</md-icon> <mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</mat-icon>
</md-chip> </mat-chip>
</md-chip-list> </mat-chip-list>
</div> </div>
</div> </div>
<div *ngIf="card.idMembers[0]" fxFlex class="members"> <div *ngIf="card.idMembers[0]" fxFlex class="members">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center"> <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">supervisor_account</md-icon> <mat-icon class="s-20">supervisor_account</mat-icon>
<span class="section-title">Members</span> <span class="section-title">Members</span>
</div> </div>
<div class="section-content"> <div class="section-content">
<md-chip-list class="member-chips"> <mat-chip-list class="member-chips">
<md-chip class="member-chip mb-4" *ngFor="let memberId of card.idMembers" <mat-chip class="member-chip mb-4" *ngFor="let memberId of card.idMembers"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'" <img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
[md-tooltip]="board.members | getById:memberId:'name'"> [matTooltip]="board.members | getById:memberId:'name'">
<md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</md-icon> <mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</mat-icon>
</md-chip> </mat-chip>
</md-chip-list> </mat-chip-list>
</div> </div>
</div> </div>
</div> </div>
@ -219,7 +219,7 @@
<div class="attachments"> <div class="attachments">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center"> <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">attachment</md-icon> <mat-icon class="s-20">attachment</mat-icon>
<span class="section-title">Attachments</span> <span class="section-title">Attachments</span>
</div> </div>
@ -239,29 +239,29 @@
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<span class="attachment-name">{{item.name}}</span> <span class="attachment-name">{{item.name}}</span>
<md-icon *ngIf="card.idAttachmentCover === item.id" <mat-icon *ngIf="card.idAttachmentCover === item.id"
class="yellow-700-fg attachment-is-cover s-20">star class="yellow-700-fg attachment-is-cover s-20">star
</md-icon> </mat-icon>
</div> </div>
<span class="attachment-time">{{item.time}}</span> <span class="attachment-time">{{item.time}}</span>
<div> <div>
<button md-raised-button class="attachment-actions-button" [mdMenuTriggerFor]="attachmentActionsMenu"> <button mat-raised-button class="attachment-actions-button" [matMenuTriggerFor]="attachmentActionsMenu">
<span fxLayout="row" fxLayoutAlign="center center"> <span fxLayout="row" fxLayoutAlign="center center">
<span>Actions</span> <span>Actions</span>
<md-icon class="s-20">arrow_drop_down</md-icon> <mat-icon class="s-20">arrow_drop_down</mat-icon>
</span> </span>
</button> </button>
<md-menu #attachmentActionsMenu="mdMenu"> <mat-menu #attachmentActionsMenu="matMenu">
<button md-menu-item (click)="toggleCoverImage(item.id)"> <button mat-menu-item (click)="toggleCoverImage(item.id)">
<span *ngIf="card.idAttachmentCover !== item.id">Make Cover</span> <span *ngIf="card.idAttachmentCover !== item.id">Make Cover</span>
<span *ngIf="card.idAttachmentCover === item.id">Remove Cover</span> <span *ngIf="card.idAttachmentCover === item.id">Remove Cover</span>
</button> </button>
<button md-menu-item (click)="removeAttachment(item)"> <button mat-menu-item (click)="removeAttachment(item)">
Remove Attachment Remove Attachment
</button> </button>
</md-menu> </mat-menu>
</div> </div>
</div> </div>
@ -279,9 +279,9 @@
</div> </div>
</div> </div>
<button md-button class="add-attachment-button" aria-label="add attachment"> <button mat-button class="add-attachment-button" aria-label="add attachment">
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">add</md-icon> <mat-icon class="s-20">add</mat-icon>
<span>Add an attachment</span> <span>Add an attachment</span>
</div> </div>
</button> </button>
@ -297,21 +297,21 @@
<div class="section-header" fxLayout="row" fxLayoutAlign="start center"> <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">check_box</md-icon> <mat-icon class="s-20">check_box</mat-icon>
<span fxFlex class="section-title">{{checklist.name}}</span> <span fxFlex class="section-title">{{checklist.name}}</span>
<div> <div>
<button md-icon-button class="checklist-actions-button" [mdMenuTriggerFor]="checklistActionsMenu"> <button mat-icon-button class="checklist-actions-button" [matMenuTriggerFor]="checklistActionsMenu">
<md-icon class="s-20">more_vert</md-icon> <mat-icon class="s-20">more_vert</mat-icon>
</button> </button>
<md-menu #checklistActionsMenu="mdMenu"> <mat-menu #checklistActionsMenu="matMenu">
<button md-menu-item (click)="removeChecklist(checklist)"> <button mat-menu-item (click)="removeChecklist(checklist)">
<md-icon>delete</md-icon> <mat-icon>delete</mat-icon>
<span>Remove Checklist</span> <span>Remove Checklist</span>
</button> </button>
</md-menu> </mat-menu>
</div> </div>
</div> </div>
@ -324,9 +324,9 @@
{{checklist.checkItemsChecked}} / {{checklist.checkItems.length}} {{checklist.checkItemsChecked}} / {{checklist.checkItems.length}}
</span> </span>
<md-progress-bar class="mat-accent checklist-progressbar" mode="determinate" <mat-progress-bar class="mat-accent checklist-progressbar" mode="determinate"
value="{{100 * checklist.checkItemsChecked / checklist.checkItems.length}}"> value="{{100 * checklist.checkItemsChecked / checklist.checkItems.length}}">
</md-progress-bar> </mat-progress-bar>
</div> </div>
<div class="check-items"> <div class="check-items">
@ -334,17 +334,17 @@
<div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center"> <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center">
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-checkbox [(ngModel)]="checkItem.checked" <mat-checkbox [(ngModel)]="checkItem.checked"
(change)="updateCheckedCount(checklist)" (change)="updateCheckedCount(checklist)"
aria-label="{{checkItem.name}}"> aria-label="{{checkItem.name}}">
</md-checkbox> </mat-checkbox>
<md-input-container fxFlex class="mx-12"> <mat-form-field fxFlex class="mx-12">
<input mdInput [(ngModel)]="checkItem.name"> <input matInput [(ngModel)]="checkItem.name">
</md-input-container> </mat-form-field>
</div> </div>
<button md-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)"> <button mat-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)">
<md-icon class="s-20">delete</md-icon> <mat-icon class="s-20">delete</mat-icon>
</button> </button>
</div> </div>
@ -354,14 +354,14 @@
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex> <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<md-icon class="s-20">add</md-icon> <mat-icon class="s-20">add</mat-icon>
<md-input-container class="no-errors-spacer mx-12" fxFlex> <mat-form-field class="no-errors-spacer mx-12" fxFlex>
<input mdInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off"> <input matInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off">
</md-input-container> </mat-form-field>
</div> </div>
<button md-raised-button <button mat-raised-button
[disabled]="!newCheckItemForm.valid || newCheckItemForm.pristine" [disabled]="!newCheckItemForm.valid || newCheckItemForm.pristine"
class="mat-accent" aria-label="Add"> class="mat-accent" aria-label="Add">
<span>Add</span> <span>Add</span>
@ -379,7 +379,7 @@
<div class="comments"> <div class="comments">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center"> <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">comment</md-icon> <mat-icon class="s-20">comment</mat-icon>
<span class="section-title">Comments</span> <span class="section-title">Comments</span>
</div> </div>
@ -390,14 +390,14 @@
<div fxLayout="row"> <div fxLayout="row">
<img class="comment-member-avatar" src="assets/images/avatars/profile.jpg"> <img class="comment-member-avatar" src="assets/images/avatars/profile.jpg">
<md-input-container fxFlex> <mat-form-field fxFlex>
<input mdInput name="newComment" ngModel #newComment="ngModel" <input matInput name="newComment" ngModel #newComment="ngModel"
placeholder="Write a comment.." required> placeholder="Write a comment.." required>
</md-input-container> </mat-form-field>
</div> </div>
<div fxLayout="row" fxLayoutAlign="end center"> <div fxLayout="row" fxLayoutAlign="end center">
<button md-raised-button class="mat-accent" <button mat-raised-button class="mat-accent"
[disabled]="!newCommentForm.valid || newCommentForm.pristine" [disabled]="!newCommentForm.valid || newCommentForm.pristine"
aria-label="Add"> aria-label="Add">
<span>Add</span> <span>Add</span>
@ -429,7 +429,7 @@
<div class="activities"> <div class="activities">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center"> <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">list</md-icon> <mat-icon class="s-20">list</mat-icon>
<span class="section-title">Activity</span> <span class="section-title">Activity</span>
</div> </div>

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

@ -107,7 +107,7 @@
.section-header { .section-header {
font-size: 16px; font-size: 16px;
md-icon { mat-icon {
margin-right: 8px; margin-right: 8px;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
} }
@ -206,7 +206,7 @@
margin: 12px 0 0 0; margin: 12px 0 0 0;
padding-left: 12px; padding-left: 12px;
md-icon { mat-icon {
margin-left: 8px; margin-left: 8px;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
} }
@ -217,7 +217,7 @@
.add-attachment-button { .add-attachment-button {
margin: 0; margin: 0;
md-icon { mat-icon {
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
margin-right: 8px; margin-right: 8px;
} }
@ -253,16 +253,16 @@
.check-item { .check-item {
md-checkbox { mat-checkbox {
margin-bottom: 0; margin-bottom: 0;
.md-label { .mat-label {
font-size: 14px; font-size: 14px;
} }
&.md-checked { &.mat-checked {
.md-label { .mat-label {
text-decoration: line-through; text-decoration: line-through;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
} }
@ -274,11 +274,11 @@
.new-check-item-form { .new-check-item-form {
padding-top: 16px; padding-top: 16px;
md-input-container { mat-form-field {
margin: 0; margin: 0;
} }
.md-button { .mat-button {
margin: 0 0 0 16px; margin: 0 0 0 16px;
} }
} }
@ -342,7 +342,7 @@
&.new-comment { &.new-comment {
md-input-container { mat-form-field {
margin: 0; margin: 0;
} }
} }

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

@ -1,5 +1,5 @@
import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MD_DIALOG_DATA, MdDialog, MdDialogRef, MdMenuTrigger } from '@angular/material'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatMenuTrigger } from '@angular/material';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { ScrumboardService } from '../../../scrumboard.service'; import { ScrumboardService } from '../../../scrumboard.service';
import { NgForm } from '@angular/forms/src/forms'; import { NgForm } from '@angular/forms/src/forms';
@ -21,15 +21,15 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
onBoardChanged: Subscription; onBoardChanged: Subscription;
toggleInArray = FuseUtils.toggleInArray; toggleInArray = FuseUtils.toggleInArray;
@ViewChild('checklistMenuTrigger') checklistMenu: MdMenuTrigger; @ViewChild('checklistMenuTrigger') checklistMenu: MatMenuTrigger;
@ViewChild('newCheckListTitleField') newCheckListTitleField; @ViewChild('newCheckListTitleField') newCheckListTitleField;
confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>; confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
constructor( constructor(
public dialogRef: MdDialogRef<FuseScrumboardCardDialogComponent>, public dialogRef: MatDialogRef<FuseScrumboardCardDialogComponent>,
@Inject(MD_DIALOG_DATA) private data: any, @Inject(MAT_DIALOG_DATA) private data: any,
public dialog: MdDialog, public dialog: MatDialog,
private scrumboardService: ScrumboardService private scrumboardService: ScrumboardService
) )
{ {

34
src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
View File

@ -4,8 +4,8 @@
<div class="header mb-12 pb-4 px-8" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header mb-12 pb-4 px-8" fxLayout="row" fxLayoutAlign="space-between center">
<div>Labels</div> <div>Labels</div>
<button md-button (click)="labelsMenuView ='add'"> <button mat-button (click)="labelsMenuView ='add'">
<md-icon class="s-16">add</md-icon> <mat-icon class="s-16">add</mat-icon>
<span>Add</span> <span>Add</span>
</button> </button>
</div> </div>
@ -15,13 +15,13 @@
<div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center" <div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
[class]="label.color"> [class]="label.color">
<md-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1" <mat-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1"
(change)="toggleInArray(label.id, card.idLabels);cardLabelsChanged()"> (change)="toggleInArray(label.id, card.idLabels);cardLabelsChanged()">
{{label.name}} {{label.name}}
</md-checkbox> </mat-checkbox>
<button md-icon-button> <button mat-icon-button>
<md-icon class="s-16" (click)="labelsMenuView ='edit';selectedLabel = label">mode_edit</md-icon> <mat-icon class="s-16" (click)="labelsMenuView ='edit';selectedLabel = label">mode_edit</mat-icon>
</button> </button>
</div> </div>
</div> </div>
@ -31,15 +31,15 @@
<div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center">
<div>Edit Label</div> <div>Edit Label</div>
<button md-icon-button (click)="labelsMenuView ='labels'"> <button mat-icon-button (click)="labelsMenuView ='labels'">
<md-icon class="s-16">arrow_back</md-icon> <mat-icon class="s-16">arrow_back</mat-icon>
</button> </button>
</div> </div>
<div fxLayout="row" fxLayoutAlign="space-between center"> <div fxLayout="row" fxLayoutAlign="space-between center">
<md-input-container> <mat-form-field>
<input mdInput placeholder="Name" [(ngModel)]="selectedLabel.name" (change)="onLabelChange()"> <input matInput placeholder="Name" [(ngModel)]="selectedLabel.name" (change)="onLabelChange()">
</md-input-container> </mat-form-field>
<fuse-material-color-picker [(selectedClass)]="selectedLabel.color" class="ml-8" (change)="$event.preventDefault;onLabelChange()"></fuse-material-color-picker> <fuse-material-color-picker [(selectedClass)]="selectedLabel.color" class="ml-8" (change)="$event.preventDefault;onLabelChange()"></fuse-material-color-picker>
</div> </div>
@ -50,22 +50,22 @@
<div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center">
<div>Add Label</div> <div>Add Label</div>
<button md-icon-button (click)="labelsMenuView ='labels'"> <button mat-icon-button (click)="labelsMenuView ='labels'">
<md-icon class="s-16">arrow_back</md-icon> <mat-icon class="s-16">arrow_back</mat-icon>
</button> </button>
</div> </div>
<form (submit)="addNewLabel()" #newLabelForm="ngForm" fxFlex fxLayout="column" fxLayoutAlign="start end"> <form (submit)="addNewLabel()" #newLabelForm="ngForm" fxFlex fxLayout="column" fxLayoutAlign="start end">
<div class="w-100-p" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="space-between center"> <div class="w-100-p" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="space-between center">
<md-input-container fxFlex> <mat-form-field fxFlex>
<input mdInput placeholder="Name" [(ngModel)]="newLabel.name" name="labelName" required> <input matInput placeholder="Name" [(ngModel)]="newLabel.name" name="labelName" required>
</md-input-container> </mat-form-field>
<fuse-material-color-picker [(selectedClass)]="newLabel.color" name="labelColor" class="ml-8"></fuse-material-color-picker> <fuse-material-color-picker [(selectedClass)]="newLabel.color" name="labelColor" class="ml-8"></fuse-material-color-picker>
</div> </div>
<button md-raised-button class="mat-accent mt-16" [disabled]="!newLabelForm.valid">Add</button> <button mat-raised-button class="mat-accent mt-16" [disabled]="!newLabelForm.valid">Add</button>
</form> </form>
</div> </div>
</div> </div>

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

@ -23,7 +23,7 @@ export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy
newLabel = { newLabel = {
'id' : '', 'id' : '',
'name' : '', 'name' : '',
'color': 'md-blue-400-bg' 'color': 'mat-blue-400-bg'
}; };
toggleInArray = FuseUtils.toggleInArray; toggleInArray = FuseUtils.toggleInArray;

12
src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html
View File

@ -1,7 +1,7 @@
<div *ngIf="!formActive" class="board-name" fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center"> <div *ngIf="!formActive" class="board-name" fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
<span>{{board.name}}</span> <span>{{board.name}}</span>
<button md-icon-button (click)="openForm()"> <button mat-icon-button (click)="openForm()">
<md-icon class="s-16">edit_mode</md-icon> <mat-icon class="s-16">edit_mode</mat-icon>
</button> </button>
</div> </div>
@ -12,10 +12,10 @@
<input formControlName="name" #nameInput fxFlex="1 0 auto" placeholder="Write a board name"> <input formControlName="name" #nameInput fxFlex="1 0 auto" placeholder="Write a board name">
<button md-icon-button fxFlex="0 1 auto"> <button mat-icon-button fxFlex="0 1 auto">
<md-icon>check</md-icon> <mat-icon>check</mat-icon>
</button> </button>
<button md-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button"> <button mat-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</form> </form>

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

@ -2,7 +2,7 @@
(click)="openForm()" (click)="openForm()"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<div> <div>
<md-icon class="s-20">add</md-icon> <mat-icon class="s-20">add</mat-icon>
</div> </div>
<span>Add a card</span> <span>Add a card</span>
</div> </div>
@ -11,19 +11,19 @@
<form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column"> <form [formGroup]="form" (submit)="onFormSubmit()" class="add-card-form" fxLayout="column">
<md-input-container fxFlex floatPlaceholder="never" > <mat-form-field fxFlex floatPlaceholder="never">
<input #nameInput mdInput formControlName="name" placeholder="Card title" autocomplete="off" required> <input #nameInput matInput formControlName="name" placeholder="Card title" autocomplete="off" required>
</md-input-container> </mat-form-field>
<div class="pl-8" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-8" fxLayout="row" fxLayoutAlign="space-between center">
<button md-raised-button class="add-button mat-accent" aria-label="add" <button mat-raised-button class="add-button mat-accent" aria-label="add"
[disabled]="form.invalid"> [disabled]="form.invalid">
<span>Add</span> <span>Add</span>
</button> </button>
<button md-icon-button (click)="closeForm()" class="cancel-button" aria-label="cancel"> <button mat-icon-button (click)="closeForm()" class="cancel-button" aria-label="cancel">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</div> </div>
</form> </form>

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

@ -12,7 +12,7 @@
cursor: pointer; cursor: pointer;
border-radius: 2px; border-radius: 2px;
md-icon { mat-icon {
margin-right: 8px; margin-right: 8px;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
} }
@ -29,7 +29,7 @@
padding: 8px; padding: 8px;
border-top: 1px solid rgba(0, 0, 0, 0.12); border-top: 1px solid rgba(0, 0, 0, 0.12);
md-input-container { mat-form-field {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 12px 8px; padding: 12px 8px;

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

@ -10,7 +10,7 @@
<!-- CARD SORT HANDLE --> <!-- CARD SORT HANDLE -->
<div class="list-card-sort-handle"> <div class="list-card-sort-handle">
<md-icon md-font-icon="icon-cursor-move" class="icon s16"></md-icon> <mat-icon mat-font-icon="icon-cursor-move" class="icon s16"></mat-icon>
</div> </div>
<!-- /CARD SORT HANDLE --> <!-- /CARD SORT HANDLE -->
@ -22,7 +22,7 @@
<span class="list-card-label" <span class="list-card-label"
[ngClass]="board.labels | getById:labelId:'color'" [ngClass]="board.labels | getById:labelId:'color'"
*ngFor="let labelId of card.idLabels" *ngFor="let labelId of card.idLabels"
[md-tooltip]="board.labels | getById:labelId:'name'"> [matTooltip]="board.labels | getById:labelId:'name'">
</span> </span>
</div> </div>
@ -39,7 +39,7 @@
<span class="badge due-date" <span class="badge due-date"
[ngClass]="{'overdue': isOverdue(card.due)}" [ngClass]="{'overdue': isOverdue(card.due)}"
*ngIf="card.due" fxLayout="row" fxLayoutAlign="start center"> *ngIf="card.due" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-16">access_time</md-icon> <mat-icon class="s-16">access_time</mat-icon>
<span>{{card.due | date:'mediumDate'}}</span> <span>{{card.due | date:'mediumDate'}}</span>
</span> </span>
@ -50,7 +50,7 @@
class="badge check-items" class="badge check-items"
[ngClass]="{'completed': card.checkItemsChecked === card.checkItems}" [ngClass]="{'completed': card.checkItemsChecked === card.checkItems}"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-16">check_circle</md-icon> <mat-icon class="s-16">check_circle</mat-icon>
<span>{{card.checkItemsChecked}}</span> <span>{{card.checkItemsChecked}}</span>
<span>/</span> <span>/</span>
<span>{{card.checkItems}}</span> <span>{{card.checkItems}}</span>
@ -69,7 +69,7 @@
<img class="list-card-member-avatar" <img class="list-card-member-avatar"
[src]="board.members | getById:memberId:'avatar'" [src]="board.members | getById:memberId:'avatar'"
[md-tooltip]="board.members | getById:memberId:'name'"> [matTooltip]="board.members | getById:memberId:'name'">
</div> </div>
</div> </div>
@ -86,14 +86,14 @@
<!-- CARD SUBSCRIBE --> <!-- CARD SUBSCRIBE -->
<span *ngIf="card.subscribed" class="list-card-footer-item" <span *ngIf="card.subscribed" class="list-card-footer-item"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-18">remove_red_eye</md-icon> <mat-icon class="s-18">remove_red_eye</mat-icon>
</span> </span>
<!-- / CARD SUBSCRIBE --> <!-- / CARD SUBSCRIBE -->
<!-- CARD DETAILS --> <!-- CARD DETAILS -->
<span *ngIf="card.description !== ''" <span *ngIf="card.description !== ''"
class="list-card-footer-item" fxLayout="row" fxLayoutAlign="start center"> class="list-card-footer-item" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-18">description</md-icon> <mat-icon class="s-18">description</mat-icon>
</span> </span>
<!-- / CARD DETAILS --> <!-- / CARD DETAILS -->
@ -105,7 +105,7 @@
<span *ngIf="card.attachments" <span *ngIf="card.attachments"
class="list-card-footer-item" class="list-card-footer-item"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-18">attachment</md-icon> <mat-icon class="s-18">attachment</mat-icon>
<span class="value">{{card.attachments.length}}</span> <span class="value">{{card.attachments.length}}</span>
</span> </span>
<!-- / CARD ATTACHMENT --> <!-- / CARD ATTACHMENT -->
@ -114,7 +114,7 @@
<span *ngIf="card.comments" <span *ngIf="card.comments"
class="list-card-footer-item" class="list-card-footer-item"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-18">comment</md-icon> <mat-icon class="s-18">comment</mat-icon>
<span class="value">{{card.comments.length}}</span> <span class="value">{{card.comments.length}}</span>
</span> </span>
<!-- / CARD COMMENTS --> <!-- / CARD COMMENTS -->

2
src/app/main/content/apps/scrumboard/board/list/card/card.component.scss
View File

@ -53,7 +53,7 @@
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
color: #FFFFFF; color: #FFFFFF;
md-icon { mat-icon {
margin-right: 4px; margin-right: 4px;
} }

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

@ -8,10 +8,10 @@
<input formControlName="name" #nameInput fxFlex placeholder="Write a list Name"> <input formControlName="name" #nameInput fxFlex placeholder="Write a list Name">
<button md-icon-button fxFlex="0 1 auto"> <button mat-icon-button fxFlex="0 1 auto">
<md-icon>check</md-icon> <mat-icon>check</mat-icon>
</button> </button>
<button md-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button"> <button mat-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button">
<md-icon>close</md-icon> <mat-icon>close</mat-icon>
</button> </button>
</form> </form>

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

@ -10,12 +10,12 @@
</fuse-scrumboard-board-edit-list-name> </fuse-scrumboard-board-edit-list-name>
<div fxFlex="0 1 auto"> <div fxFlex="0 1 auto">
<button md-icon-button class="list-header-option-button" [mdMenuTriggerFor]="listMenu"> <button mat-icon-button class="list-header-option-button" [matMenuTriggerFor]="listMenu">
<md-icon>more_vert</md-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<md-menu #listMenu="mdMenu"> <mat-menu #listMenu="matMenu">
<button md-menu-item (click)="removeList(list.id)">Remove List</button> <button mat-menu-item (click)="removeList(list.id)">Remove List</button>
</md-menu> </mat-menu>
</div> </div>
</div> </div>

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

@ -3,7 +3,7 @@ import { FuseUtils } from '../../../../../../core/fuseUtils';
import { ScrumboardService } from 'app/main/content/apps/scrumboard/scrumboard.service'; import { ScrumboardService } from 'app/main/content/apps/scrumboard/scrumboard.service';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MatDialog, MatDialogRef } from '@angular/material';
import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component'; import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component'; import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component';
import { Card } from '../../card.model'; import { Card } from '../../card.model';
@ -25,12 +25,12 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
onBoardChanged: Subscription; onBoardChanged: Subscription;
confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>; confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private scrumboardService: ScrumboardService, private scrumboardService: ScrumboardService,
public dialog: MdDialog public dialog: MatDialog
) )
{ {
} }

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

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

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

@ -3,7 +3,7 @@
<div class="view" *ngSwitchCase="'main'" [@slideInLeft]> <div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div class="header md-accent-bg px-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center"> <div class="header mat-accent-bg px-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
<div>Settings</div> <div>Settings</div>
</div> </div>
<!-- / SIDENAV HEADER --> <!-- / SIDENAV HEADER -->
@ -13,43 +13,43 @@
<div class="nav"> <div class="nav">
<div class="nav-item"> <div class="nav-item">
<div class="nav-link" md-ripple (click)="view = 'board-color'"> <div class="nav-link" matRipple (click)="view = 'board-color'">
<md-icon class="nav-link-icon">format_color_fill</md-icon> <mat-icon class="nav-link-icon">format_color_fill</mat-icon>
<p class="title">Board Color</p> <p class="title">Board Color</p>
</div> </div>
</div> </div>
<div class="nav-item"> <div class="nav-item">
<div class="nav-link" md-ripple (click)="toggleCardCover()"> <div class="nav-link" matRipple (click)="toggleCardCover()">
<md-icon class="nav-link-icon">photo</md-icon> <mat-icon class="nav-link-icon">photo</mat-icon>
<p fxFlex class="title">Card Cover Images</p> <p fxFlex class="title">Card Cover Images</p>
<md-icon *ngIf="board.settings.cardCoverImages" class="s-18">check</md-icon> <mat-icon *ngIf="board.settings.cardCoverImages" class="s-18">check</mat-icon>
</div> </div>
</div> </div>
<div class="nav-item"> <div class="nav-item">
<div class="nav-link" md-ripple (click)="toggleSubcription()"> <div class="nav-link" matRipple (click)="toggleSubcription()">
<md-icon class="nav-link-icon">remove_red_eye</md-icon> <mat-icon class="nav-link-icon">remove_red_eye</mat-icon>
<p fxFlex class="title">Subscribe</p> <p fxFlex class="title">Subscribe</p>
<md-icon *ngIf="board.settings.subscribed" class="s-18">check</md-icon> <mat-icon *ngIf="board.settings.subscribed" class="s-18">check</mat-icon>
</div> </div>
</div> </div>
<div class="nav-item"> <div class="nav-item">
<div class="nav-link" md-ripple> <div class="nav-link" matRipple>
<md-icon class="nav-link-icon">content_copy</md-icon> <mat-icon class="nav-link-icon">content_copy</mat-icon>
<p class="title">Copy Board</p> <p class="title">Copy Board</p>
</div> </div>
</div> </div>
<div class="nav-item"> <div class="nav-item">
<div class="nav-link" md-ripple> <div class="nav-link" matRipple>
<md-icon class="nav-link-icon">delete</md-icon> <mat-icon class="nav-link-icon">delete</mat-icon>
<p class="title">Delete Board</p> <p class="title">Delete Board</p>
</div> </div>
</div> </div>
<md-divider></md-divider> <mat-divider></mat-divider>
</div> </div>
</div> </div>
<!-- / SIDENAV CONTENT --> <!-- / SIDENAV CONTENT -->
@ -58,10 +58,10 @@
<div class="view" *ngSwitchCase="'board-color'" [@slideInRight]> <div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div class="header md-accent-bg px-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header mat-accent-bg px-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
<div>Background Color</div> <div>Background Color</div>
<button md-icon-button (click)="view ='main'"> <button mat-icon-button (click)="view ='main'">
<md-icon class="s-16">arrow_back</md-icon> <mat-icon class="s-16">arrow_back</mat-icon>
</button> </button>
</div> </div>
<!-- / SIDENAV HEADER --> <!-- / SIDENAV HEADER -->

8
src/app/main/content/apps/scrumboard/scrumboard.component.html
View File

@ -1,7 +1,7 @@
<!-- BOARDS --> <!-- BOARDS -->
<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex fusePerfectScrollbar> <div id="boards" class="mat-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex fusePerfectScrollbar>
<div class="header pt-44 pt-md-88" fxFlex="0 0 auto" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms'}}"> <div class="header pt-44 pt-mat-88" fxFlex="0 0 auto" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms'}}">
<h1>Scrumboard App</h1> <h1>Scrumboard App</h1>
</div> </div>
@ -14,7 +14,7 @@
[routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri" [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
fxLayout="column" fxLayoutAlign="center center" fxLayout="column" fxLayoutAlign="center center"
[@animate]="{value:'*',params:{y:'100%'}}"> [@animate]="{value:'*',params:{y:'100%'}}">
<md-icon class="s-64">assessment</md-icon> <mat-icon class="s-64">assessment</mat-icon>
<div class="board-name">{{board.name}}</div> <div class="board-name">{{board.name}}</div>
</div> </div>
<!-- / BOARD --> <!-- / BOARD -->
@ -23,7 +23,7 @@
<div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center" <div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
(click)="newBoard()" (click)="newBoard()"
[@animate]="{value:'*',params:{y:'100%'}}"> [@animate]="{value:'*',params:{y:'100%'}}">
<md-icon class="s-64">add_circle</md-icon> <mat-icon class="s-64">add_circle</mat-icon>
<div class="board-name">Add new board</div> <div class="board-name">Add new board</div>
</div> </div>
<!-- / NEW BOARD BUTTON --> <!-- / NEW BOARD BUTTON -->

26
src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
View File

@ -1,20 +1,20 @@
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start" <div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg"> class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</md-icon> <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span> <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
</div> </div>
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}"> <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
<div class="title">John Doe</div> <div class="title">John Doe</div>
<md-select class="account-selection" placeholder="Todo Selection" <mat-select class="account-selection" placeholder="Todo Selection"
floatPlaceholder="never" floatPlaceholder="never"
[ngModel]="selectedAccount"> [ngModel]="selectedAccount">
<md-option *ngFor="let account of (accounts | keys)" [value]="account.key"> <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
{{account.value}} {{account.value}}
</md-option> </mat-option>
</md-select> </mat-select>
</div> </div>
</div> </div>
@ -24,7 +24,7 @@
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}"> <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24"> <div class="p-24">
<button md-raised-button fxFlex <button mat-raised-button fxFlex
class="mat-accent add-todo-button" class="mat-accent add-todo-button"
(click)="newTodo()" (click)="newTodo()"
aria-label="ADD TASK"> aria-label="ADD TASK">
@ -35,8 +35,8 @@
<div class="nav"> <div class="nav">
<div class="nav-item"> <div class="nav-item">
<a class="nav-link" md-ripple [routerLink]="'/apps/todo/all'" routerLinkActive="active"> <a class="nav-link" matRipple [routerLink]="'/apps/todo/all'" routerLinkActive="active">
<md-icon class="nav-link-icon">view_headline</md-icon> <mat-icon class="nav-link-icon">view_headline</mat-icon>
<span>All</span> <span>All</span>
</a> </a>
</div> </div>
@ -44,8 +44,8 @@
<div class="nav-subheader">FILTERS</div> <div class="nav-subheader">FILTERS</div>
<div class="nav-item" *ngFor="let filter of filters"> <div class="nav-item" *ngFor="let filter of filters">
<a class="nav-link" md-ripple [routerLink]="'/apps/todo/filter/' + filter.handle" routerLinkActive="active"> <a class="nav-link" matRipple [routerLink]="'/apps/todo/filter/' + filter.handle" routerLinkActive="active">
<md-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</md-icon> <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<span>{{filter.title}}</span> <span>{{filter.title}}</span>
</a> </a>
</div> </div>
@ -53,8 +53,8 @@
<div class="nav-subheader">TAGS</div> <div class="nav-subheader">TAGS</div>
<div class="nav-item" *ngFor="let tag of tags"> <div class="nav-item" *ngFor="let tag of tags">
<a class="nav-link" md-ripple [routerLink]="'/apps/todo/tag/' + tag.handle" routerLinkActive="active"> <a class="nav-link" matRipple [routerLink]="'/apps/todo/tag/' + tag.handle" routerLinkActive="active">
<md-icon class="nav-link-icon" [ngStyle]="{'color':tag.color}">label</md-icon> <mat-icon class="nav-link-icon" [ngStyle]="{'color':tag.color}">label</mat-icon>
<span>{{tag.title}}</span> <span>{{tag.title}}</span>
</a> </a>
</div> </div>

86
src/app/main/content/apps/todo/todo-details/todo-details.component.html
View File

@ -1,7 +1,7 @@
<div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<md-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom <mat-icon class="s-120 mb-12 select-todo-icon" *fuseIfOnDom
[@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box
</md-icon> </mat-icon>
<span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select <span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}">Select
a todo a todo
</span> </span>
@ -11,40 +11,40 @@
<div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center"> <div class="todo-header" fxLayout="row" fxLayoutAlign="space-between center">
<button md-button class="toggle-complete-button p-0" (click)="toggleCompleted($event)" <button mat-button class="toggle-complete-button p-0" (click)="toggleCompleted($event)"
aria-label="Toggle completed" fxFlex="0 1 auto"> aria-label="Toggle completed" fxFlex="0 1 auto">
<md-icon *ngIf="todo.completed">check_box</md-icon> <mat-icon *ngIf="todo.completed">check_box</mat-icon>
<md-icon *ngIf="!todo.completed">check_box_outline_blank</md-icon> <mat-icon *ngIf="!todo.completed">check_box_outline_blank</mat-icon>
<span>Mark as Done</span> <span>Mark as Done</span>
</button> </button>
<div class="actions" fxLayout="row" fxLayoutAlign="start center"> <div class="actions" fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button" (click)="toggleDeleted($event)" aria-label="Toggle delete"> <button mat-button class="mat-icon-button" (click)="toggleDeleted($event)" aria-label="Toggle delete">
<md-icon *ngIf="todo.deleted">delete_forever</md-icon> <mat-icon *ngIf="todo.deleted">delete_forever</mat-icon>
<md-icon *ngIf="!todo.deleted">delete</md-icon> <mat-icon *ngIf="!todo.deleted">delete</mat-icon>
</button> </button>
<button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important"> <button mat-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
<md-icon *ngIf="todo.important">error</md-icon> <mat-icon *ngIf="todo.important">error</mat-icon>
<md-icon *ngIf="!todo.important">error_outline</md-icon> <mat-icon *ngIf="!todo.important">error_outline</mat-icon>
</button> </button>
<button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star"> <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
<md-icon *ngIf="todo.starred">star</md-icon> <mat-icon *ngIf="todo.starred">star</mat-icon>
<md-icon *ngIf="!todo.starred">star_outline</md-icon> <mat-icon *ngIf="!todo.starred">star_outline</mat-icon>
</button> </button>
<button md-icon-button [mdMenuTriggerFor]="labelMenu" fxFlex="0 1 auto"> <button mat-icon-button [matMenuTriggerFor]="labelMenu" fxFlex="0 1 auto">
<md-icon>label</md-icon> <mat-icon>label</mat-icon>
</button> </button>
<md-menu #labelMenu="mdMenu"> <mat-menu #labelMenu="matMenu">
<button md-menu-item *ngFor="let tag of tags" <button mat-menu-item *ngFor="let tag of tags"
(click)="toggleTagOnTodo(tag.id)"> (click)="toggleTagOnTodo(tag.id)">
{{tag.title}} {{tag.title}}
</button> </button>
</md-menu> </mat-menu>
</div> </div>
</div> </div>
@ -53,18 +53,18 @@
<form [formGroup]="todoForm" (submit)="addTodo()"> <form [formGroup]="todoForm" (submit)="addTodo()">
<md-input-container class="title mt-8" floatPlaceholder="never" fxFill> <mat-form-field class="title mt-8" floatPlaceholder="never" fxFill>
<textarea mdInput <textarea matInput
#titleInput #titleInput
name="title" name="title"
formControlName="title" formControlName="title"
placeholder="Title" placeholder="Title"
mdTextareaAutosize matTextareaAutosize
mdAutosizeMinRows="1" matAutosizeMinRows="1"
mdAutosizeMaxRows="2" matAutosizeMaxRows="2"
required> required>
</textarea> </textarea>
</md-input-container> </mat-form-field>
<div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap> <div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
<div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags"> <div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
@ -77,35 +77,35 @@
<div class="dates" fxFlexFill fxLayout="column" fxLayout.gt-xs="row"> <div class="dates" fxFlexFill fxLayout="column" fxLayout.gt-xs="row">
<md-form-field class="mr-sm-24" fxFlex> <mat-form-field class="mr-sm-24" fxFlex>
<input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date"> <input matInput [matDatepicker]="startDatePicker" placeholder="Start Date">
<md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
<md-datepicker #startDatePicker></md-datepicker> <mat-datepicker #startDatePicker></mat-datepicker>
</md-form-field> </mat-form-field>
<md-form-field fxFlex> <mat-form-field fxFlex>
<input mdInput [mdDatepicker]="dueDatePicker" placeholder="Due Date"> <input matInput [matDatepicker]="dueDatePicker" placeholder="Due Date">
<md-datepicker-toggle mdSuffix [for]="dueDatePicker"></md-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
<md-datepicker #dueDatePicker></md-datepicker> <mat-datepicker #dueDatePicker></mat-datepicker>
</md-form-field> </mat-form-field>
</div> </div>
<md-input-container class="" fxFill> <mat-form-field class="" fxFill>
<textarea mdInput #notes <textarea matInput #notes
name="notes" name="notes"
formControlName="notes" formControlName="notes"
placeholder="Notes" placeholder="Notes"
maxlength="500" maxlength="500"
mdTextareaAutosize matTextareaAutosize
mdAutosizeMinRows="1" matAutosizeMinRows="1"
mdAutosizeMaxRows="6"> matAutosizeMaxRows="6">
</textarea> </textarea>
<md-hint align="end">{{notes.value.length}} / 500</md-hint> <mat-hint align="end">{{notes.value.length}} / 500</mat-hint>
</md-input-container> </mat-form-field>
<button *ngIf="formType === 'new'" <button *ngIf="formType === 'new'"
md-raised-button class="mat-accent" mat-raised-button class="mat-accent"
[disabled]="todoForm.invalid">SAVE [disabled]="todoForm.invalid">SAVE
</button> </button>
</form> </form>

Some files were not shown because too many files have changed in this diff Show More