diff --git a/src/app/shared/navbar/index.ts b/src/app/shared/navbar/index.ts index f5899d036..a44923a77 100644 --- a/src/app/shared/navbar/index.ts +++ b/src/app/shared/navbar/index.ts @@ -1 +1,2 @@ export * from './navbar'; +export * from './searchbar'; diff --git a/src/app/shared/navbar/navbar.html b/src/app/shared/navbar/navbar.html index 5582045af..590e37f12 100644 --- a/src/app/shared/navbar/navbar.html +++ b/src/app/shared/navbar/navbar.html @@ -8,6 +8,7 @@ Components Guides + .mat-button { - &:last-child { - margin-left: auto; - } - } } .docs-angular-logo { diff --git a/src/app/shared/navbar/searchbar/index.ts b/src/app/shared/navbar/searchbar/index.ts new file mode 100644 index 000000000..2520d4d6f --- /dev/null +++ b/src/app/shared/navbar/searchbar/index.ts @@ -0,0 +1 @@ +export * from './searchbar'; diff --git a/src/app/shared/navbar/searchbar/searchbar.html b/src/app/shared/navbar/searchbar/searchbar.html new file mode 100644 index 000000000..d6c9581e4 --- /dev/null +++ b/src/app/shared/navbar/searchbar/searchbar.html @@ -0,0 +1,16 @@ +
+ +
+ + + + {{item.name}} + + diff --git a/src/app/shared/navbar/searchbar/searchbar.scss b/src/app/shared/navbar/searchbar/searchbar.scss new file mode 100644 index 000000000..fc3ea8a0d --- /dev/null +++ b/src/app/shared/navbar/searchbar/searchbar.scss @@ -0,0 +1,62 @@ +$input-bg: #85D9E2; + +@mixin color-placeholder() { + -webkit-font-smoothing: antialiased; + color: white; +} + +:host { + position: relative; + flex: 2; + + * { + box-sizing: border-box; + } + + &.expanded .search-input-container { + width: 100%; + } + + .search-input-container { + display: block; + position: relative; + margin-left: auto; + height: 100%; + width: 200px; + transition: width .2s ease; + &:after { + content: ''; + position: absolute; + left: 15px; top: 50%; + transform: translateY(-50%); + height: 28px; + width: 28px; + background: url('../../../../assets/img/icons/ic_search_white_24px.svg') center center no-repeat; + } + } + + input { + background: $input-bg; + border: none; + border-radius: 2px; + color: white; + font-size: 18px; + height: 95%; + line-height: 95%; + padding-left: 50px; + position: relative; + transition: width .2s ease; + width: 100%; + + /* Set placeholder text to be white */ + &::-webkit-input-placeholder { @include color-placeholder(); } /* Chrome/Opera/Safari */ + &::-moz-placeholder { @include color-placeholder(); } /* Firefox 19+ */ + &:-moz-placeholder { @include color-placeholder(); } /* Firefox 18- */ + &:ms-input-placeholder { @include color-placeholder(); } /* IE 10+ */ + + &:focus { + outline: none; + } + } + +} diff --git a/src/app/shared/navbar/searchbar/searchbar.ts b/src/app/shared/navbar/searchbar/searchbar.ts new file mode 100644 index 000000000..cd6650a5a --- /dev/null +++ b/src/app/shared/navbar/searchbar/searchbar.ts @@ -0,0 +1,51 @@ +import {Component, HostBinding} from '@angular/core'; +import {Router} from '@angular/router'; +import {FormControl} from '@angular/forms'; +import {MdSnackBar} from '@angular/material'; +import {Observable} from 'rxjs'; + +import {DocumentationItems, DocItem} from '../../documentation-items/documentation-items'; + + +@Component({ + selector: 'search-bar-component', + templateUrl: './searchbar.html', + styleUrls: ['./searchbar.scss'] +}) + +export class SearchBar { + @HostBinding('class.expanded') _isExpanded = false; + public allDocItems: DocItem[]; + public filteredSuggestions: Observable; + public searchControl: FormControl = new FormControl(''); + + constructor( + private _docItems: DocumentationItems, + private _router: Router, + private _snackBar: MdSnackBar + ) { + this.allDocItems = _docItems.getAllItems(); + this.filteredSuggestions = this.searchControl.valueChanges + .startWith(null) + .map(item => this.filterSearchSuggestions(item)); + } + + public toggleIsExpanded() { + this._isExpanded = !this._isExpanded; + } + + public filterSearchSuggestions(searchTerm): DocItem[] { + return this.allDocItems.filter(item => new RegExp(`^${searchTerm}`, 'gi').test(item.name)); + } + + public navigate(searchValue) { + const category = this.allDocItems.find(item => item.name.toLowerCase() === searchValue); + category ? + this._router.navigateByUrl(`/components/component/${category.id}`) : + this._showError(); + } + + private _showError() { + this._snackBar.open('No search results found.', null, {duration: 3000}); + } +} diff --git a/src/app/shared/shared-module.ts b/src/app/shared/shared-module.ts index 77eeec4fc..b9c299542 100644 --- a/src/app/shared/shared-module.ts +++ b/src/app/shared/shared-module.ts @@ -1,9 +1,11 @@ import {NgModule} from '@angular/core'; import {HttpModule} from '@angular/http'; +import {ReactiveFormsModule} from '@angular/forms'; import {DocViewer} from './doc-viewer/doc-viewer'; import {ExampleViewer} from './example-viewer/example-viewer'; import {DocumentationItems} from './documentation-items/documentation-items'; import {NavBar} from './navbar/navbar'; +import {SearchBar} from './navbar/searchbar/searchbar'; import {MaterialModule} from '@angular/material'; import {BrowserModule} from '@angular/platform-browser'; import {RouterModule} from '@angular/router'; @@ -16,9 +18,10 @@ import {GuideItems} from './guide-items/guide-items'; HttpModule, RouterModule, BrowserModule, + ReactiveFormsModule, MaterialModule, ], - declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton], + declarations: [DocViewer, ExampleViewer, NavBar, SearchBar, PlunkerButton], exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton], providers: [DocumentationItems, GuideItems], entryComponents: [ diff --git a/src/assets/img/icons/ic_search_white_24px.svg b/src/assets/img/icons/ic_search_white_24px.svg new file mode 100644 index 000000000..9b1073e9e --- /dev/null +++ b/src/assets/img/icons/ic_search_white_24px.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file