Midify label color panel about #4580

2024-11-26 12:15:20 +01:00 · 2018-04-09 10:35:19 +08:00 · 2018-04-09 10:35:19 +08:00 · c80e33fd73
commit c80e33fd73
parent d94699dca3
12 changed files with 41 additions and 15 deletions
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts
@ -18,7 +18,7 @@ export const CREATE_EDIT_LABEL_TEMPLATE: string = `
                        <clr-icon shape="caret down" size="20" style='right:2px; width:24px; height:18px;'></clr-icon>
                    </button>
                    <clr-dropdown-menu *clrIfOpen>
-                        <label type="button" class="dropdown-item" (click)="labelModel.color=i" *ngFor="let i of labelColor" [ngStyle]="{'background-color': i}">Aa</label>
+                        <label type="button" class="dropdown-item"  (click)="labelModel.color=i.color" *ngFor="let i of labelColor" [ngStyle]="{'background-color': i.color, 'color': i.textColor }">Aa</label>
                    </clr-dropdown-menu>
                </clr-dropdown>
                <input type="text" id="color" size="8" name="color" [(ngModel)]="labelModel.color"  #color="ngModel">
--- 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
@ -31,6 +31,7 @@ import {LabelService} from "../service/label.service";
 import {ErrorHandler} from "../error-handler/error-handler";
 import {NgForm} from "@angular/forms";
 import {Subject} from "rxjs/Subject";
+import {LabelColor} from "../shared/shared.const";

@Component({
    selector: 'hbr-create-edit-label',
@ -48,8 +49,6 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
    checkOnGoing: boolean;
    isLabelNameExist = false;

-    labelColor = ['#00ab9a', '#9da3db', '#be90d6', '#9b0d54', '#f52f22', '#747474', '#0095d3', '#f38b00', ' #62a420', '#89cbdf', '#004a70', '#9460b8'];
-
    nameChecker = new Subject<string>();

    labelForm: NgForm;
@ -88,6 +87,10 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
        this.nameChecker.unsubscribe();
    }

+    get labelColor() {
+        return LabelColor;
+    }
+
    initLabel(): Label {
        return {
            name: '',
--- a/src/ui_ng/lib/src/label-piece/label-piece.component.ts
+++ b/src/ui_ng/lib/src/label-piece/label-piece.component.ts
@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
+import {Component, Input, Output, OnInit, EventEmitter, OnChanges} from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';

@ -20,6 +20,7 @@ import 'rxjs/add/operator/distinctUntilChanged';

 import { LABEL_PIEICE_TEMPLATE, LABEL_PIEICE_STYLES } from './label-piece.template';
 import {Label} from "../service/interface";
+import {LabelColor} from "../shared/shared.const";


@Component({
@ -28,10 +29,17 @@ import {Label} from "../service/interface";
    template: LABEL_PIEICE_TEMPLATE
 })

-export class LabelPieceComponent implements OnInit {
+export class LabelPieceComponent implements OnInit, OnChanges {
    @Input() label: Label;
    @Input() labelWidth: number;
+    labelColor: {[key: string]: string};

-    ngOnInit(): void {
+    ngOnChanges(): void {
+        if (this.label) {
+            let color = this.label.color;
+            this.labelColor = LabelColor.find(data => data.color === color);
+        }
    }
+
+    ngOnInit(): void { }
 }
--- a/src/ui_ng/lib/src/label-piece/label-piece.template.ts
+++ b/src/ui_ng/lib/src/label-piece/label-piece.template.ts
@ -3,7 +3,7 @@
 */

 export const LABEL_PIEICE_TEMPLATE: string = `
-<label class="label" [ngStyle]="{'background-color': label.color}" [style.max-width.px]="labelWidth">
+<label class="label" [ngStyle]="{'background-color': labelColor?.color, 'color': labelColor?.textColor, 'border': labelColor?.color == '#FFFFFF'? '1px solid #666': 'none'}" [style.max-width.px]="labelWidth">
    <clr-icon *ngIf="label.scope=='p'" shape="organization"></clr-icon>
    <clr-icon *ngIf="label.scope=='g'" shape="administrator"></clr-icon>
     {{label.name}}
--- a/src/ui_ng/lib/src/label/label.component.html.ts
+++ b/src/ui_ng/lib/src/label/label.component.html.ts
@ -22,7 +22,7 @@ export const LABEL_TEMPLATE = `
                <clr-dg-column [clrDgField]="'name'">{{'LABEL.LABEL' | translate}}</clr-dg-column>
                <clr-dg-column [clrDgField]="'endpoint'">{{'LABEL.DESCRIPTION' | translate}}</clr-dg-column>
                <clr-dg-column [clrDgField]="'insecure'">{{'LABEL.CREATION_TIME' | translate }}</clr-dg-column>
-                 <clr-dg-placeholder>{{'DESTINATION.PLACEHOLDER' | translate }}</clr-dg-placeholder>
+                 <clr-dg-placeholder>{{'LABEL.PLACEHOLDER' | translate }}</clr-dg-placeholder>
                <clr-dg-row *clrDgItems="let label of targets" [clrDgItem]='label'>
                    <clr-dg-cell>
                        <hbr-label-piece [label]="label"></hbr-label-piece>
--- a/src/ui_ng/lib/src/shared/shared.const.ts
+++ b/src/ui_ng/lib/src/shared/shared.const.ts
@ -67,3 +67,14 @@ export const enum ConfirmationState {
 export const enum ConfirmationButtons {
  CONFIRM_CANCEL, YES_NO, DELETE_CANCEL, CLOSE, REPLICATE_CANCEL
 };
+
+export const LabelColor = [
+  {'color': '#000000', 'textColor' : 'white'}, {'color': '#61717D', 'textColor': 'white'}, {'color': '#737373', 'textColor' : 'white'}, {'color': '#80746D', 'textColor': 'white'},
+  {'color': '#FFFFFF', 'textColor' : 'black'}, {'color': '#A9B6BE', 'textColor': 'black'}, {'color': '#DDDDDD', 'textColor' : 'black'}, {'color': '#BBB3A9', 'textColor': 'black'},
+  {'color': '#0065AB', 'textColor' : 'white'}, {'color': '#343DAC', 'textColor': 'white'}, {'color': '#781DA0', 'textColor' : 'white'}, {'color': '#9B0D54', 'textColor': 'white'},
+  {'color': '#0095D3', 'textColor' : 'black'}, {'color': '#9DA3DB', 'textColor': 'black'}, {'color': '#BE90D6', 'textColor' : 'black'}, {'color': '#F1428A', 'textColor': 'black'},
+  {'color': '#1D5100', 'textColor' : 'white'}, {'color': '#006668', 'textColor': 'white'}, {'color': '#006690', 'textColor' : 'white'}, {'color': '#004A70', 'textColor': 'white'},
+  {'color': '#48960C', 'textColor' : 'black'}, {'color': '#00AB9A', 'textColor': 'black'}, {'color': '#00B7D6', 'textColor' : 'black'}, {'color': '#0081A7', 'textColor': 'black'},
+  {'color': '#C92100', 'textColor' : 'white'}, {'color': '#CD3517', 'textColor': 'white'}, {'color': '#C25400', 'textColor' : 'white'}, {'color': '#D28F00', 'textColor': 'white'},
+  {'color': '#F52F52', 'textColor' : 'black'}, {'color': '#FF5501', 'textColor': 'black'}, {'color': '#F57600', 'textColor' : 'black'}, {'color': '#FFDC0B', 'textColor': 'black'},
+];
--- a/src/ui_ng/lib/src/tag/tag.component.css.ts
+++ b/src/ui_ng/lib/src/tag/tag.component.css.ts
@ -52,14 +52,14 @@ export const TAG_STYLE = `
 }

 .btn-group .dropdown-menu clr-icon{display: block;}
-.dropdown-menu .dropdown-item{position: relative;padding-left:.5rem; padding-right:.5rem;}
+.dropdown-menu .dropdown-item{position: relative;padding-left:.5rem; padding-right:.5rem;line-height:1.0}
 .dropdown-menu input{position: relative;margin-left:.5rem; margin-right:.5rem;}
 .pull-left{display:inline-block;float:left;}
 .pull-right{display:inline-block; float:right;}
 .btn-link{display:inline-flex;width: 15px;min-width:15px; color:black; vertical-align: super; }
 .trigger-item, .signpost-item{display: inline;}
 .signpost-content-body .label{margin:.3rem;}
-.labelDiv{position: absolute; left:34px;top:3px;}
+.labelDiv{position: absolute; left:34px;top:5px;}
 .datagrid-action-bar{z-index:10;}
 .trigger-item hbr-label-piece{display: flex !important;margin: 6px 0;}
 :host >>> .signpost-content{min-width:4rem;}
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@ -31,7 +31,7 @@
        "clarity-icons": "0.10.24",
        "clarity-ui": "0.10.24",
        "core-js": "^2.4.1",
-        "harbor-ui": "0.6.68",
+        "harbor-ui": "0.6.69",
        "intl": "^1.2.5",
        "mutationobserver-shim": "^0.3.2",
        "ngx-cookie": "^1.0.0",
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@ -641,7 +641,8 @@
        "FILTER_LABEL_PLACEHOLDER": "Filter Labels",
        "NO_LABELS": "No labels",
        "DELETION_TITLE_TARGET": "Confirm Label Deletion",
-        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?"
+        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?",
+        "PLACEHOLDER": "We couldn't find any labels!"
    },
    "WEEKLY": {
        "MONDAY": "Monday",
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@ -641,7 +641,8 @@
        "FILTER_Label_PLACEHOLDER": "Filter Labels",
        "NO_LABELS": "No labels",
        "DELETION_TITLE_TARGET": "Confirm Label Deletion",
-        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?"
+        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?",
+        "PLACEHOLDER": "We couldn't find any labels!"
    },
    "WEEKLY": {
    "MONDAY": "Monday",
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
@ -581,7 +581,8 @@
        "FILTER_Label_PLACEHOLDER": "Filter Labels",
        "NO_LABELS": "No labels",
        "DELETION_TITLE_TARGET": "Confirm Label Deletion",
-        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?"
+        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?",
+        "PLACEHOLDER": "We couldn't find any labels!"
    },
    "WEEKLY": {
        "MONDAY": "Monday",
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@ -641,7 +641,8 @@
        "FILTER_Label_PLACEHOLDER": "过滤标签",
        "NO_LABELS": "无标签",
        "DELETION_TITLE_TARGET":"删除标签确认",
-        "DELETION_SUMMARY_TARGET": "确认删除标签 {{param}}?"
+        "DELETION_SUMMARY_TARGET": "确认删除标签 {{param}}?",
+        "PLACEHOLDER": "未发现任何标签!"
    },
    "WEEKLY": {
        "MONDAY": "周一",