Upstream
/
harbor
mirror of https://github.com/goharbor/harbor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Avoid menu closure when filtering labels (#19561) 

1. Fixes #19554

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Shijun Sun 2023-11-15 17:12:55 +08:00 committed by GitHub
parent 30730c6716
commit da9e263ca7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
View File

@ -80,12 +80,13 @@
</button> </button>
<clr-dropdown-menu <clr-dropdown-menu
[hidden]="!selectedRow.length"> [hidden]="!selectedRow.length">
<div class="filter-grid" clrDropdownItem> <div class="filter-grid">
<label class="dropdown-header">{{ <label class="dropdown-header">{{
'REPOSITORY.ADD_LABEL_TO_IMAGE' 'REPOSITORY.ADD_LABEL_TO_IMAGE'
| translate | translate
}}</label> }}</label>
<app-label-selector <app-label-selector
[usedInDropdown]="true"
[width]="200" [width]="200"
[ownedLabels]=" [ownedLabels]="
selectedRow[0]?.labels selectedRow[0]?.labels

54
src/portal/src/app/shared/components/label-selector/label-selector.component.html
View File

@ -18,20 +18,44 @@
(click)="goToLabelPage()"> (click)="goToLabelPage()">
{{ 'LABEL.NO_LABELS' | translate }} {{ 'LABEL.NO_LABELS' | translate }}
</div> </div>
<div [hidden]="!candidateLabels.length" class="has-label"> <ng-container *ngIf="usedInDropdown; else notUsedInDropdown">
<button <div [hidden]="!candidateLabels.length" class="has-label">
type="button" <button
class="dropdown-item" clrDropdownItem
*ngFor="let label of candidateLabels" type="button"
(click)="selectLabel(label)"> class="dropdown-item"
<clr-icon *ngFor="let label of candidateLabels"
shape="check" (click)="selectLabel(label)">
class="check-icon" <clr-icon
[style.visibility]="isSelect(label) ? 'visible' : 'hidden'"> shape="check"
</clr-icon> class="check-icon"
<hbr-label-piece [label]="label" [labelWidth]="130"> [style.visibility]="
</hbr-label-piece> isSelect(label) ? 'visible' : 'hidden'
</button> ">
</div> </clr-icon>
<hbr-label-piece [label]="label" [labelWidth]="130">
</hbr-label-piece>
</button>
</div>
</ng-container>
<ng-template #notUsedInDropdown>
<div [hidden]="!candidateLabels.length" class="has-label">
<button
type="button"
class="dropdown-item"
*ngFor="let label of candidateLabels"
(click)="selectLabel(label)">
<clr-icon
shape="check"
class="check-icon"
[style.visibility]="
isSelect(label) ? 'visible' : 'hidden'
">
</clr-icon>
<hbr-label-piece [label]="label" [labelWidth]="130">
</hbr-label-piece>
</button>
</div>
</ng-template>
</div> </div>
</div> </div>

2
src/portal/src/app/shared/components/label-selector/label-selector.component.ts
View File

@ -31,6 +31,8 @@ const PAGE_SIZE: number = 50;
styleUrls: ['./label-selector.component.scss'], styleUrls: ['./label-selector.component.scss'],
}) })
export class LabelSelectorComponent implements OnInit, OnChanges, OnDestroy { export class LabelSelectorComponent implements OnInit, OnChanges, OnDestroy {
@Input()
usedInDropdown: boolean = false;
@Input() @Input()
ownedLabels: Label[] = []; ownedLabels: Label[] = [];
@Input() @Input()