From 3ca5dae3db80a369965eabc3686a26835938d9ba Mon Sep 17 00:00:00 2001 From: pIvan Date: Thu, 24 Aug 2023 23:45:37 +0200 Subject: [PATCH] Fix #52 - Added support for adding content before and after all other elements within the color picker. --- projects/iplab/ngx-color-picker/package.json | 2 +- .../chrome-picker.component.html | 6 ++- .../compact-picker.component.html | 6 ++- .../github-picker.component.html | 6 ++- .../sketch-picker.component.html | 6 ++- .../swatches-picker.component.html | 6 ++- src/app/app.component.html | 35 ++++++++++++--- .../chrome-wrapper.component.css | 26 ----------- .../chrome-wrapper.component.html | 10 ++++- .../chrome-wrapper.component.scss | 43 +++++++++++++++++++ .../chrome-picker/chrome-wrapper.component.ts | 12 ++++-- 11 files changed, 115 insertions(+), 43 deletions(-) delete mode 100644 src/app/wrap-examples/chrome-picker/chrome-wrapper.component.css create mode 100644 src/app/wrap-examples/chrome-picker/chrome-wrapper.component.scss diff --git a/projects/iplab/ngx-color-picker/package.json b/projects/iplab/ngx-color-picker/package.json index dca0170..db26e03 100644 --- a/projects/iplab/ngx-color-picker/package.json +++ b/projects/iplab/ngx-color-picker/package.json @@ -3,7 +3,7 @@ "description": "", "homepage": "https://github.com/pIvan/ngx-color-picker", "bugs": "https://github.com/pIvan/ngx-color-picker/issues", - "version": "16.0.0", + "version": "16.1.0", "author": "Ivan Pintar", "license": "MIT", "readmeFilename": "README.md", diff --git a/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html b/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html index d7509ef..612eacf 100644 --- a/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html +++ b/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html @@ -1,3 +1,5 @@ + +
@@ -22,4 +24,6 @@
- \ No newline at end of file + + + \ No newline at end of file diff --git a/projects/iplab/ngx-color-picker/src/lib/components/compact-picker/compact-picker.component.html b/projects/iplab/ngx-color-picker/src/lib/components/compact-picker/compact-picker.component.html index 4f614d4..90430a0 100644 --- a/projects/iplab/ngx-color-picker/src/lib/components/compact-picker/compact-picker.component.html +++ b/projects/iplab/ngx-color-picker/src/lib/components/compact-picker/compact-picker.component.html @@ -1,3 +1,5 @@ + + - \ No newline at end of file + + + \ No newline at end of file diff --git a/projects/iplab/ngx-color-picker/src/lib/components/github-picker/github-picker.component.html b/projects/iplab/ngx-color-picker/src/lib/components/github-picker/github-picker.component.html index 1b9a282..6029e1b 100644 --- a/projects/iplab/ngx-color-picker/src/lib/components/github-picker/github-picker.component.html +++ b/projects/iplab/ngx-color-picker/src/lib/components/github-picker/github-picker.component.html @@ -1,5 +1,9 @@ + + \ No newline at end of file + [colorPresets]="control.presets"> + + \ No newline at end of file diff --git a/projects/iplab/ngx-color-picker/src/lib/components/sketch-picker/sketch-picker.component.html b/projects/iplab/ngx-color-picker/src/lib/components/sketch-picker/sketch-picker.component.html index 5c7319d..01fde05 100644 --- a/projects/iplab/ngx-color-picker/src/lib/components/sketch-picker/sketch-picker.component.html +++ b/projects/iplab/ngx-color-picker/src/lib/components/sketch-picker/sketch-picker.component.html @@ -1,3 +1,5 @@ + +
@@ -20,4 +22,6 @@
- \ No newline at end of file + + + \ No newline at end of file diff --git a/projects/iplab/ngx-color-picker/src/lib/components/swatches-picker/swatches-picker.component.html b/projects/iplab/ngx-color-picker/src/lib/components/swatches-picker/swatches-picker.component.html index 89b67ec..4d9b1c4 100644 --- a/projects/iplab/ngx-color-picker/src/lib/components/swatches-picker/swatches-picker.component.html +++ b/projects/iplab/ngx-color-picker/src/lib/components/swatches-picker/swatches-picker.component.html @@ -1,3 +1,5 @@ + + \ No newline at end of file + [colorPresets]="childControl.presets"> + + \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 704d637..13ce251 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -111,6 +111,21 @@
[control] attribute
Examples:
<chrome-picker [control]="ColorPickerControl"></chrome-picker>

+
+ +
Custom content before and after a color picker.
+

All components support this functionality; that is, all components project content to specified locations.

+ Examples:
+ 
<chrome-picker [control]="ColorPickerControl">
+    <div before>
+        This content goes insede color picker before any other elements.
+    </div>
+    <div>
+        This content goes insede color picker after all other elements.
+    </div>
+</chrome-picker>
+

An example of implementing content afterward is shown here.

+
color indicator

Color indicator is not only indicator, but click also allows copying component color to clipboard.
@@ -435,12 +450,20 @@

attributes explanation
... selector: 'chrome-wrapper', template: ' -<chrome-picker *ngIf="isVisible" [control]="colorControl"></chrome-picker> -<div *ngIf="isVisible" class="overlay" (click)="overlayClick($event)"></div> +<div class="picker" *ngIf="isVisible"> + <chrome-picker [control]="colorControl"> + <div class="buttons"> + <button type="button" class="btn btn-primary" (click)="applyClick($event)">Apply</button> + </div> + </chrome-picker> + <div class="overlay"></div> +</div> ' }) export class ChromeWrapperComponent { + private _color: Color = null; + public colorControl = new ColorPickerControl(); public isVisible: boolean = false; @@ -448,6 +471,7 @@
attributes explanation
@Input() public set color(color: string) { this.colorControl.setValueFrom(color); + this._color = this.colorControl.value; } @Output() @@ -455,11 +479,10 @@
attributes explanation
@HostBinding('style.background-color') public get background(): string { - return this.colorControl.value.toHexString(); + return this._color ? this._color.toHexString() : null; } public ngOnInit() { - this.colorControl.valueChanges.subscribe((value: Color) => this.colorChange.emit(value.toHexString())); } @HostListener('click', ['$event']) @@ -471,10 +494,12 @@
attributes explanation
this.isVisible = !this.isVisible; } - public overlayClick(event: MouseEvent): void { + public applyClick(event: MouseEvent): void { event.preventDefault(); event.stopPropagation(); this.isVisible = false; + this._color = this.colorControl.value; + this.colorChange.emit(this.colorControl.value.toHexString()); } } diff --git a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.css b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.css deleted file mode 100644 index 814d0e9..0000000 --- a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.css +++ /dev/null @@ -1,26 +0,0 @@ -:host { - border: 1px solid #333; - border-radius: 35px; - cursor: pointer; - display: inline-block; - height: 35px; - position: relative; - width: 35px; -} - -chrome-picker { - left: 100%; - position: absolute; - top: 100%; - z-index: 2; -} - -.overlay { - background: transparent; - left: 0; - position: fixed; - top: 0; - height: 100%; - width: 100%; - z-index: 1; -} \ No newline at end of file diff --git a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.html b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.html index 8947d5b..ef5a786 100644 --- a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.html +++ b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.html @@ -1,2 +1,8 @@ - -
\ No newline at end of file +
+ +
+ +
+ +
+
\ No newline at end of file diff --git a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.scss b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.scss new file mode 100644 index 0000000..ec7496f --- /dev/null +++ b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.scss @@ -0,0 +1,43 @@ +:host { + border: 1px solid #333; + border-radius: 35px; + cursor: pointer; + display: inline-block; + height: 35px; + position: relative; + width: 35px; +} + +.picker { + left: 100%; + position: absolute; + top: 100%; + z-index: 2; + + chrome-picker { + left: 100%; + position: absolute; + top: 100%; + z-index: 2; + } + + .buttons { + padding: 0 12px 12px; + text-align: center; + + button { + padding: .2rem 1rem; + } + } + + .overlay { + background: transparent; + left: 0; + position: fixed; + top: 0; + height: 100%; + width: 100%; + z-index: 1; + } +} + diff --git a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.ts b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.ts index 51d7f76..7388046 100644 --- a/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.ts +++ b/src/app/wrap-examples/chrome-picker/chrome-wrapper.component.ts @@ -4,10 +4,12 @@ import { ColorPickerControl, Color } from '@iplab/ngx-color-picker'; @Component({ selector: 'chrome-wrapper', templateUrl: './chrome-wrapper.component.html', - styleUrls: ['./chrome-wrapper.component.css'] + styleUrls: ['./chrome-wrapper.component.scss'] }) export class ChromeWrapperComponent implements OnInit { + private _color: Color = null; + public colorControl = new ColorPickerControl(); public isVisible: boolean = false; @@ -15,6 +17,7 @@ export class ChromeWrapperComponent implements OnInit { @Input() public set color(color: string) { this.colorControl.setValueFrom(color); + this._color = this.colorControl.value; } @Output() @@ -22,11 +25,10 @@ export class ChromeWrapperComponent implements OnInit { @HostBinding('style.background-color') public get background(): string { - return this.colorControl.value.toHexString(); + return this._color ? this._color.toHexString() : null; } ngOnInit() { - this.colorControl.valueChanges.subscribe((value: Color) => this.colorChange.emit(value.toHexString())); } @HostListener('click', ['$event']) @@ -38,10 +40,12 @@ export class ChromeWrapperComponent implements OnInit { this.isVisible = !this.isVisible; } - public overlayClick(event: MouseEvent): void { + public applyClick(event: MouseEvent): void { event.preventDefault(); event.stopPropagation(); this.isVisible = false; + this._color = this.colorControl.value; + this.colorChange.emit(this.colorControl.value.toHexString()); } }