xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects 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>
<div body class="container-fluid">
<div body #container class="container-fluid">
<app-face *ngFor="let person of facesService.persons.value"
[person]="person"
[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 {QueryService} from '../../model/query.service';
@ -8,27 +8,25 @@ import {QueryService} from '../../model/query.service';
templateUrl: './faces.component.html',
styleUrls: ['./faces.component.css']
})
export class FacesComponent {
size: number;
export class FacesComponent implements OnInit {
@ViewChild('container') container: ElementRef;
public size: number;
constructor(public facesService: FacesService,
public queryService: QueryService,
private container: ElementRef) {
public queryService: QueryService) {
this.facesService.getPersons().catch(console.error);
}
ngOnChanges() {
ngOnInit() {
this.updateSize();
}
private updateSize() {
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;
console.log(containerWidth, this.size);
}

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

@ -11,6 +11,16 @@
</button>
<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">
<ng-content select="[navbar]"></ng-content>
<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 containerWidth = this.container.nativeElement.parentElement.clientWidth;
this.size = (containerWidth / Math.round((containerWidth / size))) - 5;
console.log(containerWidth, this.size);
}
}