From 181eaf1d7f2730a7ffb43a2a2fca45c858ab6926 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Wed, 11 Jan 2023 22:30:28 +0100
Subject: [PATCH] Adding folder name to infopanel to search results

---
 .../info-panel.lightbox.gallery.component.css | 16 ++----
 ...info-panel.lightbox.gallery.component.html | 17 +++++-
 .../info-panel.lightbox.gallery.component.ts  | 57 ++++++++-----------
 3 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css
index 549b74c2..62642ce9 100644
--- a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css
+++ b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css
@@ -20,7 +20,7 @@
 }
 
 .details-sub {
-  color: #555;
+  color: var(--bs-gray-700);
   padding: 0;
   font-size: 0.875rem;
 }
@@ -45,24 +45,16 @@
   font-size: 1.2rem;
 }
 
-.dir-link {
-  cursor: pointer;
-}
-
-.dir-link:hover {
-  text-decoration: underline;
-}
-
 .modal-header {
   padding: 0.4rem 1rem;
 }
 
 
-.keywords a {
-  color: #212529;
+.keywords a, a.dir-link {
+  color: var(--bs-gray-900);
 }
 
-.keywords a:hover {
+.keywords a:hover, a.dir-link:hover {
   text-decoration: underline;
 }
 
diff --git a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
index f91ca356..bd3e1503 100644
--- a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
+++ b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
@@ -4,14 +4,25 @@
     <button type="button"  class="btn-close"  (click)="close()" aria-label="Close">
     </button>
   </div>
+  <div class="row" *ngIf="galleryService.isSearchResult()">
+    <div class="col-2">
+      <span class="details-icon oi oi-folder"></span>
+    </div>
+    <div class="col-10">
+      <a class="details-main dir-link"
+         title="{{DirectoryPath}}"
+         [routerLink]="['/gallery', DirectoryPath]"
+         [queryParams]="queryService.getParams()">
+        {{DirectoryPathStr}}
+      </a>
+    </div>
+  </div>
   <div class="row">
     <div class="col-2">
       <span class="details-icon oi oi-image"></span>
     </div>
     <div class="col-10">
-      <div class="details-main dir-link" title="{{FullPath}}"
-           [routerLink]="['/gallery', DirectoryPath]"
-           [queryParams]="queryService.getParams()">
+      <div class="details-main" >
         {{media.name}}
       </div>
       <div class="details-sub row">
diff --git a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
index c28781c3..5b651efe 100644
--- a/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
@@ -1,36 +1,15 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-} from '@angular/core';
-import {
-  CameraMetadata,
-  PhotoDTO,
-  PhotoMetadata,
-  PositionMetaData,
-} from '../../../../../../common/entities/PhotoDTO';
-import { Config } from '../../../../../../common/config/public/Config';
-import {
-  MediaDTO,
-  MediaDTOUtils,
-} from '../../../../../../common/entities/MediaDTO';
-import {
-  VideoDTO,
-  VideoMetadata,
-} from '../../../../../../common/entities/VideoDTO';
-import { Utils } from '../../../../../../common/Utils';
-import { QueryService } from '../../../../model/query.service';
-import { MapService } from '../../map/map.service';
-import {
-  SearchQueryTypes,
-  TextSearch,
-  TextSearchQueryMatchTypes,
-} from '../../../../../../common/entities/SearchQueryDTO';
-import { AuthenticationService } from '../../../../model/network/authentication.service';
-import { LatLngLiteral, marker, Marker, TileLayer, tileLayer } from 'leaflet';
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output,} from '@angular/core';
+import {CameraMetadata, PhotoDTO, PhotoMetadata, PositionMetaData,} from '../../../../../../common/entities/PhotoDTO';
+import {Config} from '../../../../../../common/config/public/Config';
+import {MediaDTO, MediaDTOUtils,} from '../../../../../../common/entities/MediaDTO';
+import {VideoDTO, VideoMetadata,} from '../../../../../../common/entities/VideoDTO';
+import {Utils} from '../../../../../../common/Utils';
+import {QueryService} from '../../../../model/query.service';
+import {MapService} from '../../map/map.service';
+import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes,} from '../../../../../../common/entities/SearchQueryDTO';
+import {AuthenticationService} from '../../../../model/network/authentication.service';
+import {LatLngLiteral, marker, Marker, TileLayer, tileLayer} from 'leaflet';
+import {ContentService} from '../../content.service';
 
 @Component({
   selector: 'app-info-panel',
@@ -51,6 +30,7 @@ export class InfoPanelLightboxComponent implements OnInit, OnChanges {
 
   constructor(
     public queryService: QueryService,
+    public galleryService: ContentService,
     public mapService: MapService,
     private authService: AuthenticationService
   ) {
@@ -77,6 +57,17 @@ export class InfoPanelLightboxComponent implements OnInit, OnChanges {
     );
   }
 
+  get DirectoryPathStr(): string {
+    const p = this.DirectoryPath;
+    if (p === '.') {
+      return $localize`Home`;
+    }
+    if (p.length > 25) {
+      return '...' + p.slice(-22);
+    }
+    return p;
+  }
+
   get VideoData(): VideoMetadata {
     if (typeof (this.media as VideoDTO).metadata.bitRate === 'undefined') {
       return null;