From 26421c38c19b1db32eead3b2213f77e1abd43103 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Sat, 5 Aug 2023 23:57:49 +0200
Subject: [PATCH] Making always-on face frames less disturbing #587

---
 .../controls.lightbox.gallery.component.css      | 13 ++++++++++---
 .../controls.lightbox.gallery.component.html     | 16 ++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
index ff16c1cc..55c69630 100644
--- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
+++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
@@ -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;
 }
diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
index 80771289..825d8500 100644
--- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
+++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
@@ -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>