mirror of
https://github.com/goharbor/harbor.git
synced 2024-12-26 10:38:00 +01:00
Merge pull request #6164 from ninjadq/fix_chart_label_bugs
Fix chart label bugs
This commit is contained in:
commit
36ef25bd19
@ -35,9 +35,11 @@
|
|||||||
|
|
||||||
clr-dg-action-bar {
|
clr-dg-action-bar {
|
||||||
clr-dropdown {
|
clr-dropdown {
|
||||||
|
.btn {
|
||||||
@include dropdown-as-action-button;
|
@include dropdown-as-action-button;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
hbr-resource-label-signpost {
|
hbr-resource-label-signpost {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -5,18 +5,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="label-items-container">
|
<div class="label-items-container">
|
||||||
<div class="dropdown-item" *ngFor='let label of sortedLabels'>
|
<div class="dropdown-item" *ngFor='let label of sortedLabels'>
|
||||||
<span *ngIf="!isMarkOngoing(label)" class="mark-label-span">
|
<div *ngIf="!isMarkOngoing(label)" class="mark-label-div">
|
||||||
<clr-icon *ngIf="isMarked(label)" shape="check" ></clr-icon>
|
<clr-icon *ngIf="isMarked(label)" shape="check" ></clr-icon>
|
||||||
</span>
|
</div>
|
||||||
<span *ngIf="isMarkOngoing(label)" class="spinner spinner-sm">
|
<div *ngIf="isMarkOngoing(label)" class="spinner spinner-sm">
|
||||||
Loading...
|
Loading...
|
||||||
</span>
|
</div>
|
||||||
<span (click)="markLabel(label)">
|
<div (click)="markLabel(label)" class="label-div">
|
||||||
<hbr-label-piece [label]="label" [labelWidth]="130"></hbr-label-piece>
|
<hbr-label-piece [label]="label" [labelWidth]="130"></hbr-label-piece>
|
||||||
</span>
|
</div>
|
||||||
<span class="unmark-label-span" (click)="unmarkLabel(label)">
|
<div class="unmark-label-div" (click)="unmarkLabel(label)">
|
||||||
<clr-icon *ngIf="isMarked(label)" shape="times-circle"></clr-icon>
|
<clr-icon *ngIf="isMarked(label)" shape="times-circle"></clr-icon>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -1,12 +1,16 @@
|
|||||||
@mixin icon-span {
|
@mixin icon-span {
|
||||||
width: 12px;
|
width: 16px;
|
||||||
min-height: 12px;
|
height: 16px;
|
||||||
|
|
||||||
clr-icon {
|
clr-icon {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin flex-item {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-div {
|
.filter-div {
|
||||||
margin-left: 9px;
|
margin-left: 9px;
|
||||||
margin-right: 9px;
|
margin-right: 9px;
|
||||||
@ -21,16 +25,27 @@
|
|||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
|
|
||||||
.unmark-label-span {
|
.mark-label-div {
|
||||||
@include icon-span();
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mark-label-span {
|
|
||||||
@include icon-span();
|
@include icon-span();
|
||||||
|
@include flex-item();
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 9px;
|
margin-right: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
@include flex-item();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label-div {
|
||||||
|
@include flex-item();
|
||||||
|
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unmark-label-div {
|
||||||
|
@include icon-span();
|
||||||
|
@include flex-item();
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
@ -67,7 +67,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="!withAdmiral && tagDetails?.labels?.length">
|
<div *ngIf="!withAdmiral && tagDetails?.labels?.length">
|
||||||
<div class="third-column detail-title">{{'TAG.LABELS' | translate }}</div>
|
<div class="third-column detail-title">{{'TAG.LABELS' | translate }}</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user