diff options
Diffstat (limited to 'catalog-ui/src/app/ng2')
9 files changed, 174 insertions, 6 deletions
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts index 09b40e920f..57adb8fd66 100644 --- a/catalog-ui/src/app/ng2/app.module.ts +++ b/catalog-ui/src/app/ng2/app.module.ts @@ -40,6 +40,8 @@ import {ComponentInstanceServiceNg2} from "./services/component-instance-service import { InterceptorService } from 'ng2-interceptors'; import { XHRBackend, RequestOptions } from '@angular/http'; import {HttpInterceptor} from "./services/http.interceptor.service"; +import { SearchBarComponent } from './shared/search-bar/search-bar.component'; +import { SearchWithAutoCompleteComponent } from './shared/search-with-autocomplete/search-with-autocomplete.component'; export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); @@ -60,7 +62,9 @@ export function interceptorFactory(xhrBackend: XHRBackend, requestOptions: Reque @NgModule({ declarations: [ - AppComponent + AppComponent, + SearchBarComponent, + SearchWithAutoCompleteComponent ], imports: [ BrowserModule, @@ -70,7 +74,7 @@ export function interceptorFactory(xhrBackend: XHRBackend, requestOptions: Reque PropertiesAssignmentModule ], exports: [], - entryComponents: [], + entryComponents: [SearchWithAutoCompleteComponent], providers: [ DataTypesServiceProvider, SharingServiceProvider, diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less index 05378f0eb9..89c7287449 100644 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less @@ -85,7 +85,7 @@ border-right:#d2d2d2 solid 1px; } &.col1 { - flex: 0 0 300px; + flex: 1 0 200px; max-width:300px; display: flex; justify-content: space-between; diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less index 3eb7e960ab..9ede84faff 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less @@ -91,7 +91,7 @@ border-right:#d2d2d2 solid 1px; } &.col1 { - flex: 0 0 300px; + flex: 1 0 210px; max-width:300px; display: flex; justify-content: space-between; @@ -100,7 +100,7 @@ .property-name { flex: 1; display: flex; - max-width: 270px; + max-width: 90%; } .property-description-icon { @@ -123,7 +123,7 @@ } &.valueCol { - flex: 1 0 350px; + flex: 2 0 300px; display: flex; @media @smaller-screen { flex: 1 0 40%;} } diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html new file mode 100644 index 0000000000..36629594b0 --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html @@ -0,0 +1,5 @@ +<div class="search-bar-container {{class}}"> + <input class="search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/> + <span class="clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span> + <button class="search-bar-button" (click)="searchButtonClick()"></button> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less new file mode 100644 index 0000000000..cfeb8d3b01 --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less @@ -0,0 +1,58 @@ +.search-bar-container { + display:flex; + border-radius: 4px; + box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29); + + .search-bar-input { + border: 1px solid #cdcdcd; + border-radius: 4px; + border-right:none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + outline:none; + padding:2px 50px 2px 10px; + color: #5a5a5a; + font-size: 1em; + font-style: italic; + } + + .clear-search-x { + position:absolute; + right:40px; + top:5px; + padding: 0 5px; + + &:hover { + border-radius:2px; + background-color: #ebebeb; + cursor:pointer; + } + } + + .search-bar-button { + //background: url('../../../../assets/styles/svg/source/search-magnify.svg') no-repeat 50%; + background: url('../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px; + background-color: rgba(234, 234, 234, 0.88); + width: 30px; + height: 30px; + padding: 0; + cursor:pointer; + border:solid 1px #cdcdcd; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + + &:hover { + background-position:-126px -1275px; + } + + &:active { + background-color: rgba(31, 171, 223, 0.88); + background-position:-45px -1275px; + border-left:none; + } + &:focus { + outline:none; + } + + } +} diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts new file mode 100644 index 0000000000..2835d20ba4 --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts @@ -0,0 +1,30 @@ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'search-bar', + templateUrl: './search-bar.component.html', + styleUrls: ['./search-bar.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class SearchBarComponent { + + @Input() placeholder: string; + @Input() class: string; + @Input() searchQuery: string; + @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>(); + @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>(); + + searchButtonClick = (): void => { + this.searchButtonClicked.emit(this.searchQuery); + } + + searchQueryChange = ($event): void => { + this.searchChanged.emit($event); + } + + private clearSearchQuery = (): void => { + this.searchQuery = ""; + this.searchButtonClick(); + } +} + diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html new file mode 100644 index 0000000000..c9769ba5ae --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html @@ -0,0 +1,6 @@ +<div class="search-with-autocomplete-container {{searchBarClass}}" [class.autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length"> + <search-bar [placeholder]="searchPlaceholder" [searchQuery]="searchQuery" (searchButtonClicked)="updateSearch($event)" (searchChanged)="searchChange($event)"></search-bar> + <div class="autocomplete-results"> + <div *ngFor="let item of autoCompleteValues" class="autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div> + </div> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less new file mode 100644 index 0000000000..92b054cd85 --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less @@ -0,0 +1,35 @@ + +.search-with-autocomplete-container{ + &.autocomplete-visible { + + .search-bar-input { + border-bottom-left-radius: 0; + } + .search-bar-button { + border-bottom-right-radius: 0; + } + .autocomplete-results { + border: solid 1px #d2d2d2; + border-top:none; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + background-color: #fff; + padding: 10px 20px; + width:100%; + position:absolute; + max-height: 200px; + overflow-y: scroll; + } + + .autocomplete-result-item { + color:#5a5a5a; + padding: 5px 0; + cursor:pointer; + + &:hover { + color: #999; + } + } + } +} + diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts new file mode 100644 index 0000000000..ced056d1fc --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts @@ -0,0 +1,30 @@ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +import { SearchBarComponent } from '../search-bar/search-bar.component'; + +@Component({ + selector: 'search-with-autocomplete', + templateUrl: './search-with-autocomplete.component.html', + styleUrls: ['./search-with-autocomplete.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class SearchWithAutoCompleteComponent { + + @Input() searchPlaceholder: string; + @Input() searchBarClass: string; + @Input() searchQuery: string; + @Input() autoCompleteValues: Array<string>; + @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>(); + @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>(); + + searchChange = (searchTerm: string) => { + this.searchQuery = searchTerm; + this.searchChanged.emit(searchTerm); + } + + updateSearch = (searchTerm: string) => { + this.searchQuery = searchTerm; + this.searchButtonClicked.emit(searchTerm); + this.autoCompleteValues = []; + } +} + |