upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor synced 2025-04-08 10:43:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modify color panel and add labels to imgs click problem

Browse Source
This commit is contained in:
pfh 2018-04-23 19:00:32 +08:00
parent a342c31a27
commit 566e867984
6 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/ui_ng/lib/src/create-edit-label/create-edit-label.component.css.ts
View File

@ -10,15 +10,21 @@ export const CREATE_EDIT_LABEL_STYLE: string = `
section{padding:.5rem 0;}
section> label{margin-left: 20px;}
.dropdown-menu {display:inline-block;width:166px; padding:6px;}
.dropdown-menu .dropdown-item{ display:inline-flex; margin:2px 4px;
display: inline-block;padding: 0px; width:30px;height:24px; text-align: center;line-height: 24px;}
.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;
padding: 0;
width: 26px;
height:22px;
min-width: 26px;}
.dropdown-item{border:0px; color: white; font-size:12px;}
.dropdown .dropdown-toggle.btn{padding:0 !important;}
.dropdown-item{margin: 5px 4px; width:30px;height:24px; text-align: center;line-height: 24px;font-size:12px;}
.closePanel{ display: block;
left: 138px;
position: relative;
font-size: 18px;
width: 10px;
line-height: 8px;
cursor: pointer;
text-decoration: none;}
`;

19
src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts
View File

@ -13,15 +13,16 @@ export const CREATE_EDIT_LABEL_TEMPLATE: string = `
</label>
<label>
<label for="color">{{'LABEL.COLOR' | translate}}</label>
<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 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">
<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>
<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>
</div>
<input type="text" id="color" size="8" name="color" disabled [(ngModel)]="labelModel.color" #color="ngModel">
</div>
</label>
<label>
<label for="description">{{'LABEL.DESCRIPTION' | translate}}</label>

8
src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
View File

@ -48,6 +48,7 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
checkOnGoing: boolean;
isLabelNameExist = false;
panelHidden = true;
nameChecker = new Subject<string>();
@ -114,6 +115,13 @@ 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);
}

2
src/ui_ng/lib/src/tag/tag.component.html.ts
View File

@ -51,7 +51,7 @@ export const TAG_TEMPLATE = `
<div class="form-group"><input type="text" placeholder="Filter labels" [(ngModel)]="stickName" (keyup)="handleStickInputFilter()"></div>
<div [hidden]='imageStickLabels.length' style="padding-left:10px;">{{'LABEL.NO_LABELS' | translate }}</div>
<div [hidden]='!imageStickLabels.length' style='max-height:300px;overflow-y: auto;'>
<button type="button" class="dropdown-item" *ngFor='let label of imageStickLabels' (click)="stickLabel(label); label.iconsShow =(label.iconsShow== true?false: true)">
<button type="button" class="dropdown-item" *ngFor='let label of imageStickLabels' (click)="stickLabel(label)">
<clr-icon shape="check" class='pull-left' [hidden]='!label.iconsShow'></clr-icon>
<div class='labelDiv'><hbr-label-piece [label]="label.label" [labelWidth]="130"></hbr-label-piece></div>
</button>

13
src/ui_ng/lib/src/tag/tag.component.ts
View File

@ -95,6 +95,7 @@ export class TagComponent implements OnInit, AfterViewInit {
closable = false;
lastFilteredTagName: string;
batchDelectionInfos: BatchInfo[] = [];
inprogress: boolean;
createdComparator: Comparator<Tag> = new CustomComparator<Tag>("created", "date");
@ -320,23 +321,35 @@ export class TagComponent implements OnInit, AfterViewInit {
}
selectLabel(labelInfo: {[key: string]: any | string[]}): void {
if (!this.inprogress) {
this.inprogress = true;
let labelId = labelInfo.label.id;
this.selectedRow = this.selectedTag;
toPromise<any>(this.tagService.addLabelToImages(this.repoName, this.selectedRow[0].name, labelId)).then(res => {
this.refresh();
labelInfo.iconsShow = true;
this.inprogress = false;
}).catch(err => {
this.inprogress = false;
this.errorHandler.error(err);
});
}
}
unSelectLabel(labelInfo: {[key: string]: any | string[]}): void {
if (!this.inprogress) {
this.inprogress = true;
let labelId = labelInfo.label.id;
this.selectedRow = this.selectedTag;
toPromise<any>(this.tagService.deleteLabelToImages(this.repoName, this.selectedRow[0].name, labelId)).then(res => {
this.refresh();
labelInfo.iconsShow = false;
this.inprogress = false;
}).catch(err => {
this.inprogress = false;
this.errorHandler.error(err);
});
}
}
rightFilterLabel(labelInfo: {[key: string]: any | string[]}): void {

2
src/ui_ng/package.json
View File

@ -30,7 +30,7 @@
"clarity-icons": "^0.10.27",
"clarity-ui": "^0.10.27",
"core-js": "^2.4.1",
"harbor-ui": "0.7.5",
"harbor-ui": "0.7.6",
"intl": "^1.2.5",
"mutationobserver-shim": "^0.3.2",
"ngx-cookie": "^1.0.0",