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>
<clr-dropdown-menu
[hidden]="!selectedRow.length">
<div class="filter-grid" clrDropdownItem>
<div class="filter-grid">
<label class="dropdown-header">{{
'REPOSITORY.ADD_LABEL_TO_IMAGE'
| translate
}}</label>
<app-label-selector
[usedInDropdown]="true"
[width]="200"
[ownedLabels]="
selectedRow[0]?.labels

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

@ -18,20 +18,44 @@
(click)="goToLabelPage()">
{{ 'LABEL.NO_LABELS' | translate }}
</div>
<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-container *ngIf="usedInDropdown; else notUsedInDropdown">
<div [hidden]="!candidateLabels.length" class="has-label">
<button
clrDropdownItem
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-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>

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'],
})
export class LabelSelectorComponent implements OnInit, OnChanges, OnDestroy {
@Input()
usedInDropdown: boolean = false;
@Input()
ownedLabels: Label[] = [];
@Input()