self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-25 02:04:15 +02:00
Code Issues Releases Activity

implementing photo infobox

Browse Source
This commit is contained in:
Braun Patrik 2016-05-15 18:52:07 +02:00
parent c3b5a3139e
commit e7fb834418
5 changed files with 87 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app/gallery/directory/directory.gallery.component.html
View File

@ -1,4 +1,5 @@
<a class="button " [routerLink]="['Gallery',{directory: getDirectoryPath()}]" >
<a class="button btn btn-default" [routerLink]="['Gallery',{directory: getDirectoryPath()}]"
style="display: inline-block;">
{{directory.name}}
</a>

5
frontend/app/gallery/gallery.component.html
View File

@ -4,9 +4,8 @@
<gallery-search *ngIf="showSearchBar"></gallery-search>
</div>
<div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory">
<div *ngFor="let directory of _galleryService.content.directory.directories">
<gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
</div>
<gallery-directory *ngFor="let directory of _galleryService.content.directory.directories"
[directory]="directory"></gallery-directory>
<gallery-grid [photos]="_galleryService.content.directory.photos" [lightbox]="lightbox"></gallery-grid>
</div>

45
frontend/app/gallery/grid/photo/photo.grid.gallery.component.css
View File

@ -1,4 +1,47 @@
img {
width: inherit;
height: inherit;
}
}
.info {
background-color: transparent;
color: white;
font-size: medium;
position: relative;
padding: 5px;
margin-top: -50px;
transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
}
.photo-container {
width: inherit;
height: inherit;
overflow: hidden;
}
.photo-name {
display: inline-block;
}
.photo-position {
display: inline-block;
float: right;
}
a {
color: white;
}
.photo-keywords {
margin-top: 5px;
font-size: small;
text-align: right;
display: inline-block;
width: 100%;
}

24
frontend/app/gallery/grid/photo/photo.grid.gallery.component.html
View File

@ -1 +1,23 @@
<img #image [src]="gridPhoto.getThumbnailPath()">
<div class="photo-container" (mouseover)="hover()" (mouseout)="mouseOut()">
<img #image [src]="gridPhoto.getThumbnailPath()">
<div class="info" #info [style.margin-top.px]="-infoHeight" [style.background]="infobackground">
<div class="photo-name">{{gridPhoto.photo.name}}</div>
<div class="photo-position" *ngIf="gridPhoto.photo.metadata.positionData">
<span class="glyphicon glyphicon-globe"></span>
<a *ngIf="gridPhoto.photo.metadata.positionData.city || gridPhoto.photo.metadata.positionData.state || gridPhoto.photo.metadata.positionData.country">
{{gridPhoto.photo.metadata.positionData.city || gridPhoto.photo.metadata.positionData.state ||
gridPhoto.photo.metadata.positionData.country}}
</a>
</div>
<div class="photo-keywords">
<template ngFor let-keyword [ngForOf]="gridPhoto.photo.metadata.keywords" let-last="last">
#<a>{{keyword}}</a>
<template [ngIf]="!last">,</template>
</template>
</div>
</div>
</div>

22
frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
View File

@ -1,6 +1,7 @@
///<reference path="../../../../browser.d.ts"/>
import {Component, Input, ElementRef, ViewChild} from "@angular/core";
import {AnimationBuilder} from "@angular/platform-browser/src/animate/animation_builder";
import {IRenderable, Dimension} from "../../../model/IRenderable";
import {GridPhoto} from "../GridPhoto";
@ -12,18 +13,27 @@ import {GridPhoto} from "../GridPhoto";
export class GalleryPhotoComponent implements IRenderable {
@Input() gridPhoto:GridPhoto;
@ViewChild("image") imageRef:ElementRef;
@ViewChild("info") infoDiv:ElementRef;
infoHeight:number = 0;
infobackground = "";
constructor() {
constructor(private animBuilder:AnimationBuilder) {
}
/* getPhotoPath() {
let renderSize = Math.sqrt(this.gridPhoto.renderWidth * this.gridPhoto.renderHeight);
let size = Utils.findClosest(renderSize, Config.Client.thumbnailSizes);
return Utils.concatUrls("/api/gallery/content/", this.gridPhoto.photo.directory.path, this.gridPhoto.photo.directory.name, this.gridPhoto.photo.name, "thumbnail", size.toString());
hover() {
this.infoHeight = this.infoDiv.nativeElement.clientHeight;
this.infobackground = "rgba(0,0,0,0.8)";
}
*/
mouseOut() {
this.infoHeight = 0;
this.infobackground = "rgba(0,0,0,0.0)";
}
public getDimension():Dimension {
return new Dimension(this.imageRef.nativeElement.offsetTop,
this.imageRef.nativeElement.offsetLeft,