Newer
Older
<ng-template [ngIf]="view$ | async" [ngIfElse]="spinnerTmpl" let-view>
<span class="ml-2 text-truncate v-center-text-span">
<i class="fas fa-file"></i>
{{ data.filename }} {{ data.filename }}
</span>
<ng-template [ngIf]="!view.showMore && !view.compact">
<ng-template [ngTemplateOutlet]="ngLayerController" [ngTemplateOutletContext]="{ onlyOpacity: true }">
</ng-template>
</ng-template>
<ng-template [ngIf]="data.warning.length > 0">
<button mat-icon-button
[matTooltip]="data.warning.length + ' messages on user layer.'"
color="warn"
(click)="toggleShowMore()">
<i class="fas fa-exclamation-triangle"></i>
</button>
</ng-template>
<button
[matTooltip]="ARIA_LABELS.VOLUME_TUNING_EXPAND"
mat-icon-button
[color]="view.showMore ? 'primary' : 'basic'"
(click)="toggleShowMore()">
<i class="fas fa-sliders-h"></i>
</button>
<button
[matTooltip]="ARIA_LABELS.CLOSE"
color="warn"
mat-icon-button
mat-dialog-close>
<i class="fas fa-trash"></i>
</button>
<div *ngIf="view.showMore || view.compact"
class="sxplr-custom-cmp darker-bg overflow-hidden grid-wide-4">
<ng-template [ngTemplateOutlet]="ngLayerController" [ngTemplateOutletContext]="{ onlyOpacity: !view.showMore }">
</ng-template>
</div>
<ul class="grid-wide-4 sxplr-custom-cmp darker-bg" *ngIf="view.showMore">
<li *ngFor="let warn of data.warning">{{ warn }}</li>
</ul>
</div>
</ng-template>
<ng-template #spinnerTmpl>
<div>
<spinner-cmp class="spinner"></spinner-cmp>
<ng-template #ngLayerController let-onlyOpacity="onlyOpacity">
<ng-layer-tune
[hideCtrl]="onlyOpacity ? HIDE_NG_TUNE_CTRL.ONLY_SHOW_OPACITY : ''"
advanced-control="true"