Mobile 3281

src/addon/messages/components/components.module.ts

@@ -19,6 +19,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { CorePipesModule } from '@pipes/pipes.module';
+import { CoreSearchComponentsModule } from '@core/search/components/components.module';
 import { AddonMessagesDiscussionsComponent } from '../components/discussions/discussions';
 import { AddonMessagesConfirmedContactsComponent } from '../components/confirmed-contacts/confirmed-contacts';
 import { AddonMessagesContactRequestsComponent } from '../components/contact-requests/contact-requests';
@@ -37,7 +38,8 @@ import { AddonMessagesContactsComponent } from '../components/contacts/contacts'
         TranslateModule.forChild(),
         CoreComponentsModule,
         CoreDirectivesModule,
-        CorePipesModule
+        CorePipesModule,
+        CoreSearchComponentsModule,
     ],
     providers: [
     ],

src/addon/messages/components/contacts/addon-messages-contacts.html

@@ -3,7 +3,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch($event)" [placeholder]=" 'addon.messages.contactname' | translate" autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded"></core-search-box>
+    <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch($event)" [placeholder]=" 'addon.messages.contactname' | translate" autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded" searchArea="AddonMessagesContacts"></core-search-box>
 
     <core-loading [hideUntil]="loaded" [message]="loadingMessage">
         <core-empty-box *ngIf="!hasContacts && searchString == ''" icon="person" [message]="'addon.messages.contactlistempty' | translate"></core-empty-box>

src/addon/messages/components/discussions/addon-messages-discussions.html

@@ -3,7 +3,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-search-box *ngIf="search.enabled" (onSubmit)="searchMessage($event)" (onClear)="clearSearch($event)" [placeholder]=" 'addon.messages.message' | translate" autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded"></core-search-box>
+    <core-search-box *ngIf="search.enabled" (onSubmit)="searchMessage($event)" (onClear)="clearSearch($event)" [placeholder]=" 'addon.messages.message' | translate" autocorrect="off" spellcheck="false" lengthCheck="2" [disabled]="!loaded" searchArea="AddonMessagesDiscussions"></core-search-box>
 
     <core-loading [hideUntil]="loaded" [message]="loadingMessage">
 

src/addon/messages/pages/search/search.html

@@ -9,7 +9,7 @@
 </ion-header>
 <core-split-view>
     <ion-content>
-        <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch($event)" [disabled]="disableSearch" autocorrect="off" [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1"></core-search-box>
+        <core-search-box (onSubmit)="search($event)" (onClear)="clearSearch($event)" [disabled]="disableSearch" autocorrect="off" [spellcheck]="false" [autoFocus]="true" [lengthCheck]="1"  searchArea="AddonMessagesSearch"></core-search-box>
         <core-loading [hideUntil]="!displaySearching" [message]="'core.searching' | translate">
             <ion-list *ngIf="displayResults">
                 <ng-container *ngTemplateOutlet="resultsTemplate; context: {item: contacts}"></ng-container>

src/addon/messages/pages/search/search.module.ts

@@ -19,6 +19,7 @@ import { AddonMessagesSearchPage } from './search';
 import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { CorePipesModule } from '@pipes/pipes.module';
+import { CoreSearchComponentsModule } from '@core/search/components/components.module';
 import { AddonMessagesComponentsModule } from '../../components/components.module';
 
 @NgModule({
@@ -29,9 +30,10 @@ import { AddonMessagesComponentsModule } from '../../components/components.modul
         CoreComponentsModule,
         CoreDirectivesModule,
         CorePipesModule,
+        CoreSearchComponentsModule,
         AddonMessagesComponentsModule,
         IonicPageModule.forChild(AddonMessagesSearchPage),
-        TranslateModule.forChild()
+        TranslateModule.forChild(),
     ],
 })
 export class AddonMessagesSearchPageModule {}

src/addon/mod/glossary/components/components.module.ts

@@ -20,6 +20,7 @@ import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { CorePipesModule } from '@pipes/pipes.module';
 import { CoreCourseComponentsModule } from '@core/course/components/components.module';
+import { CoreSearchComponentsModule } from '@core/search/components/components.module';
 import { AddonModGlossaryIndexComponent } from './index/index';
 import { AddonModGlossaryModePickerPopoverComponent } from './mode-picker/mode-picker';
 
@@ -35,7 +36,8 @@ import { AddonModGlossaryModePickerPopoverComponent } from './mode-picker/mode-p
         CoreComponentsModule,
         CoreDirectivesModule,
         CorePipesModule,
-        CoreCourseComponentsModule
+        CoreCourseComponentsModule,
+        CoreSearchComponentsModule,
     ],
     providers: [
     ],

src/addon/mod/glossary/components/index/addon-mod-glossary-index.html

@@ -29,7 +29,7 @@
             <ion-icon name="warning"></ion-icon> {{ 'core.hasdatatosync' | translate:{$a: moduleName} }}
         </ion-card>
 
-        <core-search-box *ngIf="viewMode == 'search'" (onSubmit)="search($event)" [placeholder]="'addon.mod_glossary.searchquery' | translate" [autoFocus]="true" [lengthCheck]="2" [showClear]="false"></core-search-box>
+        <core-search-box *ngIf="viewMode == 'search'" (onSubmit)="search($event)" [placeholder]="'addon.mod_glossary.searchquery' | translate" [autoFocus]="true" [lengthCheck]="2" [showClear]="false" searchArea="AddonModGlossary-{{module.id}}"></core-search-box>
 
         <core-loading [hideUntil]="loaded" class="core-loading-center">
 

src/app/app.module.ts

@@ -87,6 +87,7 @@ import { CoreRatingModule } from '@core/rating/rating.module';
 import { CoreTagModule } from '@core/tag/tag.module';
 import { CoreFilterModule } from '@core/filter/filter.module';
 import { CoreH5PModule } from '@core/h5p/h5p.module';
+import { CoreSearchModule } from '@core/search/search.module';
 
 // Addon modules.
 import { AddonBadgesModule } from '@addon/badges/badges.module';
@@ -235,6 +236,7 @@ export const WP_PROVIDER: any = null;
         CoreTagModule,
         CoreFilterModule,
         CoreH5PModule,
+        CoreSearchModule,
         AddonBadgesModule,
         AddonBlogModule,
         AddonCalendarModule,

src/app/app.scss

@@ -112,13 +112,15 @@ ion-app.app-root {
     @include core-selected-item($core-splitview-selected);
   }
 
-  // Recover borders on items inside cards.
+  // Recover borders on items inside cards and lists.
   .card.with-borders .core-as-item,
+  .list.with-borders .core-as-item,
   .core-as-item {
     @include core-as-items();
   }
 
-  .card.with-borders .item {
+  .card.with-borders .item,
+  .list.with-borders .item {
     @include core-items();
   }
 

src/components/components.module.ts

@@ -25,7 +25,6 @@ import { CoreSplitViewComponent } from './split-view/split-view';
 import { CoreIframeComponent } from './iframe/iframe';
 import { CoreProgressBarComponent } from './progress-bar/progress-bar';
 import { CoreEmptyBoxComponent } from './empty-box/empty-box';
-import { CoreSearchBoxComponent } from './search-box/search-box';
 import { CoreFileComponent } from './file/file';
 import { CoreFilesComponent } from './files/files';
 import { CoreIconComponent } from './icon/icon';
@@ -66,7 +65,6 @@ import { CoreBSTooltipComponent } from './bs-tooltip/bs-tooltip';
         CoreIframeComponent,
         CoreProgressBarComponent,
         CoreEmptyBoxComponent,
-        CoreSearchBoxComponent,
         CoreFileComponent,
         CoreFilesComponent,
         CoreIconComponent,
@@ -118,7 +116,6 @@ import { CoreBSTooltipComponent } from './bs-tooltip/bs-tooltip';
         CoreIframeComponent,
         CoreProgressBarComponent,
         CoreEmptyBoxComponent,
-        CoreSearchBoxComponent,
         CoreFileComponent,
         CoreFilesComponent,
         CoreIconComponent,

src/core/courses/pages/search/search.html

@@ -4,7 +4,7 @@
     </ion-navbar>
 </ion-header>
 <ion-content>
-    <core-search-box (onSubmit)="search($event)" [placeholder]="'core.courses.search' | translate" [searchLabel]="'core.courses.search' | translate" autoFocus="true" showClear="false"></core-search-box>
+    <core-search-box (onSubmit)="search($event)" [placeholder]="'core.courses.search' | translate" [searchLabel]="'core.courses.search' | translate" autoFocus="true" showClear="false" searchArea="CoreCoursesSearch"></core-search-box>
 
     <div *ngIf="courses">
         <ion-item-divider>{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider>

src/core/courses/pages/search/search.module.ts

@@ -18,6 +18,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { CoreCoursesSearchPage } from './search';
 import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
+import { CoreSearchComponentsModule } from '@core/search/components/components.module';
 import { CoreCoursesComponentsModule } from '../../components/components.module';
 
 @NgModule({
@@ -28,8 +29,9 @@ import { CoreCoursesComponentsModule } from '../../components/components.module'
         CoreComponentsModule,
         CoreDirectivesModule,
         CoreCoursesComponentsModule,
+        CoreSearchComponentsModule,
         IonicPageModule.forChild(CoreCoursesSearchPage),
-        TranslateModule.forChild()
+        TranslateModule.forChild(),
     ],
 })
 export class CoreCoursesSearchPageModule {}

src/core/search/components/components.module.ts

@@ -0,0 +1,43 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from 'ionic-angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreSearchBoxComponent } from './search-box/search-box';
+import { CoreDirectivesModule } from '@directives/directives.module';
+import { CoreComponentsModule } from '@components/components.module';
+
+@NgModule({
+    declarations: [
+        CoreSearchBoxComponent,
+    ],
+    imports: [
+        CommonModule,
+        IonicModule,
+        TranslateModule.forChild(),
+        CoreDirectivesModule,
+        CoreComponentsModule,
+    ],
+    providers: [
+    ],
+    exports: [
+        CoreSearchBoxComponent,
+    ],
+    entryComponents: [
+        CoreSearchBoxComponent,
+    ]
+})
+export class CoreSearchComponentsModule {}

src/components/search-box/core-search-box.html → src/core/search/components/search-box/core-search-box.html

@@ -1,13 +1,21 @@
 <ion-card>
     <form #f="ngForm" (ngSubmit)="submitForm($event)" role="search">
         <ion-item>
-            <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox"></ion-input>
+            <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (focus)="showHistory()" (blur)="hideHistory()"></ion-input>
             <button item-end ion-button clear icon-only type="submit" class="button-small" [attr.aria-label]="searchLabel" [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
                 <ion-icon name="search"></ion-icon>
             </button>
-            <button *ngIf="showClear" item-end ion-button clear icon-only class="button-small" [attr.aria-label]="'core.clearsearch' | translate" [disabled]="!searched || disabled" (click)="clearForm()">
+            <button *ngIf="showClear" item-end ion-button clear icon-only class="button-small" [attr.aria-label]="'core.clearsearch' | translate" [disabled]="searched == '' || disabled" (click)="clearForm()">
                 <ion-icon name="close"></ion-icon>
             </button>
         </ion-item>
+        <div class="core-search-history" *ngIf="historyShown && history.length">
+            <ion-list class="with-borders">
+                <ion-item text-wrap *ngFor="let item of history" (mousedown)="itemMouseDown($event, item.searchedtext)" (mouseup)="itemMouseUp($event, item.searchedtext)" class="core-clickable">
+                    <core-icon name="fa-history" item-start></core-icon>
+                    {{item.searchedtext}}
+                </ion-item>
+            </ion-list>
+        </div>
     </form>
 </ion-card>

src/components/search-box/search-box.scss → src/core/search/components/search-box/search-box.scss

@@ -1,4 +1,12 @@
 ion-app.app-root core-search-box {
+    height: 65px;
+    display: block;
+
+    ion-card {
+        position: absolute;
+        z-index: 4;
+    }
+
     .button.item-button[icon-only] {
         margin: 0;
         padding: ($content-padding / 2) $content-padding;
@@ -18,4 +26,17 @@ ion-app.app-root core-search-box {
         border: 0;
         margin: 0;
     }
+
+    .core-search-history {
+        max-height: calc(-120px + 80vh);
+        overflow-y: auto;
+
+        .item:hover {
+            background-color: $gray-lighter;
+        }
+
+        .list .item.item-block:last-child > .item-inner {
+            border-bottom: 0;
+        }
+    }
 }