diff --git a/src/app/core/components/layout/layout.component.scss b/src/app/core/components/layout/layout.component.scss index 35734c7e..754a1727 100644 --- a/src/app/core/components/layout/layout.component.scss +++ b/src/app/core/components/layout/layout.component.scss @@ -12,6 +12,7 @@ fuse-layout { display: flex; flex-direction: column; flex: 1; + overflow: hidden; fuse-content { display: flex; diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts index b0f34e84..e733c910 100644 --- a/src/app/core/components/navigation/navigation.model.ts +++ b/src/app/core/components/navigation/navigation.model.ts @@ -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', diff --git a/src/app/core/matColors.ts b/src/app/core/matColors.ts new file mode 100644 index 00000000..3b6a3273 --- /dev/null +++ b/src/app/core/matColors.ts @@ -0,0 +1,663 @@ +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, + } + }, + + 'lightGreen': { + 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, + } + }, +}; + +export class MatColors +{ + // public static colors = + // Color palettes from the Material Design spec. + // See https://www.google.com/design/spec/style/color.html + // + + public static black87 = black87; + public static white87 = white87; + public static black12 = black12; + public static white12 = white12; + public static black6 = black6; + public static white6 = white6; + public static all = matColors; + + public static getColor(colorName) + { + if ( matColors[colorName] ) + { + return matColors[colorName]; + } + return false; + } +} diff --git a/src/app/core/pipes/camelCaseToDash.pipe.ts b/src/app/core/pipes/camelCaseToDash.pipe.ts new file mode 100644 index 00000000..edac85b0 --- /dev/null +++ b/src/app/core/pipes/camelCaseToDash.pipe.ts @@ -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()}`) : ''; + } +} diff --git a/src/app/core/pipes/pipes.module.ts b/src/app/core/pipes/pipes.module.ts index ebcb5090..c4a21aeb 100644 --- a/src/app/core/pipes/pipes.module.ts +++ b/src/app/core/pipes/pipes.module.ts @@ -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 ] }) diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss index e69de29b..c58e8ca0 100644 --- a/src/app/core/scss/partials/_colors.scss +++ b/src/app/core/scss/partials/_colors.scss @@ -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; + } + } + } +} diff --git a/src/app/main/ui/colors/colors.component.html b/src/app/main/ui/colors/colors.component.html new file mode 100644 index 00000000..62ab632a --- /dev/null +++ b/src/app/main/ui/colors/colors.component.html @@ -0,0 +1,76 @@ +
+ + +
+

Material Colors

+ + + link + Reference + +
+ + + +
+ + + + + + {{color.key}} + + + + + +
+ +
Fuse has classes for every single color from + Material + Design Color Palette for your convenient. You can use them with pretty much every + element. +
+ +
+
+

{{selectedColor}}

+
+
+
500
+
+ {{selectedColorDefaultValue}} +
+
+
+ +
+ +
+ +
{{hue}}
+ +
+ .{{'md-'+selectedColor+'-'+hue+'-bg'}} +
+ +
.{{selectedColor+'-'+hue+'-bg'}}
+ +
+ .{{selectedColor+'-'+hue+'-fg'}} +
+
+
+
+
+ +
diff --git a/src/app/main/ui/colors/colors.component.scss b/src/app/main/ui/colors/colors.component.scss new file mode 100644 index 00000000..4887b6dd --- /dev/null +++ b/src/app/main/ui/colors/colors.component.scss @@ -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; + } + } + } +} + diff --git a/src/app/main/ui/colors/colors.component.ts b/src/app/main/ui/colors/colors.component.ts new file mode 100644 index 00000000..c77d8a6b --- /dev/null +++ b/src/app/main/ui/colors/colors.component.ts @@ -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]; + } +} diff --git a/src/app/main/ui/colors/colors.module.ts b/src/app/main/ui/colors/colors.module.ts new file mode 100644 index 00000000..d4690cf4 --- /dev/null +++ b/src/app/main/ui/colors/colors.module.ts @@ -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 +{ +} diff --git a/src/app/main/ui/ui.module.ts b/src/app/main/ui/ui.module.ts index 036b1d48..4643b51c 100644 --- a/src/app/main/ui/ui.module.ts +++ b/src/app/main/ui/ui.module.ts @@ -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 ] })