From 73c23dbe4517864b35dfc502f4966cc0230eae17 Mon Sep 17 00:00:00 2001
From: pfh <pengf@vmware.com>
Date: Tue, 29 May 2018 18:28:05 +0800
Subject: [PATCH] add dropdown for color panel and delete type=button

---
 .../create-edit-label.component.html          | 37 ++++++++------
 .../create-edit-label.component.scss          | 49 ++++++++++---------
 .../create-edit-label.component.ts            |  8 ---
 .../lib/src/operation/operation.service.ts    |  2 +
 src/ui_ng/package.json                        |  2 +-
 5 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html
index 4ea4764e1..4cee09078 100644
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html
@@ -3,8 +3,10 @@
         <section>
             <label>
                 <label for="name">{{'LABEL.LABEL_NAME' | translate}}</label>
-                    <label  aria-haspopup="true" role="tooltip" [class.invalid]="isLabelNameExist" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
-                    <input type="text" id="name" name="name" required size="20" autocomplete="off" [(ngModel)]="labelModel.name" #name="ngModel" (keyup)="existValid(labelModel.name)">
+                <label aria-haspopup="true" role="tooltip" [class.invalid]="isLabelNameExist"
+                       class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
+                    <input type="text" id="name" name="name" required size="20" autocomplete="off"
+                           [(ngModel)]="labelModel.name" #name="ngModel" (keyup)="existValid(labelModel.name)">
                     <span class="tooltip-content">
                       {{'LABEL.NAME_ALREADY_EXISTS' | translate }}
                     </span>
@@ -12,24 +14,29 @@
             </label>
             <label>
                 <label for="color">{{'LABEL.COLOR' | translate}}</label>
-                <div class="colorDrop">
-                  <button type="button" class="btn btn-outline btnColor btn-sm" >
-                    <clr-icon shape="caret down" size="20" style='right:2px; width:24px; height:18px;' (click)="openColorPanel()"></clr-icon>
-                  </button>
-                  <div class="colorPanel" [hidden]="panelHidden">
-                    <a class="closePanel" (click)="closeColorPanel()">&times;</a>
-                    <span type="button"  (click)="labelModel.color=i.color" *ngFor="let i of labelColor" [ngStyle]="{'background-color': i.color, 'color': i.textColor }">Aa</span>
-                  </div>
-                  <input type="text" id="color" size="8" name="color" disabled [(ngModel)]="labelModel.color"  #color="ngModel">
-                </div>
+                <clr-dropdown [clrCloseMenuOnItemClick]="false">
+                    <button type="button" class="btn btn-outline btnColor btn-sm" clrDropdownTrigger>
+                        <clr-icon shape="caret down" size="20" style='right:2px; width:24px; height:18px;'></clr-icon>
+                    </button>
+                    <clr-dropdown-menu *clrIfOpen>
+                        <label class="dropdown-item" (click)="labelModel.color=i.color" *ngFor="let i of labelColor"
+                            [class.borderSty]="i.color == '#FFFFFF'"   [ngStyle]="{'background-color': i.color, 'color': i.textColor }">Aa</label>
+                    </clr-dropdown-menu>
+                </clr-dropdown>
+                <input type="text" id="color" size="8" name="color" disabled [(ngModel)]="labelModel.color" #color="ngModel">
             </label>
             <label>
                 <label for="description">{{'LABEL.DESCRIPTION' | translate}}</label>
-                <input type="text" id="description" name="description" size="30" [(ngModel)]="labelModel.description" #description="ngModel">
+                <input type="text" id="description" name="description" size="30" [(ngModel)]="labelModel.description"
+                       #description="ngModel">
             </label>
             <label>
-                <button type="button" class="btn btn-sm btn-outline" (click)="onCancel()"  [disabled]="inProgress">{{ 'BUTTON.CANCEL' | translate }}</button>
-                <button type="submit" class="btn btn-sm btn-primary" (click)="onSubmit()"  [disabled]="!isValid">{{ 'BUTTON.OK' | translate }}</button>
+                <button type="button" class="btn btn-sm btn-outline" (click)="onCancel()" [disabled]="inProgress">{{
+                    'BUTTON.CANCEL' | translate }}
+                </button>
+                <button type="submit" class="btn btn-sm btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{
+                    'BUTTON.OK' | translate }}
+                </button>
             </label>
         </section>
     </form>
diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss
index 8433cbacb..ba1609915 100644
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss
@@ -29,20 +29,7 @@
     margin-left: 20px;
   }
 
-  .colorDrop {
-    display: inline-block;
-    position: relative;
-    width: 132px;
-  }
 
-  .colorDrop .colorPanel {
-    position: absolute;
-    width: 166px;
-    padding: 6px;
-    background-color: white;
-    border: 1px solid #ccc;
-    z-index: 10;
-  }
 
   .btnColor {
     margin: 0 !important;
@@ -62,13 +49,29 @@
     border: 1px solid #A1A1A1;
   }
 
-  .closePanel {
-    display: block;
-    left: 138px;
-    position: relative;
-    font-size: 18px;
-    width: 10px;
-    line-height: 8px;
-    cursor: pointer;
-    text-decoration: none;
-  }
\ No newline at end of file
+  .dropdown-menu {
+    display: inline-block;
+    width: 166px;
+    padding: 6px;
+  }
+
+  .dropdown-menu .dropdown-item {
+    display: inline-block;
+    margin: 2px 4px;
+    padding: 0px;
+    width: 30px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+  }
+
+  .dropdown-item {
+    border: 0px;
+    color: white;
+    font-size: 12px;
+  }
+
+  .dropdown .dropdown-toggle.btn {
+    padding: 0 !important;
+  }
+  .borderSty{border: 1px solid #A1A1A1; line-height: 22px;}
\ No newline at end of file
diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
index d9afc2700..f2beebddf 100644
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
@@ -48,7 +48,6 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
 
   checkOnGoing: boolean;
   isLabelNameExist = false;
-  panelHidden = true;
 
   nameChecker = new Subject<string>();
 
@@ -122,13 +121,6 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
     this.copeLabelModel = clone(label[0]);
   }
 
-  openColorPanel(): void {
-    this.panelHidden = false;
-  }
-  closeColorPanel(): void {
-    this.panelHidden = true;
-  }
-
   public get hasChanged(): boolean {
     return !compareValue(this.copeLabelModel, this.labelModel);
   }
diff --git a/src/ui_ng/lib/src/operation/operation.service.ts b/src/ui_ng/lib/src/operation/operation.service.ts
index 3e81fa0e9..294f38f25 100644
--- a/src/ui_ng/lib/src/operation/operation.service.ts
+++ b/src/ui_ng/lib/src/operation/operation.service.ts
@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
+// tslint:disable-next-line:no-unused-variable
+import { Observable } from "rxjs/Observable";
 import {OperateInfo} from "./operate";
 
 @Injectable()
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 702f111a5..1d9bd43bf 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -49,7 +49,7 @@
         "bootstrap": "4.0.0-alpha.5",
         "codelyzer": "~2.0.0-beta.4",
         "enhanced-resolve": "^3.0.0",
-        "harbor-ui": "0.7.19-test-3",
+        "harbor-ui": "0.7.19-test-5",
         "jasmine-core": "2.4.1",
         "jasmine-spec-reporter": "2.5.0",
         "karma": "~1.7.0",