From 4ae9653e66988257e38c767dc2bd654d7fbe67b5 Mon Sep 17 00:00:00 2001
From: Fabian Jeglinski <f.jeglinski@28apps.de>
Date: Fri, 10 May 2019 17:47:57 +0200
Subject: [PATCH] refacotr custom color entry component

---
 .../custom-color-entry.component.html         |  2 +-
 .../custom-color-entry.component.scss         |  2 +-
 .../custom-color-entry.component.ts           | 44 ++++++-------------
 3 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/src/app/feature-management/custom-color-entry/custom-color-entry.component.html b/src/app/feature-management/custom-color-entry/custom-color-entry.component.html
index 6d40763..ebea1dc 100644
--- a/src/app/feature-management/custom-color-entry/custom-color-entry.component.html
+++ b/src/app/feature-management/custom-color-entry/custom-color-entry.component.html
@@ -1,7 +1,7 @@
 <div class="entry">
   Color:
   <div class="color-preview" [ngStyle]="previewStyle"></div>
-  <span *ngIf="isDefaultColor">(Default)</span>
+  <span *ngIf="isDefaultColor">(default color)</span>
   <div class="controls">
 <!--    [(colorPicker)]="selectedColor"-->
     <i class="material-icons"
diff --git a/src/app/feature-management/custom-color-entry/custom-color-entry.component.scss b/src/app/feature-management/custom-color-entry/custom-color-entry.component.scss
index c0b5861..f2a3bc0 100644
--- a/src/app/feature-management/custom-color-entry/custom-color-entry.component.scss
+++ b/src/app/feature-management/custom-color-entry/custom-color-entry.component.scss
@@ -11,7 +11,7 @@
   }
 
   .color-preview {
-    margin-left: .5rem;
+    margin: 0 .5rem 0 .5rem;
     height: 2rem;
     width: 2rem;
     border: 2px solid;
diff --git a/src/app/feature-management/custom-color-entry/custom-color-entry.component.ts b/src/app/feature-management/custom-color-entry/custom-color-entry.component.ts
index 3155070..9296e12 100644
--- a/src/app/feature-management/custom-color-entry/custom-color-entry.component.ts
+++ b/src/app/feature-management/custom-color-entry/custom-color-entry.component.ts
@@ -14,14 +14,7 @@ import {Config} from "../../misc/Config";
 })
 export class CustomColorEntryComponent implements OnInit{
 
-  _colors: any;
-  @Input() set colors(value: any) {
-    this._colors = value;
-  }
-
-  get colors(): any {
-    return this._colors;
-  }
+  @Input() colors: any;
 
   private _selectedColor: any;
   set selectedColor(value: any) {
@@ -30,45 +23,33 @@ export class CustomColorEntryComponent implements OnInit{
     this.colorChangeEmitter.emit(this.colors);
   }
 
-  get selectedColor(): any {
+  get selectedColor() :any{
     return this._selectedColor;
   }
 
   // - default color properties
-  get defaultStrokeColor(): any {
-    return this.colors[CustomProperties.DEFAULT_COLOR_STROKE];
-  }
-
   get defaultStrokeColorAsRgba(): string {
-    return Utils.colorArrayToRgba(this.defaultStrokeColor);
-  }
-
-  get defaultFillColor(): number[] {
-    return this.colors[CustomProperties.DEFAULT_COLOR_FILL];
+    const color = this.colors[CustomProperties.DEFAULT_COLOR_STROKE];
+    return Utils.colorArrayToRgba(color);
   }
 
   get defaultFillColorAsRgba(): string {
-    return Utils.colorArrayToRgba(this.defaultFillColor);
+    const color = this.colors[CustomProperties.DEFAULT_COLOR_FILL];
+    return Utils.colorArrayToRgba(color);
   }
 
   // - not default color properties
-
-  get strokeColor(): any {
-    return this.colors[CustomProperties.COLOR_STROKE];
-  }
-
   get strokeColorAsRgba(): string {
-    return Utils.colorArrayToRgba(this.strokeColor);
-  }
-
-  get fillColor(): number[] {
-    return this.colors[CustomProperties.COLOR_FILL];
+    const color = this.colors[CustomProperties.COLOR_STROKE];
+    return Utils.colorArrayToRgba(color);
   }
 
   get fillColorAsRgba(): string {
-    return Utils.colorArrayToRgba(this.fillColor);
+    const color =  this.colors[CustomProperties.COLOR_FILL];
+    return Utils.colorArrayToRgba(color);
   }
 
+
   @Output('colorChanged') colorChangeEmitter: EventEmitter<any> = new EventEmitter();
 
   /**
@@ -95,7 +76,7 @@ export class CustomColorEntryComponent implements OnInit{
       'background-color': this.defaultFillColorAsRgba
     };
     this.isDefaultColor = true;
-    if (this.strokeColor) {
+    if (this.selectedColor) {
       styles = {
         'border-color': this.strokeColorAsRgba,
         'background-color': this.fillColorAsRgba
@@ -118,6 +99,7 @@ export class CustomColorEntryComponent implements OnInit{
   resetColor(){
     this.colors[CustomProperties.COLOR_STROKE] = null;
     this.colors[CustomProperties.COLOR_FILL] = null;
+    this._selectedColor = null;
     this.definePreviewStyle();
   }