From 72809870417a016282e658ae4660fca90f62e2f7 Mon Sep 17 00:00:00 2001 From: Tiago Temporin Date: Wed, 21 Feb 2018 13:44:41 +0000 Subject: [PATCH 1/8] chore: upgrade version --- lib/package.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/package.json b/lib/package.json index 36d15efd..319f27b7 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,7 +1,7 @@ { "$schema": "../node_modules/ng-packagr/package.schema.json", "name": "mat-color-picker", - "version": "1.2.3", + "version": "1.3.3", "ngPackage": { "lib": { "entryFile": "src/index.ts" diff --git a/package.json b/package.json index 87cde14f..04e079fd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mat-color-picker", - "version": "1.2.3", + "version": "1.3.3", "license": "MIT", "scripts": { "ng": "ng", From 898f8425cc76fccd0ad86459a7051ab8480e208e Mon Sep 17 00:00:00 2001 From: Tiago Temporin Date: Wed, 21 Feb 2018 13:45:29 +0000 Subject: [PATCH 2/8] feat: implement overlay input --- lib/src/color-picker.component.html | 61 ++-- lib/src/color-picker.component.scss | 75 ++--- lib/src/color-picker.component.ts | 444 +++++++++++++++------------- lib/src/color-picker.module.ts | 60 ++-- 4 files changed, 342 insertions(+), 298 deletions(-) diff --git a/lib/src/color-picker.component.html b/lib/src/color-picker.component.html index da9f4593..0528f135 100644 --- a/lib/src/color-picker.component.html +++ b/lib/src/color-picker.component.html @@ -1,20 +1,33 @@ - - - - + + + + + + + + + + + + + + + + + - \ No newline at end of file + diff --git a/lib/src/color-picker.component.scss b/lib/src/color-picker.component.scss index 6de799e0..d9038dbb 100644 --- a/lib/src/color-picker.component.scss +++ b/lib/src/color-picker.component.scss @@ -1,52 +1,53 @@ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); .btn-picker { - width: 25px; - height: 25px; - cursor: pointer; - background: none; - border: 2px solid #dddddd; + width: 25px; + height: 25px; + cursor: pointer; + background: none; + border: 2px solid #dddddd; - &.empty { - background: #ffffff!important; - } + &.empty { + background: #ffffff !important; + } } .mat-color-picker-overlay { - display: flex; - width: 260px; - min-height: 80px; - flex-direction: column; - padding: 0; - background: #ffffff; - font-family: 'Open Sans', sans-serif; + display: flex; + width: 260px; + min-height: 80px; + position: relative; + flex-direction: column; + padding: 0; + background: #ffffff; + font-family: 'Open Sans', sans-serif; - .mat-color-picker-preview { - width: 100%; - height: 8px; - } + .mat-color-picker-preview { + width: 100%; + height: 8px; + } } .transparent { - width: 32px; - height: 2px; - border-bottom: 2px solid red; - transform: translateY(-3px) translateX(-2px) rotate(45deg); - -webkit-transform: translateY(-2px) translateX(-11px) rotate(45deg); - position: absolute; + width: 32px; + height: 2px; + border-bottom: 2px solid red; + transform: translateY(-3px) translateX(-2px) rotate(45deg); + -webkit-transform: translateY(-2px) translateX(-11px) rotate(45deg); + position: absolute; } .mat-color-picker-actions { - display: flex; - padding: 4px; - border-top: 1px #dddddd solid; + display: flex; + padding: 4px; + border-top: 1px #dddddd solid; - button { - color: #100214; - text-transform: uppercase; - font-family: 'Open Sans', sans-serif; - font-size: 12px; - font-weight: 400; - flex-grow: 1; - } -} \ No newline at end of file + button { + color: #100214; + text-transform: uppercase; + font-family: 'Open Sans', sans-serif; + font-size: 12px; + font-weight: 400; + flex-grow: 1; + } +} diff --git a/lib/src/color-picker.component.ts b/lib/src/color-picker.component.ts index ba9c3abb..c5944b07 100644 --- a/lib/src/color-picker.component.ts +++ b/lib/src/color-picker.component.ts @@ -1,16 +1,16 @@ import { - AfterContentInit, - Component, - ContentChildren, - ChangeDetectionStrategy, - ChangeDetectorRef, - ElementRef, - EventEmitter, - Input, - Output, - OnInit, - OnDestroy, - QueryList + AfterContentInit, + Component, + ContentChildren, + ChangeDetectionStrategy, + ChangeDetectorRef, + ElementRef, + EventEmitter, + Input, + Output, + OnInit, + OnDestroy, + QueryList, } from '@angular/core'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { MatColorPickerCollectionComponent } from './color-picker-collection.component'; @@ -21,220 +21,252 @@ import { Subscription } from 'rxjs/Subscription'; import { Observable } from 'rxjs/Observable'; @Component({ - selector: 'mat-color-picker', - templateUrl: './color-picker.component.html', - styleUrls: ['./color-picker.component.scss'], - preserveWhitespaces: false, - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'mat-color-picker', + templateUrl: './color-picker.component.html', + styleUrls: ['./color-picker.component.scss'], + preserveWhitespaces: false, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class MatColorPickerComponent implements AfterContentInit, OnInit, OnDestroy { + /** + * Get all collections + */ + @ContentChildren(MatColorPickerCollectionComponent) + _collections: QueryList; - /** - * Get all collections - */ - @ContentChildren(MatColorPickerCollectionComponent) - _collections: QueryList; - - /** - * Change label of the collection UsedColors - */ - @Input() - get usedColorLabel(): string { return this._usedColorLabel; } - set usedColorLabel(value: string) { this._usedColorLabel = value; } - private _usedColorLabel: string = 'Used Colors'; - - /** - * Set initial value for used color - */ - @Input() set usedColorStart(colors: string[]) { - if (colors && colors.length > 0) { - for (const color of colors) { - this.colorPickerService.addColor(color); - } - } + /** + * Change label of the collection UsedColors + */ + @Input() + get usedColorLabel(): string { + return this._usedColorLabel; + } + set usedColorLabel(value: string) { + this._usedColorLabel = value; + } + private _usedColorLabel: string = 'Used Colors'; + + /** + * Set initial value for used color + */ + @Input() + set usedColorStart(colors: string[]) { + if (colors && colors.length > 0) { + for (const color of colors) { + this.colorPickerService.addColor(color); + } } + } - /** - * Hide empty slots from the collection UsedColors - */ - @Input('hideEmptyUsedColors') - get hideEmpty(): boolean { return this._hideEmpty; } - set hideEmpty(value: boolean) { this._hideEmpty = coerceBooleanProperty(value); } - private _hideEmpty: boolean = false; - - /** - * Start with a color selected - */ - @Input() - get selectedColor(): string { return this._selectedColor; } - set selectedColor(value: string) { - if (this._selectedColor !== value) { - this.changeDetectorRef.markForCheck(); - } + /** + * Hide empty slots from the collection UsedColors + */ + @Input('hideEmptyUsedColors') + get hideEmpty(): boolean { + return this._hideEmpty; + } + set hideEmpty(value: boolean) { + this._hideEmpty = coerceBooleanProperty(value); + } + private _hideEmpty: boolean = false; - this._selectedColor = coerceHexaColor(value); - } - private _selectedColor: string = 'none'; - - /** - * Define if the panel will be initiated open - */ - @Input() - get isOpen(): boolean { return this._isOpen; } - set isOpen(value: boolean) { this._isOpen = coerceBooleanProperty(value); } - private _isOpen: boolean = false; - - /** - * Hide the action buttons (cancel/confirm) - */ - @Input() - get hideButtons(): boolean { return this._hideButtons; } - set hideButtons(value: boolean) { this._hideButtons = coerceBooleanProperty(value); } - private _hideButtons: boolean = false; - - /** - * Set the size of the used colors - */ - @Input() usedSizeColors: number = 30; - - /** - * Change btnCancel label - */ - @Input() btnCancel: string = 'Cancel'; - - /** - * Change btnConfirm label - */ - @Input() btnConfirm: string = 'Confirm'; - - /** - * Event emitted when user change the selected color (without confirm) - */ - @Output() change = new EventEmitter; - - /** - * Event emitted when selected color is confirm - */ - @Output() selected = new EventEmitter; - - /** - * Event emitted when is clicked outside of the component - */ - @Output() clickOut = new EventEmitter; - - /** - * Return a Observable with the color the user is picking - */ - get tmpSelectedColor$(): Observable { return this._tmpSelectedColor.asObservable(); } - private _tmpSelectedColor: BehaviorSubject; - - /** - * Array of subscriptions from the collections - */ - private _collectionSubs: Subscription[] = []; - - /** - * Observable with all the colors used by the user - */ - usedColors$: Observable; - - constructor( - private elementRef: ElementRef, - private changeDetectorRef: ChangeDetectorRef, - private colorPickerService: MatColorPickerService - ) {} - - ngOnInit() { - this.usedColors$ = this.colorPickerService.getColors(); - this._tmpSelectedColor = new BehaviorSubject(this._selectedColor); + /** + * Start with a color selected + */ + @Input() + get selectedColor(): string { + return this._selectedColor; + } + set selectedColor(value: string) { + if (this._selectedColor !== value) { + this.changeDetectorRef.markForCheck(); } - /** - * Walk throw all collections and subcribe to changes - */ - ngAfterContentInit() { - if (this._collections) { - this._collections.forEach((collection: MatColorPickerCollectionComponent) => { - const subscription = collection.changeColor.subscribe(color => { - this.updateTmpSelectedColor(color); - }); - - this._collectionSubs.push(subscription); - }); - } - } + this._selectedColor = coerceHexaColor(value); + } + private _selectedColor: string = 'none'; - /** - * Destroy all subscriptions - */ - ngOnDestroy() { - if (this._collectionSubs) { - this._collectionSubs.forEach((subscription: Subscription) => { - if (subscription && !subscription.closed) { - subscription.unsubscribe(); - } - }); - } - } + /** + * Define if the panel will be initiated open + */ + @Input() + get isOpen(): boolean { + return this._isOpen; + } + set isOpen(value: boolean) { + this._isOpen = coerceBooleanProperty(value); + } + private _isOpen: boolean = false; - /** - * Update selected color and emit the change - */ - private _updateSelectedColor() { - if (this._isOpen) { - const tmpSelectedColor = this._tmpSelectedColor.getValue(); - if (this._selectedColor !== tmpSelectedColor) { - this._selectedColor = tmpSelectedColor; - this.selected.next(this._selectedColor); - } - } + /** + * Define if the panel will show in overlay or not + */ + @Input() + get overlay(): boolean { + return this._overlay; + } + set overlay(value: boolean) { + this._overlay = coerceBooleanProperty(value); + } + private _overlay: boolean = true; + + /** + * Hide the action buttons (cancel/confirm) + */ + @Input() + get hideButtons(): boolean { + return this._hideButtons; + } + set hideButtons(value: boolean) { + this._hideButtons = coerceBooleanProperty(value); + } + private _hideButtons: boolean = false; + + /** + * Set the size of the used colors + */ + @Input() usedSizeColors: number = 30; + + /** + * Change btnCancel label + */ + @Input() btnCancel: string = 'Cancel'; + + /** + * Change btnConfirm label + */ + @Input() btnConfirm: string = 'Confirm'; + + /** + * Event emitted when user change the selected color (without confirm) + */ + @Output() change = new EventEmitter(); + + /** + * Event emitted when selected color is confirm + */ + @Output() selected = new EventEmitter(); + + /** + * Event emitted when is clicked outside of the component + */ + @Output() clickOut = new EventEmitter(); + + /** + * Return a Observable with the color the user is picking + */ + get tmpSelectedColor$(): Observable { + return this._tmpSelectedColor.asObservable(); + } + private _tmpSelectedColor: BehaviorSubject; + + /** + * Array of subscriptions from the collections + */ + private _collectionSubs: Subscription[] = []; + + /** + * Observable with all the colors used by the user + */ + usedColors$: Observable; + + constructor( + private elementRef: ElementRef, + private changeDetectorRef: ChangeDetectorRef, + private colorPickerService: MatColorPickerService + ) {} + + ngOnInit() { + this.usedColors$ = this.colorPickerService.getColors(); + this._tmpSelectedColor = new BehaviorSubject(this._selectedColor); + } + + /** + * Walk throw all collections and subcribe to changes + */ + ngAfterContentInit() { + if (this._collections) { + this._collections.forEach((collection: MatColorPickerCollectionComponent) => { + const subscription = collection.changeColor.subscribe(color => { + this.updateTmpSelectedColor(color); + }); + + this._collectionSubs.push(subscription); + }); } + } - /** - * Open/close color picker panel - */ - toggle() { - this._isOpen = !this._isOpen; - if (!this._isOpen && this._selectedColor !== EMPTY_COLOR) { - this.colorPickerService.addColor(this._selectedColor); + /** + * Destroy all subscriptions + */ + ngOnDestroy() { + if (this._collectionSubs) { + this._collectionSubs.forEach((subscription: Subscription) => { + if (subscription && !subscription.closed) { + subscription.unsubscribe(); } + }); } + } - /** - * Update selected color, close the panel and notify the user - */ - backdropClick(): void { - this.confirmSelectedColor(); - this.clickOut.emit(null); + /** + * Update selected color and emit the change + */ + private _updateSelectedColor() { + if (this._isOpen || !this.overlay) { + const tmpSelectedColor = this._tmpSelectedColor.getValue(); + if (this._selectedColor !== tmpSelectedColor) { + this._selectedColor = tmpSelectedColor; + this.selected.next(this._selectedColor); + } } + } - /** - * Update tmpSelectedColor - * @param color string - */ - updateTmpSelectedColor(color: string) { - if (color) { - this._tmpSelectedColor.next(color); - this.change.next(color); - if (this._hideButtons) { - this._updateSelectedColor(); - } - } + /** + * Open/close color picker panel + */ + toggle() { + this._isOpen = !this._isOpen; + if (!this._isOpen && this._selectedColor !== EMPTY_COLOR) { + this.colorPickerService.addColor(this._selectedColor); } + } - /** - * Cancel the selection and close the panel - */ - cancelSelection() { - this.selected.emit(this._selectedColor); - this.toggle(); - } + /** + * Update selected color, close the panel and notify the user + */ + backdropClick(): void { + this.confirmSelectedColor(); + this.clickOut.emit(null); + } - /** - * Update selectedColor and close the panel - */ - confirmSelectedColor() { + /** + * Update tmpSelectedColor + * @param color string + */ + updateTmpSelectedColor(color: string) { + if (color) { + this._tmpSelectedColor.next(color); + this.change.next(color); + if (this._hideButtons) { this._updateSelectedColor(); - this.toggle(); + } } + } + + /** + * Cancel the selection and close the panel + */ + cancelSelection() { + this.selected.emit(this._selectedColor); + this.toggle(); + } + + /** + * Update selectedColor and close the panel + */ + confirmSelectedColor() { + this._updateSelectedColor(); + this.toggle(); + } } diff --git a/lib/src/color-picker.module.ts b/lib/src/color-picker.module.ts index d84cc67a..db812879 100644 --- a/lib/src/color-picker.module.ts +++ b/lib/src/color-picker.module.ts @@ -1,12 +1,9 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule } from '@angular/forms'; +import { PortalModule } from '@angular/cdk/portal'; import { OverlayModule } from '@angular/cdk/overlay'; -import { - MatButtonModule, - MatFormFieldModule, - MatInputModule -} from '@angular/material'; +import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material'; import { MatColorPickerService } from './color-picker.service'; @@ -14,34 +11,35 @@ import { MatColorPickerComponent } from './color-picker.component'; import { MatColorPickerSelectorComponent } from './color-picker-selector.component'; import { MatColorPickerCollectionComponent } from './color-picker-collection.component'; import { - MatConnectedColorPickerDirective, - MatColorPickerOriginDirective, - MatColorPickerOptionDirective + MatConnectedColorPickerDirective, + MatColorPickerOriginDirective, + MatColorPickerOptionDirective, } from './color-picker.directives'; @NgModule({ - imports: [ - CommonModule, - OverlayModule, - ReactiveFormsModule, - MatButtonModule, - MatFormFieldModule, - MatInputModule - ], - declarations: [ - MatColorPickerComponent, - MatConnectedColorPickerDirective, - MatColorPickerSelectorComponent, - MatColorPickerOriginDirective, - MatColorPickerOptionDirective, - MatColorPickerCollectionComponent - ], - exports: [ - MatColorPickerComponent, - MatConnectedColorPickerDirective, - MatColorPickerOriginDirective, - MatColorPickerCollectionComponent - ], - providers: [MatColorPickerService], + imports: [ + CommonModule, + PortalModule, + OverlayModule, + ReactiveFormsModule, + MatButtonModule, + MatFormFieldModule, + MatInputModule, + ], + declarations: [ + MatColorPickerComponent, + MatConnectedColorPickerDirective, + MatColorPickerSelectorComponent, + MatColorPickerOriginDirective, + MatColorPickerOptionDirective, + MatColorPickerCollectionComponent, + ], + exports: [ + MatColorPickerComponent, + MatConnectedColorPickerDirective, + MatColorPickerOriginDirective, + MatColorPickerCollectionComponent, + ], + providers: [MatColorPickerService], }) export class MatColorPickerModule {} From 63ef8f39fc564b8f468836ce0150fcb8bf98f330 Mon Sep 17 00:00:00 2001 From: Tiago Temporin Date: Wed, 21 Feb 2018 13:45:50 +0000 Subject: [PATCH 3/8] feat(demo): add overlay false example --- demo-app/src/app/app.component.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/demo-app/src/app/app.component.html b/demo-app/src/app/app.component.html index 6ca97483..95db6f6b 100644 --- a/demo-app/src/app/app.component.html +++ b/demo-app/src/app/app.component.html @@ -2,6 +2,17 @@

Color Picker DEMO APP

+

Component without overlay

+ + + + + + +
+

Change used color label

From 0cc06136a6dc8c34eecd7b267cf7586abbf77349 Mon Sep 17 00:00:00 2001 From: Leonardo Medici Date: Fri, 23 Feb 2018 12:06:13 +0100 Subject: [PATCH 4/8] feat: add option to hide used colors --- demo-app/src/app/app.component.html | 35 +++++++++++++++++------------ lib/src/color-picker.component.html | 6 ++--- lib/src/color-picker.component.ts | 12 ++++++++++ 3 files changed, 36 insertions(+), 17 deletions(-) diff --git a/demo-app/src/app/app.component.html b/demo-app/src/app/app.component.html index 95db6f6b..169c0f29 100644 --- a/demo-app/src/app/app.component.html +++ b/demo-app/src/app/app.component.html @@ -6,7 +6,7 @@

Component without overlay

- + @@ -15,8 +15,8 @@

Component without overlay

Change used color label

- - @@ -26,8 +26,8 @@

Change used color label

Colors as objects

- - @@ -52,8 +52,8 @@

Connect color picker with an input

Change color when confirm

- - @@ -66,8 +66,8 @@

Change color on change

[usedSizeColors]="'50'" (change)="changeColor = $event" (selected)="changeColor = $event"> - - @@ -77,8 +77,8 @@

Change color on change

Define used colors init value

- - @@ -88,7 +88,7 @@

Define used colors init value

Hide empty slot of colors

- + @@ -98,11 +98,18 @@

Hide empty slot of colors

+

Hide Used colors

+ + + + +
+

Change buttons label

- + @@ -114,7 +121,7 @@

Change buttons label

Hide buttons

- + diff --git a/lib/src/color-picker.component.html b/lib/src/color-picker.component.html index 0528f135..c7a23316 100644 --- a/lib/src/color-picker.component.html +++ b/lib/src/color-picker.component.html @@ -27,7 +27,7 @@ - +