From 50bbbf18db82089eff9e69d403f7acfeeee52a37 Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Mon, 21 Aug 2017 16:12:51 +0300 Subject: [PATCH] (FuseMaterialColorPickerComponent) added. --- .../material-color-picker.component.html | 79 ++++++++ .../material-color-picker.component.scss | 53 +++++ .../material-color-picker.component.ts | 191 ++++++++++++++++++ src/app/core/modules/shared.module.ts | 7 +- 4 files changed, 328 insertions(+), 2 deletions(-) create mode 100644 src/app/core/components/material-color-picker/material-color-picker.component.html create mode 100644 src/app/core/components/material-color-picker/material-color-picker.component.scss create mode 100644 src/app/core/components/material-color-picker/material-color-picker.component.ts diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.html b/src/app/core/components/material-color-picker/material-color-picker.component.html new file mode 100644 index 00000000..43511187 --- /dev/null +++ b/src/app/core/components/material-color-picker/material-color-picker.component.html @@ -0,0 +1,79 @@ + + + + +
+ + + + + {{selectedColor.palette}} {{selectedColor.hue}} + + + + Select Color + + + +
+ + +
+ +
+ +
+
+ + {{color.key}} + +
+
+
+ +
+
+
+ + {{hue}} + + check +
+
+
+ +
+ diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.scss b/src/app/core/components/material-color-picker/material-color-picker.component.scss new file mode 100644 index 00000000..0bec22f2 --- /dev/null +++ b/src/app/core/components/material-color-picker/material-color-picker.component.scss @@ -0,0 +1,53 @@ +.fuse-material-color-picker-menu { + width: 208px; + + .mat-menu-content { + padding: 0; + + .views { + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + min-height: 258px; + height: 258px; + + .view { + position: absolute; + width: 208px; + height: 100%; + bottom: 0; + left: 0; + right: 0; + top: 0; + + .colors { + position: relative; + padding: 4px; + + .color { + position: relative; + width: 46px; + height: 46px; + margin: 2px; + border-radius: 0; + cursor: pointer; + + .label { + padding: 2px; + font-size: 10px; + } + + md-icon { + position: absolute; + top: 2px; + right: 2px; + font-size: 16px; + opacity: 0.7; + } + } + } + } + } + } +} diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.ts b/src/app/core/components/material-color-picker/material-color-picker.component.ts new file mode 100644 index 00000000..1fe732a5 --- /dev/null +++ b/src/app/core/components/material-color-picker/material-color-picker.component.ts @@ -0,0 +1,191 @@ +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core'; +import { MatColors } from '../../matColors'; +import { Animations } from '../../animations'; + +@Component({ + selector : 'fuse-material-color-picker', + templateUrl : './material-color-picker.component.html', + styleUrls : ['./material-color-picker.component.scss'], + animations : [Animations.slideInLeft, Animations.slideInRight], + encapsulation: ViewEncapsulation.None +}) +export class FuseMaterialColorPickerComponent implements OnInit, OnChanges +{ + colors: any; + selectedColor: any; + hues: string[]; + view = 'palettes'; + + @Input() selectedPalette = ''; + @Input() selectedHue = ''; + @Input() selectedFg = ''; + @Input() value: any; + @Output() valueChange = new EventEmitter(); + @Output() selectedPaletteChange = new EventEmitter(); + @Output() selectedHueChange = new EventEmitter(); + @Output() selectedClassChange = new EventEmitter(); + @Output() selectedBgChange = new EventEmitter(); + @Output() selectedFgChange = new EventEmitter(); + + _selectedClass = ''; + @Input() + set selectedClass(value: string) + { + if ( value !== '' && this._selectedClass !== value ) + { + const color = value.split('-'); + if ( color.length >= 5 ) + { + this.selectedPalette = color[1] + '-' + color[2]; + this.selectedHue = color[3]; + } + else + { + this.selectedPalette = color[1]; + this.selectedHue = color[2]; + } + } + this._selectedClass = value; + } + + get selectedClass(): string + { + return this._selectedClass; + } + + _selectedBg = ''; + @Input() + set selectedBg(value: string) + { + if ( value !== '' && this._selectedBg !== value ) + { + for ( const palette in this.colors ) + { + if ( !this.colors.hasOwnProperty(palette) ) + { + continue; + } + + for ( const hue of this.hues ) + { + if ( this.colors[palette][hue] === value ) + { + this.selectedPalette = palette; + this.selectedHue = hue; + break; + } + } + } + } + this._selectedBg = value; + } + + get selectedBg(): string + { + return this._selectedBg; + } + + constructor() + { + this.colors = MatColors.all; + this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']; + } + + ngOnInit() + { + + } + + selectPalette(palette) + { + this.selectedPalette = palette; + this.updateSelectedColor(); + this.view = 'hues'; + } + + selectHue(hue) + { + this.selectedHue = hue; + this.updateSelectedColor(); + } + + removeColor() + { + this.selectedPalette = ''; + this.selectedHue = ''; + this.updateSelectedColor(); + } + + updateSelectedColor() + { + setTimeout(() => { + + if ( this.selectedColor && this.selectedPalette === this.selectedColor.palette && this.selectedHue === this.selectedColor.hue ) + { + return; + } + + if ( this.selectedPalette !== '' && this.selectedHue !== '' ) + { + this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue]; + this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]; + this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg'; + } + else + { + this.selectedClass = ''; + this.selectedBg = ''; + this.selectedFg = ''; + } + + this.selectedColor = { + palette: this.selectedPalette, + hue : this.selectedHue, + class : this.selectedClass, + bg : this.selectedBg, + fg : this.selectedFg + }; + + this.selectedPaletteChange.emit(this.selectedPalette); + this.selectedHueChange.emit(this.selectedHue); + this.selectedClassChange.emit(this.selectedClass); + this.selectedBgChange.emit(this.selectedBg); + this.selectedFgChange.emit(this.selectedFg); + + this.value = this.selectedColor; + this.valueChange.emit(this.selectedColor); + }); + } + + backToPaletteSelection() + { + this.view = 'palettes'; + } + + onMenuOpen() + { + if ( this.selectedPalette === '' ) + { + this.view = 'palettes'; + } + else + { + this.view = 'hues'; + } + } + + ngOnChanges(changes: any) + { + if ( changes.selectedBg && changes.selectedBg.currentValue === '' || + changes.selectedClass && changes.selectedClass.currentValue === '' || + changes.selectedPalette && changes.selectedPalette.currentValue === '' ) + { + this.removeColor(); + return; + } + if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg ) + { + this.updateSelectedColor(); + } + } +} diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index 3bf0051e..905fabf7 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -20,6 +20,7 @@ import { FuseNavbarService } from '../../main/navbar/navbar.service'; import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service'; import { FuseHljsComponent } from '../components/hljs/hljs.component'; import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive'; +import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component'; @NgModule({ declarations : [ @@ -28,7 +29,8 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do FuseConfirmDialogComponent, FuseCountdownComponent, FuseHljsComponent, - FuseIfOnDomDirective + FuseIfOnDomDirective, + FuseMaterialColorPickerComponent ], imports : [ FlexLayoutModule, @@ -57,7 +59,8 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do ColorPickerModule, NgxDnDModule, NgxDatatableModule, - FuseIfOnDomDirective + FuseIfOnDomDirective, + FuseMaterialColorPickerComponent ], entryComponents: [ FuseConfirmDialogComponent