-
-
+
@@ -32,7 +37,8 @@
[resultSort]="liveSearchResultSort"
[maxResults]="liveSearchMaxResults"
[highlight]="highlight"
- [ngClass]="{active: searchActive, valid: searchValid}"
+ [class.adf-active-search]="searchActive"
+ [class.adf-valid-search]="searchValid"
(fileSelect)="onFileClicked($event)"
(searchFocus)="onAutoCompleteFocus($event)"
(scrollBack)="onAutoCompleteReturn($event)"
diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss b/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
index 62fe3cc8e1..c439ad8c65 100644
--- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
+++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
@@ -1,13 +1,64 @@
-.search-field {
- width: 267px;
-}
-@media only screen and (max-width: 400px) {
- .search-field {
- width: 200px;
+@mixin mat-search-control-theme($theme) {
+ $background: map-get($theme, background);
+
+ .adf {
+
+ &-search-button.mat-button {
+ border-radius: 50%;
+ height: 32px;
+ min-width: 20px;
+ width: 32px;
+ padding: 0;
+ overflow: hidden;
+ color: inherit;
+ line-height: normal;
+ border: none;
+ }
+
+ &-search-container {
+ display: flex;
+ align-items: center;
+
+ .search-field {
+ width: 260px;
+ padding-top: 6px;
+
+ .mat-input-container {
+ width: 100%;
+ }
+
+ .mat-input-underline .mat-input-ripple {
+ background-color: mat-color($background, card);
+ }
+
+ .mat-input-element {
+ font-size: 16px;
+ }
+ }
+
+ .search-field .mat-input-infix {
+ padding: 0px;
+ }
+
+ @media only screen and (max-width: 400px) {
+ .search-field {
+ width: 200px;
+ }
+ }
+ @media only screen and (max-width: 320px) {
+ .search-field {
+ width: 160px;
+ }
+ }
+ }
+
+ &-search-form{
+ overflow: hidden;
+ }
+
+ &-active-search,
+ &-valid-search {
+ display: block;
+ }
}
-}
-@media only screen and (max-width: 320px) {
- .search-field {
- width: 160px;
- }
-}
+}
\ No newline at end of file
diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/search-control.component.spec.ts
index 24afa17eae..1f05e9bf9f 100644
--- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.spec.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.spec.ts
@@ -128,22 +128,6 @@ describe('SearchControlComponent', () => {
fixture.detectChanges();
expect(element.querySelectorAll('input[type="text"]')[0].getAttribute('autocomplete')).toBe('on');
});
-
- it('should show an expanding control by default', () => {
- fixture.detectChanges();
- expect(element.querySelectorAll('div.mdl-textfield--expandable').length).toBe(1);
- expect(element.querySelectorAll('div.mdl-textfield__expandable-holder').length).toBe(1);
- expect(element.querySelectorAll('label.mdl-button--icon').length).toBe(1);
- });
-
- it('should show a normal non-expanding control when configured', () => {
- fixture.detectChanges();
- fixture.componentInstance.expandable = false;
- fixture.detectChanges();
- expect(element.querySelectorAll('div.mdl-textfield--expandable').length).toBe(0);
- expect(element.querySelectorAll('div.mdl-textfield__expandable-holder').length).toBe(0);
- expect(element.querySelectorAll('label.mdl-button--icon').length).toBe(0);
- });
});
describe('Find as you type', () => {
@@ -172,7 +156,7 @@ describe('SearchControlComponent', () => {
window.setTimeout(() => { // wait for debounce() to complete
fixture.detectChanges();
let autocomplete: Element = element.querySelector('adf-search-autocomplete');
- expect(autocomplete.classList.contains('active')).toBe(true);
+ expect(autocomplete.classList.contains('adf-active-search')).toBe(true);
done();
}, 100);
});
@@ -202,7 +186,7 @@ describe('SearchControlComponent', () => {
window.setTimeout(() => { // wait for debounce() to complete
fixture.detectChanges();
let autocomplete: Element = element.querySelector('adf-search-autocomplete');
- expect(autocomplete.classList.contains('active')).toBe(true);
+ expect(autocomplete.classList.contains('adf-active-search')).toBe(true);
done();
}, 100);
});
@@ -229,7 +213,7 @@ describe('SearchControlComponent', () => {
}));
fixture.detectChanges();
let autocomplete: Element = element.querySelector('adf-search-autocomplete');
- expect(autocomplete.classList.contains('active')).toBe(true);
+ expect(autocomplete.classList.contains('adf-active-search')).toBe(true);
});
it('should select the first result in find-as-you-type when down arrow is pressed and FAYT is visible', (done) => {
diff --git a/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts
index 48cfafef88..2ae73ef164 100644
--- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.ts
@@ -15,7 +15,8 @@
* limitations under the License.
*/
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { Observable, Subject } from 'rxjs/Rx';
import { SearchTermValidator } from './../forms/search-term-validator';
@@ -24,7 +25,19 @@ import { SearchAutocompleteComponent } from './search-autocomplete.component';
@Component({
selector: 'adf-search-control, alfresco-search-control',
templateUrl: './search-control.component.html',
- styleUrls: ['./search-control.component.scss']
+ styleUrls: ['./search-control.component.scss'],
+ animations: [
+ trigger('transitionMessages', [
+ state('active', style({ transform: 'translateX(0%)'})),
+ state('inactive', style({ transform: 'translateX(89%)'})),
+ transition('void => active, inactive => active',
+ animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
+ transition('active => inactive, void => inactive',
+ animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
+ ])
+ ],
+ encapsulation: ViewEncapsulation.None
+
})
export class SearchControlComponent implements OnInit, OnDestroy {
@@ -34,6 +47,8 @@ export class SearchControlComponent implements OnInit, OnDestroy {
@Input()
inputType = 'text';
+// style({ transform: 'translateX(0%)'}) style({ transform: 'translateX(89%)'}),
+
@Input()
autocomplete: boolean = false;
@@ -87,6 +102,8 @@ export class SearchControlComponent implements OnInit, OnDestroy {
private focusSubject = new Subject
();
+ _subscriptAnimationState: string = 'inactive';
+
constructor() {
this.searchControl = new FormControl(
this.searchTerm,
@@ -132,14 +149,6 @@ export class SearchControlComponent implements OnInit, OnDestroy {
});
}
- getTextFieldClassName(): string {
- return 'mdl-textfield mdl-js-textfield' + (this.expandable ? ' mdl-textfield--expandable' : '');
- }
-
- getTextFieldHolderClassName(): string {
- return this.expandable ? 'search-field mdl-textfield__expandable-holder' : 'search-field';
- }
-
getAutoComplete(): string {
return this.autocomplete ? 'on' : 'off';
}
@@ -227,4 +236,9 @@ export class SearchControlComponent implements OnInit, OnDestroy {
this.setAutoCompleteDisplayed(false);
}
+ onClickSearch() {
+ this.searchActive = !this.searchActive;
+ this._subscriptAnimationState = this.searchActive ? 'active' : 'inactive';
+ }
+
}
diff --git a/ng2-components/ng2-alfresco-search/src/components/search.component.html b/ng2-components/ng2-alfresco-search/src/components/search.component.html
index 175d1db7a2..d256453210 100644
--- a/ng2-components/ng2-alfresco-search/src/components/search.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/search.component.html
@@ -1,5 +1,5 @@
+ class="adf-data-table full-width">
{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}