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.
89 lines
3.8 KiB
89 lines
3.8 KiB
<div class="assets-container"
|
|
(sqxDropFile)="addFiles($event)"
|
|
(sqxDropDisabled)="snapshot.isDisabled"
|
|
tabindex="1000">
|
|
<div class="header list">
|
|
<div class="row no-gutters">
|
|
<div class="col" [class.disabled]="snapshot.isDisabled">
|
|
<div class="drop-area align-items-center" (click)="assetsDialog.show()"
|
|
(sqxDropFile)="addFiles($event)"
|
|
(sqxDropDisabled)="snapshot.isDisabled">
|
|
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"
|
|
(sqxResizeCondition)="setCompact($event)"
|
|
[sqxResizeMinWidth]="600"
|
|
[sqxResizeMaxWidth]="0">
|
|
<ng-container *ngIf="!snapshot.isListView; else listTemplate">
|
|
<div class="row no-gutters">
|
|
<sqx-asset *ngFor="let file of snapshot.assetFiles" [assetFile]="file"
|
|
[isDisabled]="snapshot.isDisabled"
|
|
[isCompact]="snapshot.isCompact"
|
|
(loadError)="removeLoadingAsset(file)"
|
|
(load)="addAsset(file, $event)">
|
|
</sqx-asset>
|
|
<sqx-asset *ngFor="let asset of snapshot.assets; trackBy: trackByAsset"
|
|
[asset]="asset"
|
|
[isDisabled]="snapshot.isDisabled"
|
|
[isCompact]="snapshot.isCompact"
|
|
(update)="notifyOthers(asset)"
|
|
[removeMode]="true"
|
|
(remove)="removeLoadedAsset(asset)">
|
|
</sqx-asset>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-template #listTemplate>
|
|
<div class="list-view">
|
|
<sqx-asset *ngFor="let file of snapshot.assetFiles" [assetFile]="file"
|
|
[isListView]="true"
|
|
[isDisabled]="snapshot.isDisabled"
|
|
[isCompact]="snapshot.isCompact"
|
|
(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"
|
|
[isDisabled]="snapshot.isDisabled"
|
|
[isCompact]="snapshot.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>
|