Adding folder name to infopanel to search results

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 {
+.keywords a, a.dir-link {
-  color: #212529;
+  color: var(--bs-gray-900);
 }
 
-.keywords a:hover {
+.keywords a:hover, a.dir-link:hover {
   text-decoration: underline;
 }
 

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}}"
+      <div class="details-main" >
-           [routerLink]="['/gallery', DirectoryPath]"
-           [queryParams]="queryService.getParams()">
         {{media.name}}
       </div>
       <div class="details-sub row">

src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts

@@ -1,36 +1,15 @@
-import {
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output,} from '@angular/core';
-  Component,
+import {CameraMetadata, PhotoDTO, PhotoMetadata, PositionMetaData,} from '../../../../../../common/entities/PhotoDTO';
-  EventEmitter,
+import {Config} from '../../../../../../common/config/public/Config';
-  Input,
+import {MediaDTO, MediaDTOUtils,} from '../../../../../../common/entities/MediaDTO';
-  OnChanges,
+import {VideoDTO, VideoMetadata,} from '../../../../../../common/entities/VideoDTO';
-  OnInit,
+import {Utils} from '../../../../../../common/Utils';
-  Output,
+import {QueryService} from '../../../../model/query.service';
-} from '@angular/core';
+import {MapService} from '../../map/map.service';
-import {
+import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes,} from '../../../../../../common/entities/SearchQueryDTO';
-  CameraMetadata,
+import {AuthenticationService} from '../../../../model/network/authentication.service';
-  PhotoDTO,
+import {LatLngLiteral, marker, Marker, TileLayer, tileLayer} from 'leaflet';
-  PhotoMetadata,
+import {ContentService} from '../../content.service';
-  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';
 
 @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;