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.
80 lines
3.8 KiB
80 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">
|
|
{{ 'contents.assetsUpload' | sqxTranslate }}
|
|
</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"
|
|
[folderId]="folderId"
|
|
(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"
|
|
[removeMode]="true"
|
|
(remove)="removeLoadedAsset(asset)"
|
|
(update)="notifyOthers(asset)">
|
|
</sqx-asset>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-template #listTemplate>
|
|
<div class="list-view">
|
|
<sqx-asset *ngFor="let file of snapshot.assetFiles"
|
|
(load)="addAsset(file, $event)"
|
|
(loadError)="removeLoadingAsset(file)"
|
|
[assetFile]="file"
|
|
[folderId]="folderId"
|
|
[isCompact]="snapshot.isCompact"
|
|
[isDisabled]="snapshot.isDisabled"
|
|
[isListView]="true">
|
|
</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>
|