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

(FuseMaterialColorPickerComponent) added.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-21 16:12:51 +03:00
parent faebddd114
commit 50bbbf18db
4 changed files with 328 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/app/core/components/material-color-picker/material-color-picker.component.html Normal file
View File

@ -0,0 +1,79 @@
<button md-icon-button
[mdMenuTriggerFor]="colorMenu"
(onMenuOpen)="onMenuOpen()"
[ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
<md-icon>palette</md-icon>
</button>
<md-menu #colorMenu="mdMenu" class="fuse-material-color-picker-menu">
<header [ngClass]="selectedColor?.class || 'md-accent-bg'"
class="mat-elevation-z4"
fxLayout="row"
fxLayoutAlign="space-between center">
<button md-icon-button
[style.visibility]="view==='hues'?'visible':'hidden'"
(click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
<md-icon class="s-20">arrow_back</md-icon>
</button>
<span *ngIf="selectedColor?.palette">
{{selectedColor.palette}} {{selectedColor.hue}}
</span>
<span *ngIf="!selectedColor?.palette">
Select Color
</span>
<button md-icon-button
class="remove-color-button"
(click)="removeColor()"
aria-label="Remove Color">
<md-icon class="s-20">delete</md-icon>
</button>
</header>
<div [ngSwitch]="view" class="views">
<div class="view"
*ngSwitchCase="'palettes'"
[@slideInLeft]>
<div fxLayout="row" fxLayoutWrap
fxLayoutAlign="start start"
class="colors" perfect-scrollbar>
<div class="color"
[ngClass]="'md-'+color.key+'-bg'"
*ngFor="let color of (colors | keys)"
(click)="$event.stopPropagation();selectPalette(color.key)"
fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
<span class="label">
{{color.key}}
</span>
</div>
</div>
</div>
<div class="view"
*ngSwitchCase="'hues'"
[@slideInRight]>
<div fxLayout="row" fxLayoutWrap
fxLayoutAlign="start start"
class="colors" perfect-scrollbar>
<div class="color"
*ngFor="let hue of hues"
[ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'"
(click)="selectHue(hue)"
fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
<span class="label">
{{hue}}
</span>
<md-icon *ngIf="selectedHue === hue" class="s-16">check</md-icon>
</div>
</div>
</div>
</div>
</md-menu>

53
src/app/core/components/material-color-picker/material-color-picker.component.scss Normal file
View File

@ -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;
}
}
}
}
}
}
}

191
src/app/core/components/material-color-picker/material-color-picker.component.ts Normal file
View File

@ -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();
}
}
}

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

@ -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