fossilfranv/pigallery2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding faces panel to navigator bar

Browse Source
This commit is contained in:
Patrik J. Braun 2019-03-03 12:11:36 +01:00
parent 6533f4b793
commit 8106646739
4 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/ui/faces/faces.component.html
View File

@ -1,6 +1,6 @@
<app-frame> <app-frame>
<div body class="container-fluid"> <div body #container class="container-fluid">
<app-face *ngFor="let person of facesService.persons.value" <app-face *ngFor="let person of facesService.persons.value"
[person]="person" [person]="person"
[size]="size"></app-face> [size]="size"></app-face>

18
frontend/app/ui/faces/faces.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ElementRef} from '@angular/core'; import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {FacesService} from './faces.service'; import {FacesService} from './faces.service';
import {QueryService} from '../../model/query.service'; import {QueryService} from '../../model/query.service';
@ -8,27 +8,25 @@ import {QueryService} from '../../model/query.service';
templateUrl: './faces.component.html', templateUrl: './faces.component.html',
styleUrls: ['./faces.component.css'] styleUrls: ['./faces.component.css']
}) })
export class FacesComponent { export class FacesComponent implements OnInit {
@ViewChild('container') container: ElementRef;
public size: number;
size: number;
constructor(public facesService: FacesService, constructor(public facesService: FacesService,
public queryService: QueryService, public queryService: QueryService) {
private container: ElementRef) {
this.facesService.getPersons().catch(console.error); this.facesService.getPersons().catch(console.error);
} }
ngOnChanges() { ngOnInit() {
this.updateSize(); this.updateSize();
} }
private updateSize() { private updateSize() {
const size = 220 + 5; const size = 220 + 5;
const containerWidth = this.container.nativeElement.parentElement.clientWidth; // body - container margin
const containerWidth = this.container.nativeElement.clientWidth - 30;
this.size = (containerWidth / Math.round((containerWidth / size))) - 5; this.size = (containerWidth / Math.round((containerWidth / size))) - 5;
console.log(containerWidth, this.size);
} }

10
frontend/app/ui/frame/frame.component.html
View File

@ -11,6 +11,16 @@
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav" [collapse]="collapsed"> <div class="collapse navbar-collapse" id="navbarNav" [collapse]="collapsed">
<ul class="navbar-nav mr-auto">
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link"
[routerLink]="['/gallery']"
[queryParams]="queryService.getParams()">Gallery</a>
</li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" [routerLink]="['/faces']">Faces</a>
</li>
</ul>
<ul class="navbar-nav navbar-right ml-auto"> <ul class="navbar-nav navbar-right ml-auto">
<ng-content select="[navbar]"></ng-content> <ng-content select="[navbar]"></ng-content>
<li class="nav-item divider-vertical"> <li class="nav-item divider-vertical">

1
frontend/app/ui/gallery/directories/directories.component.ts
View File

@ -22,7 +22,6 @@ export class DirectoriesComponent implements OnChanges {
const size = 220 + 5; const size = 220 + 5;
const containerWidth = this.container.nativeElement.parentElement.clientWidth; const containerWidth = this.container.nativeElement.parentElement.clientWidth;
this.size = (containerWidth / Math.round((containerWidth / size))) - 5; this.size = (containerWidth / Math.round((containerWidth / size))) - 5;
console.log(containerWidth, this.size);
} }
} }