Fixed couple bugs with FuseMaterialColorPicker

This commit is contained in:
Sercan Yemen 2018-03-06 11:24:20 +03:00
parent ae6bc37664
commit 681a75e683
3 changed files with 13 additions and 22 deletions

View File

@ -9,10 +9,8 @@
<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
<header [ngClass]="selectedColor?.class || 'mat-accent-bg'"
class="mat-elevation-z4"
fxLayout="row"
fxLayoutAlign="space-between center">
<header [ngClass]="selectedColor?.class || 'mat-accent-bg'" class="mat-elevation-z4"
fxLayout="row" fxLayoutAlign="space-between center">
<button mat-icon-button
[style.visibility]="view==='hues'?'visible':'hidden'"
@ -30,7 +28,7 @@
<button mat-icon-button
class="remove-color-button"
(click)="removeColor()"
(click)="$event.stopPropagation();removeColor()"
aria-label="Remove Color">
<mat-icon class="s-20">delete</mat-icon>
</button>
@ -39,13 +37,9 @@
<div [ngSwitch]="view" class="views">
<div class="view"
*ngSwitchCase="'palettes'"
[@slideInLeft]>
<div class="view" *ngSwitchCase="'palettes'">
<div fxLayout="row" fxLayoutWrap
fxLayoutAlign="start start"
class="colors" fusePerfectScrollbar>
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
<div class="color"
[ngClass]="'mat-'+color.key+'-bg'"
*ngFor="let color of (colors | keys)"
@ -58,18 +52,12 @@
</div>
</div>
<div class="view"
*ngSwitchCase="'hues'"
[@slideInRight]>
<div fxLayout="row" fxLayoutWrap
fxLayoutAlign="start start"
class="colors" fusePerfectScrollbar>
<div class="color"
*ngFor="let hue of hues"
<div class="view" *ngSwitchCase="'hues'" >
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
<div class="color" *ngFor="let hue of hues"
[fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
[ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
(click)="selectHue(hue)"
fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
(click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
<span class="label">
{{hue}}
</span>

View File

@ -125,6 +125,7 @@ export class FuseMaterialColorPickerComponent implements OnChanges
this.selectedPalette = '';
this.selectedHue = '';
this.updateSelectedColor();
this.view = 'palettes';
}
updateSelectedColor()

View File

@ -1,7 +1,8 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule, MatIconModule, MatMenuModule } from '@angular/material';
import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material';
import { FusePipesModule } from '@fuse/pipes/pipes.module';
@ -19,6 +20,7 @@ import { FuseMaterialColorPickerComponent } from '@fuse/components/material-colo
MatButtonModule,
MatIconModule,
MatMenuModule,
MatRippleModule,
FusePipesModule
],