squidex/src/Squidex/app/shared/components/asset.component.html

 <ng-container *ngIf="!isListView; else listTemplate">
    <div class="card" [class.selectable]="isSelectable" [class.border-primary]="isSelected" (click)="selected.emit(asset)" (sqxFileDrop)="updateFile($event)" [noDrop]="true">
        <div class="card-body">
            <div class="file-preview" *ngIf="asset && snapshot.progress === 0" @fade>
                <span class="file-type" *ngIf="asset.fileType">
                    {{asset.fileType}}
                </span>
                
                <div *ngIf="asset.canPreview" class="file-image">
                    <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg" layoutKey="asset-large">
                </div>
                <div *ngIf="!asset.canPreview" class="file-icon">
                    <img [attr.src]="asset | sqxFileIcon">
                </div>

                <div class="overlay">
                    <div class="overlay-background"></div>
                    
                    <div class="overlay-menu">
                        <a class="file-download" [href]="asset | sqxAssetUrl" sqxExternalLink="noicon" (click)="$event.stopPropagation()">
                            <i class="icon-download"></i>
                        </a>
        
                        <a class="file-delete ml-2" (click)="deleting.emit(asset)" *ngIf="!isDisabled && !removeMode">
                            <i class="icon-delete"></i>
                        </a>
                        <a class="file-delete ml-2" (click)="removing.emit(asset)" *ngIf="removeMode">
                            <i class="icon-close"></i>
                        </a>
                    </div>

                    <span class="overlay-type" *ngIf="asset.fileType">
                        {{asset.fileType}}
                    </span>

                    <div class="overlay-user">
                        <div>
                            <i class="icon-user"></i> {{asset.lastModifiedBy | sqxUserNameRef}}
                        </div>
                        <div>
                            {{asset.lastModified | sqxFromNow}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="upload-progress" *ngIf="snapshot.progress > 0">
                <sqx-progress-bar mode="Circle" [value]="snapshot.progress"></sqx-progress-bar>
            </div>
        
            <div class="drop-overlay align-items-center justify-content-center" *ngIf="asset && snapshot.progress === 0">
                <div class="drop-overlay-background"></div>
                <div class="drop-overlay-text">Drop to update</div>
            </div>
        </div>
        <div class="card-footer">
            <ng-container *ngIf="asset">
                <div>
                    <div *ngIf="!snapshot.isRenaming" class="file-name editable" (dblclick)="renameStart()">
                        {{asset.fileName}}
                    </div>
                    <div *ngIf="snapshot.isRenaming">
                        <form [formGroup]="renameForm.form" (ngSubmit)="renameAsset()">                   
                            <sqx-control-errors for="name" [submitted]="renameForm.submitted | async"></sqx-control-errors>

                            <input type="text" class="form-control form-underlined editable" id="assetName" formControlName="name" autocomplete="off" spellcheck="false" sqxFocusOnInit (blur)="renameCancel()" />
                        </form>
                    </div>
                </div>
                <div class="file-tags tags">
                    <sqx-tag-editor
                        [suggestions]="allTags" 
                        [acceptEnter]="true"
                        [allowDuplicates]="false"
                        [undefinedWhenEmpty]="false" 
                        [formControl]="tagInput" class="blank" placeholder="+Tag">
                    </sqx-tag-editor>
                </div>
                <div class="file-info">
                    <ng-container *ngIf="asset.pixelWidth">{{asset.pixelWidth}}x{{asset.pixelHeight}}px, </ng-container> {{asset.fileSize | sqxFileSize}}
                </div>
            </ng-container>
        </div>
    </div>
</ng-container>

<ng-template #listTemplate>
    <div class="table-items-row" [class.selectable]="isSelectable" (click)="selected.emit(asset)" (sqxFileDrop)="updateFile($event)" [noDrop]="true">
        <div class="left-border" [class.hidden]="!isSelectable" [class.selected]="isSelected" ></div>

        <div *ngIf="asset && asset.canPreview && snapshot.progress === 0" class="image drag-handle" [class.image-left]="!isSelectable" @fade>
            <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg2" layoutKey="asset-small">
        </div>
        <div *ngIf="asset && !asset.canPreview && snapshot.progress === 0" class="image drag-handle image-padded" [class.image-left]="!isSelectable" @fade>
            <img class="icon" [attr.src]="asset | sqxFileIcon">
        </div>

        <table class="table-fixed" *ngIf="asset && snapshot.progress === 0" @fade>
            <tr>
                <td class="col-name">
                    <div *ngIf="!snapshot.isRenaming" class="file-name editable" (dblclick)="renameStart()">
                        {{asset.fileName}}
                    </div>
                    <div *ngIf="snapshot.isRenaming">
                        <form [formGroup]="renameForm.form" (ngSubmit)="renameAsset()">                   
                            <sqx-control-errors for="name" [submitted]="renameForm.submitted | async"></sqx-control-errors>

                            <input type="text" class="form-control editable form-underlined" id="assetName" formControlName="name" autocomplete="off" spellcheck="false" sqxFocusOnInit (blur)="renameCancel()" />
                        </form>
                    </div>
                </td>
                <td class="col-info" *ngIf="!isCompact">
                    <ng-container *ngIf="asset.pixelWidth">{{asset.pixelWidth}}x{{asset.pixelHeight}}px, </ng-container> {{asset.fileSize | sqxFileSize}}
                </td>
                <td class="col-user" *ngIf="!isCompact">
                    <img class="user-picture" title="{{asset.lastModifiedBy | sqxUserNameRef}}" [attr.src]="asset.lastModifiedBy | sqxUserPictureRef" />
                </td>
                <td class="col-actions text-right" *ngIf="!isCompact">
                    <a class="btn btn-text-secondary" [href]="asset | sqxAssetUrl" sqxExternalLink="noicon" (click)="$event.stopPropagation()">
                        <i class="icon-download"></i>
                    </a>
                </td>
                <td class="col-actions text-right" *ngIf="!isDisabled || removeMode">
                    <button type="button" class="btn btn-text-danger" (click)="deleting.emit(asset)" *ngIf="!isDisabled && !removeMode">
                        <i class="icon-bin2"></i>
                    </button>
                    <button type="button" class="btn btn-text-secondary" (click)="removing.emit(asset)" *ngIf="removeMode">
                        <i class="icon-close"></i>
                    </button>
                </td>
            </tr>
        </table>

        <div class="upload-progress" *ngIf="snapshot.progress > 0">
            <sqx-progress-bar [value]="snapshot.progress" [trailWidth]="0.8" [strokeWidth]="0.8" [showText]="false"></sqx-progress-bar>
        </div>

        <div class="drop-overlay align-items-center justify-content-center" *ngIf="asset && snapshot.progress === 0">
            <div class="drop-overlay-background"></div>
            <div class="drop-overlay-text">Drop to update</div>
        </div>
    </div>
</ng-template>