Merge remote-tracking branch 'github/main' into DURACOM-191-20240304-align-to-main

# Conflicts: # src/app/admin/admin-notifications/admin-notifications-routing.module.ts # src/app/admin/admin-notifications/admin-notifications.module.ts # src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.spec.ts # src/app/admin/admin-notifications/admin-quality-assurance-source-page-component/admin-quality-assurance-source-page.component.ts # src/app/admin/admin-notifications/admin-quality-assurance-topics-page/admin-quality-assurance-topics-page.component.spec.ts # src/app/admin/admin-routing.module.ts # src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component.ts # src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.spec.ts # src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.ts # src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.spec.ts # src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.ts # src/app/admin/admin.module.ts # src/app/app-routing.module.ts # src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts # src/app/browse-by/browse-by-date-page/themed-browse-by-date-page.component.ts # src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts # src/app/browse-by/browse-by-date/browse-by-date.component.ts # src/app/browse-by/browse-by-guard.spec.ts # src/app/browse-by/browse-by-metadata-page/themed-browse-by-metadata-page.component.ts # src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts # src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts # src/app/browse-by/browse-by-page.module.ts # src/app/browse-by/browse-by-routing.module.ts # src/app/browse-by/browse-by-switcher/browse-by-data-type.ts # src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts # src/app/browse-by/browse-by-switcher/browse-by-decorator.ts # src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts # src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts # src/app/browse-by/browse-by-switcher/dynamic-component-loader.directive.ts # src/app/browse-by/browse-by-switcher/themed-browse-by-switcher.component.ts # src/app/browse-by/browse-by-taxonomy-page/themed-browse-by-taxonomy-page.component.ts # src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts # src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts # src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts # src/app/browse-by/browse-by-title-page/themed-browse-by-title-page.component.ts # src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts # src/app/browse-by/browse-by.module.ts # src/app/collection-page/collection-page-routing.module.ts # src/app/collection-page/collection-page.component.ts # src/app/collection-page/collection-page.module.ts # src/app/community-page/community-page-routing.module.ts # src/app/community-page/community-page.module.ts # src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.spec.ts # src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts # src/app/community-page/sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component.ts # src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.spec.ts # src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts # src/app/community-page/sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component.ts # src/app/core/data/processes/process-data.service.ts # src/app/core/shared/non-hierarchical-browse-definition.ts # src/app/core/submission/vocabularies/vocabulary.data.service.ts # src/app/core/submission/workspaceitem-data.service.ts # src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts # src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts # src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts # src/app/dso-shared/dso-shared.module.ts # src/app/footer/footer.component.spec.ts # src/app/header-nav-wrapper/header-navbar-wrapper.component.ts # src/app/header/header.component.ts # src/app/home-page/home-page.component.ts # src/app/home-page/home-page.module.ts # src/app/info/info-routing.module.ts # src/app/item-page/alerts/item-alerts.component.spec.ts # src/app/item-page/alerts/item-alerts.component.ts # src/app/item-page/field-components/metadata-values/metadata-values.component.ts # src/app/item-page/full/full-item-page.component.spec.ts # src/app/item-page/full/full-item-page.component.ts # src/app/item-page/item-shared.module.ts # src/app/item-page/simple/item-page.component.spec.ts # src/app/item-page/simple/item-page.component.ts # src/app/menu.resolver.spec.ts # src/app/my-dspace-page/my-dspace-page.module.ts # src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts # src/app/navbar/navbar.component.spec.ts # src/app/notifications/notifications.module.ts # src/app/notifications/qa/events/quality-assurance-events.component.ts # src/app/notifications/qa/source/quality-assurance-source.component.ts # src/app/notifications/qa/topics/quality-assurance-topics.component.spec.ts # src/app/notifications/qa/topics/quality-assurance-topics.component.ts # src/app/process-page/detail/process-detail.component.spec.ts # src/app/process-page/detail/process-detail.component.ts # src/app/process-page/form/process-form.component.ts # src/app/process-page/overview/process-overview.component.spec.ts # src/app/process-page/overview/process-overview.component.ts # src/app/process-page/process-page-shared.module.ts # src/app/profile-page/profile-page.module.ts # src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.spec.ts # src/app/quality-assurance-notifications-pages/quality-assurance-events-page/quality-assurance-events-page.component.ts # src/app/quality-assurance-notifications-pages/quality-assurance-topics-page/quality-assurance-topics-page.component.ts # src/app/root/root.component.ts # src/app/search-page/configuration-search-page.component.ts # src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts # src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts # src/app/shared/comcol/comcol.module.ts # src/app/shared/dso-page/dso-edit-menu.resolver.spec.ts # src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts # src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.spec.ts # src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts # src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts # src/app/shared/menu/menu-item/external-link-menu-item.component.ts # src/app/shared/menu/menu-item/link-menu-item.component.ts # src/app/shared/menu/menu-item/onclick-menu-item.component.ts # src/app/shared/menu/menu-item/text-menu-item.component.ts # src/app/shared/metadata-representation/metadata-representation-loader.component.spec.ts # src/app/shared/metadata-representation/metadata-representation-loader.component.ts # src/app/shared/metadata-representation/metadata-representation.directive.ts # src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component.spec.ts # src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component.ts # src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions.directive.ts # src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.spec.ts # src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts # src/app/shared/object-collection/shared/listable-object/listable-object.directive.ts # src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.spec.ts # src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts # src/app/shared/search/search-filters/search-filters.component.spec.ts # src/app/shared/search/search-filters/search-filters.component.ts # src/app/shared/search/search-settings/search-settings.component.spec.ts # src/app/shared/search/search.component.spec.ts # src/app/shared/search/search.component.ts # src/app/shared/search/themed-search.component.ts # src/app/shared/shared.module.ts # src/app/shared/starts-with/date/starts-with-date.component.spec.ts # src/app/shared/starts-with/date/starts-with-date.component.ts # src/app/shared/starts-with/text/starts-with-text.component.spec.ts # src/app/shared/testing/vocabulary-service.stub.ts # src/app/submission/form/submission-form.component.html # src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.spec.ts # src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts # src/app/submission/sections/upload/section-upload.component.html # src/app/submission/sections/upload/section-upload.component.ts # src/app/submission/submission.module.ts # src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-actions-loader/advanced-workflow-actions-loader.component.spec.ts # src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-actions-loader/advanced-workflow-actions-loader.component.ts # src/app/workflowitems-edit-page/workflowitems-edit-page.module.ts # src/config/app-config.interface.ts # src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts # src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts # src/themes/custom/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts # src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts # src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts # src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts # src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.ts # src/themes/custom/eager-theme.module.ts # src/themes/custom/lazy-theme.module.ts # src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts # src/themes/dspace/app/header/header.component.ts
2025-10-16 14:33:03 +00:00 · 2024-03-04 15:04:33 +01:00
parent 576f262052 061129ecb7
commit 914ca68ca2
670 changed files with 32800 additions and 4491 deletions
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, Injector, OnInit } from '@angular/core';
+import { Component, HostListener, Inject, Injector, OnInit } from '@angular/core';
 import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { slide } from '../../shared/animations/slide';
@@ -8,6 +8,7 @@ import { MenuID } from '../../shared/menu/menu-id.model';
 import { NgComponentOutlet, NgIf, NgFor, AsyncPipe } from '@angular/common';
 import { RouterLinkActive } from '@angular/router';
 import { VarDirective } from '../../shared/utils/var.directive';
+import { Observable } from 'rxjs';

 /**
 * Represents an expandable section in the navbar
@@ -26,12 +27,42 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
   */
  menuID = MenuID.PUBLIC;

+  /**
+   * True if mouse has entered the menu section toggler
+   */
+  mouseEntered = false;
+
+  /**
+   * True if screen size was small before a resize event
+   */
+  wasMobile = undefined;
+
+  /**
+   * Observable that emits true if the screen is small, false otherwise
+   */
+  isMobile$: Observable<boolean>;
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isMobile$.pipe(
+      first()
+    ).subscribe((isMobile) => {
+      // When switching between desktop and mobile active sections should be deactivated
+      if (isMobile !== this.wasMobile) {
+        this.wasMobile = isMobile;
+        this.menuService.deactivateSection(this.menuID, this.section.id);
+        this.mouseEntered = false;
+      }
+    });
+  }
+
  constructor(@Inject('sectionDataProvider') menuSection,
              protected menuService: MenuService,
              protected injector: Injector,
              private windowService: HostWindowService
  ) {
    super(menuSection, menuService, injector);
+    this.isMobile$ = this.windowService.isMobile();
  }

  ngOnInit() {
@@ -39,48 +70,42 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
  }

  /**
-   * Overrides the super function that activates this section (triggered on hover)
-   * Has an extra check to make sure the section can only be activated on non-mobile devices
-   * @param {Event} event The user event that triggered this function
+   * When the mouse enters the section toggler activate the menu section
+   * @param $event
+   * @param isActive
   */
-  activateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
+  onMouseEnter($event: Event, isActive: boolean) {
+    this.isMobile$.pipe(
      first()
    ).subscribe((isMobile) => {
-      if (!isMobile) {
-        super.activateSection(event);
+      if (!isMobile && !isActive && !this.mouseEntered) {
+        this.activateSection($event);
      }
+      this.mouseEntered = true;
    });
  }

  /**
-   * Overrides the super function that deactivates this section (triggered on hover)
-   * Has an extra check to make sure the section can only be deactivated on non-mobile devices
-   * @param {Event} event The user event that triggered this function
+   * When the mouse leaves the section toggler deactivate the menu section
+   * @param $event
+   * @param isActive
   */
-  deactivateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
+  onMouseLeave($event: Event, isActive: boolean) {
+    this.isMobile$.pipe(
      first()
    ).subscribe((isMobile) => {
-      if (!isMobile) {
-        super.deactivateSection(event);
+      if (!isMobile && isActive && this.mouseEntered) {
+        this.deactivateSection($event);
      }
+      this.mouseEntered = false;
    });
  }

  /**
-   * Overrides the super function that toggles this section (triggered on click)
-   * Has an extra check to make sure the section can only be toggled on mobile devices
-   * @param {Event} event The user event that triggered this function
+   * returns the ID of the DOM element representing the navbar section
+   * @param sectionId
   */
-  toggleSection(event): void {
-    event.preventDefault();
-    this.windowService.isXsOrSm().pipe(
-      first()
-    ).subscribe((isMobile) => {
-      if (isMobile) {
-        super.toggleSection(event);
-      }
-    });
+  expandableNavbarSectionId(sectionId: string) {
+    return `expandable-navbar-section-${sectionId}-dropdown`;
  }
 }