mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
8 years ago
committed by
GitHub
GitHub
24 changed files with 792 additions and 666 deletions
@ -1,84 +1,147 @@ |
|||||
<div class="card" [class.selectable]="isSelectable" [class.border-primary]="isSelected" (click)="selected.emit(asset)" (sqxFileDrop)="updateFile($event)"> |
<ng-container *ngIf="!isListView; else listTemplate"> |
||||
<div class="card-body"> |
<div class="card" [class.selectable]="isSelectable" [class.border-primary]="isSelected" (click)="selected.emit(asset)" (sqxFileDrop)="updateFile($event)"> |
||||
<div class="file-preview" *ngIf="asset && progress === 0" @fade> |
<div class="card-body"> |
||||
<span class="file-type" *ngIf="asset.fileType"> |
<div class="file-preview" *ngIf="asset && progress === 0" @fade> |
||||
{{asset.fileType}} |
<span class="file-type" *ngIf="asset.fileType"> |
||||
</span> |
|
||||
|
|
||||
<div *ngIf="asset.isImage" class="file-image"> |
|
||||
<img [sqxImageSource]="asset | sqxAssetPreviewUrl"> |
|
||||
</div> |
|
||||
<div *ngIf="!asset.isImage" 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" [attr.href]="asset | sqxAssetUrl" target="_blank" (click)="$event.stopPropagation()"> |
|
||||
<i class="icon-download"></i> |
|
||||
</a> |
|
||||
|
|
||||
<a class="file-delete ml-2" (click)="deleting.emit(asset); $event.stopPropagation()" *ngIf="!isDisabled && !removeMode"> |
|
||||
<i class="icon-delete"></i> |
|
||||
</a> |
|
||||
<a class="file-delete ml-2" (click)="removing.emit(asset); $event.stopPropagation()" *ngIf="removeMode"> |
|
||||
<i class="icon-close"></i> |
|
||||
</a> |
|
||||
</div> |
|
||||
|
|
||||
<span class="overlay-type" *ngIf="asset.fileType"> |
|
||||
{{asset.fileType}} |
{{asset.fileType}} |
||||
</span> |
</span> |
||||
|
|
||||
|
<div *ngIf="asset.isImage" class="file-image"> |
||||
|
<img [sqxImageSource]="asset | sqxAssetPreviewUrl"> |
||||
|
</div> |
||||
|
<div *ngIf="!asset.isImage" class="file-icon"> |
||||
|
<img [attr.src]="asset | sqxFileIcon"> |
||||
|
</div> |
||||
|
|
||||
<div class="overlay-user"> |
<div class="overlay"> |
||||
<div> |
<div class="overlay-background"></div> |
||||
<i class="icon-user"></i> {{asset.lastModifiedBy | sqxUserNameRef}} |
|
||||
|
<div class="overlay-menu"> |
||||
|
<a class="file-download" [attr.href]="asset | sqxAssetUrl" target="_blank" (click)="$event.stopPropagation()"> |
||||
|
<i class="icon-download"></i> |
||||
|
</a> |
||||
|
|
||||
|
<a class="file-delete ml-2" (click)="deleting.emit(asset); $event.stopPropagation()" *ngIf="!isDisabled && !removeMode"> |
||||
|
<i class="icon-delete"></i> |
||||
|
</a> |
||||
|
<a class="file-delete ml-2" (click)="removing.emit(asset); $event.stopPropagation()" *ngIf="removeMode"> |
||||
|
<i class="icon-close"></i> |
||||
|
</a> |
||||
</div> |
</div> |
||||
<div> |
|
||||
{{asset.lastModified | sqxFromNow}} |
<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> |
||||
</div> |
</div> |
||||
</div> |
|
||||
|
|
||||
<div class="upload-progress" *ngIf="progress > 0"> |
<div class="upload-progress" *ngIf="progress > 0"> |
||||
<sqx-progress-bar mode="Circle" [value]="progress"></sqx-progress-bar> |
<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> |
||||
|
<div class="card-footer"> |
||||
<div class="drop-overlay" *ngIf="asset && progress === 0"> |
<ng-container *ngIf="asset"> |
||||
<div class="drop-overlay-background"></div> |
<div> |
||||
|
<div *ngIf="!renaming" class="file-name editable" (dblclick)="renameStart()"> |
||||
<span class="drop-overlay-text">Drop to update</span> |
{{asset.fileName}} |
||||
|
</div> |
||||
|
<div *ngIf="renaming"> |
||||
|
<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" 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> |
||||
</div> |
</div> |
||||
<div class="card-footer"> |
</ng-container> |
||||
<ng-container *ngIf="asset"> |
|
||||
<div> |
<ng-template #listTemplate> |
||||
<div *ngIf="!renaming" class="file-name editable" [attr.title]="asset.fileName" (dblclick)="renameStart()"> |
<div class="table-items-row" [class.selectable]="isSelectable" (click)="selected.emit(asset)" (sqxFileDrop)="updateFile($event)"> |
||||
|
<div class="left-border" [class.selected]="isSelected" ></div> |
||||
|
|
||||
|
<div class="image" *ngIf="asset && progress === 0" @fade> |
||||
|
<div *ngIf="asset.isImage" class="file-image-small"> |
||||
|
<img [sqxImageSource]="asset | sqxAssetPreviewUrl"> |
||||
|
</div> |
||||
|
<div *ngIf="!asset.isImage" class="file-icon-small"> |
||||
|
<img class="icon" [attr.src]="asset | sqxFileIcon"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="row no-gutters" *ngIf="asset && progress === 0" @fade> |
||||
|
<div class="col col-name"> |
||||
|
<div *ngIf="!renaming" class="file-name editable" (dblclick)="renameStart()"> |
||||
{{asset.fileName}} |
{{asset.fileName}} |
||||
</div> |
</div> |
||||
<div *ngIf="renaming"> |
<div *ngIf="renaming"> |
||||
<form [formGroup]="renameForm.form" (ngSubmit)="renameAsset()"> |
<form [formGroup]="renameForm.form" (ngSubmit)="renameAsset()"> |
||||
<sqx-control-errors for="name" [submitted]="renameForm.submitted | async"></sqx-control-errors> |
<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" sqxFocusOnInit (blur)="renameCancel()" /> |
<input type="text" class="form-control editable form-underlined" id="assetName" formControlName="name" autocomplete="off" sqxFocusOnInit (blur)="renameCancel()" /> |
||||
</form> |
</form> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="file-tags tags"> |
<div class="col col-info"> |
||||
<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}} |
<ng-container *ngIf="asset.pixelWidth">{{asset.pixelWidth}}x{{asset.pixelHeight}}px, </ng-container> {{asset.fileSize | sqxFileSize}} |
||||
</div> |
</div> |
||||
</ng-container> |
<div class="col col-user"> |
||||
|
<img class="user-picture" [attr.title]="asset.lastModifiedBy | sqxUserNameRef" [attr.src]="asset.lastModifiedBy | sqxUserPictureRef" /> |
||||
|
</div> |
||||
|
<div class="col col-actions"> |
||||
|
<a class="btn btn-link btn-secondary" [attr.href]="asset | sqxAssetUrl" target="_blank" (click)="$event.stopPropagation()"> |
||||
|
<i class="icon-download"></i> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="col col-actions" *ngIf="!isDisabled || removeMode"> |
||||
|
<button class="btn btn-link btn-danger" (click)="deleting.emit(asset); $event.stopPropagation()" *ngIf="!isDisabled && !removeMode"> |
||||
|
<i class="icon-bin2"></i> |
||||
|
</button> |
||||
|
<button class="btn btn-link btn-secondary" (click)="removing.emit(asset); $event.stopPropagation()" *ngIf="removeMode"> |
||||
|
<i class="icon-close"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="upload-progress" *ngIf="progress > 0"> |
||||
|
<div class="progress-background"> |
||||
|
<div class="progress-bar" [style.width]="(progress + 40) + '%'"></div> |
||||
|
</div> |
||||
|
</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> |
||||
</div> |
</ng-template> |
||||
File diff suppressed because it is too large
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 78 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue