fixed issue with hostwindowservice, search filter bug, changed sidebar toggle text to pin, fixed mobile view of header

resources/i18n/en.json

@@ -213,7 +213,8 @@
     },
     "sidebar": {
       "section": {
-        "toggle": "Toggle sidebar",
+        "pin": "Pin sidebar",
+        "unpin": "Unpin sidebar",
         "new": "New",
         "new_community": "Community",
         "new_collection": "Collection",

src/app/+admin/admin-sidebar/admin-sidebar.component.html

@@ -39,7 +39,8 @@
                 <a class="nav-item nav-link sidebar-section"
                    href="#"
                    (click)="toggle($event)">
-                    <span class="section-header-text">{{'admin.sidebar.section.toggle' | translate }}</span>
+                    <span *ngIf="menuCollapsed | async" class="section-header-text">{{'admin.sidebar.section.pin' | translate }}</span>
+                    <span *ngIf="!(menuCollapsed | async)" class="section-header-text">{{'admin.sidebar.section.unpin' | translate }}</span>
                 </a>
             </div>
         </div>

src/app/+admin/admin-sidebar/admin-sidebar.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
 import { ChangeDetectionStrategy, Injector, NO_ERRORS_SCHEMA } from '@angular/core';
@@ -117,25 +117,26 @@ describe('AdminSidebarComponent', () => {
   });
 
   describe('when the the mouse enters the nav tag', () => {
-    beforeEach(() => {
+    it('should call expandPreview on the menuService after 100ms', fakeAsync(() => {
       spyOn(menuService, 'expandMenuPreview');
       const sidebarToggler = fixture.debugElement.query(By.css('nav.navbar'));
       sidebarToggler.triggerEventHandler('mouseenter', {preventDefault: () => {/**/}});
-    });
-
-    it('should call expandPreview on the menuService', () => {
+      tick(99);
+      expect(menuService.expandMenuPreview).not.toHaveBeenCalled();
+      tick(1);
       expect(menuService.expandMenuPreview).toHaveBeenCalled();
-    });
+    }));
   });
+
   describe('when the the mouse leaves the nav tag', () => {
-    beforeEach(() => {
+    it('should call collapseMenuPreview on the menuService after 400ms', fakeAsync(() => {
       spyOn(menuService, 'collapseMenuPreview');
       const sidebarToggler = fixture.debugElement.query(By.css('nav.navbar'));
       sidebarToggler.triggerEventHandler('mouseleave', {preventDefault: () => {/**/}});
-    });
-
-    it('should call collapseMenuPreview on the menuService', () => {
+      tick(399);
+      expect(menuService.collapseMenuPreview).not.toHaveBeenCalled();
+      tick(1);
       expect(menuService.collapseMenuPreview).toHaveBeenCalled();
-    });
+    }));
   });
 });

src/app/+logout-page/logout-page.component.html

@@ -1,6 +1,6 @@
 <div class="container w-100 h-100">
   <div class="text-center mt-5 row justify-content-md-center">
-    <div>
+    <div class="mx-auto">
       <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
       <h1 class="h3 mb-0 font-weight-normal">{{"logout.form.header" | translate}}</h1>
       <ds-log-out></ds-log-out>

src/app/+search-page/search-filters/search-filter/search-filter.component.scss

@@ -3,8 +3,9 @@
 
 :host {
     border: 1px solid map-get($theme-colors, light);
-    .search-filter-wrapper.closed {
-        overflow: hidden;
+    overflow: hidden;
+    .search-filter-wrapper:not(.closed) {
+        overflow: visible;
     }
     .filter-toggle {
         line-height: $line-height-base;

src/app/+search-page/search-filters/search-filter/search-filter.component.ts

@@ -89,7 +89,7 @@ export class SearchFilterComponent implements OnInit {
    * @param event The animation event
    */
   finishSlide(event: any): void {
-    if (event.fromState === 'collapsed') {
+    if (event.fromState === 'void') {
       this.collapsed = false;
     }
   }
@@ -99,7 +99,7 @@ export class SearchFilterComponent implements OnInit {
    * @param event The animation event
    */
   startSlide(event: any): void {
-    if (event.toState === 'collapsed') {
+    if (event.toState === 'void') {
       this.collapsed = true;
     }
   }

src/app/app.component.ts

@@ -75,6 +75,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
+
     const env: string = this.config.production ? 'Production' : 'Development';
     const color: string = this.config.production ? 'red' : 'green';
     console.info(`Environment: %c${env}`, `color: ${color}; font-weight: bold;`);

src/app/header/header.component.scss

@@ -2,6 +2,9 @@
 
 .navbar-brand img {
     height: $header-logo-height;
+    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+        height: $header-logo-height-xs;
+    }
 }
 .navbar-toggler .navbar-toggler-icon {
     background-image: none !important;

src/app/navbar/navbar.component.scss

@@ -30,11 +30,9 @@ nav.navbar {
 .navbar-expand-md.navbar-container {
     @media screen and (max-width: map-get($grid-breakpoints, md)) {
         > .container {
-            padding-left: $spacer;
-            padding-right: $spacer;
+            padding: 0 $spacer;
         }
-        padding-left: 0;
-        padding-right: 0;
+        padding: 0;
     }
 }
 

src/app/shared/host-window.service.ts

@@ -29,7 +29,8 @@ export class HostWindowService {
     private variableService: CSSVariableService
   ) {
     /* See _exposed_variables.scss */
-    variableService.getAllVariables().pipe(first()).subscribe((variables) => {
+    variableService.getAllVariables()
+      .subscribe((variables) => {
       this.breakPoints.XL_MIN = parseInt(variables.xlMin, 10);
       this.breakPoints.LG_MIN = parseInt(variables.lgMin, 10);
       this.breakPoints.MD_MIN = parseInt(variables.mdMin, 10);

src/app/shared/menu/menu.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
 import { ChangeDetectionStrategy, Injector, NO_ERRORS_SCHEMA } from '@angular/core';
@@ -67,22 +67,24 @@ describe('MenuComponent', () => {
   });
 
   describe('expandPreview', () => {
-    beforeEach(() => {
+    it('should trigger the expandPreview function on the menu service after 100ms', fakeAsync(() => {
       spyOn(menuService, 'expandMenuPreview');
       comp.expandPreview(new Event('click'));
-    });
-    it('should trigger the expandPreview function on the menu service', () => {
+      tick(99);
+      expect(menuService.expandMenuPreview).not.toHaveBeenCalled();
+      tick(1);
       expect(menuService.expandMenuPreview).toHaveBeenCalledWith(comp.menuID);
-    })
+    }))
   });
 
   describe('collapsePreview', () => {
-    beforeEach(() => {
+    it('should trigger the collapsePreview function on the menu service after 400ms', fakeAsync(() => {
       spyOn(menuService, 'collapseMenuPreview');
       comp.collapsePreview(new Event('click'));
-    });
-    it('should trigger the collapsePreview function on the menu service', () => {
+      tick(399);
+      expect(menuService.collapseMenuPreview).not.toHaveBeenCalled();
+      tick(1);
       expect(menuService.collapseMenuPreview).toHaveBeenCalledWith(comp.menuID);
-    })
+    }))
   });
 });

src/app/shared/menu/menu.component.ts

@@ -5,8 +5,10 @@ import { MenuID } from '../../shared/menu/initial-menus-state';
 import { MenuSection } from '../../shared/menu/menu.reducer';
 import { first, map } from 'rxjs/operators';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { hasValue } from '../empty.util';
 import { MenuSectionComponent } from './menu-section/menu-section.component';
 import { getComponentForMenu } from './menu-section.decorator';
+import Timer = NodeJS.Timer;
 
 /**
  * A basic implementation of a MenuComponent
@@ -56,6 +58,11 @@ export class MenuComponent implements OnInit {
    */
   changeDetection: ChangeDetectionStrategy.OnPush;
 
+  /**
+   * Timer to briefly delay the sidebar preview from opening or closing
+   */
+  private previewTimer: Timer;
+
   constructor(protected menuService: MenuService, protected injector: Injector) {
   }
 
@@ -108,7 +115,7 @@ export class MenuComponent implements OnInit {
    */
   expandPreview(event: Event) {
     event.preventDefault();
-    this.menuService.expandMenuPreview(this.menuID);
+    this.previewToggleDebounce(() => this.menuService.expandMenuPreview(this.menuID), 100);
   }
 
   /**
@@ -117,7 +124,20 @@ export class MenuComponent implements OnInit {
    */
   collapsePreview(event: Event) {
     event.preventDefault();
-    this.menuService.collapseMenuPreview(this.menuID);
+    this.previewToggleDebounce(() => this.menuService.collapseMenuPreview(this.menuID), 400);
+  }
+
+  /**
+   * delay the handler function by the given amount of time
+   *
+   * @param {Function} handler The function to delay
+   * @param {number} ms The amount of ms to delay the handler function by
+   */
+  private previewToggleDebounce(handler: () => void, ms: number): void {
+    if (hasValue(this.previewTimer)) {
+      clearTimeout(this.previewTimer);
+    }
+    this.previewTimer = setTimeout(handler, ms);
   }
 
   /**

src/styles/_custom_variables.scss

@@ -14,6 +14,7 @@ $nav-z-index: 10;
 $sidebar-z-index: 20;
 
 $header-logo-height: 80px;
+$header-logo-height-xs: 50px;
 
 $admin-sidebar-bg: $dark;
 $admin-sidebar-active-bg: darken($dark, 3%);