feat(color-picker): implement position for used colors

Closes #90
tiaguinho · Jul 22, 2020 · d199e04 · d199e04
1 parent 916ab45
commit d199e04
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/src/lib/color-picker/color-picker.component.html b/src/lib/color-picker/color-picker.component.html
@@ -28,12 +28,25 @@
             [height]="colorPickerSelectorHeight" (changeSelectedColor)="updateTmpSelectedColor($event)">
         </mcc-color-picker-selector>
 
-        <mcc-color-picker-collection *ngIf="!hideUsedColors" [label]="usedColorLabel" [size]="usedSizeColors" [transparent]="!hideTransparent"
-            [hideEmpty]="hideEmpty" [colors]="usedColors$ | async" (changeColor)="updateTmpSelectedColor($event)">
-        </mcc-color-picker-collection>
+        <!-- show used colors on top -->
+        <ng-container *ngIf="!hideUsedColors && usedColorsPosition == 'top'">
+          <mcc-color-picker-collection [label]="usedColorLabel" [size]="usedSizeColors"
+                                       [transparent]="!hideTransparent" [hideEmpty]="hideEmpty"
+                                       [colors]="usedColors$ | async" (changeColor)="updateTmpSelectedColor($event)">
+          </mcc-color-picker-collection>
+        </ng-container>
 
+        <!-- render user collections -->
         <ng-content></ng-content>
 
+        <!-- show used colors on bottom -->
+        <ng-container *ngIf="!hideUsedColors && usedColorsPosition == 'bottom'">
+          <mcc-color-picker-collection [label]="usedColorLabel" [size]="usedSizeColors"
+                                       [transparent]="!hideTransparent" [hideEmpty]="hideEmpty" [colors]="usedColors$
+                                        | async" (changeColor)="updateTmpSelectedColor($event)">
+          </mcc-color-picker-collection>
+        </ng-container>
+
         <div *ngIf="!hideButtons" class="mcc-color-picker-actions">
 
             <button mat-button role="button" aria-label="Cancel" (click)="cancelSelection()">

diff --git a/src/lib/color-picker/color-picker.component.ts b/src/lib/color-picker/color-picker.component.ts
@@ -16,7 +16,7 @@ import {
 } from '@angular/core';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { EMPTY_COLOR, ENABLE_ALPHA_SELECTOR, coerceHexaColor } from './color-picker';
+import { EMPTY_COLOR, ENABLE_ALPHA_SELECTOR, MccColorPickerUsedColorPosition, coerceHexaColor } from './color-picker';
 import { MccColorPickerCollectionComponent } from './color-picker-collection.component';
 import { MccColorPickerService } from './color-picker.service';
 
@@ -79,6 +79,19 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest
   }
   private _reverseUsedColor: boolean = false;
 
+
+  /**
+   * Set position of used colors collection
+   */
+  @Input()
+  get usedColorsPosition(): MccColorPickerUsedColorPosition {
+    return this._usedColorsPosition;
+  }
+  set usedColorsPosition(position: MccColorPickerUsedColorPosition) {
+    this._usedColorsPosition = position;
+  }
+  private _usedColorsPosition: MccColorPickerUsedColorPosition = 'top';
+
   /**
    * Hide the hexadecimal color forms.
    */