<ion-header> <ion-navbar core-back-button> <ion-title>{{ 'addon.messages.messages' | translate }}</ion-title> <ion-buttons end> <button ion-button icon-only (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate"> <ion-icon name="person"></ion-icon> <!-- @todo: Display number of pending requests. --> </button> <button ion-button icon-only (click)="gotoSettings($event)" [attr.aria-label]="'addon.messages.messagepreferences' | translate"> <ion-icon name="cog"></ion-icon> </button> <!-- Add an empty context menu so discussion page can add items in split view, otherwise the menu disappears in some cases. --> <core-context-menu></core-context-menu> </ion-buttons> </ion-navbar> </ion-header> <core-split-view> <ion-content> <ion-refresher [enabled]="loaded" (ionRefresh)="refreshData($event)"> <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-loading [hideUntil]="loaded" [message]="loadingMessage"> <!-- Search results. --> <ion-list *ngIf="search.showResults" no-margin> <ion-item-divider color="light"> <h2>{{ 'core.searchresults' | translate }}</h2> <ion-note item-end>{{ search.results.length }}</ion-note> </ion-item-divider> <a ion-item text-wrap *ngFor="let result of search.results" [title]="result.fullname" (click)="gotoConversation(result.conversationid, result.userid, result.messageid)" [class.core-split-item-selected]="(result.conversationid && result.conversationid == selectedConversationId) || (result.userid && result.userid == selectedUserId)" detail-none> <ion-avatar item-start> <img src="{{result.profileimageurl}}" [alt]="'core.pictureof' | translate:{$a: result.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'"> </ion-avatar> <h2> <p> <core-format-text [text]="result.fullname"></core-format-text> <core-icon name="fa-ban" *ngIf="result.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate"></core-icon> </p> <ion-note *ngIf="result.lastmessagedate > 0"> {{result.lastmessagedate | coreDateDayOrTime}} </ion-note> </h2> <p><core-format-text clean="true" singleLine="true" [text]="result.lastmessage" class="addon-message-last-message"></core-format-text></p> </a> </ion-list> <!-- Conversations. --> <ion-list *ngIf="!search.showResults"> <!-- Favourite conversations. --> <ion-item-divider color="light" text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)"> <core-icon *ngIf="!favourites.expanded" name="fa-caret-right" item-start></core-icon> <core-icon *ngIf="favourites.expanded" name="fa-caret-down" item-start></core-icon> {{ 'core.favourites' | translate }} ({{ favourites.count }}) <!-- @todo: Unread total of favourites (MDL-63913). --> </ion-item-divider> <div *ngIf="favourites.conversations && favourites.expanded"> <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: favourites.conversations}"></ng-container> <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. --> <core-infinite-loading [enabled]="favourites.canLoadMore" (action)="loadMoreConversations(favourites, $event)"></core-infinite-loading> <ion-item text-wrap *ngIf="favourites.conversations.length == 0"> <p>{{ 'addon.messages.nofavourites' | translate }}</p> </ion-item> </div> <!-- Group conversations. --> <ion-item-divider color="light" text-wrap *ngIf="group.conversations" (click)="toggle(group)"> <core-icon *ngIf="!group.expanded" name="fa-caret-right" item-start></core-icon> <core-icon *ngIf="group.expanded" name="fa-caret-down" item-start></core-icon> {{ 'addon.messages.groupmessages' | translate }} ({{ group.count }}) <!-- @todo: Unread total of group conversations (MDL-63913). --> </ion-item-divider> <div *ngIf="group.conversations && group.expanded"> <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations, avatarOptional: true}"></ng-container> <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. --> <core-infinite-loading [enabled]="group.canLoadMore" (action)="loadMoreConversations(group, $event)"></core-infinite-loading> <ion-item text-wrap *ngIf="group.conversations.length == 0"> <p>{{ 'addon.messages.nogroupmessages' | translate }}</p> </ion-item> </div> <ion-item-divider color="light" text-wrap *ngIf="individual.conversations" (click)="toggle(individual)"> <core-icon *ngIf="!individual.expanded" name="fa-caret-right" item-start></core-icon> <core-icon *ngIf="individual.expanded" name="fa-caret-down" item-start></core-icon> {{ 'addon.messages.messages' | translate }} ({{ individual.count }}) <!-- @todo: Unread total of individual conversations (MDL-63913). --> </ion-item-divider> <div *ngIf="individual.conversations && individual.expanded"> <ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: individual.conversations}"></ng-container> <!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. --> <core-infinite-loading [enabled]="individual.canLoadMore" (action)="loadMoreConversations(individual, $event)"></core-infinite-loading> <ion-item text-wrap *ngIf="individual.conversations.length == 0"> <p>{{ 'addon.messages.nomessages' | translate }}</p> </ion-item> </div> </ion-list> <!-- Search didn't get any result. --> <core-empty-box *ngIf="(!search.results || search.results.length <= 0) && search.showResults" icon="search" [message]="'core.noresults' | translate"></core-empty-box> </core-loading> </ion-content> </core-split-view> <!-- Template to render a list of conversations. --> <ng-template #conversationsTemplate let-conversations="conversations" let-avatarOptional="avatarOptional"> <a ion-item text-wrap *ngFor="let conversation of conversations" [title]="conversation.name" detail-none (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-split-item-selected]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)"> <ion-avatar item-start *ngIf="conversation.imageurl || !avatarOptional"> <img src="{{conversation.imageurl}}" [alt]="conversation.name" core-external-content onError="this.src='assets/img/user-avatar.png'"> <!-- @todo: Display connection status. <span *ngIf="conversation.showonlinestatus" class="core-primary-circle" [ngClass]='{"addon-message-contact-online": conversation.isonline}'></span> --> </ion-avatar> <h2> <p> <core-format-text [text]="conversation.name"></core-format-text> <core-icon name="fa-ban" *ngIf="conversation.isblocked" [attr.aria-label]="'addon.messages.contactblocked' | translate"></core-icon> </p> <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount"> <ion-badge *ngIf="conversation.unreadcount > 0">{{ conversation.unreadcount }}</ion-badge> <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span> </ion-note> </h2> <p><core-format-text *ngIf="conversation.subname" [text]="conversation.subname"></core-format-text></p> <p> <span *ngIf="conversation.sentfromcurrentuser">{{ 'addon.messages.you' | translate }}</span> <core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage" class="addon-message-last-message"></core-format-text> </p> </a> </ng-template>