Merge pull request #6164 from ninjadq/fix_chart_label_bugs

Fix chart label bugs
This commit is contained in:
Mia ZHOU 2018-10-29 13:58:29 +08:00 committed by GitHub
commit 36ef25bd19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 20 deletions

View File

@ -35,7 +35,9 @@
clr-dg-action-bar {
clr-dropdown {
@include dropdown-as-action-button;
.btn {
@include dropdown-as-action-button;
}
}
}

View File

@ -5,18 +5,18 @@
</div>
<div class="label-items-container">
<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>
</span>
<span *ngIf="isMarkOngoing(label)" class="spinner spinner-sm">
</div>
<div *ngIf="isMarkOngoing(label)" class="spinner spinner-sm">
Loading...
</span>
<span (click)="markLabel(label)">
</div>
<div (click)="markLabel(label)" class="label-div">
<hbr-label-piece [label]="label" [labelWidth]="130"></hbr-label-piece>
</span>
<span class="unmark-label-span" (click)="unmarkLabel(label)">
</div>
<div class="unmark-label-div" (click)="unmarkLabel(label)">
<clr-icon *ngIf="isMarked(label)" shape="times-circle"></clr-icon>
</span>
</div>
</div>
</div>
</div>

View File

@ -1,12 +1,16 @@
@mixin icon-span {
width: 12px;
min-height: 12px;
width: 16px;
height: 16px;
clr-icon {
margin-bottom: 12px;
margin-bottom: 3px;
}
}
@mixin flex-item {
display: inline-block;
}
.filter-div {
margin-left: 9px;
margin-right: 9px;
@ -21,16 +25,27 @@
padding-left: 12px;
padding-right: 12px;
.unmark-label-span {
@include icon-span();
float: right;
}
.mark-label-span {
.mark-label-div {
@include icon-span();
@include flex-item();
float: left;
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;
}
}
}

View File

@ -67,7 +67,6 @@
</div>
</div>
</div>
</div>
<div *ngIf="!withAdmiral && tagDetails?.labels?.length">
<div class="third-column detail-title">{{'TAG.LABELS' | translate }}</div>