add the shortDescription in grid view on hover - see #243

dainst · Aug 8, 2024 · 504782c · 504782c
1 parent 60e2ed9
commit 504782c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/desktop/src/app/components/resources/grid-list/grid-item.component.ts b/desktop/src/app/components/resources/grid-list/grid-item.component.ts
@@ -1,6 +1,6 @@
 import { Input, Component } from '@angular/core';
 import { SafeResourceUrl } from '@angular/platform-browser';
-import { FieldDocument, ProjectConfiguration } from 'idai-field-core';
+import { FieldDocument, I18N, Labels, ProjectConfiguration } from 'idai-field-core';
 
 
 @Component({
@@ -18,7 +18,8 @@ export class GridItemComponent {
     @Input() subDocuments: Array<FieldDocument>;
 
 
-    constructor(private projectConfiguration: ProjectConfiguration) {}
+    constructor(private projectConfiguration: ProjectConfiguration, 
+                private labels: Labels) {}
 
 
     public getSubDocumentsLabel(): string {
@@ -33,4 +34,10 @@ export class GridItemComponent {
 
         return this.projectConfiguration.getCategory(this.document.resource.category).scanCodes !== undefined;
     }
+
+
+    public getLabelFromI18NString(i18nString: I18N.String|string): string {
+
+        return this.labels.getFromI18NString(i18nString);
+    }
 }
diff --git a/desktop/src/app/components/resources/grid-list/grid-item.html b/desktop/src/app/components/resources/grid-list/grid-item.html
@@ -6,4 +6,7 @@
                 [imageUrls]="images"></grid-item-icon>
 <div class="grid-resource-info">
     {{document.resource.identifier}}
+    <span *ngIf="document.resource.shortDescription" class="grid-resource-shortdescription">
+        {{getLabelFromI18NString(document.resource.shortDescription)}}
+    </span>
 </div>
diff --git a/desktop/src/app/components/resources/grid-list/grid-item.scss b/desktop/src/app/components/resources/grid-list/grid-item.scss
@@ -17,7 +17,7 @@ grid-item {
 
   .grid-resource-info {
     position: absolute;
-    height: 25px;
+    min-height: 25px;
     width: 192px;
     line-height: 25px;
     text-align: center;
@@ -39,6 +39,16 @@ grid-item {
     }
   }
 
+  .grid-resource-shortdescription {
+    display: none;
+    font-style: italic;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    width: calc(100% - 1px);
+  }
+
   .badge {
     position: absolute;
     top: 6px;

diff --git a/desktop/src/app/components/resources/grid-list/grid.scss b/desktop/src/app/components/resources/grid-list/grid.scss
@@ -21,6 +21,14 @@ grid {
 
     &:hover {
       box-shadow: 1px 10px 30px 0 rgba(0, 0, 0, 0.3);
+
+      .grid-resource-info {
+        height: auto;
+      }
+
+      .grid-resource-shortdescription {
+        display: block;
+      }
     }
   }
 }