Home - adding the contextual help directive

Author: root

src/app/home-page/recent-item-list/recent-item-list.component.html

@@ -1,7 +1,18 @@
 <ng-container *ngVar="(itemRD$ | async) as itemRD">
         <div class="mt-4" [ngClass]="placeholderFontClass" *ngIf="itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0" @fadeIn>
                 <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
-                <h2> {{'home.recent-submissions.head' | translate}}</h2>
+                <h2>
+                  <span
+                    *dsContextHelp="{
+                      content: 'home.tooltip.recent-item-list',
+                      id: 'home-recent-item-list',
+                      iconPlacement: 'right',
+                      tooltipPlacement: ['top', 'right', 'bottom']
+                    }"
+                  >
+                    {{'home.recent-submissions.head' | translate}}
+                  </span>
+                </h2>
                 <div class="my-4" *ngFor="let item of itemRD?.payload?.page">
                         <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
                         </ds-listable-object-component-loader>

src/app/home-page/recent-item-list/recent-item-list.component.ts

@@ -39,6 +39,7 @@ import {
   fadeIn,
   fadeInOut,
 } from '../../shared/animations/fade';
+import { ContextHelpDirective } from '../../shared/context-help.directive';
 import { ErrorComponent } from '../../shared/error/error.component';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { ListableObjectComponentLoaderComponent } from '../../shared/object-collection/shared/listable-object/listable-object-component-loader.component';
@@ -61,7 +62,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
     fadeInOut,
   ],
   standalone: true,
-  imports: [VarDirective, NgIf, NgClass, NgFor, ListableObjectComponentLoaderComponent, ErrorComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
+  imports: [VarDirective, ContextHelpDirective, NgIf, NgClass, NgFor, ListableObjectComponentLoaderComponent, ErrorComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
 })
 export class RecentItemListComponent implements OnInit, OnDestroy {
   itemRD$: Observable<RemoteData<PaginatedList<Item>>>;

src/app/home-page/top-level-community-list/top-level-community-list.component.html

@@ -1,7 +1,16 @@
 <ng-container *ngVar="(communitiesRD$ | async) as communitiesRD">
   <div *ngIf="communitiesRD?.hasSucceeded ">
     <h2>
-      {{'home.top-level-communities.head' | translate}}
+      <span
+        *dsContextHelp="{
+          content: 'home.tooltip.top-level-communities',
+          id: 'home-top-level-community-list',
+          iconPlacement: 'right',
+          tooltipPlacement: ['top', 'right', 'bottom']
+        }"
+      >
+        {{'home.top-level-communities.head' | translate}}
+      </span>
     </h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
   <ds-viewable-collection

src/app/home-page/top-level-community-list/top-level-community-list.component.ts

@@ -31,6 +31,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { Community } from '../../core/shared/community.model';
 import { fadeInOut } from '../../shared/animations/fade';
+import { ContextHelpDirective } from '../../shared/context-help.directive';
 import { hasValue } from '../../shared/empty.util';
 import { ErrorComponent } from '../../shared/error/error.component';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
@@ -48,7 +49,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fadeInOut],
   standalone: true,
-  imports: [VarDirective, NgIf, ObjectCollectionComponent, ErrorComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
+  imports: [VarDirective, ContextHelpDirective, NgIf, ObjectCollectionComponent, ErrorComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
 })
 
 export class TopLevelCommunityListComponent implements OnInit, OnDestroy {

src/assets/i18n/en.json5

@@ -6781,4 +6781,8 @@
   "live-region.ordering.dropped": "{{ itemName }}, dropped at position {{ index }} of {{ length }}.",
 
   "dynamic-form-array.sortable-list.label": "Sortable list",
+
+  "home.tooltip.top-level-communities": "Here you can view a list of the Repository communities, organized by default in alphabetical order. In the bottom corner, there is a pagination feature to display the communities and, by selecting a community, you will have access to its content and can browse through its sub-communities or collections. If you want to access the distribution feed from the home page, click on the feed button on the right.",
+
+  "home.tooltip.recent-item-list": "Here you can view the most recently published submissions. If you want to see more published items, click on the load more button.",
 }

src/assets/i18n/es.json5

@@ -10194,4 +10194,10 @@
 
   // "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
   "search-facet-option.update.announcement": "La página será recargada. Filtro {{ filter }} seleccionado.",
+
+  // "home.tooltip.top-level-communities": "Here you can view a list of the Repository communities, organized by default in alphabetical order. In the bottom corner, there is a pagination feature to display the communities and, by selecting a community, you will have access to its content and can browse through its sub-communities or collections. If you want to access the distribution feed from the home page, click on the feed button on the right.",
+  "home.tooltip.top-level-communities": "Aquí puedes ver una lista de las comunidades del repositorio, organizadas en orden alfabética. En la esquina inferior, hay una función de paginación para mostrar las comunidades y, al seleccionar una comunidad, tendrás acceso a su contenido y podrás navegar por sus subcomunidades o colecciones. Si deseas acceder al feed de distribución de la página de inicio, puedes hacer clic en el botón de feed que está a la derecha.",
+
+  // "home.tooltip.recent-item-list": "Here you can view the most recently published submissions. If you want to see more published items, click on the load more button.",
+  "home.tooltip.recent-item-list": "Aquí puedes ver los envíos publicados más recientemente. Si deseas ver más ítens publicados, haz clic en el botón de cargar más.",
 }

src/assets/i18n/pt-BR.json5

@@ -10243,4 +10243,10 @@
 
   // "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
   "search-facet-option.update.announcement": "A página será recarregada. O filtro {{ filter }} foi selecionado.",
+
+  // "home.tooltip.top-level-communities": "Here you can view a list of the Repository communities, organized by default in alphabetical order. In the bottom corner, there is a pagination feature to display the communities and, by selecting a community, you will have access to its content and can browse through its sub-communities or collections. If you want to access the distribution feed from the home page, click on the feed button on the right.",
+  "home.tooltip.top-level-communities": "Aqui você pode visualizar a lista de comunidades do Repositório, organizadas por padrão em ordem alfabética. No canto inferior, há um recurso de paginação para exibir as comunidades e, ao selecionar uma comunidade, você terá acesso ao seu conteúdo e poderá navegar por suas sub-comunidades ou coleções. Caso você deseje ter acesso ao feed de distribuição da página inicial, você pode clicar no botão de feed à direita.",
+
+  // "home.tooltip.recent-item-list": "Here you can view the most recently published submissions. If you want to see more published items, click on the load more button.",
+  "home.tooltip.recent-item-list": "Aqui você pode visualizar as submissões publicadas mais recentemente. Se você deseja ver mais itens publicados, clique no botão carregar mais.",
 }