From 941c8fa71d777f9b53e6deab3d16b512b3446d67 Mon Sep 17 00:00:00 2001 From: Markus Mohoritsch Date: Sat, 15 Aug 2020 02:26:35 +0200 Subject: [PATCH] feat(color-picker): round corners, @HostListeners, openOnFocus for mccColorPickerOrigin, examples --- .../app/color-picker/color-picker.module.ts | 6 +- .../color-picker-api.component.html | 22 +++++- .../color-picker-examples.component.html | 75 +++++++++++++++++-- .../color-picker-examples.component.ts | 15 ++++ .../color-picker-connected.directive.ts | 14 +++- .../color-picker-origin.directive.ts | 42 +++++++---- .../color-picker/color-picker.component.scss | 13 +++- .../color-picker/color-picker.component.ts | 1 + 8 files changed, 161 insertions(+), 27 deletions(-) diff --git a/src/demo-app/app/color-picker/color-picker.module.ts b/src/demo-app/app/color-picker/color-picker.module.ts index ffbd6124..6749de1f 100644 --- a/src/demo-app/app/color-picker/color-picker.module.ts +++ b/src/demo-app/app/color-picker/color-picker.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ReactiveFormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -20,6 +20,7 @@ import { MccColorPickerModule } from '../../../lib/color-picker/public_api'; CommonModule, RouterModule.forChild(routes), ReactiveFormsModule, + FormsModule, MatButtonModule, MatCardModule, MatFormFieldModule, @@ -28,7 +29,8 @@ import { MccColorPickerModule } from '../../../lib/color-picker/public_api'; MatInputModule, MatTabsModule, MccColorPickerModule.forRoot({ - used_colors: ['#000000', '#123456', '#777666'] + used_colors: ['#000000', '#123456', '#777666'], + empty_color: null }) ], declarations: [ColorPickerComponent, ColorPickerApiComponent, ColorPickerExamplesComponent] diff --git a/src/demo-app/app/color-picker/components/color-picker-api.component.html b/src/demo-app/app/color-picker/components/color-picker-api.component.html index c327124e..3be4b566 100644 --- a/src/demo-app/app/color-picker/components/color-picker-api.component.html +++ b/src/demo-app/app/color-picker/components/color-picker-api.component.html @@ -20,9 +20,9 @@

Inputs

- alpha: boolean, default: false + alpha: boolean - Enable alpha selector + Enable alpha selector, default: false @@ -286,6 +286,24 @@

Directives

MccColorPickerOrigin

This directive goes on the element (input, textarea or select) that will be connected to the color picker.

+

Inputs

+ + + + + + + + + + + + + +
NameDescription
+ mccColorPickerOrigin: 'openOnFocus' | 'default' + Enable opening color picker on focus, default: 'default'
+

Outputs

diff --git a/src/demo-app/app/color-picker/components/color-picker-examples.component.html b/src/demo-app/app/color-picker/components/color-picker-examples.component.html index 36e25b6d..a808edbb 100644 --- a/src/demo-app/app/color-picker/components/color-picker-examples.component.html +++ b/src/demo-app/app/color-picker/components/color-picker-examples.component.html @@ -33,7 +33,9 @@ - + @@ -161,7 +163,7 @@ - + @@ -260,7 +262,7 @@ - @@ -282,7 +284,7 @@ - @@ -304,7 +306,7 @@ - @@ -326,10 +328,71 @@ - + + + + + Connect color picker with an input - RGB with alpha inside Field (use matPrefix and matSuffix) + + + + + + + + + + + + + + Connect color picker with an input - HEX with alpha inside Field (use matPrefix and matSuffix) - mccColorPickerOrigin="openOnFocus" + + + + + + + + + + + + + + + Connect color picker with an input - HEX with alpha inside Field (use matPrefix and matSuffix) - mccColorPickerOrigin="openOnFocus" with hidden color-button + + + + + + + + + + + + + + + + Connect color picker with an input - HSL with alpha inside Field (use matPrefix and matSuffix) + + + + + + + + + diff --git a/src/demo-app/app/color-picker/components/color-picker-examples.component.ts b/src/demo-app/app/color-picker/components/color-picker-examples.component.ts index 4c13fd26..454f6012 100644 --- a/src/demo-app/app/color-picker/components/color-picker-examples.component.ts +++ b/src/demo-app/app/color-picker/components/color-picker-examples.component.ts @@ -17,9 +17,16 @@ export class ColorPickerExamplesComponent implements OnInit { rgbForm: FormGroup; hslForm: FormGroup; rgbaForm: FormGroup; + rgbaRequiredForm: FormGroup; + + color5: string = null; + color6: string = '#F4F'; + color7: string = 'blue'; + color8: string = 'rgba(200,40,30,0.9)'; disabled = false; + // last line will not be show in used colors because they are invalid values usedStart: string[] = [ '#FF3380', @@ -117,6 +124,10 @@ export class ColorPickerExamplesComponent implements OnInit { this.rgbaForm = this.formBuilder.group({ color: ['rgba(234, 120, 56, 0.45)', Validators.required] }); + + this.rgbaRequiredForm = this.formBuilder.group({ + color: ['rgba(67, 200, 40, 1)', Validators.required] + }); } reset(): void { @@ -126,4 +137,8 @@ export class ColorPickerExamplesComponent implements OnInit { onSubmit({ value, valid }): void { console.log(value, valid); } + + logValue() { + console.log(this.color5); + } } diff --git a/src/lib/color-picker/color-picker-connected.directive.ts b/src/lib/color-picker/color-picker-connected.directive.ts index 718a0525..24a8e634 100644 --- a/src/lib/color-picker/color-picker-connected.directive.ts +++ b/src/lib/color-picker/color-picker-connected.directive.ts @@ -30,6 +30,11 @@ export class MccConnectedColorPickerDirective implements AfterViewInit, OnDestro */ private _originSub: Subscription; + /** + * Focus subscription + */ + private _focusSub: Subscription; + constructor( private colorPicker: MccColorPickerComponent, public changeDetectorRef: ChangeDetectorRef, @@ -49,12 +54,15 @@ export class MccConnectedColorPickerDirective implements AfterViewInit, OnDestro if (this._originSub && !this._originSub.closed) { this._originSub.unsubscribe(); } + if (this._focusSub && !this._focusSub.closed) { + this._focusSub.unsubscribe(); + } } /** * Attach color picker and origin */ - private _attachColorPicker(): void { + private _attachColorPicker() { // subscribe to origin change to update color picker this._originSub = this.origin.change.subscribe(value => { const color = parseColorString(value); @@ -68,6 +76,10 @@ export class MccConnectedColorPickerDirective implements AfterViewInit, OnDestro } }); + this._focusSub = this.origin.focus.subscribe(() => { + this.colorPicker.isOpen = true; + }); + // subscribe to color picker confirmation and set on origin element // TODO: changed to on confirm. maybe support on-change mode again? this._colorPickerSub = this.colorPicker.selected.subscribe(value => this.origin.writeValueFromColorPicker(value)); diff --git a/src/lib/color-picker/color-picker-origin.directive.ts b/src/lib/color-picker/color-picker-origin.directive.ts index e8d66b4d..3e1f3a59 100644 --- a/src/lib/color-picker/color-picker-origin.directive.ts +++ b/src/lib/color-picker/color-picker-origin.directive.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, forwardRef, Inject, Renderer2 } from '@angular/core'; +import { Directive, ElementRef, EventEmitter, forwardRef, HostListener, Inject, Input, Renderer2 } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { EMPTY_COLOR } from './color-picker.types'; import { BehaviorSubject } from 'rxjs'; @@ -19,10 +19,15 @@ import { parseColorString } from './color-picker.utils'; ] }) export class MccColorPickerOriginDirective implements ControlValueAccessor { + /** + * Emit focus event + */ + focus: EventEmitter = new EventEmitter(); + /** * Emit changes from the origin */ - change: BehaviorSubject = new BehaviorSubject(''); + change: BehaviorSubject = new BehaviorSubject(this.elementRef.nativeElement.value); /** * Propagate changes to angular @@ -30,22 +35,29 @@ export class MccColorPickerOriginDirective implements ControlValueAccessor { propagateChanges: (_: any) => {}; /** - * Reference to the element on which the directive is applied. + * Controls if focus of the input opens the color picker dialog */ - constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(EMPTY_COLOR) private emptyColor: string) { - // listen changes onkeyup and update color picker - renderer.listen(elementRef.nativeElement, 'keyup', (event: KeyboardEvent) => { - const value: string = event.currentTarget['value']; + @Input('mccColorPickerOrigin') openMode: 'openOnFocus' | 'default' = 'default'; - if (event.isTrusted && !value) { - this.writeValueFromKeyup(this.emptyColor); - } else { - const color = parseColorString(value); - if (event.isTrusted && color) { - this.writeValueFromKeyup(value); - } + constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(EMPTY_COLOR) private emptyColor: string) {} + + @HostListener('focus') onFocus() { + if (this.openMode === 'openOnFocus') { + this.focus.emit(); + } + } + + @HostListener('keyup') onKeyup() { + const value: string = this.elementRef.nativeElement.value; + + if (!value) { + this.writeValueFromKeyup(this.emptyColor); + } else { + const color = parseColorString(value); + if (color) { + this.writeValueFromKeyup(value); } - }); + } } /** diff --git a/src/lib/color-picker/color-picker.component.scss b/src/lib/color-picker/color-picker.component.scss index 893cc100..e265ff52 100644 --- a/src/lib/color-picker/color-picker.component.scss +++ b/src/lib/color-picker/color-picker.component.scss @@ -5,13 +5,14 @@ height: 25px; cursor: pointer; background: none; + border-radius: 3px; border: 2px solid #dddddd; &.empty { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfAQMAAAAlYIR6AAAABlBMVEX/////EBC8L+WmAAAAJ0lEQVR42mM4wAAED0DEBxBRASJsQIQciOAHEewNQIIZpJCRjgr5AP7LD2UBZrkqAAAAAElFTkSuQmCC') !important; } &.disabled { - opacity: .5; + opacity: 0.5; } } @@ -20,6 +21,7 @@ width: 270px; min-height: 80px; position: relative; + border-radius: 4px; flex-direction: column; padding: 0; background: #ffffff; @@ -58,3 +60,12 @@ flex-grow: 1; } } + +::ng-deep mat-form-field { + mcc-color-picker { + .btn-picker { + margin-right: 4px; + margin-left: 4px; + } + } +} diff --git a/src/lib/color-picker/color-picker.component.ts b/src/lib/color-picker/color-picker.component.ts index 0cf1a51b..baf7b197 100644 --- a/src/lib/color-picker/color-picker.component.ts +++ b/src/lib/color-picker/color-picker.component.ts @@ -197,6 +197,7 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest set isOpen(value: boolean) { this._isOpen = coerceBooleanProperty(value); + this.changeDetectorRef.detectChanges(); } private _isOpen: boolean = false;