mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
Fixed couple bugs with FuseMaterialColorPicker
This commit is contained in:
parent
ae6bc37664
commit
681a75e683
|
@ -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>
|
||||
|
|
|
@ -125,6 +125,7 @@ export class FuseMaterialColorPickerComponent implements OnChanges
|
|||
this.selectedPalette = '';
|
||||
this.selectedHue = '';
|
||||
this.updateSelectedColor();
|
||||
this.view = 'palettes';
|
||||
}
|
||||
|
||||
updateSelectedColor()
|
||||
|
|
|
@ -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
|
||||
],
|
||||
|
|
Loading…
Reference in New Issue
Block a user