[DSpace#2719][CST-12825] Extracts new image-page-field component with css variable

Author: vins01-4science

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -32,14 +32,18 @@
     </ds-generic-item-page-field>
   </div>
   <div class="col-xs-12 col-md-7">
-    <ds-generic-item-page-field
+    <ds-item-page-img-field
       [fields]="['organization.identifier.ror']"
-      [img]="'./assets/images/ror-icon.svg'"
+      [img]="{
+        URI: './assets/images/ror-icon.svg',
+        alt: 'item.page.image.alt.ROR',
+        heightVar: '--ds-item-page-img-field-ror-inline-height'
+      }"
       [item]="object"
       [label]="'orgunit.page.ror'"
       [urlRegex]="'(.*)ror.org'"
     >
-    </ds-generic-item-page-field>
+    </ds-item-page-img-field>
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isPublicationOfOrgUnit'"

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -25,8 +25,11 @@
 
 <!-- Render value as a link with icon -->
 <ng-template #linkImg let-img="img" let-value="value">
-  <a [href]="value" class="dont-break-out ds-simple-metadata-link" target="_blank">
-    <img alt="metadata logo" height="24" src="{{img}}"/>
+  <a class="link-anchor" [href]="value" class="dont-break-out ds-simple-metadata-link" target="_blank">
+    <img class="link-logo"
+      [alt]="img.alt | translate"
+      [style.height]="'var(' + img.heightVar + ', --ds-item-page-img-field-default-inline-height)'"
+      [src]="img.URI"/>
     {{value}}
   </a>
 </ng-template>

src/app/item-page/field-components/metadata-values/metadata-values.component.ts

@@ -4,6 +4,7 @@ import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
 import { BrowseDefinition } from '../../../core/shared/browse-definition.model';
 import { hasValue } from '../../../shared/empty.util';
 import { VALUE_LIST_BROWSE_DEFINITION } from '../../../core/shared/value-list-browse-definition.resource-type';
+import { ImageField } from '../../simple/field-components/specific-field/img/item-page-img-field.component';
 
 /**
  * This component renders the configured 'values' into the ds-metadata-field-wrapper component.
@@ -55,7 +56,10 @@ export class MetadataValuesComponent implements OnChanges {
 
   @Input() browseDefinition?: BrowseDefinition;
 
-  @Input() img?: string;
+  /**
+   * Optional {@code ImageField} reference that represents an image to be displayed inline.
+   */
+  @Input() img?: ImageField;
 
   ngOnChanges(changes: SimpleChanges): void {
     this.renderMarkdown = !!this.appConfig.markdown.enabled && this.enableMarkdown;

src/app/item-page/item-shared.module.ts

@@ -30,6 +30,7 @@ import { RelatedItemsComponent } from './simple/related-items/related-items-comp
 import {
   ThemedMetadataRepresentationListComponent
 } from './simple/metadata-representation-list/themed-metadata-representation-list.component';
+import { ItemPageImgFieldComponent } from './simple/field-components/specific-field/img/item-page-img-field.component';
 
 const ENTRY_COMPONENTS = [
   ItemVersionsDeleteModalComponent,
@@ -46,6 +47,7 @@ const COMPONENTS = [
   MetadataRepresentationListComponent,
   ThemedMetadataRepresentationListComponent,
   RelatedItemsComponent,
+  ItemPageImgFieldComponent,
 ];
 
 @NgModule({

src/app/item-page/simple/field-components/specific-field/generic/generic-item-page-field.component.ts

@@ -45,7 +45,5 @@ export class GenericItemPageFieldComponent extends ItemPageFieldComponent {
    */
   @Input() urlRegex?: string;
 
-  @Input() img?: string;
-
 
 }

src/app/item-page/simple/field-components/specific-field/item-page-field.component.html

@@ -6,6 +6,5 @@
     [enableMarkdown]="enableMarkdown"
     [urlRegex]="urlRegex"
     [browseDefinition]="browseDefinition|async"
-    [img]="img"
   ></ds-metadata-values>
 </div>

src/app/item-page/simple/field-components/specific-field/item-page-field.component.ts

@@ -51,8 +51,6 @@ export class ItemPageFieldComponent {
      */
     urlRegex?: string;
 
-  img?: string;
-
     /**
      * Return browse definition that matches any field used in this component if it is configured as a browse
      * link in dspace.cfg (webui.browse.link.<n>)

src/assets/i18n/en.json5

@@ -2464,6 +2464,8 @@
 
   "item.page.claim.tooltip": "Claim this item as profile",
 
+  "item.page.image.alt.ROR": "ROR logo",
+
   "item.preview.dc.identifier.uri": "Identifier:",
 
   "item.preview.dc.contributor.author": "Authors:",

src/styles/_custom_variables.scss

@@ -101,4 +101,7 @@
   --ds-dso-edit-lang-width: 90px;
   --ds-dso-edit-actions-width: 173px;
   --ds-dso-edit-virtual-tooltip-min-width: 300px;
+
+  --ds-item-page-img-field-default-inline-height: 24px;
+
 }

src/themes/dspace/styles/_theme_css_variable_overrides.scss

@@ -7,5 +7,7 @@
   --ds-home-news-link-color: #{$green};
   --ds-home-news-link-hover-color: #{darken($green, 15%)};
   --ds-header-navbar-border-bottom-color: #{$green};
+  --ds-item-page-img-field-default-inline-height: 24px;
+  --ds-item-page-img-field-ror-inline-height: var(--ds-item-page-img-field-default-inline-height);
 }