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 {
opacity: 0.0;
position: absolute;
transition: opacity 0.5s;
}
.face-name {
opacity: 0.0;
white-space: nowrap;
color: white;
text-align: center;
@ -253,19 +253,26 @@ input[type="range"].zoom-progress::-moz-range-track {
font-weight: bold;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px !important;
transition: opacity 0.5s;
}
.face-box {
opacity: 0.0;
height: 100%;
border: 2px solid #FFF;
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;
}
.face:hover {
.face:hover,.face:hover .face-box,.face:hover .face-name {
opacity: 1.0;
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">
<ng-container *ngIf="searchEnabled">
<a
[class.controls-nodim]="lightboxService.facesAlwaysOn"
class="face"
[routerLink]="['/search', getPersonSearchQuery(face.name)]"
[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.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100"
*ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces">
<div class="face-box"></div>
<span class="face-name">{{face.name}}</span>
<div class="face-box"
[class.controls-nodim]="lightboxService.facesAlwaysOn"></div>
<span class="face-name"
[class.controls-nodim]="lightboxService.facesAlwaysOn">{{face.name}}</span>
</a>
</ng-container>
<ng-container *ngIf="!searchEnabled">
<div
[class.dim-controls]="controllersDimmed && !lightboxService.facesAlwaysOn"
class="face"
[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.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100"
[style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100"
*ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces">
<div class="face-box"></div>
<span class="face-name">{{face.name}}</span>
<div class="face-box"
[class.controls-nodim]="lightboxService.facesAlwaysOn">
</div>
<span class="face-name"
[class.controls-nodim]="lightboxService.facesAlwaysOn"
>{{face.name}}</span>
</div>
</ng-container>
</div>