Merge pull request #290 from Alfresco/dev-wabson-228

Search component responsiveness

demo-shell-ng2/app/app.component.css

@@ -0,0 +1,5 @@
+@media only screen and (max-width: 640px) {
+    .mdl-layout__header.header-search-expanded .mdl-layout-title {
+        display: none;
+    }
+}

demo-shell-ng2/app/app.component.html

@@ -8,7 +8,7 @@
             <div class="mdl-layout-spacer"></div>
 
             <!-- Search bar -->
-            <search-bar></search-bar>
+            <search-bar (expand)="onToggleSearch($event)"></search-bar>
 
             <!-- Navigation. We hide it in small screens. -->
             <nav class="mdl-navigation mdl-layout--large-screen-only">

demo-shell-ng2/app/app.component.ts

@@ -82,6 +82,16 @@ export class AppComponent {
             );
     }
 
+    onToggleSearch(event) {
+        let expandedHeaderClass = 'header-search-expanded',
+            header = document.querySelector('header');
+        if (event.expanded) {
+            header.classList.add(expandedHeaderClass);
+        } else {
+            header.classList.remove(expandedHeaderClass);
+        }
+    }
+
     changeLanguage(lang: string) {
         this.translate.use(lang);
     }

demo-shell-ng2/app/components/search/search-bar.component.html

@@ -1,5 +1,5 @@
 <alfresco-search-control *ngIf="isLoggedIn()" [searchTerm]="searchTerm" [autocomplete]="false"
-    (searchChange)="searchTermChange($event);"(preview)="onFileClicked($event)"></alfresco-search-control>
+    (searchChange)="searchTermChange($event);" (expand)="onExpandToggle($event);" (preview)="onFileClicked($event)"></alfresco-search-control>
 
 <alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [fileName]="fileName" [mimeType]="mimeType" [overlayMode]="true">
     <div class="mdl-spinner mdl-js-spinner is-active"></div>

demo-shell-ng2/app/components/search/search-bar.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
 import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search';
 import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
@@ -41,6 +41,9 @@ export class SearchBarComponent {
     mimeType: string;
     fileShowed: boolean = false;
 
+    @Output()
+    expand = new EventEmitter();
+
     constructor(
         public router: Router,
         public auth: AlfrescoAuthenticationService,
@@ -72,4 +75,8 @@ export class SearchBarComponent {
             this.fileShowed = true;
         }
     }
+
+    onExpandToggle(event) {
+        this.expand.emit(event);
+    }
 }

demo-shell-ng2/app/components/search/search.component.ts

@@ -36,6 +36,17 @@ declare let __moduleName: string;
         :host tbody tr {
             cursor: pointer;
         }
+        @media screen and (max-width: 600px) {
+            :host .col-display-name {
+                min-width: 100px;
+            }
+            :host .col-modified-at, :host .col-modified-by {
+                display: none;
+            }
+            :host div.search-results-container table {
+                width: 100%;
+            }
+        }
     `],
     directives: [ ALFRESCO_SEARCH_DIRECTIVES, VIEWERCOMPONENT ]
 })

ng2-components/ng2-alfresco-search/i18n/en.json

@@ -8,7 +8,7 @@
             "NONE": "No results found for {{searchTerm}}",
             "ERROR": "An error occurred while running the search",
             "COLUMNS": {
-                "NAME": "Name",
+                "NAME": "Display name",
                 "MODIFIED_BY": "Modified by",
                 "MODIFIED_AT": "Modified at"
             }

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.css

@@ -1,6 +1,6 @@
 :host {
     position: absolute;
-    z-index: 1;
+    z-index: 5;
     display: none;
     color: #555;
     margin: -21px 0px 0px 0px;
@@ -36,3 +36,12 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+@media screen and (max-width: 400px) {
+    :host {
+        right: 0;
+    }
+    .truncate{
+        width: 200px;
+    }
+}

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.css

@@ -1,3 +1,13 @@
-.search-field{
+.search-field {
     width: 267px;
 }
+@media only screen and (max-width: 400px) {
+    .search-field {
+        width: 200px;
+    }
+}
+@media only screen and (max-width: 320px) {
+    .search-field {
+        width: 160px;
+    }
+}

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html

@@ -5,7 +5,7 @@
         </label>
         <div [class]="getTextFieldHolderClassName()">
             <input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()" data-automation-id="search_input"
-                   id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus($event)"
+                   #searchInput id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus($event)"
                    (blur)="onBlur($event)">
             <label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
         </div>

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Control, Validators } from '@angular/common';
-import { Component, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
+import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit, ViewChild } from '@angular/core';
 import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component';
 
@@ -53,8 +53,13 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
     @Output()
     preview = new EventEmitter();
 
+    @Output()
+    expand = new EventEmitter();
+
     searchControl: Control;
 
+    @ViewChild('searchInput', {}) searchInput: ElementRef;
+
     @Input()
     autocompleteSearchTerm = '';
 
@@ -111,7 +116,7 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
             this.searchChange.emit({
                 value: this.searchTerm
             });
-            // this.router.navigate(['Search', term]);
+            this.searchInput.nativeElement.blur();
         }
     }
 
@@ -123,12 +128,22 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
 
     onFocus(): void {
         this.searchActive = true;
+        if (this.expandable) {
+            this.expand.emit({
+                expanded: true
+            });
+        }
     }
 
     onBlur(): void {
         window.setTimeout(() => {
             this.searchActive = false;
         }, 200);
+        if (this.expandable && (this.searchControl.value === '' || this.searchControl.value === undefined)) {
+            this.expand.emit({
+                expanded: false
+            });
+        }
     }
 
 }

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html

@@ -3,28 +3,28 @@
 <table data-automation-id="search_result_table" *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
     <thead>
     <tr>
-        <th>
+        <th class="mdl-data-table__cell--non-numeric col-mimetype-icon"></th>
-            <span class="mdl-data-table__cell--non-numeric"></span>
+        <th class="mdl-data-table__cell--non-numeric col-display-name">
+            {{'SEARCH.RESULTS.COLUMNS.NAME' | translate}}
         </th>
-        <th>
+        <th class="mdl-data-table__cell--non-numeric col-modified-by">
-            <span class="mdl-data-table__cell--non-numeric">{{'SEARCH.RESULTS.COLUMNS.NAME' | translate}}</span>
+            {{'SEARCH.RESULTS.COLUMNS.MODIFIED_BY' | translate}}
         </th>
-        <th>
+        <th class="mdl-data-table__cell--non-numeric col-modified-at">
-            <span class="mdl-data-table__cell--non-numeric">{{'SEARCH.RESULTS.COLUMNS.MODIFIED_BY' | translate}}</span>
+            {{'SEARCH.RESULTS.COLUMNS.MODIFIED_AT' | translate}}
-        </th>
-        <th>
-            <span class="mdl-data-table__cell--non-numeric">{{'SEARCH.RESULTS.COLUMNS.MODIFIED_AT' | translate}}</span>
         </th>
     </tr>
     </thead>
     <tbody>
 
     <tr *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)">
-        <td><img src="{{getMimeTypeIcon(result)}}" /></td>
+        <td class="col-mimetype-icon"><img src="{{getMimeTypeIcon(result)}}" /></td>
-        <td attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
+        <td class="mdl-data-table__cell--non-numeric col-display-name"
-        <td attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}}>
+            attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
+        <td class="mdl-data-table__cell--non-numeric  col-modified-by"
+            attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}}>
             {{result.entry.modifiedByUser.displayName}}</td>
-        <td>{{result.entry.modifiedAt | date}}</td>
+        <td class="col-modified-at">{{result.entry.modifiedAt | date}}</td>
     </tr>
 
     </tbody>

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts

@@ -26,7 +26,20 @@ declare let __moduleName: string;
 @Component({
     moduleId: __moduleName,
     selector: 'alfresco-search',
-    styles: [],
+    styles: [`
+        :host .mdl-data-table td {
+            max-width: 0;
+            white-space: nowrap;
+        }
+        :host .mdl-data-table td.col-mimetype-icon {
+            width: 24px;
+        }
+        :host .col-display-name {
+            min-width: 250px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    `],
     templateUrl: './alfresco-search.component.html',
     providers: [AlfrescoSearchService],
     pipes: [AlfrescoPipeTranslate]