Merge pull request #779 from geonetwork/DH/redesign-lightbox

[Datahub] [Redesign] Thumbail preview
geonetwork · Feb 14, 2024 · 0c46720 · 0c46720
2 parents e394770 + ef53f8d
commit 0c46720
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -192,6 +192,32 @@ describe('dataset pages', () => {
             .should('have.value', keyword)
         })
       })
+      it('should open the lightbox', () => {
+        cy.get('datahub-record-metadata')
+          .find('[id="about"]')
+          .find('gn-ui-thumbnail')
+          .first()
+          .next()
+          .find('gn-ui-button')
+          .click()
+        cy.get('.basicLightbox--visible')
+      })
+    })
+
+    describe('metadata quality widget enabled', () => {
+      beforeEach(() => {
+        // this will enable metadata quality widget
+        cy.intercept('GET', '/assets/configuration/default.toml', {
+          fixture: 'config-with-metadata-quality.toml',
+        })
+        cy.reload()
+      })
+
+      it('should display quality widget', () => {
+        cy.get('gn-ui-metadata-quality gn-ui-progress-bar')
+          .eq(0)
+          .should('have.attr', 'ng-reflect-value', 75)
+      })
     })
   })
 

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -23,7 +23,18 @@
         >
         </gn-ui-metadata-info>
       </div>
-      <div>
+      <div class="-mt-44">
+        <gn-ui-image-overlay-preview
+          [imageUrl]="thumbnailUrl$ | async"
+          (isPlaceholderShown)="showOverlay = !$event"
+          *ngIf="showOverlay"
+        >
+        </gn-ui-image-overlay-preview>
+        <gn-ui-metadata-contact
+          (organizationClick)="onOrganizationClick($event)"
+          [metadata]="facade.metadata$ | async"
+        >
+        </gn-ui-metadata-contact>
         <div *ngIf="metadataQualityDisplay">
           <p class="text text-gray-700 text-xs mb-3 uppercase" translate>
             record.metadata.quality
@@ -33,21 +44,8 @@
             [metadataQualityDisplay]="metadataQualityDisplay"
           ></gn-ui-metadata-quality>
         </div>
-        <gn-ui-image-overlay-preview
-          [imageUrl]="thumbnailUrl$ | async"
-          (isPlaceholderShown)="showOverlay = !$event"
-          *ngIf="showOverlay"
-        >
-        </gn-ui-image-overlay-preview>
-        <div>
-          <gn-ui-metadata-contact
-            (organizationClick)="onOrganizationClick($event)"
-            [metadata]="facade.metadata$ | async"
-          >
-          </gn-ui-metadata-contact>
-          <gn-ui-metadata-catalog [sourceLabel]="sourceLabel$ | async">
-          </gn-ui-metadata-catalog>
-        </div>
+        <gn-ui-metadata-catalog [sourceLabel]="sourceLabel$ | async">
+        </gn-ui-metadata-catalog>
       </div>
     </div>
   </div>

diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html
@@ -1,11 +1,12 @@
 <gn-ui-content-ghost
   [showContent]="imageUrl !== undefined"
-  ghostClass="h-36 mb-3"
+  ghostClass="h-48 mb-3"
 >
   <div
     *ngIf="imageUrl"
+    [showContent]="imageUrl !== undefined"
     data-cy="record-thumbnail"
-    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3"
+    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"

diff --git a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html
@@ -1,4 +1,4 @@
-<div class="py-5 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12">
+<div class="py-5 px-5 rounded bg-gray-100 text-black mb-6">
   <div class="grid gap-3">
     <div>
       <p class="text-sm font-medium" translate>record.metadata.contact</p>