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-dg-action-bar {
clr-dropdown { clr-dropdown {
@include dropdown-as-action-button; .btn {
@include dropdown-as-action-button;
}
} }
} }

View File

@ -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>

View File

@ -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;
}
}
} }

View File

@ -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>