Midify label color panel about #4580

This commit is contained in:
pfh 2018-04-09 10:35:19 +08:00
parent d94699dca3
commit c80e33fd73
12 changed files with 41 additions and 15 deletions

View File

@ -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">

View File

@ -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: '',

View File

@ -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 { }
}

View File

@ -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}}

View File

@ -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>

View File

@ -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'},
];

View File

@ -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;}

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -641,7 +641,8 @@
"FILTER_Label_PLACEHOLDER": "过滤标签",
"NO_LABELS": "无标签",
"DELETION_TITLE_TARGET":"删除标签确认",
"DELETION_SUMMARY_TARGET": "确认删除标签 {{param}}?"
"DELETION_SUMMARY_TARGET": "确认删除标签 {{param}}?",
"PLACEHOLDER": "未发现任何标签!"
},
"WEEKLY": {
"MONDAY": "周一",