xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

Making always-on face frames less disturbing #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-08-05 23:57:49 +02:00
parent 08a6fcbddc
commit 26421c38c1
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
View File

@ -240,12 +240,12 @@ input[type="range"].zoom-progress::-moz-range-track {
} }
.face { .face {
opacity: 0.0;
position: absolute; position: absolute;
transition: opacity 0.5s; transition: opacity 0.5s;
} }
.face-name { .face-name {
opacity: 0.0;
white-space: nowrap; white-space: nowrap;
color: white; color: white;
text-align: center; text-align: center;
@ -253,19 +253,26 @@ input[type="range"].zoom-progress::-moz-range-track {
font-weight: bold; font-weight: bold;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px !important; border-radius: 5px !important;
transition: opacity 0.5s;
} }
.face-box { .face-box {
opacity: 0.0;
height: 100%; height: 100%;
border: 2px solid #FFF; border: 2px solid #FFF;
border-radius: 5px !important; border-radius: 5px !important;
transition: opacity 0.5s;
} }
.face.controls-nodim { .face .face-box.controls-nodim {
opacity: 0.2;
}
.face .face-name.controls-nodim {
opacity: 0.7; opacity: 0.7;
} }
.face:hover { .face:hover,.face:hover .face-box,.face:hover .face-name {
opacity: 1.0; opacity: 1.0;
text-decoration: none; text-decoration: none;
} }

16
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
View File

@ -131,7 +131,6 @@
*ngIf="facesEnabled && activePhoto && activePhoto.gridMedia.Photo.metadata.faces && activePhoto.gridMedia.Photo.metadata.faces.length > 0"> *ngIf="facesEnabled && activePhoto && activePhoto.gridMedia.Photo.metadata.faces && activePhoto.gridMedia.Photo.metadata.faces.length > 0">
<ng-container *ngIf="searchEnabled"> <ng-container *ngIf="searchEnabled">
<a <a
[class.controls-nodim]="lightboxService.facesAlwaysOn"
class="face" class="face"
[routerLink]="['/search', getPersonSearchQuery(face.name)]" [routerLink]="['/search', getPersonSearchQuery(face.name)]"
[style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100" [style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
@ -139,21 +138,26 @@
[style.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100" [style.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100"
[style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100" [style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100"
*ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces"> *ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces">
<div class="face-box"></div> <div class="face-box"
<span class="face-name">{{face.name}}</span> [class.controls-nodim]="lightboxService.facesAlwaysOn"></div>
<span class="face-name"
[class.controls-nodim]="lightboxService.facesAlwaysOn">{{face.name}}</span>
</a> </a>
</ng-container> </ng-container>
<ng-container *ngIf="!searchEnabled"> <ng-container *ngIf="!searchEnabled">
<div <div
[class.dim-controls]="controllersDimmed && !lightboxService.facesAlwaysOn"
class="face" class="face"
[style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100" [style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
[style.left.%]="face.box.left / activePhoto.gridMedia.Photo.metadata.size.width*100" [style.left.%]="face.box.left / activePhoto.gridMedia.Photo.metadata.size.width*100"
[style.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100" [style.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100"
[style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100" [style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100"
*ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces"> *ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces">
<div class="face-box"></div> <div class="face-box"
<span class="face-name">{{face.name}}</span> [class.controls-nodim]="lightboxService.facesAlwaysOn">
</div>
<span class="face-name"
[class.controls-nodim]="lightboxService.facesAlwaysOn"
>{{face.name}}</span>
</div> </div>
</ng-container> </ng-container>
</div> </div>