130 lines
7.7 KiB
HTML
130 lines
7.7 KiB
HTML
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button [text]="'core.back' | translate" />
|
|
</ion-buttons>
|
|
<ion-title>
|
|
<h1>{{ 'addon.messages.messages' | translate }}</h1>
|
|
</ion-title>
|
|
<ion-buttons slot="end">
|
|
<ion-button fill="clear" (click)="gotoSearch()" [ariaLabel]="'addon.messages.searchcombined' | translate">
|
|
<ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
|
|
</ion-button>
|
|
<ion-button (click)="gotoSettings()" [ariaLabel]="'addon.messages.messagepreferences' | translate">
|
|
<ion-icon name="fas-gear" slot="icon-only" aria-hidden="true" />
|
|
</ion-button>
|
|
<!-- Add an empty context menu so split view pages can add items, otherwise the menu disappears in some cases. -->
|
|
<core-context-menu />
|
|
<core-user-menu-button />
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content>
|
|
<core-split-view>
|
|
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
|
|
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
|
|
</ion-refresher>
|
|
|
|
<core-loading [hideUntil]="loaded" [message]="loadingMessage">
|
|
<ion-list>
|
|
<ion-item class="ion-text-wrap" (click)="gotoContacts()" [detail]="true" button>
|
|
<ion-icon name="fas-address-book" slot="start" aria-hidden="true" />
|
|
<ion-label>
|
|
<p class="item-heading">{{ 'addon.messages.contacts' | translate }}</p>
|
|
</ion-label>
|
|
<ion-badge *ngIf="contactRequestsCount > 0" slot="end"
|
|
[attr.aria-label]="'addon.messages.pendingcontactrequests' | translate:{$a: contactRequestsCount}">
|
|
{{contactRequestsCount}}
|
|
</ion-badge>
|
|
</ion-item>
|
|
<ion-accordion-group (ionChange)="accordionGroupChange($event.detail)" #accordionGroup>
|
|
<ion-accordion *ngFor="let option of groupConversations" [value]="option.optionName" toggleIconSlot="start">
|
|
<ion-item slot="header" class="ion-text-wrap divider">
|
|
<ion-label>
|
|
<h2>{{ option.titleString | translate }} ({{ option.count }})</h2>
|
|
</ion-label>
|
|
<ion-badge slot="end" *ngIf="option.unread"
|
|
[attr.aria-label]="'addon.messages.unreadconversations' | translate:{$a: option.unread}">
|
|
{{ option.unread }}
|
|
</ion-badge>
|
|
</ion-item>
|
|
<div slot="content">
|
|
<ng-container *ngIf="!option.loading">
|
|
<ng-container *ngTemplateOutlet="conversationsTemplate;
|
|
context: {conversations: option.conversations}" />
|
|
<!-- The infinite loading cannot be inside the ng-template,
|
|
it fails because it doesn't find ion-content. -->
|
|
<core-infinite-loading [enabled]="option.canLoadMore" (action)="loadMoreConversations(option, $event)"
|
|
[error]="option.loadMoreError" />
|
|
<ion-item class="ion-text-wrap" *ngIf="option.conversations && option.conversations.length === 0">
|
|
<ion-label>
|
|
<p>{{ option.emptyString| translate }}</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
</ng-container>
|
|
<ion-item class="ion-text-center" *ngIf="option.loading">
|
|
<ion-label>
|
|
<ion-spinner [attr.aria-label]="'core.loading' | translate" />
|
|
</ion-label>
|
|
</ion-item>
|
|
</div>
|
|
</ion-accordion>
|
|
</ion-accordion-group>
|
|
</ion-list>
|
|
</core-loading>
|
|
</core-split-view>
|
|
</ion-content>
|
|
|
|
<!-- Template to render a list of conversations. -->
|
|
<ng-template #conversationsTemplate let-conversations="conversations">
|
|
<ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button [detail]="false"
|
|
[attr.aria-current]="((conversation.id && conversation.id === selectedConversationId) ||
|
|
(conversation.userid && conversation.userid === selectedUserId)) ? 'page': 'false'"
|
|
(click)="gotoConversation(conversation.id, conversation.userid)"
|
|
id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}"
|
|
[attr.aria-label]="conversation.name">
|
|
<!-- Group conversation image. -->
|
|
<ion-avatar slot="start" *ngIf="conversation.type === typeGroup">
|
|
<img [url]="conversation.imageurl" [alt]="conversation.name" core-external-content
|
|
onError="this.src='assets/img/group-avatar.svg'">
|
|
</ion-avatar>
|
|
|
|
<!-- Avatar for individual conversations. -->
|
|
<core-user-avatar *ngIf="conversation.type !== typeGroup" core-user-avatar [user]="conversation.otherUser" [linkProfile]="false"
|
|
[checkOnline]="conversation.showonlinestatus" slot="start" />
|
|
|
|
<ion-label>
|
|
<div class="flex-row ion-justify-content-between">
|
|
<p class="item-heading">
|
|
<core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0" />
|
|
<ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
|
|
[attr.aria-label]="'addon.messages.contactblocked' | translate" />
|
|
<ion-icon *ngIf="conversation.ismuted" name="fas-volume-xmark"
|
|
[title]="'addon.messages.mutedconversation' | translate" />
|
|
</p>
|
|
<ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
|
|
<span *ngIf="conversation.lastmessagedate > 0" class="addon-message-last-message-date">
|
|
{{conversation.lastmessagedate | coreDateDayOrTime}}
|
|
</span>
|
|
<ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
|
|
<span *ngIf="conversation.unreadcount > 0" class="sr-only">
|
|
{{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
|
|
</span>
|
|
</ion-note>
|
|
</div>
|
|
<p *ngIf="conversation.subname">
|
|
<core-format-text [text]="conversation.subname" contextLevel="system" [contextInstanceId]="0" />
|
|
</p>
|
|
<p *ngIf="conversation.lastmessage !== undefined" class="addon-message-last-message">
|
|
<span *ngIf="conversation.sentfromcurrentuser" class="addon-message-last-message-user">
|
|
{{ 'addon.messages.you' | translate }}
|
|
</span>
|
|
<span *ngIf="!conversation.sentfromcurrentuser && conversation.type === typeGroup && conversation.members[0]"
|
|
class="addon-message-last-message-user">{{ conversation.members[0].fullname + ':' }}</span>
|
|
<core-format-text clean="true" singleLine="true" [text]="conversation.lastmessage" class="addon-message-last-message-text"
|
|
contextLevel="system" [contextInstanceId]="0" />
|
|
</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
</ng-template>
|