mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
Merge branch 'master' of https://github.com/withinpixels/fuse2
This commit is contained in:
Sercan Yemen
commit
da433711be
968
package-lock.json
generated
968
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
|
|
@ -12,30 +12,30 @@
|
|||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^4.3.1",
|
||||
"@angular/animations": "^4.3.2",
|
||||
"@angular/cdk": "^2.0.0-beta.8",
|
||||
"@angular/common": "^4.3.1",
|
||||
"@angular/compiler": "^4.3.1",
|
||||
"@angular/core": "^4.3.1",
|
||||
"@angular/common": "^4.3.2",
|
||||
"@angular/compiler": "^4.3.2",
|
||||
"@angular/core": "^4.3.2",
|
||||
"@angular/flex-layout": "2.0.0-beta.8",
|
||||
"@angular/forms": "^4.3.1",
|
||||
"@angular/http": "^4.3.1",
|
||||
"@angular/forms": "^4.3.2",
|
||||
"@angular/http": "^4.3.2",
|
||||
"@angular/material": "^2.0.0-beta.8",
|
||||
"@angular/platform-browser": "^4.3.1",
|
||||
"@angular/platform-browser-dynamic": "^4.3.1",
|
||||
"@angular/router": "^4.3.1",
|
||||
"@angular/platform-browser": "^4.3.2",
|
||||
"@angular/platform-browser-dynamic": "^4.3.2",
|
||||
"@angular/router": "^4.3.2",
|
||||
"@swimlane/ngx-datatable": "^9.3.1",
|
||||
"@swimlane/ngx-dnd": "^2.2.0",
|
||||
"angular-calendar": "^0.19.0",
|
||||
"angular-in-memory-web-api": "^0.3.2",
|
||||
"core-js": "^2.4.1",
|
||||
"firebase": "^4.1.3",
|
||||
"firebase": "^4.2.0",
|
||||
"hammerjs": "^2.0.8",
|
||||
"moment": "^2.18.1",
|
||||
"ngx-color-picker": "^4.2.0",
|
||||
"ngx-perfect-scrollbar": "^4.5.2",
|
||||
"rxjs": "^5.4.2",
|
||||
"zone.js": "^0.8.13"
|
||||
"zone.js": "^0.8.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "^1.2.5",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ fuse-layout {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
fuse-content {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -183,77 +183,77 @@ export class FuseNavigation
|
|||
{
|
||||
'title': 'Alerts',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/alerts'
|
||||
'url' : '/ui/elements/alerts'
|
||||
},
|
||||
{
|
||||
'title': 'Badges',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/badges'
|
||||
'url' : '/ui/elements/badges'
|
||||
},
|
||||
{
|
||||
'title': 'Breadcrumb',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/breadcrumb'
|
||||
'url' : '/ui/elements/breadcrumb'
|
||||
},
|
||||
{
|
||||
'title': 'Buttons',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/buttons'
|
||||
'url' : '/ui/elements/buttons'
|
||||
},
|
||||
{
|
||||
'title': 'Button Group',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/button-group'
|
||||
'url' : '/ui/elements/button-group'
|
||||
},
|
||||
{
|
||||
'title': 'Cards',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/cards'
|
||||
'url' : '/ui/elements/cards'
|
||||
},
|
||||
{
|
||||
'title': 'Dropdowns',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/dropdowns'
|
||||
'url' : '/ui/elements/dropdowns'
|
||||
},
|
||||
{
|
||||
'title': 'Forms',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/forms'
|
||||
'url' : '/ui/elements/forms'
|
||||
},
|
||||
{
|
||||
'title': 'Input Group',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/input-group'
|
||||
'url' : '/ui/elements/input-group'
|
||||
},
|
||||
{
|
||||
'title': 'Jumbotron',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/jumbotron'
|
||||
'url' : '/ui/elements/jumbotron'
|
||||
},
|
||||
{
|
||||
'title': 'List Group',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/list-group'
|
||||
'url' : '/ui/elements/list-group'
|
||||
},
|
||||
{
|
||||
'title': 'Navs',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/navs'
|
||||
'url' : '/ui/elements/navs'
|
||||
},
|
||||
{
|
||||
'title': 'Navbar',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/navbar'
|
||||
'url' : '/ui/elements/navbar'
|
||||
},
|
||||
{
|
||||
'title': 'Pagination',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/pagination'
|
||||
'url' : '/ui/elements/pagination'
|
||||
},
|
||||
{
|
||||
'title': 'Progress',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/elements/progress'
|
||||
'url' : '/ui/elements/progress'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -265,12 +265,12 @@ export class FuseNavigation
|
|||
{
|
||||
'title': 'Simple Table',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/tables/simple-table'
|
||||
'url' : '/ui/tables/simple-table'
|
||||
},
|
||||
{
|
||||
'title': 'Data Table',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/user-interface/tables/data-table'
|
||||
'url' : '/ui/tables/data-table'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -362,7 +362,7 @@ export class FuseNavigation
|
|||
'title': 'Colors',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'color_lens',
|
||||
'url' : '/user-interface/colors'
|
||||
'url' : '/ui/colors'
|
||||
},
|
||||
{
|
||||
'title': 'COMPONENTS',
|
||||
|
|
|
|||
|
|
@ -84,4 +84,14 @@ export class FuseUtils
|
|||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
public static genearateGUID()
|
||||
{
|
||||
function S4()
|
||||
{
|
||||
return (((1 + Math.random()) * 0x10000) || 0).toString(16).substring(1);
|
||||
}
|
||||
|
||||
return (S4() + S4());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
656
src/app/core/matColors.ts
Normal file
656
src/app/core/matColors.ts
Normal file
|
|
@ -0,0 +1,656 @@
|
|||
const black87 = 'rgba(black, 0.87)';
|
||||
const white87 = 'rgba(white, 0.87)';
|
||||
const black12 = 'rgba(black, 0.12)';
|
||||
const white12 = 'rgba(white, 0.12)';
|
||||
const black6 = 'rgba(black, 0.06)';
|
||||
const white6 = 'rgba(white, 0.06)';
|
||||
const matColors = {
|
||||
'red': {
|
||||
50 : '#ffebee',
|
||||
100 : '#ffcdd2',
|
||||
200 : '#ef9a9a',
|
||||
300 : '#e57373',
|
||||
400 : '#ef5350',
|
||||
500 : '#f44336',
|
||||
600 : '#e53935',
|
||||
700 : '#d32f2f',
|
||||
800 : '#c62828',
|
||||
900 : '#b71c1c',
|
||||
A100 : '#ff8a80',
|
||||
A200 : '#ff5252',
|
||||
A400 : '#ff1744',
|
||||
A700 : '#d50000',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : 'white',
|
||||
600 : 'white',
|
||||
700 : 'white',
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: 'white',
|
||||
A400: 'white',
|
||||
A700: 'white',
|
||||
}
|
||||
},
|
||||
|
||||
'pink': {
|
||||
50 : '#fce4ec',
|
||||
100 : '#f8bbd0',
|
||||
200 : '#f48fb1',
|
||||
300 : '#f06292',
|
||||
400 : '#ec407a',
|
||||
500 : '#e91e63',
|
||||
600 : '#d81b60',
|
||||
700 : '#c2185b',
|
||||
800 : '#ad1457',
|
||||
900 : '#880e4f',
|
||||
A100 : '#ff80ab',
|
||||
A200 : '#ff4081',
|
||||
A400 : '#f50057',
|
||||
A700 : '#c51162',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : 'white',
|
||||
600 : 'white',
|
||||
700 : white87,
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: 'white',
|
||||
A400: 'white',
|
||||
A700: 'white',
|
||||
}
|
||||
},
|
||||
|
||||
'purple': {
|
||||
50 : '#f3e5f5',
|
||||
100 : '#e1bee7',
|
||||
200 : '#ce93d8',
|
||||
300 : '#ba68c8',
|
||||
400 : '#ab47bc',
|
||||
500 : '#9c27b0',
|
||||
600 : '#8e24aa',
|
||||
700 : '#7b1fa2',
|
||||
800 : '#6a1b9a',
|
||||
900 : '#4a148c',
|
||||
A100 : '#ea80fc',
|
||||
A200 : '#e040fb',
|
||||
A400 : '#d500f9',
|
||||
A700 : '#aa00ff',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : 'white',
|
||||
400 : 'white',
|
||||
500 : white87,
|
||||
600 : white87,
|
||||
700 : white87,
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: 'white',
|
||||
A400: 'white',
|
||||
A700: 'white',
|
||||
}
|
||||
},
|
||||
|
||||
'deep-purple': {
|
||||
50 : '#ede7f6',
|
||||
100 : '#d1c4e9',
|
||||
200 : '#b39ddb',
|
||||
300 : '#9575cd',
|
||||
400 : '#7e57c2',
|
||||
500 : '#673ab7',
|
||||
600 : '#5e35b1',
|
||||
700 : '#512da8',
|
||||
800 : '#4527a0',
|
||||
900 : '#311b92',
|
||||
A100 : '#b388ff',
|
||||
A200 : '#7c4dff',
|
||||
A400 : '#651fff',
|
||||
A700 : '#6200ea',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : 'white',
|
||||
400 : 'white',
|
||||
500 : white87,
|
||||
600 : white87,
|
||||
700 : white87,
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: 'white',
|
||||
A400: white87,
|
||||
A700: white87,
|
||||
}
|
||||
},
|
||||
|
||||
'indigo': {
|
||||
50 : '#e8eaf6',
|
||||
100 : '#c5cae9',
|
||||
200 : '#9fa8da',
|
||||
300 : '#7986cb',
|
||||
400 : '#5c6bc0',
|
||||
500 : '#3f51b5',
|
||||
600 : '#3949ab',
|
||||
700 : '#303f9f',
|
||||
800 : '#283593',
|
||||
900 : '#1a237e',
|
||||
A100 : '#8c9eff',
|
||||
A200 : '#536dfe',
|
||||
A400 : '#3d5afe',
|
||||
A700 : '#304ffe',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : 'white',
|
||||
400 : 'white',
|
||||
500 : white87,
|
||||
600 : white87,
|
||||
700 : white87,
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: 'white',
|
||||
A400: 'white',
|
||||
A700: white87,
|
||||
}
|
||||
},
|
||||
|
||||
'blue': {
|
||||
50 : '#e3f2fd',
|
||||
100 : '#bbdefb',
|
||||
200 : '#90caf9',
|
||||
300 : '#64b5f6',
|
||||
400 : '#42a5f5',
|
||||
500 : '#2196f3',
|
||||
600 : '#1e88e5',
|
||||
700 : '#1976d2',
|
||||
800 : '#1565c0',
|
||||
900 : '#0d47a1',
|
||||
A100 : '#82b1ff',
|
||||
A200 : '#448aff',
|
||||
A400 : '#2979ff',
|
||||
A700 : '#2962ff',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : 'white',
|
||||
600 : 'white',
|
||||
700 : 'white',
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: 'white',
|
||||
A400: 'white',
|
||||
A700: 'white',
|
||||
}
|
||||
},
|
||||
|
||||
'light-blue': {
|
||||
50 : '#e1f5fe',
|
||||
100 : '#b3e5fc',
|
||||
200 : '#81d4fa',
|
||||
300 : '#4fc3f7',
|
||||
400 : '#29b6f6',
|
||||
500 : '#03a9f4',
|
||||
600 : '#039be5',
|
||||
700 : '#0288d1',
|
||||
800 : '#0277bd',
|
||||
900 : '#01579b',
|
||||
A100 : '#80d8ff',
|
||||
A200 : '#40c4ff',
|
||||
A400 : '#00b0ff',
|
||||
A700 : '#0091ea',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : 'white',
|
||||
600 : 'white',
|
||||
700 : 'white',
|
||||
800 : 'white',
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: 'white',
|
||||
}
|
||||
},
|
||||
|
||||
'cyan': {
|
||||
50 : '#e0f7fa',
|
||||
100 : '#b2ebf2',
|
||||
200 : '#80deea',
|
||||
300 : '#4dd0e1',
|
||||
400 : '#26c6da',
|
||||
500 : '#00bcd4',
|
||||
600 : '#00acc1',
|
||||
700 : '#0097a7',
|
||||
800 : '#00838f',
|
||||
900 : '#006064',
|
||||
A100 : '#84ffff',
|
||||
A200 : '#18ffff',
|
||||
A400 : '#00e5ff',
|
||||
A700 : '#00b8d4',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : 'white',
|
||||
600 : 'white',
|
||||
700 : 'white',
|
||||
800 : 'white',
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: black87,
|
||||
}
|
||||
},
|
||||
|
||||
'teal': {
|
||||
50 : '#e0f2f1',
|
||||
100 : '#b2dfdb',
|
||||
200 : '#80cbc4',
|
||||
300 : '#4db6ac',
|
||||
400 : '#26a69a',
|
||||
500 : '#009688',
|
||||
600 : '#00897b',
|
||||
700 : '#00796b',
|
||||
800 : '#00695c',
|
||||
900 : '#004d40',
|
||||
A100 : '#a7ffeb',
|
||||
A200 : '#64ffda',
|
||||
A400 : '#1de9b6',
|
||||
A700 : '#00bfa5',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : 'white',
|
||||
600 : 'white',
|
||||
700 : 'white',
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: black87,
|
||||
}
|
||||
},
|
||||
|
||||
'green': {
|
||||
50 : '#e8f5e9',
|
||||
100 : '#c8e6c9',
|
||||
200 : '#a5d6a7',
|
||||
300 : '#81c784',
|
||||
400 : '#66bb6a',
|
||||
500 : '#4caf50',
|
||||
600 : '#43a047',
|
||||
700 : '#388e3c',
|
||||
800 : '#2e7d32',
|
||||
900 : '#1b5e20',
|
||||
A100 : '#b9f6ca',
|
||||
A200 : '#69f0ae',
|
||||
A400 : '#00e676',
|
||||
A700 : '#00c853',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : 'white',
|
||||
600 : 'white',
|
||||
700 : 'white',
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: black87,
|
||||
}
|
||||
},
|
||||
|
||||
'light-green': {
|
||||
50 : '#f1f8e9',
|
||||
100 : '#dcedc8',
|
||||
200 : '#c5e1a5',
|
||||
300 : '#aed581',
|
||||
400 : '#9ccc65',
|
||||
500 : '#8bc34a',
|
||||
600 : '#7cb342',
|
||||
700 : '#689f38',
|
||||
800 : '#558b2f',
|
||||
900 : '#33691e',
|
||||
A100 : '#ccff90',
|
||||
A200 : '#b2ff59',
|
||||
A400 : '#76ff03',
|
||||
A700 : '#64dd17',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : black87,
|
||||
600 : black87,
|
||||
700 : black87,
|
||||
800 : 'white',
|
||||
900 : 'white',
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: black87,
|
||||
}
|
||||
},
|
||||
|
||||
'lime': {
|
||||
50 : '#f9fbe7',
|
||||
100 : '#f0f4c3',
|
||||
200 : '#e6ee9c',
|
||||
300 : '#dce775',
|
||||
400 : '#d4e157',
|
||||
500 : '#cddc39',
|
||||
600 : '#c0ca33',
|
||||
700 : '#afb42b',
|
||||
800 : '#9e9d24',
|
||||
900 : '#827717',
|
||||
A100 : '#f4ff81',
|
||||
A200 : '#eeff41',
|
||||
A400 : '#c6ff00',
|
||||
A700 : '#aeea00',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : black87,
|
||||
600 : black87,
|
||||
700 : black87,
|
||||
800 : black87,
|
||||
900 : 'white',
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: black87,
|
||||
}
|
||||
},
|
||||
|
||||
'yellow': {
|
||||
50 : '#fffde7',
|
||||
100 : '#fff9c4',
|
||||
200 : '#fff59d',
|
||||
300 : '#fff176',
|
||||
400 : '#ffee58',
|
||||
500 : '#ffeb3b',
|
||||
600 : '#fdd835',
|
||||
700 : '#fbc02d',
|
||||
800 : '#f9a825',
|
||||
900 : '#f57f17',
|
||||
A100 : '#ffff8d',
|
||||
A200 : '#ffff00',
|
||||
A400 : '#ffea00',
|
||||
A700 : '#ffd600',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : black87,
|
||||
600 : black87,
|
||||
700 : black87,
|
||||
800 : black87,
|
||||
900 : black87,
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: black87,
|
||||
}
|
||||
},
|
||||
|
||||
'amber': {
|
||||
50 : '#fff8e1',
|
||||
100 : '#ffecb3',
|
||||
200 : '#ffe082',
|
||||
300 : '#ffd54f',
|
||||
400 : '#ffca28',
|
||||
500 : '#ffc107',
|
||||
600 : '#ffb300',
|
||||
700 : '#ffa000',
|
||||
800 : '#ff8f00',
|
||||
900 : '#ff6f00',
|
||||
A100 : '#ffe57f',
|
||||
A200 : '#ffd740',
|
||||
A400 : '#ffc400',
|
||||
A700 : '#ffab00',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : black87,
|
||||
600 : black87,
|
||||
700 : black87,
|
||||
800 : black87,
|
||||
900 : black87,
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: black87,
|
||||
}
|
||||
},
|
||||
|
||||
'orange': {
|
||||
50 : '#fff3e0',
|
||||
100 : '#ffe0b2',
|
||||
200 : '#ffcc80',
|
||||
300 : '#ffb74d',
|
||||
400 : '#ffa726',
|
||||
500 : '#ff9800',
|
||||
600 : '#fb8c00',
|
||||
700 : '#f57c00',
|
||||
800 : '#ef6c00',
|
||||
900 : '#e65100',
|
||||
A100 : '#ffd180',
|
||||
A200 : '#ffab40',
|
||||
A400 : '#ff9100',
|
||||
A700 : '#ff6d00',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : black87,
|
||||
600 : black87,
|
||||
700 : black87,
|
||||
800 : 'white',
|
||||
900 : 'white',
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: 'black',
|
||||
}
|
||||
},
|
||||
|
||||
'deep-orange': {
|
||||
50 : '#fbe9e7',
|
||||
100 : '#ffccbc',
|
||||
200 : '#ffab91',
|
||||
300 : '#ff8a65',
|
||||
400 : '#ff7043',
|
||||
500 : '#ff5722',
|
||||
600 : '#f4511e',
|
||||
700 : '#e64a19',
|
||||
800 : '#d84315',
|
||||
900 : '#bf360c',
|
||||
A100 : '#ff9e80',
|
||||
A200 : '#ff6e40',
|
||||
A400 : '#ff3d00',
|
||||
A700 : '#dd2c00',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : 'white',
|
||||
600 : 'white',
|
||||
700 : 'white',
|
||||
800 : 'white',
|
||||
900 : 'white',
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: 'white',
|
||||
A700: 'white',
|
||||
}
|
||||
},
|
||||
|
||||
'brown': {
|
||||
50 : '#efebe9',
|
||||
100 : '#d7ccc8',
|
||||
200 : '#bcaaa4',
|
||||
300 : '#a1887f',
|
||||
400 : '#8d6e63',
|
||||
500 : '#795548',
|
||||
600 : '#6d4c41',
|
||||
700 : '#5d4037',
|
||||
800 : '#4e342e',
|
||||
900 : '#3e2723',
|
||||
A100 : '#d7ccc8',
|
||||
A200 : '#bcaaa4',
|
||||
A400 : '#8d6e63',
|
||||
A700 : '#5d4037',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : 'white',
|
||||
400 : 'white',
|
||||
500 : white87,
|
||||
600 : white87,
|
||||
700 : white87,
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: 'white',
|
||||
A700: white87,
|
||||
}
|
||||
},
|
||||
|
||||
'grey': {
|
||||
0 : '#ffffff',
|
||||
50 : '#fafafa',
|
||||
100 : '#f5f5f5',
|
||||
200 : '#eeeeee',
|
||||
300 : '#e0e0e0',
|
||||
400 : '#bdbdbd',
|
||||
500 : '#9e9e9e',
|
||||
600 : '#757575',
|
||||
700 : '#616161',
|
||||
800 : '#424242',
|
||||
900 : '#212121',
|
||||
1000 : '#000000',
|
||||
A100 : '#ffffff',
|
||||
A200 : '#eeeeee',
|
||||
A400 : '#bdbdbd',
|
||||
A700 : '#616161',
|
||||
contrast: {
|
||||
0 : black87,
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : black87,
|
||||
500 : black87,
|
||||
600 : white87,
|
||||
700 : white87,
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
1000: white87,
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: black87,
|
||||
A700: white87,
|
||||
}
|
||||
},
|
||||
|
||||
'blue-grey': {
|
||||
50 : '#eceff1',
|
||||
100 : '#cfd8dc',
|
||||
200 : '#b0bec5',
|
||||
300 : '#90a4ae',
|
||||
400 : '#78909c',
|
||||
500 : '#607d8b',
|
||||
600 : '#546e7a',
|
||||
700 : '#455a64',
|
||||
800 : '#37474f',
|
||||
900 : '#263238',
|
||||
A100 : '#cfd8dc',
|
||||
A200 : '#b0bec5',
|
||||
A400 : '#78909c',
|
||||
A700 : '#455a64',
|
||||
contrast: {
|
||||
50 : black87,
|
||||
100 : black87,
|
||||
200 : black87,
|
||||
300 : black87,
|
||||
400 : 'white',
|
||||
500 : 'white',
|
||||
600 : white87,
|
||||
700 : white87,
|
||||
800 : white87,
|
||||
900 : white87,
|
||||
A100: black87,
|
||||
A200: black87,
|
||||
A400: 'white',
|
||||
A700: white87,
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
// Color palettes from the Material Design spec.
|
||||
// See https://www.google.com/design/spec/style/color.html
|
||||
*/
|
||||
export class MatColors
|
||||
{
|
||||
public static all = matColors;
|
||||
|
||||
public static getColor(colorName)
|
||||
{
|
||||
if ( matColors[colorName] )
|
||||
{
|
||||
return matColors[colorName];
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
10
src/app/core/pipes/camelCaseToDash.pipe.ts
Normal file
10
src/app/core/pipes/camelCaseToDash.pipe.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({name: 'camelCaseToDash'})
|
||||
export class CamelCaseToDashPipe implements PipeTransform
|
||||
{
|
||||
transform(value: string, args: any[] = [])
|
||||
{
|
||||
return value ? String(value).replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) : '';
|
||||
}
|
||||
}
|
||||
|
|
@ -4,13 +4,15 @@ import { KeysPipe } from './keys.pipe';
|
|||
import { GetByIdPipe } from './getById.pipe';
|
||||
import { HtmlToPlaintextPipe } from './htmlToPlaintext.pipe';
|
||||
import { FilterPipe } from './filter.pipe';
|
||||
import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
KeysPipe,
|
||||
GetByIdPipe,
|
||||
HtmlToPlaintextPipe,
|
||||
FilterPipe
|
||||
FilterPipe,
|
||||
CamelCaseToDashPipe
|
||||
|
||||
],
|
||||
imports : [],
|
||||
|
|
@ -18,7 +20,8 @@ import { FilterPipe } from './filter.pipe';
|
|||
KeysPipe,
|
||||
GetByIdPipe,
|
||||
HtmlToPlaintextPipe,
|
||||
FilterPipe
|
||||
FilterPipe,
|
||||
CamelCaseToDashPipe
|
||||
]
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
$matColorsMap: (
|
||||
red: $mat-red,
|
||||
pink:$mat-pink,
|
||||
purple:$mat-purple,
|
||||
deep-purple:$mat-deep-purple,
|
||||
indigo:$mat-indigo,
|
||||
blue:$mat-blue,
|
||||
light-blue:$mat-light-blue,
|
||||
cyan:$mat-cyan,
|
||||
teal:$mat-teal,
|
||||
green:$mat-green,
|
||||
light-green:$mat-light-green,
|
||||
lime:$mat-lime,
|
||||
yellow:$mat-yellow,
|
||||
amber:$mat-amber,
|
||||
orange:$mat-orange,
|
||||
deep-orange:$mat-deep-orange,
|
||||
brown:$mat-brown,
|
||||
grey:$mat-grey,
|
||||
blue-grey:$mat-blue-grey
|
||||
);
|
||||
|
||||
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
||||
|
||||
@each $colorName, $colorMap in $matColorsMap {
|
||||
|
||||
@each $hue in $matColorHues {
|
||||
|
||||
$bgColor: map-get($colorMap, $hue);
|
||||
$fgColor: map-get(map-get($colorMap, 'contrast'), $hue);
|
||||
|
||||
.#{$colorName}-#{$hue}-bg {
|
||||
background-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.md-#{$colorName}-#{$hue}-bg {
|
||||
background-color: $bgColor !important;
|
||||
color: $fgColor;
|
||||
}
|
||||
|
||||
.#{$colorName}-#{$hue}-fg {
|
||||
color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-#{$hue}-border {
|
||||
border-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-#{$hue}-border-top {
|
||||
border-top-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-#{$hue}-border-right {
|
||||
border-right-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-#{$hue}-border-bottom {
|
||||
border-bottom-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-#{$hue}-border-left {
|
||||
border-left-color: $bgColor !important;
|
||||
}
|
||||
|
||||
@if ($hue == 500) {
|
||||
|
||||
.md-#{$colorName}-bg {
|
||||
background-color: $bgColor !important;
|
||||
color: $fgColor;
|
||||
}
|
||||
|
||||
.#{$colorName}-bg {
|
||||
background-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-fg {
|
||||
color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-border {
|
||||
border-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-border-top {
|
||||
border-top-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-border-right {
|
||||
border-right-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-border-bottom {
|
||||
border-bottom-color: $bgColor !important;
|
||||
}
|
||||
|
||||
.#{$colorName}-border-left {
|
||||
border-left-color: $bgColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
md-raised-button
|
||||
(click)="dialogRef.close(eventForm)"
|
||||
class="save-button mat-accent"
|
||||
[disabled]="eventForm.pristine"
|
||||
[disabled]="eventForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SAVE
|
||||
</button>
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
md-raised-button
|
||||
(click)="dialogRef.close(['save',eventForm])"
|
||||
class="save-button mat-accent"
|
||||
[disabled]="eventForm.pristine"
|
||||
[disabled]="eventForm.invalid"
|
||||
aria-label="SAVE">
|
||||
SAVE
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Observable } from 'rxjs/Observable';
|
|||
import { Http } from '@angular/http';
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { FuseUtils } from '../../../core/fuseUtils';
|
||||
|
||||
@Injectable()
|
||||
export class ChatService implements Resolve<any>
|
||||
|
|
@ -80,7 +81,7 @@ export class ChatService implements Resolve<any>
|
|||
return item.id === contactId;
|
||||
});
|
||||
|
||||
const chatId = this.guidGenerator();
|
||||
const chatId = FuseUtils.genearateGUID();
|
||||
|
||||
const chat = {
|
||||
id : chatId,
|
||||
|
|
@ -243,18 +244,4 @@ export class ChatService implements Resolve<any>
|
|||
}, reject);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Random ID Generator
|
||||
* @returns {string}
|
||||
*/
|
||||
guidGenerator()
|
||||
{
|
||||
function S4()
|
||||
{
|
||||
return (((1 + Math.random()) * 0x10000) || 0).toString(16).substring(1);
|
||||
}
|
||||
|
||||
return (S4() + S4());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,15 @@
|
|||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content" perfect-scrollbar>
|
||||
|
||||
<div class="p-24" fxFlexAlign="row" fxLayoutAlign="center center">
|
||||
<button md-raised-button
|
||||
class="mat-accent add-todo-button"
|
||||
(click)="newTodo()"
|
||||
aria-label="ADD TASK">
|
||||
ADD TASK
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
|
||||
<div class="nav-item">
|
||||
|
|
|
|||
|
|
@ -26,5 +26,9 @@
|
|||
|
||||
.content {
|
||||
padding: 0 !important;
|
||||
|
||||
.add-todo-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { TodoService } from '../../todo.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-todo-main-sidenav',
|
||||
|
|
@ -18,7 +19,7 @@ export class MainSidenavComponent implements OnInit, OnDestroy
|
|||
onFiltersChanged: Subscription;
|
||||
onTagsChanged: Subscription;
|
||||
|
||||
constructor(private todoService: TodoService)
|
||||
constructor(private todoService: TodoService, private router: Router)
|
||||
{
|
||||
// Data
|
||||
this.accounts = {
|
||||
|
|
@ -49,4 +50,13 @@ export class MainSidenavComponent implements OnInit, OnDestroy
|
|||
this.onFiltersChanged.unsubscribe();
|
||||
this.onTagsChanged.unsubscribe();
|
||||
}
|
||||
|
||||
newTodo()
|
||||
{
|
||||
this.router.navigate(['/apps/todo/all']).then(() => {
|
||||
setTimeout(() => {
|
||||
this.todoService.onNewTodoClicked.next('');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,14 +46,16 @@
|
|||
|
||||
<div class="todo-content">
|
||||
|
||||
<form [formGroup]="todoForm">
|
||||
<form [formGroup]="todoForm" (submit)="addTodo()">
|
||||
|
||||
<md-input-container class="title mt-8" floatPlaceholder="never" fxFill>
|
||||
<textarea mdInput
|
||||
#titleInput
|
||||
name="title"
|
||||
formControlName="title"
|
||||
placeholder="Title"
|
||||
mdTextareaAutosize>
|
||||
mdTextareaAutosize
|
||||
required>
|
||||
</textarea>
|
||||
</md-input-container>
|
||||
|
||||
|
|
@ -96,6 +98,11 @@
|
|||
mdAutosizeMinRows="6">
|
||||
</textarea>
|
||||
</md-input-container>
|
||||
|
||||
<button *ngIf="formType === 'new'"
|
||||
md-raised-button class="mat-accent"
|
||||
[disabled]="todoForm.invalid">SAVE
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChildren } from '@angular/core';
|
||||
import { TodoService } from '../todo.service';
|
||||
import { Todo } from '../todo.model';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
|
||||
import { FuseUtils } from '../../../../core/fuseUtils';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-todo-details',
|
||||
|
|
@ -13,17 +14,19 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
|
|||
{
|
||||
todo: Todo;
|
||||
tags: any[];
|
||||
formType: string;
|
||||
todoForm: FormGroup;
|
||||
@ViewChildren('titleInput') titleInputField;
|
||||
|
||||
onFormChange: any;
|
||||
onCurrentTodoChanged: Subscription;
|
||||
onTagsChanged: Subscription;
|
||||
onNewTodoClicked: Subscription;
|
||||
|
||||
constructor(private todoService: TodoService,
|
||||
private formBuilder: FormBuilder)
|
||||
{
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
|
|
@ -31,12 +34,16 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
|
|||
// Subscribe to update the current todo
|
||||
this.onCurrentTodoChanged =
|
||||
this.todoService.onCurrentTodoChanged
|
||||
.subscribe(currentTodo => {
|
||||
this.todo = currentTodo;
|
||||
.subscribe(todo => {
|
||||
|
||||
this.formType = 'edit';
|
||||
|
||||
this.todo = todo;
|
||||
|
||||
if ( this.todo )
|
||||
{
|
||||
this.todoForm = this.createTodoForm();
|
||||
|
||||
this.onFormChange = this.todoForm.valueChanges
|
||||
.debounceTime(500)
|
||||
.distinctUntilChanged()
|
||||
|
|
@ -52,6 +59,23 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
|
|||
.subscribe(labels => {
|
||||
this.tags = labels;
|
||||
});
|
||||
|
||||
// Subscribe to update on tag change
|
||||
this.onNewTodoClicked = this.todoService.onNewTodoClicked
|
||||
.subscribe(() => {
|
||||
this.todo = new Todo({});
|
||||
this.todo.id = FuseUtils.genearateGUID();
|
||||
this.formType = 'new';
|
||||
this.todoForm = this.createTodoForm();
|
||||
this.focusTitleField();
|
||||
});
|
||||
}
|
||||
|
||||
focusTitleField()
|
||||
{
|
||||
setTimeout(() => {
|
||||
this.titleInputField.first.nativeElement.focus();
|
||||
});
|
||||
}
|
||||
|
||||
createTodoForm()
|
||||
|
|
@ -120,12 +144,20 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
|
|||
this.todoService.toggleTagOnTodo(tagId, this.todo);
|
||||
}
|
||||
|
||||
addTodo()
|
||||
{
|
||||
this.todoService.updateTodo(this.todoForm.getRawValue());
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
if ( this.onFormChange )
|
||||
{
|
||||
this.onFormChange.unsubscribe();
|
||||
}
|
||||
|
||||
this.onCurrentTodoChanged.unsubscribe();
|
||||
|
||||
this.onNewTodoClicked.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,12 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
&.move-disabled {
|
||||
.handle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
font-size: 12px;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Component, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } f
|
|||
import { Todo } from '../../todo.model';
|
||||
import { TodoService } from '../../todo.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { ActivatedRoute, ActivatedRouteSnapshot, Route, Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-todo-list-item',
|
||||
|
|
@ -15,12 +16,19 @@ export class TodoListItemComponent implements OnInit, OnDestroy
|
|||
tags: any[];
|
||||
@HostBinding('class.selected') selected: boolean;
|
||||
@HostBinding('class.completed') completed: boolean;
|
||||
@HostBinding('class.move-disabled') moveDisabled: boolean;
|
||||
|
||||
onSelectedTodosChanged: Subscription;
|
||||
onTagsChanged: Subscription;
|
||||
|
||||
constructor(private todoService: TodoService)
|
||||
constructor(private todoService: TodoService,
|
||||
private route: ActivatedRoute)
|
||||
{
|
||||
// Disable move if path is not /all
|
||||
if ( route.snapshot.url[0].path !== 'all' )
|
||||
{
|
||||
this.moveDisabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div *ngIf="todos.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlex>
|
||||
<span class="hint-text mat-h3">There are no todos!</span>
|
||||
</div>
|
||||
<div class="todo-list" ngxDroppable [model]="todos" (out)="log($event)">
|
||||
<div class="todo-list" ngxDroppable [model]="todos" (out)="onDrop($event)">
|
||||
<fuse-todo-list-item class="todo-list-item has-handle"
|
||||
*ngFor="let todo of todos" [todo]="todo"
|
||||
ngxDraggable
|
||||
|
|
|
|||
|
|
@ -74,29 +74,12 @@ export class TodoListComponent implements OnInit, OnDestroy
|
|||
*/
|
||||
readTodo(todoId)
|
||||
{
|
||||
const tagHandle = this.route.snapshot.params.tagHandle,
|
||||
filterHandle = this.route.snapshot.params.filterHandle;
|
||||
|
||||
if ( tagHandle )
|
||||
{
|
||||
this.location.go('apps/todo/tag/' + tagHandle + '/' + todoId);
|
||||
}
|
||||
else if ( filterHandle )
|
||||
{
|
||||
this.location.go('apps/todo/filter/' + filterHandle + '/' + todoId);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.location.go('apps/todo/all/' + todoId);
|
||||
}
|
||||
|
||||
// Set current todo
|
||||
this.todoService.setCurrentTodo(todoId);
|
||||
}
|
||||
|
||||
log(ev)
|
||||
onDrop(ev)
|
||||
{
|
||||
console.info(this.todos);
|
||||
console.info(ev);
|
||||
this.todoService.updateTodos(this.todos);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@ import { Observable } from 'rxjs/Observable';
|
|||
import { Http } from '@angular/http';
|
||||
import { Todo } from './todo.model';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseUtils } from '../../../core/fuseUtils';
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
import { Location } from '@angular/common';
|
||||
|
||||
@Injectable()
|
||||
export class TodoService implements Resolve<any>
|
||||
|
|
@ -26,8 +27,10 @@ export class TodoService implements Resolve<any>
|
|||
onFiltersChanged: BehaviorSubject<any> = new BehaviorSubject([]);
|
||||
onTagsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
|
||||
onSearchTextChanged: BehaviorSubject<any> = new BehaviorSubject('');
|
||||
onNewTodoClicked: Subject<any> = new Subject();
|
||||
|
||||
constructor(private http: Http)
|
||||
constructor(private http: Http,
|
||||
private location: Location)
|
||||
{
|
||||
this.selectedTodos = [];
|
||||
}
|
||||
|
|
@ -317,6 +320,23 @@ export class TodoService implements Resolve<any>
|
|||
});
|
||||
|
||||
this.onCurrentTodoChanged.next(this.currentTodo);
|
||||
|
||||
const tagHandle = this.routeParams.tagHandle,
|
||||
filterHandle = this.routeParams.filterHandle;
|
||||
|
||||
if ( tagHandle )
|
||||
{
|
||||
this.location.go('apps/todo/tag/' + tagHandle + '/' + id);
|
||||
}
|
||||
else if ( filterHandle )
|
||||
{
|
||||
this.location.go('apps/todo/filter/' + filterHandle + '/' + id);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.location.go('apps/todo/all/' + id);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -360,10 +380,7 @@ export class TodoService implements Resolve<any>
|
|||
|
||||
this.getTodos().then(todos => {
|
||||
|
||||
if ( todos && this.currentTodo )
|
||||
{
|
||||
this.setCurrentTodo(this.currentTodo.id);
|
||||
}
|
||||
this.setCurrentTodo(todo.id);
|
||||
|
||||
resolve(todos);
|
||||
|
||||
|
|
@ -371,4 +388,27 @@ export class TodoService implements Resolve<any>
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the todo
|
||||
* @param todo
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
updateTodos(todos)
|
||||
{
|
||||
|
||||
/* return new Promise((resolve, reject) => {
|
||||
|
||||
this.http.post('api/todo-todos/', {...todos})
|
||||
|
||||
.subscribe(response => {
|
||||
|
||||
this.getTodos().then(_todos => {
|
||||
console.log(response);
|
||||
resolve(_todos);
|
||||
}, reject);
|
||||
});
|
||||
});*/
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
76
src/app/main/ui/colors/colors.component.html
Normal file
76
src/app/main/ui/colors/colors.component.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h1 class="title">Material Colors</h1>
|
||||
|
||||
<a md-raised-button class="reference-button"
|
||||
href="https://www.google.com/design/spec/style/color.html#color-color-palette"
|
||||
target="_blank">
|
||||
<md-icon>link</md-icon>
|
||||
<span>Reference</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content">
|
||||
|
||||
<md-tab-group class="color-tabs" md-dynamic-height="true" (selectChange)="selectColor($event)">
|
||||
|
||||
<md-tab *ngFor="let color of (colors | keys)" label="{{color.key}}">
|
||||
<ng-template md-tab-label>
|
||||
<span class="text-capitalize">{{color.key}}</span>
|
||||
</ng-template>
|
||||
</md-tab>
|
||||
|
||||
</md-tab-group>
|
||||
|
||||
<div class="color-tabs-content p-24" fxLayout="column">
|
||||
|
||||
<div class="h3 pb-16">Fuse has classes for every single color from
|
||||
<a href="https://www.google.com/design/spec/style/color.html#color-color-palette"
|
||||
target="_blank">Material
|
||||
Design Color Palette</a> for your convenient. You can use them with pretty much every
|
||||
element.
|
||||
</div>
|
||||
|
||||
<div class="color-header colored-bg p-8"
|
||||
[ngClass]="'md-'+selectedColor+'-bg'"
|
||||
fxLayout="column">
|
||||
<div class="p-8">
|
||||
<h3 class="text-capitalize">{{selectedColor}}</h3>
|
||||
</div>
|
||||
<div class="p-8" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div>500</div>
|
||||
<div>
|
||||
{{selectedColorDefaultValue}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color" fxLayout="column" fxFlex="1 0 auto">
|
||||
|
||||
<div class="colored-bg p-8"
|
||||
*ngFor="let hue of ['50','100','200','300','400','500','600','700','800','900','A100','A200','A400','A700']"
|
||||
fxFlex="1 0 auto" fxLayout="row" fxLayout.sm="column"
|
||||
[ngClass]="selectedColor+'-'+hue+'-bg'">
|
||||
|
||||
<div class="p-8" fxFlex>{{hue}}</div>
|
||||
|
||||
<div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-'+hue+'-bg'" fxFlex>
|
||||
.{{'md-'+selectedColor+'-'+hue+'-bg'}}
|
||||
</div>
|
||||
|
||||
<div class="p-8" fxFlex>.{{selectedColor+'-'+hue+'-bg'}}</div>
|
||||
|
||||
<div class="fg-box mat-elevation-z2 p-8"
|
||||
[ngClass]="selectedColor+'-'+hue+'-fg'">
|
||||
.{{selectedColor+'-'+hue+'-fg'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
</div>
|
||||
29
src/app/main/ui/colors/colors.component.scss
Normal file
29
src/app/main/ui/colors/colors.component.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
:host {
|
||||
|
||||
.content {
|
||||
|
||||
.color-tabs {
|
||||
|
||||
.mat-tab-body {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color-tabs-content {
|
||||
|
||||
.color {
|
||||
|
||||
.fg-box {
|
||||
background-color: white;
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
.colored-bg {
|
||||
transition: background-color 400ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
37
src/app/main/ui/colors/colors.component.ts
Normal file
37
src/app/main/ui/colors/colors.component.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { MatColors } from '../../../core/matColors';
|
||||
import { MdTab } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-colors',
|
||||
templateUrl: './colors.component.html',
|
||||
styleUrls : ['./colors.component.scss']
|
||||
})
|
||||
export class ColorsComponent implements OnInit
|
||||
{
|
||||
colors: {};
|
||||
selectedColor: string;
|
||||
selectedColorDefaultValue: string;
|
||||
|
||||
constructor()
|
||||
{
|
||||
this.colors = MatColors.all;
|
||||
this.updateSelectedColor('red');
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
selectColor(selected)
|
||||
{
|
||||
this.updateSelectedColor(selected.tab.textLabel);
|
||||
}
|
||||
|
||||
private updateSelectedColor(colorName)
|
||||
{
|
||||
this.selectedColor = colorName;
|
||||
this.selectedColorDefaultValue = MatColors.getColor(this.selectedColor)[500];
|
||||
}
|
||||
}
|
||||
26
src/app/main/ui/colors/colors.module.ts
Normal file
26
src/app/main/ui/colors/colors.module.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { SharedModule } from '../../../core/modules/shared.module';
|
||||
import { FuseDemoModule } from '../../../core/components/demo/demo.module';
|
||||
import { ColorsComponent } from './colors.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path : 'ui/colors',
|
||||
component: ColorsComponent
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
SharedModule,
|
||||
RouterModule.forChild(routes),
|
||||
FuseDemoModule
|
||||
],
|
||||
declarations: [
|
||||
ColorsComponent
|
||||
]
|
||||
})
|
||||
export class UIColorsModule
|
||||
{
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { UIPageLayoutsModule } from './page-layouts/page-layouts.module';
|
||||
import { UIColorsModule } from './colors/colors.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
imports: [
|
||||
UIColorsModule,
|
||||
UIPageLayoutsModule
|
||||
]
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user