diff --git a/e2e/search-navbar/search-navbar.e2e-spec.ts b/e2e/search-navbar/search-navbar.e2e-spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b60f71919d55d55a6fe19756b90a66b4924ca2d9
--- /dev/null
+++ b/e2e/search-navbar/search-navbar.e2e-spec.ts
@@ -0,0 +1,46 @@
+import { ProtractorPage } from './search-navbar.po';
+import { browser } from 'protractor';
+
+describe('protractor SearchNavbar', () => {
+ let page: ProtractorPage;
+ let queryString: string;
+
+ beforeEach(() => {
+ page = new ProtractorPage();
+ queryString = 'the test query';
+ });
+
+ it('should go to search page with correct query if submitted (from home)', () => {
+ page.navigateToHome();
+ return checkIfSearchWorks();
+ });
+
+ it('should go to search page with correct query if submitted (from search)', () => {
+ page.navigateToSearch();
+ return checkIfSearchWorks();
+ });
+
+ it('check if can submit search box with pressing button', () => {
+ page.navigateToHome();
+ page.expandAndFocusSearchBox();
+ page.setCurrentQuery(queryString);
+ page.submitNavbarSearchForm();
+ browser.wait(() => {
+ return browser.getCurrentUrl().then((url: string) => {
+ return url.indexOf('query=' + encodeURI(queryString)) !== -1;
+ });
+ });
+ });
+
+ function checkIfSearchWorks(): boolean {
+ page.setCurrentQuery(queryString);
+ page.submitByPressingEnter();
+ browser.wait(() => {
+ return browser.getCurrentUrl().then((url: string) => {
+ return url.indexOf('query=' + encodeURI(queryString)) !== -1;
+ });
+ });
+ return false;
+ }
+
+});
diff --git a/e2e/search-navbar/search-navbar.po.ts b/e2e/search-navbar/search-navbar.po.ts
new file mode 100644
index 0000000000000000000000000000000000000000..17112ab468acfe23c3fd6137feac022462d671ce
--- /dev/null
+++ b/e2e/search-navbar/search-navbar.po.ts
@@ -0,0 +1,40 @@
+import { browser, element, by, protractor } from 'protractor';
+import { promise } from 'selenium-webdriver';
+
+export class ProtractorPage {
+ HOME = '/home';
+ SEARCH = '/search';
+
+ navigateToHome() {
+ return browser.get(this.HOME);
+ }
+
+ navigateToSearch() {
+ return browser.get(this.SEARCH);
+ }
+
+ getCurrentQuery(): promise.Promise<string> {
+ return element(by.css('#search-navbar-container form input')).getAttribute('value');
+ }
+
+ expandAndFocusSearchBox() {
+ element(by.css('#search-navbar-container form a')).click();
+ }
+
+ setCurrentQuery(query: string) {
+ element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(query);
+ }
+
+ submitNavbarSearchForm() {
+ element(by.css('#search-navbar-container form .submit-icon')).click();
+ }
+
+ submitByPressingEnter() {
+ element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(protractor.Key.ENTER);
+ }
+
+ submitByPressingEnter() {
+ element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(protractor.Key.ENTER);
+ }
+
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 926575d711b715b85ce5c425a779556927e0753e..4b803608f396fb24c00fa9cbf73e8ba7e9b035be 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,10 +10,14 @@ import { META_REDUCERS, MetaReducer, StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { TranslateModule } from '@ngx-translate/core';
+import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
import { storeFreeze } from 'ngrx-store-freeze';
import { ENV_CONFIG, GLOBAL_CONFIG, GlobalConfig } from '../config';
+import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
+import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component';
+import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@@ -23,23 +27,20 @@ import { appMetaReducers, debugMetaReducers } from './app.metareducers';
import { appReducers, AppState } from './app.reducer';
import { CoreModule } from './core/core.module';
+import { ClientCookieService } from './core/services/client-cookie.service';
+import { JournalEntitiesModule } from './entity-groups/journal-entities/journal-entities.module';
+import { ResearchEntitiesModule } from './entity-groups/research-entities/research-entities.module';
import { FooterComponent } from './footer/footer.component';
+import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component';
import { HeaderComponent } from './header/header.component';
+import { NavbarModule } from './navbar/navbar.module';
import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
+import { SearchNavbarComponent } from './search-navbar/search-navbar.component';
import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer';
-import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component';
import { NotificationComponent } from './shared/notifications/notification/notification.component';
+import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component';
import { SharedModule } from './shared/shared.module';
-import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
-import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component';
-import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component';
-import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
-import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
-import { NavbarModule } from './navbar/navbar.module';
-import { ClientCookieService } from './core/services/client-cookie.service';
-import { JournalEntitiesModule } from './entity-groups/journal-entities/journal-entities.module';
-import { ResearchEntitiesModule } from './entity-groups/research-entities/research-entities.module';
export function getConfig() {
return ENV_CONFIG;
@@ -112,7 +113,8 @@ const DECLARATIONS = [
FooterComponent,
PageNotFoundComponent,
NotificationComponent,
- NotificationsBoardComponent
+ NotificationsBoardComponent,
+ SearchNavbarComponent,
];
const EXPORTS = [
@@ -128,7 +130,7 @@ const EXPORTS = [
...PROVIDERS
],
declarations: [
- ...DECLARATIONS
+ ...DECLARATIONS,
],
exports: [
...EXPORTS
diff --git a/src/app/community-list-page/community-list-adapter.ts b/src/app/community-list-page/community-list-adapter.ts
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index a03fd01c533919d34b63804290e639060fd2b0bb..58f7cb1ecff884fa114d289efdb9d7d45d5e876e 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,20 +1,20 @@
<header>
- <div class="container">
- <a class="navbar-brand my-2" routerLink="/home">
- <img src="assets/images/dspace-logo.svg"/>
- </a>
+ <div class="container">
+ <a class="navbar-brand my-2" routerLink="/home">
+ <img src="assets/images/dspace-logo.svg"/>
+ </a>
- <nav class="navbar navbar-light navbar-expand-md float-right px-0">
- <a routerLink="/search" class="px-1"><i class="fas fa-search fa-lg fa-fw" [title]="'nav.search' | translate"></i></a>
- <ds-lang-switch></ds-lang-switch>
- <ds-auth-nav-menu></ds-auth-nav-menu>
- <div class="pl-2">
- <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
- aria-controls="collapsingNav"
- aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
- </button>
- </div>
- </nav>
- </div>
+ <nav class="navbar navbar-light navbar-expand-md float-right px-0">
+ <ds-search-navbar></ds-search-navbar>
+ <ds-lang-switch></ds-lang-switch>
+ <ds-auth-nav-menu></ds-auth-nav-menu>
+ <div class="pl-2">
+ <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
+ aria-controls="collapsingNav"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+ </button>
+ </div>
+ </nav>
+ </div>
</header>
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..13d792c80f70daad144d06e01758c8b5a773b3e2
--- /dev/null
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -0,0 +1,12 @@
+<div id="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+ <div class="d-inline-block position-relative">
+ <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on">
+ <input #searchInput [@toggleAnimation]="isExpanded" id="query" name="query"
+ formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
+ class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1">
+ <a class="sticky-top submit-icon" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()">
+ <em class="fas fa-search fa-lg fa-fw"></em>
+ </a>
+ </form>
+ </div>
+</div>
diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3606c47afcb6fe957b0acfb7d5c36ce13e8872e6
--- /dev/null
+++ b/src/app/search-navbar/search-navbar.component.scss
@@ -0,0 +1,25 @@
+input[type="text"] {
+ margin-top: -0.5 * $font-size-base;
+
+ &:focus {
+ background-color: rgba(255, 255, 255, 0.5) !important;
+ }
+
+ &.collapsed {
+ opacity: 0;
+ }
+}
+
+a.submit-icon {
+ cursor: pointer;
+}
+
+
+
+@media screen and (max-width: map-get($grid-breakpoints, sm)) {
+ #query:focus {
+ max-width: 250px !important;
+ width: 40vw !important;
+ }
+}
+
diff --git a/src/app/search-navbar/search-navbar.component.spec.ts b/src/app/search-navbar/search-navbar.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2a03acd2a235466a7b79b028e683b74e0f67b67d
--- /dev/null
+++ b/src/app/search-navbar/search-navbar.component.spec.ts
@@ -0,0 +1,121 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { SearchService } from '../core/shared/search/search.service';
+import { MockTranslateLoader } from '../shared/mocks/mock-translate-loader';
+
+import { SearchNavbarComponent } from './search-navbar.component';
+
+describe('SearchNavbarComponent', () => {
+ let component: SearchNavbarComponent;
+ let fixture: ComponentFixture<SearchNavbarComponent>;
+ let mockSearchService: any;
+ let router: Router;
+ let routerStub;
+
+ beforeEach(async(() => {
+ mockSearchService = {
+ getSearchLink() {
+ return '/search';
+ }
+ };
+
+ routerStub = {
+ navigate: (commands) => commands
+ };
+ TestBed.configureTestingModule({
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ BrowserAnimationsModule,
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useClass: MockTranslateLoader
+ }
+ })],
+ declarations: [SearchNavbarComponent],
+ providers: [
+ { provide: SearchService, useValue: mockSearchService },
+ { provide: Router, useValue: routerStub }
+ ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SearchNavbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ router = (component as any).router;
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('when you click on search icon', () => {
+ beforeEach(fakeAsync(() => {
+ spyOn(component, 'expand').and.callThrough();
+ spyOn(component, 'onSubmit').and.callThrough();
+ spyOn(router, 'navigate').and.callThrough();
+ const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+ searchIcon.triggerEventHandler('click', {
+ preventDefault: () => {/**/
+ }
+ });
+ tick();
+ fixture.detectChanges();
+ }));
+
+ it('input expands', () => {
+ expect(component.expand).toHaveBeenCalled();
+ });
+
+ describe('empty query', () => {
+ describe('press submit button', () => {
+ beforeEach(fakeAsync(() => {
+ const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+ searchIcon.triggerEventHandler('click', {
+ preventDefault: () => {/**/
+ }
+ });
+ tick();
+ fixture.detectChanges();
+ }));
+ it('to search page with empty query', () => {
+ expect(component.onSubmit).toHaveBeenCalledWith({ query: '' });
+ expect(router.navigate).toHaveBeenCalled();
+ });
+ });
+ });
+
+ describe('fill in some query', () => {
+ let searchInput;
+ beforeEach(async () => {
+ await fixture.whenStable();
+ fixture.detectChanges();
+ searchInput = fixture.debugElement.query(By.css('#search-navbar-container form input'));
+ searchInput.nativeElement.value = 'test';
+ searchInput.nativeElement.dispatchEvent(new Event('input'));
+ fixture.detectChanges();
+ });
+ describe('press submit button', () => {
+ beforeEach(fakeAsync(() => {
+ const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+ searchIcon.triggerEventHandler('click', null);
+ tick();
+ fixture.detectChanges();
+ }));
+ it('to search page with query', async () => {
+ expect(component.onSubmit).toHaveBeenCalledWith({ query: 'test' });
+ expect(router.navigate).toHaveBeenCalled();
+ });
+ });
+ })
+
+ });
+});
diff --git a/src/app/search-navbar/search-navbar.component.ts b/src/app/search-navbar/search-navbar.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1bedfb73ef2296f5167430abe2e3756b921a4a59
--- /dev/null
+++ b/src/app/search-navbar/search-navbar.component.ts
@@ -0,0 +1,71 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { Router } from '@angular/router';
+import { SearchService } from '../core/shared/search/search.service';
+import { expandSearchInput } from '../shared/animations/slide';
+
+/**
+ * The search box in the header that expands on focus and collapses on focus out
+ */
+@Component({
+ selector: 'ds-search-navbar',
+ templateUrl: './search-navbar.component.html',
+ styleUrls: ['./search-navbar.component.scss'],
+ animations: [expandSearchInput]
+})
+export class SearchNavbarComponent {
+
+ // The search form
+ searchForm;
+ // Whether or not the search bar is expanded, boolean for html ngIf, string fo AngularAnimation state change
+ searchExpanded = false;
+ isExpanded = 'collapsed';
+
+ // Search input field
+ @ViewChild('searchInput') searchField: ElementRef;
+
+ constructor(private formBuilder: FormBuilder, private router: Router, private searchService: SearchService) {
+ this.searchForm = this.formBuilder.group(({
+ query: '',
+ }));
+ }
+
+ /**
+ * Expands search bar by angular animation, see expandSearchInput
+ */
+ expand() {
+ this.searchExpanded = true;
+ this.isExpanded = 'expanded';
+ this.editSearch();
+ }
+
+ /**
+ * Collapses & blurs search bar by angular animation, see expandSearchInput
+ */
+ collapse() {
+ this.searchField.nativeElement.blur();
+ this.searchExpanded = false;
+ this.isExpanded = 'collapsed';
+ }
+
+ /**
+ * Focuses on input search bar so search can be edited
+ */
+ editSearch(): void {
+ this.searchField.nativeElement.focus();
+ }
+
+ /**
+ * Submits the search (on enter or on search icon click)
+ * @param data Data for the searchForm, containing the search query
+ */
+ onSubmit(data: any) {
+ this.collapse();
+ const linkToNavigateTo = this.searchService.getSearchLink().split('/');
+ this.searchForm.reset();
+ this.router.navigate(linkToNavigateTo, {
+ queryParams: Object.assign({}, { page: 1 }, data),
+ queryParamsHandling: 'merge'
+ });
+ }
+}
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index 38bfaaddcaaa6b3aaaa4c0ba2799ee2734eed4a4..7928a25659e14fa5614509c4f3a8833177eb03cd 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -1,13 +1,4 @@
-import {
- animate,
- animateChild,
- group,
- query,
- state,
- style,
- transition,
- trigger
-} from '@angular/animations';
+import { animate, animateChild, group, query, state, style, transition, trigger } from '@angular/animations';
export const slide = trigger('slide', [
state('expanded', style({ height: '*' })),
@@ -70,3 +61,30 @@ export const slideSidebarPadding = trigger('slideSidebarPadding', [
transition('hidden <=> expanded', [animate('200ms')]),
transition('shown <=> expanded', [animate('200ms')]),
]);
+
+export const expandSearchInput = trigger('toggleAnimation', [
+ state('collapsed', style({
+ width: '30px',
+ opacity: '0'
+ })),
+ state('expanded', style({
+ width: '250px',
+ opacity: '1'
+ })),
+ transition('* => collapsed', group([
+ animate('300ms ease-in-out', style({
+ width: '30px'
+ })),
+ animate('300ms ease-in', style({
+ opacity: '0'
+ }))
+ ])),
+ transition('* => expanded', group([
+ animate('300ms ease-out', style({
+ opacity: '1'
+ })),
+ animate('300ms ease-in-out', style({
+ width: '250px'
+ }))
+ ]))
+]);