feat: added material CDK for color picker popup

Author: lokesh-coder

package-lock.json

@@ -13,11 +13,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^6.0.0",
+    "@angular/cdk": "^6.0.2",
     "@angular/common": "^6.0.0",
     "@angular/compiler": "^6.0.0",
     "@angular/core": "^6.0.0",
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
+    "@angular/material": "^6.0.2",
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
     "@angular/router": "^6.0.0",

package.json

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Store, Select } from '@ngxs/store';
-import { InkBucket, InkCollection } from '../../ink.model';
+import { InkBucket, InkCollection, InkCollectionMeta } from '../../ink.model';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -11,7 +11,7 @@ import { map } from 'rxjs/operators';
 })
 export class CollectionComponent implements OnInit {
   bucket: Observable<InkBucket>;
-  collection: InkCollection;
+  collection: InkCollectionMeta;
   constructor(private store: Store) {
     this.store
       .select(s => s.collection)

src/app/components/collection/collection.component.ts

@@ -3,5 +3,5 @@
   <div class="data">
     {{inkData.value}}
   </div>
-  <color-chrome (onChange)="colorChanged(inkData.id,$event)"></color-chrome>
+  <!-- <color-chrome (onChange)="colorChanged(inkData.id,$event)"></color-chrome> -->
 </div>

src/app/components/ink/ink.component.html

@@ -1,22 +1,61 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, ComponentRef, ElementRef } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { InkColor } from '../../ink.model';
 import { UpdateInkColor } from '../../store/actions/ink.action';
+import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { ChromeComponent } from 'ngx-color/chrome';
+import { map, debounceTime } from 'rxjs/operators';
 
 @Component({
   selector: 'inkapp-ink',
   templateUrl: './ink.component.html',
   styles: []
 })
-export class InkComponent implements OnInit {
+export class InkComponent implements OnInit, OnDestroy {
   @Input() inkData: InkColor;
   @Input() bucketId: number;
-  constructor(private store: Store) {}
+  overlayRef: OverlayRef;
+  colorPanelPortal: ComponentPortal<ChromeComponent>;
+  colorPickerRef: ComponentRef<ChromeComponent>;
+  constructor(private store: Store, private overlay: Overlay, private elRef: ElementRef) {}
 
-  ngOnInit() {}
-  openColorPicker() {}
-  colorChanged(id, c) {
-    console.log('c', c);
-    this.store.dispatch(new UpdateInkColor({ bucketId: this.bucketId, value: c.color.hex, meta: c.color, id }));
+  ngOnInit() {
+    const config = new OverlayConfig();
+    config.hasBackdrop = true;
+    config.backdropClass = 'cdk-overlay-transparent-backdrop';
+    config.positionStrategy = this.overlay
+      .position()
+      .connectedTo(this.elRef, { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' });
+
+    this.overlayRef = this.overlay.create(config);
+    this.colorPanelPortal = new ComponentPortal(ChromeComponent);
+    // (this.colorPanelPortal.component as any).onChange.subscribe(a => {
+    //   console.log('hhh', a);
+    // });
+  }
+  openColorPicker() {
+    this.colorPickerRef = this.overlayRef.attach(this.colorPanelPortal);
+    if (this.inkData.meta.hsl) {
+      this.colorPickerRef.instance.color = this.inkData.meta.hsl;
+    }
+    this.colorPickerRef.instance.onChange.pipe(map(c => c.color)).subscribe(color => {
+      this.store.dispatch(
+        new UpdateInkColor({ bucketId: this.bucketId, value: color.hex, meta: color, id: this.inkData.id })
+      );
+    });
+    this.overlayRef.backdropClick().subscribe(b => {
+      console.log('backdrop clocked', b);
+      if (this.overlayRef && this.overlayRef.hasAttached()) {
+        this.overlayRef.detach();
+        this.colorPickerRef.destroy();
+        return;
+      }
+    });
+  }
+  ngOnDestroy() {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+    }
   }
 }

src/app/components/ink/ink.component.ts

@@ -18,11 +18,14 @@ import { SettingsPage } from './pages/settings/settings.component';
 import { SettingsState, BucketState, CollectionState, InkState } from './store/states';
 import { ColorModule } from './modules/color/color.module';
 
+import { OverlayModule } from '@angular/cdk/overlay';
+
 export const MODULES = [
   RoutingModule,
   NgxsModule.forRoot([SettingsState, BucketState, CollectionState, InkState]),
   NgxsReduxDevtoolsPluginModule.forRoot(),
-  ColorModule
+  ColorModule,
+  OverlayModule
 ];
 export const COMPONENTS = [
   InkApp,

src/app/ink.config.ts

@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
 import { ColorAlphaModule } from 'ngx-color/alpha'; // <color-alpha-picker></color-alpha-picker>
 import { ColorBlockModule } from 'ngx-color/block'; // <color-block></color-block>
-import { ColorChromeModule } from 'ngx-color/chrome'; // <color-chrome></color-chrome>
+import { ColorChromeModule, ChromeComponent } from 'ngx-color/chrome'; // <color-chrome></color-chrome>
 import { ColorCircleModule } from 'ngx-color/circle'; // <color-circle></color-circle>
 import { ColorCompactModule } from 'ngx-color/compact'; // <color-compact></color-compact>
 import { ColorGithubModule } from 'ngx-color/github'; // <color-github></color-github>
@@ -12,13 +14,13 @@ import { ColorSketchModule } from 'ngx-color/sketch'; // <color-sketch></color-s
 import { ColorSliderModule } from 'ngx-color/slider'; // <color-slider></color-slider>
 import { ColorSwatchesModule } from 'ngx-color/swatches'; // <color-swatches></color-swatches>
 import { ColorTwitterModule } from 'ngx-color/twitter'; // <color-twitter></color-twitter>
-
-import { CommonModule } from '@angular/common';
+import { ChromeColorPickerComponent } from './components/chrome-color-picker.component';
 
 @NgModule({
   imports: [CommonModule, ColorChromeModule],
-  exports: [ColorChromeModule],
-  declarations: [],
-  providers: []
+  exports: [ColorChromeModule, ChromeColorPickerComponent],
+  declarations: [ChromeColorPickerComponent],
+  providers: [],
+  entryComponents: [ChromeComponent, ChromeColorPickerComponent]
 })
 export class ColorModule {}

src/app/ink.module.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, EventEmitter } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { Ink, InkColor } from '../../../ink.model';
+import { AddNewInk, UpdateInkColor } from '../../../store/actions/ink.action';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'inkapp-chrome-color-picker',
+  templateUrl: 'chrome-color-picker.template.html'
+})
+export class ChromeColorPickerComponent implements OnInit {
+  inkData: InkColor;
+  bucketId: InkColor;
+  private colorChanged: Subject<any> = new Subject();
+  constructor(private store: Store) {}
+
+  ngOnInit() {}
+  onColorChange(color) {
+    this.colorChanged.next(color);
+    return this.colorChanged.asObservable();
+  }
+}

src/app/modules/color/color.module.ts

@@ -0,0 +1 @@
+<color-chrome (onChange)="onColorChange($event)"></color-chrome>

src/app/modules/color/components/chrome-color-picker.component.ts

@@ -6,7 +6,7 @@ import * as Datastore from 'nedb';
 })
 export class DBService {
   db;
-  constructor() {
+  _constructor() {
     this.db = new Datastore({ filename: 'ink/db' });
     this.db.loadDatabase(e => {});
     const doc = {

src/app/modules/color/components/chrome-color-picker.template.html

@@ -21,6 +21,7 @@ export class InkState {
     state = state.map((a: any) => {
       if (a.id === action.inkData.id) {
         a.value = action.inkData.value;
+        a.meta = action.inkData.meta;
       }
       return a;
     });

src/app/services/db.service.ts

@@ -1,2 +1,3 @@
 @import './bootstrap';
-@import './pretty-checkbox';
+@import './pretty-checkbox';
+@import './material';

src/app/store/states/ink.state.ts

@@ -0,0 +1 @@
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';