diff --git a/cypress/e2e/collection-edit.cy.ts b/cypress/e2e/collection-edit.cy.ts index 3e7ecf61410..63d873db3ec 100644 --- a/cypress/e2e/collection-edit.cy.ts +++ b/cypress/e2e/collection-edit.cy.ts @@ -45,7 +45,7 @@ describe('Edit Collection > Content Source tab', () => { cy.get('#externalSourceCheck').check(); // Wait for the source controls to appear - cy.get('ds-collection-source-controls').should('be.visible'); + // cy.get('ds-collection-source-controls').should('be.visible'); // Analyze entire page for accessibility issues testA11y('ds-collection-source'); diff --git a/cypress/e2e/collection-statistics.cy.ts b/cypress/e2e/collection-statistics.cy.ts index 43bf67ce51f..a08f8cb1987 100644 --- a/cypress/e2e/collection-statistics.cy.ts +++ b/cypress/e2e/collection-statistics.cy.ts @@ -6,7 +6,7 @@ describe('Collection Statistics Page', () => { it('should load if you click on "Statistics" from a Collection page', () => { cy.visit('/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION'))); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', COLLECTIONSTATISTICSPAGE); }); diff --git a/cypress/e2e/community-statistics.cy.ts b/cypress/e2e/community-statistics.cy.ts index ca306eff5c2..6cafed0350e 100644 --- a/cypress/e2e/community-statistics.cy.ts +++ b/cypress/e2e/community-statistics.cy.ts @@ -6,7 +6,7 @@ describe('Community Statistics Page', () => { it('should load if you click on "Statistics" from a Community page', () => { cy.visit('/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY'))); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', COMMUNITYSTATISTICSPAGE); }); diff --git a/cypress/e2e/homepage-statistics.cy.ts b/cypress/e2e/homepage-statistics.cy.ts index ff7dbeb852d..ece38686b93 100644 --- a/cypress/e2e/homepage-statistics.cy.ts +++ b/cypress/e2e/homepage-statistics.cy.ts @@ -5,7 +5,7 @@ import '../support/commands'; describe('Site Statistics Page', () => { it('should load if you click on "Statistics" from homepage', () => { cy.visit('/'); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', '/statistics'); }); diff --git a/cypress/e2e/item-statistics.cy.ts b/cypress/e2e/item-statistics.cy.ts index b856744cba7..6caeacae8e1 100644 --- a/cypress/e2e/item-statistics.cy.ts +++ b/cypress/e2e/item-statistics.cy.ts @@ -6,7 +6,7 @@ describe('Item Statistics Page', () => { it('should load if you click on "Statistics" from an Item/Entity page', () => { cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'))); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', ITEMSTATISTICSPAGE); }); diff --git a/cypress/e2e/login-modal.cy.ts b/cypress/e2e/login-modal.cy.ts index c56b98fd269..673041e9f39 100644 --- a/cypress/e2e/login-modal.cy.ts +++ b/cypress/e2e/login-modal.cy.ts @@ -3,31 +3,31 @@ import { testA11y } from 'cypress/support/utils'; const page = { openLoginMenu() { // Click the "Log In" dropdown menu in header - cy.get('ds-themed-navbar [data-test="login-menu"]').click(); + cy.get('ds-themed-header [data-test="login-menu"]').click(); }, openUserMenu() { // Once logged in, click the User menu in header - cy.get('ds-themed-navbar [data-test="user-menu"]').click(); + cy.get('ds-themed-header [data-test="user-menu"]').click(); }, submitLoginAndPasswordByPressingButton(email, password) { // Enter email - cy.get('ds-themed-navbar [data-test="email"]').type(email); + cy.get('ds-themed-header [data-test="email"]').type(email); // Enter password - cy.get('ds-themed-navbar [data-test="password"]').type(password); + cy.get('ds-themed-header [data-test="password"]').type(password); // Click login button - cy.get('ds-themed-navbar [data-test="login-button"]').click(); + cy.get('ds-themed-header [data-test="login-button"]').click(); }, submitLoginAndPasswordByPressingEnter(email, password) { // In opened Login modal, fill out email & password, then click Enter - cy.get('ds-themed-navbar [data-test="email"]').type(email); - cy.get('ds-themed-navbar [data-test="password"]').type(password); - cy.get('ds-themed-navbar [data-test="password"]').type('{enter}'); + cy.get('ds-themed-header [data-test="email"]').type(email); + cy.get('ds-themed-header [data-test="password"]').type(password); + cy.get('ds-themed-header [data-test="password"]').type('{enter}'); }, submitLogoutByPressingButton() { // This is the POST command that will actually log us out cy.intercept('POST', '/server/api/authn/logout').as('logout'); // Click logout button - cy.get('ds-themed-navbar [data-test="logout-button"]').click(); + cy.get('ds-themed-header [data-test="logout-button"]').click(); // Wait until above POST command responds before continuing // (This ensures next action waits until logout completes) cy.wait('@logout'); @@ -102,10 +102,10 @@ describe('Login Modal', () => { page.openLoginMenu(); // Registration link should be visible - cy.get('ds-themed-navbar [data-test="register"]').should('be.visible'); + cy.get('ds-themed-header [data-test="register"]').should('be.visible'); // Click registration link & you should go to registration page - cy.get('ds-themed-navbar [data-test="register"]').click(); + cy.get('ds-themed-header [data-test="register"]').click(); cy.location('pathname').should('eq', '/register'); cy.get('ds-register-email').should('exist'); @@ -119,10 +119,10 @@ describe('Login Modal', () => { page.openLoginMenu(); // Forgot password link should be visible - cy.get('ds-themed-navbar [data-test="forgot"]').should('be.visible'); + cy.get('ds-themed-header [data-test="forgot"]').should('be.visible'); // Click link & you should go to Forgot Password page - cy.get('ds-themed-navbar [data-test="forgot"]').click(); + cy.get('ds-themed-header [data-test="forgot"]').click(); cy.location('pathname').should('eq', '/forgot'); cy.get('ds-forgot-email').should('exist'); diff --git a/cypress/e2e/search-navbar.cy.ts b/cypress/e2e/search-navbar.cy.ts index 9dd93c7a2dd..28a72bcc786 100644 --- a/cypress/e2e/search-navbar.cy.ts +++ b/cypress/e2e/search-navbar.cy.ts @@ -1,15 +1,15 @@ const page = { fillOutQueryInNavBar(query) { // Click the magnifying glass - cy.get('ds-themed-navbar [data-test="header-search-icon"]').click(); + cy.get('ds-themed-header [data-test="header-search-icon"]').click(); // Fill out a query in input that appears - cy.get('ds-themed-navbar [data-test="header-search-box"]').type(query); + cy.get('ds-themed-header [data-test="header-search-box"]').type(query); }, submitQueryByPressingEnter() { - cy.get('ds-themed-navbar [data-test="header-search-box"]').type('{enter}'); + cy.get('ds-themed-header [data-test="header-search-box"]').type('{enter}'); }, submitQueryByPressingIcon() { - cy.get('ds-themed-navbar [data-test="header-search-icon"]').click(); + cy.get('ds-themed-header [data-test="header-search-icon"]').click(); } }; diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html index 7f1e8716ba5..24ba17fff47 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html @@ -1,23 +1,21 @@ -
- -
- +
+ + +
+
+ {{itemModel.text | translate}}
-
-
- - {{itemModel.text | translate}} - -
-
- +
+
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts index 260a364d7a8..296a70331cb 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts @@ -48,7 +48,7 @@ describe('AdminSidebarSectionComponent', () => { }); it('should set the right icon', () => { - const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas')); + const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas')); expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString); }); it('should not contain the disabled class', () => { @@ -88,7 +88,7 @@ describe('AdminSidebarSectionComponent', () => { }); it('should set the right icon', () => { - const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas')); + const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas')); expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString); }); it('should contain the disabled class', () => { diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts index b195526d1c0..51a0902f61b 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts @@ -52,4 +52,12 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement this.router.navigate(this.itemModel.link); } } + + adminMenuSectionId(sectionId: string) { + return `admin-menu-section-${sectionId}`; + } + + adminMenuSectionTitleId(sectionId: string) { + return `admin-menu-section-${sectionId}-title`; + } } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html index ca69501382e..fcb33eb1755 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html @@ -1,54 +1,63 @@ - diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss index 5ed0142c7f9..d3607ca625a 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss @@ -1,123 +1,140 @@ :host { - --ds-icon-z-index: 10; - - left: 0; - top: 0; - height: 100vh; - flex: 1 1 auto; - nav { - background-color: var(--ds-admin-sidebar-bg); - height: 100%; - flex-direction: column; - > div { - width: 100%; - &.sidebar-top-level-items { - flex: 1; - overflow: auto; - @include dark-scrollbar; - } + + /* SIDEBAR SIZE AND POSITION */ + + /* Sidebar hierarchy: + § nav + § .sidebar-full-width-container (any OPTIONAL full width element with no horizontal margin or padding - it can be nested) + § .sidebar-section-wrapper + § .sidebar-fixed-element-wrapper + § .sidebar-collapsible-element-outer-wrapper + § .sidebar-collapsible-element-inner-wrapper + § .sidebar-item + */ + + // Sidebar position + position: fixed; + left: 0; + top: 0; + z-index: var(--ds-sidebar-z-index); + + // Sidebar size and content position + nav#admin-sidebar { + + max-width: var(--ds-admin-sidebar-fixed-element-width); // Sidebar collapsed width + + display: flex; + flex-direction: column; + flex-wrap: nowrap; + + div#sidebar-top-level-items-container { + flex: 1 1 auto; // Fill available vertical space + overflow-x: hidden; + overflow-y: auto; + @include dark-scrollbar; + } + + img#admin-sidebar-logo { + height: var(--ds-admin-sidebar-logo-height); + } + + ::ng-deep { + + // This class must be applied to any nested wrapper containing a sidebar section + .sidebar-full-width-container { + width: 100%; + padding-left: 0; + padding-right: 0; + margin-left: 0; + margin-right: 0; + } + + // This class must be applied to the innermost block element containing a section or subsection link + // (it can be applied together with `sidebar-collapsible-element-inner-wrapper`) + .sidebar-item { + padding-top: var(--ds-admin-sidebar-item-padding); + padding-bottom: var(--ds-admin-sidebar-item-padding); + } + + // These classes handle the collapsing behavior + .sidebar-section-wrapper { + + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + + // These elements have fixed width and determine the width of the collapsed sidebar + & > .sidebar-fixed-element-wrapper { + min-width: var(--ds-admin-sidebar-fixed-element-width); + flex: 1 1 auto; // Fill available space + + // Align the icons + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; } - &.inactive ::ng-deep .sidebar-collapsible { - margin-left: calc(-1 * var(--ds-sidebar-items-width)); + & > .sidebar-collapsible-element-outer-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; // make inner wrapper slide on the left when collapsing + max-width: calc(100% - var(--ds-admin-sidebar-fixed-element-width)); // fill available space + padding-left: var(--ds-dark-scrollbar-width); // leave room for scrollbar + overflow-x: hidden; // hide inner wrapper when sidebar is collapsed + + // These elements have fixed width and slide on the left when the sidebar is collapsed + // Their content should fill all available space + & > .sidebar-collapsible-element-inner-wrapper { + min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width)); + height: 100%; + padding-right: var(--ds-admin-sidebar-item-padding); + } } + } - .navbar-nav { - .admin-menu-header { - background-color: var(--ds-admin-sidebar-header-bg); + } - .sidebar-section { - background-color: inherit; - } + // Set here any style that depends on the sidebar status + &.collapsed, &.transitioning, &.expanded { } - .logo-wrapper { - img { - height: 20px; - } - } - .section-header-text { - line-height: 1.5; - } + } - .navbar-brand { - margin-right: 0; - } + /* SIDEBAR STYLE */ - } - } + nav#admin-sidebar { + background-color: var(--ds-admin-sidebar-bg); - ::ng-deep { - .navbar-nav { - .sidebar-section { - display: flex; - align-content: stretch; - background-color: var(--ds-admin-sidebar-bg); - overflow-x: visible; - - .nav-item { - padding-top: var(--bs-spacer); - padding-bottom: var(--bs-spacer); - background-color: inherit; - - &:focus-visible { - // since links fill the whole sidebar, we _inset_ the outline - outline-offset: -4px; - - // replace padding with margins so it doesn't extend over the :focus-visible outline - // → can't remove the padding altogether; the icon needs to fill out - // the collapsed width of the sidebar for the slide animation to look decent. - .shortcut-icon { - padding-left: 0; - padding-right: 0; - margin-left: var(--ds-icon-padding); - margin-right: var(--ds-icon-padding); - } - .logo-wrapper { - margin-right: var(--bs-navbar-padding-x) !important; - } - .navbar-brand { - padding-top: 0; - padding-bottom: 0; - margin-top: var(--bs-navbar-brand-padding-y); - margin-bottom: var(--bs-navbar-brand-padding-y); - } - } - } - - .shortcut-icon { - background-color: inherit; - padding-left: var(--ds-icon-padding); - padding-right: var(--ds-icon-padding); - z-index: var(--ds-icon-z-index); - align-self: baseline; - } - - .sidebar-collapsible { - padding-left: 0; - padding-right: var(--bs-spacer); - width: var(--ds-sidebar-items-width); - position: relative; - .toggle { - width: 100%; - } - - ul { - padding-top: var(--bs-spacer); - - li a { - padding-left: var(--bs-spacer); - } - } - } - - &.active > .sidebar-collapsible > .nav-link { - color: var(--bs-navbar-dark-active-color); - } - } - } + ::ng-deep { + + color: white; + + // Set here the style of the *-menu-item nested components + .ds-menu-item { + } + + a { + color: var(--ds-admin-sidebar-link-color); + text-decoration: none; + + &:hover, &:focus { + color: var(--ds-admin-sidebar-link-hover-color); } + } + } + div#sidebar-header-container { + background-color: var(--ds-admin-sidebar-header-bg); + .sidebar-fixed-element-wrapper { + background-color: var(--ds-admin-sidebar-header-bg); + } } + div#sidebar-collapse-toggle-container { + .sidebar-collapsible-element-inner-wrapper { + } + } + } } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts index 9522be29ce3..058b81df2f6 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts @@ -143,7 +143,7 @@ describe('AdminSidebarComponent', () => { describe('when the collapse link is clicked', () => { beforeEach(() => { spyOn(menuService, 'toggleMenu'); - const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle > button')); + const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle-container > a')); sidebarToggler.triggerEventHandler('click', { preventDefault: () => {/**/ } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts index 26ded965d4d..741f9b7630d 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, HostListener, Injector, OnInit } from '@angular/core'; +import { Component, HostListener, Injector, Input, OnInit } from '@angular/core'; import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; import { debounceTime, distinctUntilChanged, first, map, withLatestFrom } from 'rxjs/operators'; import { AuthService } from '../../core/auth/auth.service'; @@ -28,9 +28,14 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { menuID = MenuID.ADMIN; /** - * Observable that emits the width of the collapsible menu sections + * Observable that emits the width of the sidebar when expanded */ - sidebarWidth: Observable; + @Input() expandedSidebarWidth$: Observable; + + /** + * Observable that emits the width of the sidebar when collapsed + */ + @Input() collapsedSidebarWidth$: Observable; /** * Is true when the sidebar is open, is false when the sidebar is animating or closed @@ -44,6 +49,12 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { */ sidebarClosed = !this.sidebarOpen; // Closed in UI, animation finished + /** + * Is true when the sidebar is opening or closing + * @type {boolean} + */ + sidebarTransitioning = !this.sidebarOpen; // Animation in progress + /** * Emits true when either the menu OR the menu's preview is expanded, else emits false */ @@ -69,7 +80,6 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { */ ngOnInit(): void { super.ngOnInit(); - this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width'); this.authService.isAuthenticated() .subscribe((loggedIn: boolean) => { if (loggedIn) { @@ -134,6 +144,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { * @param event The animation event */ startSlide(event: any): void { + this.sidebarTransitioning = true; if (event.toState === 'expanded') { this.sidebarClosed = false; } else if (event.toState === 'collapsed') { @@ -146,6 +157,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { * @param event The animation event */ finishSlide(event: any): void { + this.sidebarTransitioning = false; if (event.fromState === 'expanded') { this.sidebarClosed = true; } else if (event.fromState === 'collapsed') { diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html index 1f4666bbd08..636938b7b6e 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html @@ -1,37 +1,46 @@ -
-
+ -
+ -
-
- +
+
+ -
-
    -
  • - -
    • -
+
+ +
+
+
+
+ +
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss index 802fade8c13..845ba734df6 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss @@ -1,23 +1,24 @@ -:host ::ng-deep { - .fa-chevron-right { - padding-left: calc(var(--bs-spacer) / 2); - font-size: 0.5rem; - line-height: 3; +:host { + .sidebar-sub-level-item-list { + list-style: none; + margin: 0; + padding: 0; + ::ng-deep .ds-menu-item { + margin-left: var(--ds-admin-sidebar-section-indent); } + } - .sidebar-sub-level-items { - list-style: disc; - color: var(--bs-navbar-dark-color); - overflow: hidden; - margin-bottom: calc(-1 * var(--bs-spacer)); // the bottom-most nav-item is padded, no need for double spacing - } - - .sidebar-collapsible { - display: flex; - flex-direction: column; - } + .toggler-wrapper { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + } - li.sidebar-section.expanded { - background-color: var(--ds-admin-sidebar-active-bg) !important; + .subsection { + .sidebar-collapsible-element-inner-wrapper { + overflow-y: hidden; } + } } diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts index dd31f757c23..bd859d295d3 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts @@ -49,14 +49,14 @@ describe('ExpandableAdminSidebarSectionComponent', () => { }); it('should set the right icon', () => { - const icon = fixture.debugElement.query(By.css('.shortcut-icon > i.fas')); + const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"] > i.fas')); expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString); }); describe('when the header text is clicked', () => { beforeEach(() => { spyOn(menuService, 'toggleActiveSection'); - const sidebarToggler = fixture.debugElement.query(By.css('.sidebar-section > div.nav-item')); + const sidebarToggler = fixture.debugElement.query(By.css('a.sidebar-section-wrapper')); sidebarToggler.triggerEventHandler('click', { preventDefault: () => {/**/ } diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts index 8591fef97eb..e2995598f86 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts @@ -31,23 +31,23 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC /** * The background color of the section when it's active */ - sidebarActiveBg; + sidebarActiveBg$: Observable; /** * Emits true when the sidebar is currently collapsed, true when it's expanded */ - sidebarCollapsed: Observable; + isSidebarCollapsed$: Observable; /** * Emits true when the sidebar's preview is currently collapsed, true when it's expanded */ - sidebarPreviewCollapsed: Observable; + isSidebarPreviewCollapsed$: Observable; /** * Emits true when the menu section is expanded, else emits false * This is true when the section is active AND either the sidebar or it's preview is open */ - expanded: Observable; + isExpanded$: Observable; constructor( @Inject('sectionDataProvider') menuSection, @@ -64,12 +64,20 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC */ ngOnInit(): void { super.ngOnInit(); - this.sidebarActiveBg = this.variableService.getVariable('--ds-admin-sidebar-active-bg'); - this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID); - this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID); - this.expanded = combineLatestObservable(this.active, this.sidebarCollapsed, this.sidebarPreviewCollapsed) - .pipe( - map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed))) - ); + this.sidebarActiveBg$ = this.variableService.getVariable('--ds-admin-sidebar-active-bg'); + this.isSidebarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID); + this.isSidebarPreviewCollapsed$ = this.menuService.isMenuPreviewCollapsed(this.menuID); + this.isExpanded$ = combineLatestObservable([this.active, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe( + map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed))) + ); + } + + toggleSection($event: Event) { + this.menuService.expandMenuPreview(this.menuID); // fixes accessibility issue + super.toggleSection($event); + } + + adminMenuSubsectionId(sectionId: string, subsectionId: string) { + return `admin-menu-section-${sectionId}-${subsectionId}`; } } diff --git a/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts b/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts index f2f35725e8a..03b783aeafb 100644 --- a/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts @@ -1,6 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { ThemedComponent } from '../../shared/theme-support/themed.component'; import { AdminSidebarComponent } from './admin-sidebar.component'; +import { Observable } from 'rxjs'; /** * Themed wrapper for AdminSidebarComponent @@ -11,6 +12,19 @@ import { AdminSidebarComponent } from './admin-sidebar.component'; templateUrl: '../../shared/theme-support/themed.component.html', }) export class ThemedAdminSidebarComponent extends ThemedComponent { + + /** + * Observable that emits the width of the sidebar when expanded + */ + @Input() expandedSidebarWidth$: Observable; + + /** + * Observable that emits the width of the sidebar when collapsed + */ + @Input() collapsedSidebarWidth$: Observable; + + protected inAndOutputNames: (keyof AdminSidebarComponent & keyof this)[] = ['collapsedSidebarWidth$', 'expandedSidebarWidth$']; + protected getComponentName(): string { return 'AdminSidebarComponent'; } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss index 20d479ac880..29b93f31506 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss @@ -24,7 +24,7 @@ } &.ds-warning { - background-color: var(--bs-warning-bg); + background-color: var(--ds-warning-bg); .ds-flex-cell { border: 1px solid var(--bs-warning); @@ -32,7 +32,7 @@ } &.ds-danger { - background-color: var(--bs-danger-bg); + background-color: var(--ds-danger-bg); .ds-flex-cell { border: 1px solid var(--bs-danger); @@ -40,7 +40,7 @@ } &.ds-success { - background-color: var(--bs-success-bg); + background-color: var(--ds-success-bg); .ds-flex-cell { border: 1px solid var(--bs-success); diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss index 4a207ee1a4a..e5551913005 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss @@ -1,5 +1,5 @@ .ds-success { - background-color: var(--bs-success-bg); + background-color: var(--ds-success-bg); border: 1px solid var(--bs-success); } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss index 4e5e9ff1d4e..3a181fd1308 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss @@ -7,7 +7,7 @@ border: 1px solid var(--bs-gray-200); &.ds-success { - background-color: var(--bs-success-bg); + background-color: var(--ds-success-bg); border: 1px solid var(--bs-success); } } diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html index 5756ad32b0b..47e31ea7330 100644 --- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html +++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts index a610b2cb026..0a32b3a70ea 100644 --- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts +++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts @@ -1,10 +1,8 @@ -import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core'; -import { Store } from '@ngrx/store'; -import { AppState } from '../app.reducer'; -import { hasValue } from '../shared/empty.util'; -import { Observable, Subscription } from 'rxjs'; +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; import { MenuService } from '../shared/menu/menu.service'; import { MenuID } from '../shared/menu/menu-id.model'; +import { HostWindowService, WidthCategory } from '../shared/host-window.service'; /** * This component represents a wrapper for the horizontal navbar and the header @@ -14,26 +12,22 @@ import { MenuID } from '../shared/menu/menu-id.model'; styleUrls: ['header-navbar-wrapper.component.scss'], templateUrl: 'header-navbar-wrapper.component.html', }) -export class HeaderNavbarWrapperComponent implements OnInit, OnDestroy { - @HostBinding('class.open') isOpen = false; - private sub: Subscription; - public isNavBarCollapsed: Observable; +export class HeaderNavbarWrapperComponent implements OnInit { + public isNavBarCollapsed$: Observable; + public isMobile$: Observable; + menuID = MenuID.PUBLIC; + maxMobileWidth = WidthCategory.SM; constructor( - private store: Store, - private menuService: MenuService + private menuService: MenuService, + protected windowService: HostWindowService, ) { } ngOnInit(): void { - this.isNavBarCollapsed = this.menuService.isMenuCollapsed(this.menuID); - this.sub = this.isNavBarCollapsed.subscribe((isCollapsed) => this.isOpen = !isCollapsed); + this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth); + this.isNavBarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID); } - ngOnDestroy() { - if (hasValue(this.sub)) { - this.sub.unsubscribe(); - } - } } diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 32b42dc8a7c..e98959d1626 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -11,11 +11,11 @@ -
+
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 8539ca8fbfc..e002e0c3472 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -1,31 +1,31 @@ -header { - background-color: var(--ds-header-bg); -} +:host { + header { + background-color: var(--ds-header-bg); + } -.navbar-brand img { - max-height: var(--ds-header-logo-height); - max-width: 100%; - @media screen and (max-width: map-get($grid-breakpoints, sm)) { - max-height: var(--ds-header-logo-height-xs); + .navbar-brand img { + max-height: var(--ds-header-logo-height); + max-width: 100%; } -} -.navbar-toggler .navbar-toggler-icon { - background-image: none !important; - line-height: 1.5; -} + .navbar-toggler { + border: none; + color: var(--ds-header-icon-color); -.navbar-toggler { - border: none; - color: var(--ds-header-icon-color); + &:hover, &:focus { + color: var(--ds-header-icon-color-hover); + } - &:hover, &:focus { - color: var(--ds-header-icon-color-hover); + .toggler-icon { + width: 1.5em; + height: 1.5em; + line-height: 1.5; + } } -} -.navbar { - display: flex; - gap: calc(var(--bs-spacer) / 3); - align-items: center; + .navbar { + display: flex; + gap: calc(var(--bs-spacer) / 3); + align-items: center; + } } diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 5153a19be47..83694ad9b8e 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { MenuService } from '../shared/menu/menu.service'; import { MenuID } from '../shared/menu/menu-id.model'; -import { HostWindowService } from '../shared/host-window.service'; +import { HostWindowService, WidthCategory } from '../shared/host-window.service'; /** * Represents the header with the logo and simple navigation @@ -18,8 +18,10 @@ export class HeaderComponent implements OnInit { * @type {Observable} */ public isAuthenticated: Observable; - public isXsOrSm$: Observable; + public isMobile$: Observable; + menuID = MenuID.PUBLIC; + maxMobileWidth = WidthCategory.SM; constructor( protected menuService: MenuService, @@ -28,7 +30,7 @@ export class HeaderComponent implements OnInit { } ngOnInit(): void { - this.isXsOrSm$ = this.windowService.isXsOrSm(); + this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth); } public toggleNavbar(): void { diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html index 44ca82b61da..00752e7c042 100644 --- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html +++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html @@ -1,22 +1,36 @@ -
- - +
+
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss index ff48341b0f7..8849fbd8094 100644 --- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss +++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss @@ -1,47 +1,24 @@ -.expandable-navbar-section { - display: flex; - height: 100%; - flex-direction: column; - justify-content: center; -} - -.btn.nav-link { - text-align: left; - border: none; - - &:active, &:focus { - box-shadow: none !important; +:host { + .ds-menu-item-wrapper { + position: relative; // align dropdown menu with respect to this element } -} -.dropdown-menu { - background-color: var(--ds-expandable-navbar-bg); + .dropdown-menu { overflow: hidden; - min-width: 100%; - border-top-left-radius: 0; - border-top-right-radius: 0; - ::ng-deep a.nav-link { - color: var(--ds-expandable-navbar-link-color) !important; - padding-right: var(--bs-spacer); - padding-left: var(--bs-spacer); - white-space: nowrap; - - &:hover, &:focus { - color: var(--ds-expandable-navbar-link-color-hover) !important; - } + @include media-breakpoint-down(sm) { + border: 0; + background-color: var(--ds-expandable-navbar-bg); } -} - -/** Mobile menu styling **/ -@media screen and (max-width: map-get($grid-breakpoints, md)) { - .dropdown-toggle { - &:after { - float: right; - margin-top: calc(var(--bs-spacer) / 2); - } + @include media-breakpoint-up(md) { + border-top-left-radius: 0; + border-top-right-radius: 0; + background-color: var(--ds-navbar-dropdown-bg); } - .dropdown-menu { - border: 0; + } + .toggle-menu-icon { + &, &:hover { + text-decoration: none; } + } } diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts index f4c72e12375..986dca86eb1 100644 --- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts +++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts @@ -47,120 +47,138 @@ describe('ExpandableNavbarSectionComponent', () => { expect(component).toBeTruthy(); }); - describe('when the mouse enters the section header', () => { + describe('when the mouse enters the section header (while inactive)', () => { beforeEach(() => { + spyOn(component, 'onMouseEnter').and.callThrough(); + spyOn(component, 'activateSection').and.callThrough(); spyOn(menuService, 'activateSection'); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); + // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property. + spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false)); + component.ngOnInit(); + fixture.detectChanges(); + + const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]')); sidebarToggler.triggerEventHandler('mouseenter', { preventDefault: () => {/**/ } }); }); - it('should call activateSection on the menuService', () => { + it('should call onMouseEnter', () => { + expect(component.onMouseEnter).toHaveBeenCalled(); + }); + + it('should activate the section', () => { + expect(component.activateSection).toHaveBeenCalled(); expect(menuService.activateSection).toHaveBeenCalled(); }); }); - describe('when the mouse leaves the section header', () => { + describe('when the mouse leaves the section header (while active)', () => { beforeEach(() => { + spyOn(component, 'onMouseLeave').and.callThrough(); + spyOn(component, 'deactivateSection').and.callThrough(); spyOn(menuService, 'deactivateSection'); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); + // Make sure section is 'active'. Requires calling ngOnInit() to update component 'active' property. + spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(true)); + component.ngOnInit(); + component.mouseEntered = true; + fixture.detectChanges(); + + const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]')); sidebarToggler.triggerEventHandler('mouseleave', { preventDefault: () => {/**/ } }); }); - it('should call deactivateSection on the menuService', () => { + it('should call onMouseLeave', () => { + expect(component.onMouseLeave).toHaveBeenCalled(); + }); + + it('should deactivate the section', () => { + expect(component.deactivateSection).toHaveBeenCalled(); expect(menuService.deactivateSection).toHaveBeenCalled(); }); }); describe('when Enter key is pressed on section header (while inactive)', () => { beforeEach(() => { - spyOn(menuService, 'activateSection'); + spyOn(component, 'toggleSection').and.callThrough(); + spyOn(menuService, 'toggleActiveSection'); // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property. spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false)); component.ngOnInit(); fixture.detectChanges(); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); + const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]')); // dispatch the (keyup.enter) action used in our component HTML sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' })); }); it('should call activateSection on the menuService', () => { - expect(menuService.activateSection).toHaveBeenCalled(); + expect(component.toggleSection).toHaveBeenCalled(); + expect(menuService.toggleActiveSection).toHaveBeenCalled(); }); }); describe('when Enter key is pressed on section header (while active)', () => { beforeEach(() => { - spyOn(menuService, 'deactivateSection'); + spyOn(component, 'toggleSection').and.callThrough(); + spyOn(menuService, 'toggleActiveSection'); // Make sure section is 'active'. Requires calling ngOnInit() to update component 'active' property. spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(true)); component.ngOnInit(); fixture.detectChanges(); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); + const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]')); // dispatch the (keyup.enter) action used in our component HTML sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' })); }); - it('should call deactivateSection on the menuService', () => { - expect(menuService.deactivateSection).toHaveBeenCalled(); + it('should call toggleSection on the menuService', () => { + expect(component.toggleSection).toHaveBeenCalled(); + expect(menuService.toggleActiveSection).toHaveBeenCalled(); }); }); describe('when spacebar is pressed on section header (while inactive)', () => { beforeEach(() => { - spyOn(menuService, 'activateSection'); + spyOn(component, 'toggleSection').and.callThrough(); + spyOn(menuService, 'toggleActiveSection'); // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property. spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false)); component.ngOnInit(); fixture.detectChanges(); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); + const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]')); // dispatch the (keyup.space) action used in our component HTML sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' })); }); - it('should call activateSection on the menuService', () => { - expect(menuService.activateSection).toHaveBeenCalled(); + it('should call toggleSection on the menuService', () => { + expect(component.toggleSection).toHaveBeenCalled(); + expect(menuService.toggleActiveSection).toHaveBeenCalled(); }); }); describe('when spacebar is pressed on section header (while active)', () => { beforeEach(() => { - spyOn(menuService, 'deactivateSection'); + spyOn(component, 'toggleSection').and.callThrough(); + spyOn(menuService, 'toggleActiveSection'); // Make sure section is 'active'. Requires calling ngOnInit() to update component 'active' property. spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(true)); component.ngOnInit(); fixture.detectChanges(); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); + const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]')); // dispatch the (keyup.space) action used in our component HTML sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' })); }); - it('should call deactivateSection on the menuService', () => { - expect(menuService.deactivateSection).toHaveBeenCalled(); - }); - }); - - describe('when a click occurs on the section header', () => { - beforeEach(() => { - spyOn(menuService, 'toggleActiveSection'); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button')); - sidebarToggler.triggerEventHandler('click', { - preventDefault: () => {/**/ - } - }); - }); - - it('should not call toggleActiveSection on the menuService', () => { - expect(menuService.toggleActiveSection).not.toHaveBeenCalled(); + it('should call toggleSection on the menuService', () => { + expect(component.toggleSection).toHaveBeenCalled(); + expect(menuService.toggleActiveSection).toHaveBeenCalled(); }); }); }); @@ -195,7 +213,7 @@ describe('ExpandableNavbarSectionComponent', () => { describe('when the mouse enters the section header', () => { beforeEach(() => { spyOn(menuService, 'activateSection'); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button')); + const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]')); sidebarToggler.triggerEventHandler('mouseenter', { preventDefault: () => {/**/ } @@ -210,7 +228,7 @@ describe('ExpandableNavbarSectionComponent', () => { describe('when the mouse leaves the section header', () => { beforeEach(() => { spyOn(menuService, 'deactivateSection'); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button')); + const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]')); sidebarToggler.triggerEventHandler('mouseleave', { preventDefault: () => {/**/ } @@ -225,7 +243,7 @@ describe('ExpandableNavbarSectionComponent', () => { describe('when a click occurs on the section header link', () => { beforeEach(() => { spyOn(menuService, 'toggleActiveSection'); - const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button')); + const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]')); sidebarToggler.triggerEventHandler('click', { preventDefault: () => {/**/ } diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts index d32fa46a327..030b2b3da4e 100644 --- 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,10 +1,11 @@ -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'; import { first } from 'rxjs/operators'; import { HostWindowService } from '../../shared/host-window.service'; import { MenuID } from '../../shared/menu/menu-id.model'; +import { Observable } from 'rxjs'; /** * Represents an expandable section in the navbar @@ -21,12 +22,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; + + @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() { @@ -34,48 +65,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`; } } diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html index 42754be1e69..1411d3b6a69 100644 --- a/src/app/navbar/navbar-section/navbar-section.component.html +++ b/src/app/navbar/navbar-section/navbar-section.component.html @@ -1,3 +1,4 @@ -
+
diff --git a/src/app/navbar/navbar-section/navbar-section.component.scss b/src/app/navbar/navbar-section/navbar-section.component.scss index 7af4ada8e63..e69de29bb2d 100644 --- a/src/app/navbar/navbar-section/navbar-section.component.scss +++ b/src/app/navbar/navbar-section/navbar-section.component.scss @@ -1,5 +0,0 @@ -.navbar-section { - display: flex; - align-items: center; - height: 100%; -} diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html index b691cfb3f9e..bda98154813 100644 --- a/src/app/navbar/navbar.component.html +++ b/src/app/navbar/navbar.component.html @@ -1,18 +1,21 @@ -