mirror of https://github.com/Squidex/squidex.git
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.
75 lines
3.2 KiB
75 lines
3.2 KiB
<div class="assets-container" [class.disabled]="snapshot.isDisabled" (sqxDropFile)="addFiles($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()" (sqxDropFile)="addFiles($event)">
|
|
Drop files or click
|
|
</div>
|
|
</div>
|
|
<div class="col-auto pl-1">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="snapshot.isListView" [disabled]="snapshot.isListView" (click)="changeView(true)">
|
|
<i class="icon-list"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary btn-toggle" [class.btn-primary]="!snapshot.isListView" [disabled]="!snapshot.isListView" (click)="changeView(false)">
|
|
<i class="icon-grid"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<ng-container *ngIf="!snapshot.isListView; else listTemplate">
|
|
<div class="row no-gutters">
|
|
<sqx-asset *ngFor="let file of snapshot.assetFiles" [assetFile]="file"
|
|
(loadError)="removeLoadingAsset(file)"
|
|
(load)="addAsset(file, $event)">
|
|
</sqx-asset>
|
|
<sqx-asset *ngFor="let asset of snapshot.assets; trackBy: trackByAsset"
|
|
[asset]="asset"
|
|
(update)="notifyOthers(asset)"
|
|
[removeMode]="true"
|
|
(remove)="removeLoadedAsset(asset)"
|
|
[isCompact]="isCompact">
|
|
</sqx-asset>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-template #listTemplate>
|
|
<div class="list-view">
|
|
<sqx-asset *ngFor="let file of snapshot.assetFiles" [assetFile]="file"
|
|
[isListView]="true"
|
|
(loadError)="removeLoadingAsset(file)"
|
|
(load)="addAsset(file, $event)">
|
|
</sqx-asset>
|
|
|
|
<div
|
|
cdkDropList
|
|
[cdkDropListDisabled]="snapshot.isDisabled"
|
|
[cdkDropListData]="snapshot.assets"
|
|
(cdkDropListDropped)="sortAssets($event)">
|
|
<div *ngFor="let asset of snapshot.assets; trackBy: trackByAsset"
|
|
class="table-drag"
|
|
cdkDrag
|
|
cdkDragLockAxis="y">
|
|
<sqx-asset
|
|
[asset]="asset"
|
|
[isListView]="true"
|
|
[isCompact]="isCompact"
|
|
(update)="notifyOthers(asset)"
|
|
[removeMode]="true"
|
|
(remove)="removeLoadedAsset(asset)">
|
|
</sqx-asset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-container *sqxModal="assetsDialog">
|
|
<sqx-assets-selector
|
|
(select)="selectAssets($event)">
|
|
</sqx-assets-selector>
|
|
</ng-container>
|