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

Fixed couple bugs with FuseMaterialColorPicker

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/@fuse/components/material-color-picker/material-color-picker.component.html
View File

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

1
src/@fuse/components/material-color-picker/material-color-picker.component.ts
View File

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

4
src/@fuse/components/material-color-picker/material-color-picker.module.ts
View File

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