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()"> |
|||
<i class="icon-close"></i> |
|||
</button> |
|||
<div class="input-group"> |
|||
<button type="button" class="btn btn-outline-secondary" (click)="reset()" [disabled]="!valueControl.value"> |
|||
<i class="icon-close"></i> |
|||
</button> |
|||
|
|||
<div *ngIf="stockPhotoThumbnail | async; let url; else noThumb" class="preview"> |
|||
<img [src]="url"> |
|||
</div> |
|||
<button type="button" class="btn btn-outline-secondary" (click)="searchDialog.show()"> |
|||
<i class="icon-search"></i> |
|||
</button> |
|||
|
|||
<ng-template #noThumb> |
|||
<div class="preview preview-empty"> |
|||
{{ 'contents.stockPhotoEmpty' | sqxTranslate }} |
|||
</div> |
|||
</ng-template> |
|||
</div> |
|||
<input class="form-control" [formControl]="valueControl" readonly> |
|||
</div> |
|||
|
|||
<div *ngIf="stockPhotoThumbnail | async; let url;" class="preview mt-1" [class.hidden-important]="snapshot.thumbnailStatus === 'Failed'"> |
|||
<img [src]="url" (error)="onThumbnailFailed()" (load)="onThumbnailLoaded()"> |
|||
|
|||
<div class="col ps-4" *ngIf="!snapshot.isCompact"> |
|||
<i class="icon-angle-left icon"></i> |
|||
<i class="icon-spinner2 spin2" [class.hidden-important]="snapshot.thumbnailStatus === 'Loaded'"></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"> |
|||
<ng-container *ngIf="stockPhotos | async; let photos; trackBy: trackByPhoto"> |
|||
<div *ngFor="let photo of photos" class="photo" [class.selected]="isSelected(photo)" (click)="selectPhoto(photo)"> |
|||
<img [src]="photo.thumbUrl"> |
|||
|
|||
<div class="photo-user"> |
|||
<a class="photo-user-link" [href]="photo.userProfileUrl" sqxExternalLink sqxStopClick> |
|||
{{photo.user}} |
|||
</a> |
|||
</div> |
|||
<div *ngFor="let photo of snapshot.stockPhotos; trackBy: trackByPhoto" class="photo" [class.selected]="isSelected(photo)" (click)="selectPhoto(photo)"> |
|||
<img [src]="photo.thumbUrl"> |
|||
|
|||
<div class="photo-user"> |
|||
<a class="photo-user-link" [href]="photo.userProfileUrl" sqxExternalLink sqxStopClick> |
|||
{{photo.user}} |
|||
</a> |
|||
</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> |
|||
</sqx-list-view> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
</sqx-modal-dialog> |
|||
</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