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.
 
 
 
 
 

97 lines
4.0 KiB

<div class="card" (sqxFileDrop)="updateFile($event)" dnd-draggable [dragEnabled]="!!asset"
[dragData]="asset"
(onDragStart)="onAssetDragStart($event)"
(onDragEnd)="onAssetDragEnd($event)">
<div class="card-body">
<div class="file-preview" *ngIf="asset && progress == 0" @fade>
<span class="file-type" *ngIf="asset.fileType">
{{asset.fileType}}
</span>
<div *ngIf="asset.isImage" class="file-image">
<img [sqxImageSource]="asset | sqxAssetPreviewUrl">
</div>
<div *ngIf="!asset.isImage" class="file-icon-container">
<img class="file-icon" [attr.src]="asset | sqxFileIcon">
</div>
<div class="file-overlay">
<div class="file-overlay-background"></div>
<a class="file-edit" (click)="renameDialog.show()">
<i class="icon-pencil"></i>
</a>
<a class="file-download" [attr.href]="asset | sqxAssetUrl" target="_blank">
<i class="icon-download"></i>
</a>
<a class="file-delete" (click)="deleting.emit(asset)" *ngIf="!closeMode">
<i class="icon-delete"></i>
</a>
<a class="file-delete" (click)="closing.emit(asset)" *ngIf="closeMode">
<i class="icon-close"></i>
</a>
<span class="file-overlay-type" *ngIf="asset.fileType">
{{asset.fileType}}
</span>
<span class="file-user">
<i class="icon-user"></i> {{asset.lastModifiedBy | sqxUserNameRef}}
</span>
<span class="file-modified">
{{asset.lastModified | sqxFromNow}}
</span>
</div>
</div>
</div>
<div class="card-footer" dnd-draggable-handle *ngIf="asset && progress == 0">
<div class="file-name" [attr.title]="asset.fileName">
{{asset.fileName}}
</div>
<div class="file-info">
<span *ngIf="asset.pixelWidth">{{asset.pixelWidth}}x{{asset.pixelHeight}}px, </span> {{asset.fileSize | sqxFileSize}}
</div>
</div>
<div class="upload-progress" *ngIf="progress > 0">
<sqx-progress-bar mode="Circle" [value]="progress"></sqx-progress-bar>
</div>
<div class="drop-overlay" *ngIf="asset && progress == 0">
<div class="drop-overlay-background"></div>
<span class="drop-overlay-text">Drop to update</span>
</div>
</div>
<div class="modal" *sqxModalView="renameDialog;onRoot:true" @fade>
<div class="modal-backdrop"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Rename asset</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="cancelRenameAsset()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="renameForm" (ngSubmit)="renameAsset()">
<div class="form-group">
<label for="assetName">Name</label>
<sqx-control-errors for="name" [submitted]="renameFormSubmitted"></sqx-control-errors>
<input type="text" class="form-control" id="assetName" formControlName="name" autocomplete="off" sqxFocusOnInit />
</div>
<div class="form-group clearfix">
<button type="reset" class="float-left btn btn-secondary" (click)="cancelRenameAsset()">Cancel</button>
<button type="submit" class="float-right btn btn-success">Rename</button>
</div>
</form>
</div>
</div>
</div>
</div>