mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
4 years ago
committed by
GitHub
GitHub
16 changed files with 227 additions and 127 deletions
@ -1,41 +1,52 @@ |
|||||
<div class="row g-0" (sqxResizeCondition)="setCompact($event)" [sqxResizeMinWidth]="600" [sqxResizeMaxWidth]="0"> |
|
||||
<div class="col-auto col-image" [class.expand]="snapshot.isCompact"> |
|
||||
<input class="form-control value" [formControl]="valueControl" readonly> |
|
||||
|
|
||||
<button type="button" class="btn btn-text-secondary value-clear" (click)="reset()"> |
<div class="input-group"> |
||||
<i class="icon-close"></i> |
<button type="button" class="btn btn-outline-secondary" (click)="reset()" [disabled]="!valueControl.value"> |
||||
</button> |
<i class="icon-close"></i> |
||||
|
</button> |
||||
|
|
||||
<div *ngIf="stockPhotoThumbnail | async; let url; else noThumb" class="preview"> |
<button type="button" class="btn btn-outline-secondary" (click)="searchDialog.show()"> |
||||
<img [src]="url"> |
<i class="icon-search"></i> |
||||
</div> |
</button> |
||||
|
|
||||
<ng-template #noThumb> |
<input class="form-control" [formControl]="valueControl" readonly> |
||||
<div class="preview preview-empty"> |
</div> |
||||
{{ 'contents.stockPhotoEmpty' | sqxTranslate }} |
|
||||
</div> |
<div *ngIf="stockPhotoThumbnail | async; let url;" class="preview mt-1" [class.hidden-important]="snapshot.thumbnailStatus === 'Failed'"> |
||||
</ng-template> |
<img [src]="url" (error)="onThumbnailFailed()" (load)="onThumbnailLoaded()"> |
||||
</div> |
|
||||
|
|
||||
<div class="col ps-4" *ngIf="!snapshot.isCompact"> |
<i class="icon-spinner2 spin2" [class.hidden-important]="snapshot.thumbnailStatus === 'Loaded'"></i> |
||||
<i class="icon-angle-left icon"></i> |
</div> |
||||
|
|
||||
<input class="form-control" [formControl]="stockPhotoSearch" placeholder="{{ 'contents.stockPhotoSearch' | sqxTranslate }}"> |
<ng-container *sqxModal="searchDialog"> |
||||
|
<sqx-modal-dialog size="lg" [fullHeight]="true" (close)="searchDialog.hide()"> |
||||
|
<ng-container title> |
||||
|
<input class="form-control search" [formControl]="stockPhotoSearch" sqxFocusOnInit placeholder="{{ 'contents.stockPhotoSearch' | sqxTranslate }}"> |
||||
|
|
||||
|
<i *ngIf="snapshot.isLoading" class="icon-spinner2 spin2"></i> |
||||
|
</ng-container> |
||||
|
|
||||
<sqx-list-view [isLoading]="snapshot.isLoading" [table]="true"> |
<ng-container content> |
||||
<div class="photos"> |
<div class="photos"> |
||||
<ng-container *ngIf="stockPhotos | async; let photos; trackBy: trackByPhoto"> |
<div *ngFor="let photo of snapshot.stockPhotos; trackBy: trackByPhoto" class="photo" [class.selected]="isSelected(photo)" (click)="selectPhoto(photo)"> |
||||
<div *ngFor="let photo of photos" class="photo" [class.selected]="isSelected(photo)" (click)="selectPhoto(photo)"> |
<img [src]="photo.thumbUrl"> |
||||
<img [src]="photo.thumbUrl"> |
|
||||
|
<div class="photo-user"> |
||||
<div class="photo-user"> |
<a class="photo-user-link" [href]="photo.userProfileUrl" sqxExternalLink sqxStopClick> |
||||
<a class="photo-user-link" [href]="photo.userProfileUrl" sqxExternalLink sqxStopClick> |
{{photo.user}} |
||||
{{photo.user}} |
</a> |
||||
</a> |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
</ng-container> |
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="empty small text-muted text-center" *ngIf="snapshot.stockPhotos.length === 0"> |
||||
|
{{ 'contents.stockPhotoSearchEmpty' | sqxTranslate }} |
||||
|
</div> |
||||
|
|
||||
|
<div class="mt-4 text-center" *ngIf="snapshot.hasMore"> |
||||
|
<button class="btn btn-outline-secondary" type="button" (click)="loadMore()" [disabled]="snapshot.isLoading"> |
||||
|
{{ 'common.loadMore' | sqxTranslate }} <i *ngIf="snapshot.isLoading" class="icon-spinner2 spin2"></i> |
||||
|
</button> |
||||
</div> |
</div> |
||||
</sqx-list-view> |
</ng-container> |
||||
</div> |
</sqx-modal-dialog> |
||||
</div> |
</ng-container> |
||||
|
|||||
@ -0,0 +1,51 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { Directive, ElementRef, HostBinding, Input, NgZone, OnChanges, OnInit, Renderer2 } from '@angular/core'; |
||||
|
import { ResourceOwner } from '@app/framework/internal'; |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: '[sqxImageUrl]', |
||||
|
}) |
||||
|
export class ImageUrlDirective extends ResourceOwner implements OnChanges, OnInit { |
||||
|
@Input('sqxImageUrl') @HostBinding('attr.src') |
||||
|
public imageUrl!: string; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly zone: NgZone, |
||||
|
private readonly element: ElementRef, |
||||
|
private readonly renderer: Renderer2, |
||||
|
) { |
||||
|
super(); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.zone.runOutsideAngular(() => { |
||||
|
this.own( |
||||
|
this.renderer.listen(this.element.nativeElement, 'load', () => { |
||||
|
this.onLoad(); |
||||
|
})); |
||||
|
|
||||
|
this.own( |
||||
|
this.renderer.listen(this.element.nativeElement, 'error', () => { |
||||
|
this.onError(); |
||||
|
})); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public ngOnChanges() { |
||||
|
this.onError(); |
||||
|
} |
||||
|
|
||||
|
public onLoad() { |
||||
|
this.renderer.setStyle(this.element.nativeElement, 'visibility', 'visible'); |
||||
|
} |
||||
|
|
||||
|
public onError() { |
||||
|
this.renderer.setStyle(this.element.nativeElement, 'visibility', 'hidden'); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue