Skip to content

Commit 30ce297

Browse files
h2qutch2qutc
committed
add custom icon posibility
1 parent 2744d32 commit 30ce297

20 files changed

+458
-331
lines changed

‎projects/color-picker/src/lib/color-picker.module.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
NgxMatColorPickerComponent,
1717
NgxMatColorPickerContentComponent,
1818
NgxMatColorPickerInput, NgxMatColorSliderComponent,
19-
NgxMatColorToggleComponent
19+
NgxMatColorToggleComponent,
20+
NgxMatColorpickerToggleIcon
2021
} from './components';
2122
import { NumericColorInputDirective } from './directives';
2223
import { ColorAdapter } from './services';
@@ -31,6 +32,7 @@ import { ColorAdapter } from './services';
3132
NgxMatColorPickerContentComponent,
3233
NgxMatColorPickerComponent,
3334
NgxMatColorToggleComponent,
35+
NgxMatColorpickerToggleIcon,
3436
NgxMatColorPickerInput
3537
],
3638
imports: [
@@ -48,7 +50,8 @@ import { ColorAdapter } from './services';
4850
exports: [
4951
NgxMatColorToggleComponent,
5052
NgxMatColorPickerInput,
51-
NgxMatColorPickerComponent
53+
NgxMatColorPickerComponent,
54+
NgxMatColorpickerToggleIcon
5255
],
5356
entryComponents: [
5457
NgxMatColorPickerContentComponent

‎projects/color-picker/src/lib/components/color-canvas/base-color-canvas.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { EventEmitter, Output, Input, OnDestroy, AfterViewInit, NgZone, Directive } from '@angular/core';
2-
import { Color } from '../../models';
1+
import { AfterViewInit, Directive, EventEmitter, Input, NgZone, OnDestroy, Output } from '@angular/core';
2+
import { ThemePalette } from '@angular/material/core';
33
import { Subject } from 'rxjs';
4+
import { Color } from '../../models';
45

56
@Directive({
67

@@ -9,6 +10,7 @@ export abstract class NgxMatBaseColorCanvas implements OnDestroy, AfterViewInit
910

1011
@Output() colorChanged: EventEmitter<Color> = new EventEmitter<Color>();
1112
@Input() color: Color;
13+
@Input() theme: ThemePalette;
1214

1315
canvas: HTMLCanvasElement;
1416

‎projects/color-picker/src/lib/components/color-canvas/color-canvas.component.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@
77
</div>
88

99
<div class="zone-inputs">
10-
<mat-form-field>
10+
<mat-form-field [color]="theme">
1111
<mat-label>R</mat-label>
1212
<input matInput formControlName="r" ngxMatNumericColorInput autocomplete="off">
1313
</mat-form-field>
1414

15-
<mat-form-field>
15+
<mat-form-field [color]="theme">
1616
<mat-label>G</mat-label>
1717
<input matInput formControlName="g" ngxMatNumericColorInput autocomplete="off">
1818
</mat-form-field>
1919

20-
<mat-form-field>
20+
<mat-form-field [color]="theme">
2121
<mat-label>B</mat-label>
2222
<input matInput formControlName="b" ngxMatNumericColorInput autocomplete="off">
2323
</mat-form-field>
@@ -26,12 +26,12 @@
2626

2727
<div class="color-canvas-row">
2828
<button mat-mini-fab [style.background-color]="color?.rgba || 'transparent'" class="preview"></button>
29-
<mat-form-field>
29+
<mat-form-field [color]="theme">
3030
<mat-label>HEX6</mat-label>
3131
<mat-label matPrefix class="symbol">#&nbsp;</mat-label>
3232
<input matInput formControlName="hex" autocomplete="off">
3333
</mat-form-field>
34-
<mat-form-field class="input-opacity">
34+
<mat-form-field class="input-opacity" [color]="theme">
3535
<mat-label>A</mat-label>
3636
<input matInput formControlName="a" type="number" min="0" max="1" step="0.1" autocomplete="off">
3737
</mat-form-field>

‎projects/color-picker/src/lib/components/color-collection/color-collection.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="color-collection-row">
22
<button *ngFor="let c of colors1" mat-mini-fab [style.background-color]="c" class="btn-color"
3-
(click)="select(c)" [ngClass]="{'active': selectedColor === c}">
3+
(click)="select(c)" [ngClass]="{'active': selectedColor === c}" [disableRipple]="true">
44
</button>
55
</div>
66
<div class="color-collection-row">
77
<button *ngFor="let c of colors2" mat-mini-fab [style.background-color]="c" class="btn-color"
8-
(click)="select(c)" [ngClass]="{'active': selectedColor === c}">
8+
(click)="select(c)" [ngClass]="{'active': selectedColor === c}" [disableRipple]="true">
99
</button>
1010
</div>

‎projects/color-picker/src/lib/components/color-collection/color-collection.component.scss

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
1-
.ngx-mat-color-collection{
2-
.btn-color{
3-
height: 20px;
4-
width: 20px;
5-
margin-right: 11px;
6-
box-shadow: none;
7-
opacity: 0.3;
8-
&.active{
9-
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
10-
opacity: 1;
11-
}
12-
}
1+
.ngx-mat-color-collection {
2+
.btn-color {
3+
height: 20px;
4+
width: 20px;
5+
margin-right: 11px;
6+
box-shadow: none;
7+
opacity: 0.3;
8+
9+
will-change: opacity;
10+
transition: opacity 0.3s linear;
11+
12+
&.active {
13+
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
14+
opacity: 1;
15+
}
16+
17+
.mat-mdc-button-touch-target {
18+
display: none !important;
19+
}
20+
}
21+
22+
1323
}

‎projects/color-picker/src/lib/components/color-palette/color-palette.component.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1-
<ngx-mat-color-canvas (colorChanged)="handleColorChanged($event)" [color]="color"></ngx-mat-color-canvas>
2-
<ngx-mat-color-collection (colorChanged)="handleColorChanged($event)" [color]="color"></ngx-mat-color-collection>
1+
<ngx-mat-color-canvas (colorChanged)="handleColorChanged($event)" [color]="color"
2+
[theme]="theme"></ngx-mat-color-canvas>
3+
4+
<ngx-mat-color-collection (colorChanged)="handleColorChanged($event)" [color]="color">
5+
</ngx-mat-color-collection>

‎projects/color-picker/src/lib/components/color-palette/color-palette.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit, ViewEncapsulation, Output, EventEmitter, Input } from '@angular/core';
22
import { Color } from '../../models';
3+
import { ThemePalette } from '@angular/material/core';
34

45
@Component({
56
selector: 'ngx-mat-color-palette',
@@ -15,6 +16,7 @@ export class NgxMatColorPaletteComponent implements OnInit {
1516
@Output() colorChanged: EventEmitter<Color> = new EventEmitter<Color>();
1617

1718
@Input() color: Color;
19+
@Input() theme: ThemePalette;
1820

1921
constructor() { }
2022

‎projects/color-picker/src/lib/components/color-picker/color-picker-content.component.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
<ngx-mat-color-palette (colorChanged)="picker.select($event)" [color]="picker._selected"></ngx-mat-color-palette>
1+
<ngx-mat-color-palette (colorChanged)="picker.select($event)"
2+
[color]="picker._selected"
3+
[theme]="color"></ngx-mat-color-palette>

‎projects/color-picker/src/lib/components/color-toggle/color-toggle.component.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
<button #button mat-icon-button type="button" [attr.aria-haspopup]="picker ? 'dialog' : null"
2-
[attr.tabindex]="disabled ? -1 : tabIndex" [disabled]="disabled" (click)="open($event)">
3-
<mat-icon [style.color]="picker?._selected?.rgba">palette</mat-icon>
2+
[attr.tabindex]="disabled ? -1 : tabIndex" [disabled]="disabled" (click)="open($event)"
3+
[disableRipple]="disableRipple">
4+
5+
<mat-icon *ngIf="!_customIcon" [style.color]="picker?._selected?.rgba">
6+
palette
7+
</mat-icon>
8+
9+
<ng-content select="[ngxMatColorpickerToggleIcon]"></ng-content>
10+
411
</button>

‎projects/color-picker/src/lib/components/color-toggle/color-toggle.component.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import {
2-
AfterContentInit, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy,
2+
AfterContentInit, ChangeDetectorRef, Component, ContentChild, Directive, Input, OnChanges, OnDestroy,
33
OnInit, SimpleChanges, ViewChild, ViewEncapsulation
44
} from '@angular/core';
55
import { MatButton } from '@angular/material/button';
66
import { Subscription, merge, of } from 'rxjs';
77
import { NgxMatColorPickerComponent } from '../color-picker/color-picker.component';
88

9+
@Directive({
10+
selector: '[ngxMatColorpickerToggleIcon]',
11+
})
12+
export class NgxMatColorpickerToggleIcon { }
13+
914
@Component({
1015
selector: 'ngx-mat-color-toggle',
1116
templateUrl: './color-toggle.component.html',
@@ -40,6 +45,12 @@ export class NgxMatColorToggleComponent implements OnInit, AfterContentInit, OnC
4045
}
4146
private _disabled: boolean;
4247

48+
/** Whether ripples on the toggle should be disabled. */
49+
@Input() disableRipple: boolean;
50+
51+
/** Custom icon set by the consumer. */
52+
@ContentChild(NgxMatColorpickerToggleIcon) _customIcon: NgxMatColorpickerToggleIcon;
53+
4354
@ViewChild('button') _button: MatButton;
4455

4556
constructor(private _cd: ChangeDetectorRef) { }

‎projects/datetime-picker/src/lib/datepicker-module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
} from './datepicker-base';
2020
import { NgxMatDatepickerInput } from './datepicker-input';
2121
import { NgxMatDatepickerIntl } from './datepicker-intl';
22-
import { MatDatepickerToggleIcon, NgxMatDatepickerToggle } from './datepicker-toggle';
22+
import { NgxMatDatepickerToggleIcon, NgxMatDatepickerToggle } from './datepicker-toggle';
2323
import { NgxMatMonthView } from './month-view';
2424
import { NgxMatMultiYearView } from './multi-year-view';
2525
import { NgxMatYearView } from './year-view';
@@ -46,7 +46,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4646
NgxMatDatepickerContent,
4747
NgxMatDatepickerInput,
4848
NgxMatDatepickerToggle,
49-
MatDatepickerToggleIcon,
49+
NgxMatDatepickerToggleIcon,
5050
NgxMatMonthView,
5151
NgxMatYearView,
5252
NgxMatMultiYearView,
@@ -66,7 +66,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
6666
NgxMatDatepickerContent,
6767
NgxMatDatepickerInput,
6868
NgxMatDatepickerToggle,
69-
MatDatepickerToggleIcon,
69+
NgxMatDatepickerToggleIcon,
7070
NgxMatMonthView,
7171
NgxMatYearView,
7272
NgxMatMultiYearView,

‎projects/datetime-picker/src/lib/datepicker-toggle.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@
1919
<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
2020
</svg>
2121

22-
<ng-content select="[matDatepickerToggleIcon]"></ng-content>
22+
<ng-content select="[ngxMatDatepickerToggleIcon]"></ng-content>
2323
</button>

‎projects/datetime-picker/src/lib/datepicker-toggle.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import { NgxMatDatepickerIntl } from './datepicker-intl';
2525
@Directive({
2626
selector: '[ngxMatDatepickerToggleIcon]',
2727
})
28-
export class MatDatepickerToggleIcon { }
28+
export class NgxMatDatepickerToggleIcon { }
2929

3030
@Component({
3131
selector: 'ngx-mat-datepicker-toggle',
@@ -78,7 +78,7 @@ export class NgxMatDatepickerToggle<D> implements AfterContentInit, OnChanges, O
7878
@Input() disableRipple: boolean;
7979

8080
/** Custom icon set by the consumer. */
81-
@ContentChild(MatDatepickerToggleIcon) _customIcon: MatDatepickerToggleIcon;
81+
@ContentChild(NgxMatDatepickerToggleIcon) _customIcon: NgxMatDatepickerToggleIcon;
8282

8383
/** Underlying button element. */
8484
@ViewChild('button') _button: MatButton;

0 commit comments

Comments
 (0)