-
+
0">
@@ -41,7 +41,7 @@
{{ 'addon.messages.you' | translate }}
-
+
diff --git a/src/addon/messages/pages/search/search.ts b/src/addon/messages/pages/search/search.ts
index 892b26c28..14d5b6ab1 100644
--- a/src/addon/messages/pages/search/search.ts
+++ b/src/addon/messages/pages/search/search.ts
@@ -175,17 +175,20 @@ export class AddonMessagesSearchPage implements OnDestroy {
if (!loadMore || loadMore == 'contacts') {
this.contacts.results.push(...newContacts);
this.contacts.canLoadMore = canLoadMoreContacts;
+ this.setHighlight(newContacts, true);
}
if (!loadMore || loadMore == 'noncontacts') {
this.nonContacts.results.push(...newNonContacts);
this.nonContacts.canLoadMore = canLoadMoreNonContacts;
+ this.setHighlight(newNonContacts, true);
}
if (!loadMore || loadMore == 'messages') {
this.messages.results.push(...newMessages);
this.messages.canLoadMore = canLoadMoreMessages;
this.messages.loadMoreError = false;
+ this.setHighlight(newMessages, false);
}
if (!loadMore) {
@@ -238,6 +241,19 @@ export class AddonMessagesSearchPage implements OnDestroy {
}
}
+ /**
+ * Set the highlight values for each entry.
+ *
+ * @param {any[]} results Results to highlight.
+ * @param {boolean} isUser Whether the results are from a user search or from a message search.
+ */
+ setHighlight(results: any[], isUser: boolean): void {
+ results.forEach((result) => {
+ result.highlightName = isUser ? this.query : undefined;
+ result.highlightMessage = !isUser ? this.query : undefined;
+ });
+ }
+
/**
* Component destroyed.
*/
diff --git a/src/app/app.scss b/src/app/app.scss
index f9c07d4f9..9c1b3803b 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -1050,6 +1050,11 @@ ion-modal,
contain: size layout style;
}
+// Highlight text.
+.matchtext {
+ background-color: lighten($blue, 40%);
+}
+
// Styles for desktop apps only.
ion-app.platform-desktop {
video::-webkit-media-text-track-display {
diff --git a/src/directives/format-text.ts b/src/directives/format-text.ts
index d840c8a84..df0a5aeb1 100644
--- a/src/directives/format-text.ts
+++ b/src/directives/format-text.ts
@@ -55,6 +55,7 @@ export class CoreFormatTextDirective implements OnChanges {
// If you want to avoid this use class="inline" at the same time to use display: inline-block.
@Input() fullOnClick?: boolean | string; // Whether it should open a new page with the full contents on click.
@Input() fullTitle?: string; // Title to use in full view. Defaults to "Description".
+ @Input() highlight?: string; // Text to highlight.
@Output() afterRender?: EventEmitter