unicorn-components
Version:
<a target="_blank" href="https://getunicorn.io"><img src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2017/Jul/07/2615006260-5-nitsnetsstudios-ondemand-UNI_avatar.png" align="left"></a>
36 lines (35 loc) • 1.92 kB
HTML
<uni-header class="uni-gallery-full-image__header" *ngIf="!deleting">
<uni-icon icon="photo"></uni-icon>
<span>
{{image?.name || '(Untitled)'}}
</span>
<uni-row-spacer></uni-row-spacer>
<uni-button-header icon="delete" (click)="deleting = true"> </uni-button-header>
<uni-button-header icon="vertical_align_bottom" (click)="download(image)"> </uni-button-header>
<uni-button-header icon="info_outline" (click)="infoShown = !infoShown"> </uni-button-header>
<uni-button class="uni-gallery-full-image__close" icon="close" (click)="close.emit()"> </uni-button>
</uni-header>
<uni-header class="uni-gallery-full-image__header--deleting" *ngIf="deleting">
<strong>
<uni-icon icon="delete"></uni-icon>
</strong>
<span>
Do you want to delete <strong>{{image?.name || '(Untitled)'}}</strong>
</span>
<uni-row-spacer></uni-row-spacer>
<uni-button label="Cancel" (click)="deleting = false"></uni-button>
<uni-button label="Delete" color="error" (click)="onDelete(delete)"></uni-button>
</uni-header>
<uni-layout class="uni-gallery-full-image__container has-header">
<div class=" uni-gallery-full-image__body ">
<uni-button class="uni-gallery-full-image__arrow" *ngIf="index> 0" icon="keyboard_arrow_left" (click)="index = index-1"></uni-button>
<div class="uni-gallery-full-image__image-container">
<img class="uni-gallery-full-image__image" [src]="image?.fullPath">
</div>
<uni-button class="uni-gallery-full-image__arrow" *ngIf="index < images?.length-1" icon="keyboard_arrow_right" (click)="index = index+1"></uni-button>
</div>
<uni-aside class="uni-gallery-full-image__aside" position="right" [class.uni-gallery-full-image__aside--hidden]="!infoShown">
<uni-input label="name"></uni-input>
<uni-input label="link" icon="link"></uni-input>
</uni-aside>
</uni-layout>