Headless CMS and Content Managment Hub
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

56 lines
2.6 KiB

<div class="assets-container" [class.disabled]="isDisabled" (paste)="pasteFiles($event)" tabindex="1000">
<div class="header list">
<div class="row no-gutters">
<div class="col">
<div class="drop-area align-items-center" (click)="assetsDialog.show()">
Drop files or click here to add assets.
</div>
</div>
<div class="col-auto pl-1">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="isListView" [disabled]="isListView" (click)="changeView(true)">
<i class="icon-list"></i>
</button>
<button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="!isListView" [disabled]="!isListView" (click)="changeView(false)">
<i class="icon-grid"></i>
</button>
</div>
</div>
</div>
</div>
<div class="body">
<ng-container *ngIf="!isListView; else listTemplate">
<div class="row no-gutters">
<sqx-asset *ngFor="let file of newAssets" [initFile]="file"
(failed)="removeLoadingAsset(file)" (loaded)="addAsset(file, $event)">
</sqx-asset>
<sqx-asset *ngFor="let asset of oldAssets; trackBy: trackByAsset" [asset]="asset" removeMode="true"
(updated)="notifyOthers($event)" (removing)="removeLoadedAsset($event)">
</sqx-asset>
</div>
</ng-container>
<ng-template #listTemplate>
<div class="list-view">
<sqx-asset *ngFor="let file of newAssets" [initFile]="file"
[isListView]="true" (failed)="removeLoadingAsset(file)" (loaded)="addAsset(file, $event)">
</sqx-asset>
<div
[sqxSortModel]="oldAssets.values"
(sqxSorted)="sortAssets($event)">
<div *ngFor="let asset of oldAssets; trackBy: trackByAsset">
<sqx-asset [asset]="asset" removeMode="true" [isListView]="true"
(updated)="notifyOthers($event)" (removing)="removeLoadedAsset($event)">
</sqx-asset>
</div>
</div>
</div>
</ng-template>
</div>
</div>
<ng-container *sqxModalView="assetsDialog;onRoot:true;closeAuto:false">
<sqx-assets-selector (selected)="selectAssets($event)"></sqx-assets-selector>
</ng-container>