63 lines
4.4 KiB
HTML
63 lines
4.4 KiB
HTML
<ion-header>
|
|
<ion-navbar core-back-button>
|
|
<ion-title>
|
|
<img *ngIf="conversationImage" class="core-bar-button-image" [src]="conversationImage">
|
|
<core-format-text [text]="title"></core-format-text>
|
|
</ion-title>
|
|
<ion-buttons end></ion-buttons>
|
|
</ion-navbar>
|
|
<core-navbar-buttons end>
|
|
<core-context-menu>
|
|
<core-context-menu-item [hidden]="!showInfo || isGroup" [priority]="1000" [content]="'addon.messages.info' | translate" (action)="viewInfo()" [iconAction]="'information-circle'"></core-context-menu-item>
|
|
<core-context-menu-item [hidden]="!showInfo || !isGroup" [priority]="999" [content]="'addon.messages.groupinfo' | translate" (action)="viewInfo()" [iconAction]="'information-circle'"></core-context-menu-item>
|
|
<core-context-menu-item [hidden]="!canDelete" [priority]="800" [content]="'addon.messages.showdeletemessages' | translate" (action)="toggleDelete()" [iconAction]="'trash'"></core-context-menu-item>
|
|
</core-context-menu>
|
|
</core-navbar-buttons>
|
|
</ion-header>
|
|
<ion-content class="has-footer">
|
|
<core-loading [hideUntil]="loaded">
|
|
<!-- Load previous messages. -->
|
|
<core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading>
|
|
<ion-list class="addon-messages-discussion-container safe-area-page" [attr.aria-live]="polite">
|
|
<ng-container *ngFor="let message of messages; index as index; last as last">
|
|
<ion-chip *ngIf="message.showDate" class="addon-messages-date" color="light">
|
|
<ion-label>{{ message.timecreated | coreFormatDate: "LL" }}</ion-label>
|
|
</ion-chip>
|
|
|
|
<ion-chip class="addon-messages-unreadfrom" *ngIf="unreadMessageFrom && message.id == unreadMessageFrom" color="light">
|
|
<ion-label>{{ 'addon.messages.newmessages' | translate:{$a: title} }}</ion-label>
|
|
<ion-icon name="arrow-round-down"></ion-icon>
|
|
</ion-chip>
|
|
|
|
<ion-item text-wrap (longPress)="copyMessage(message)" class="addon-message" [class.addon-message-mine]="message.useridfrom == currentUserId" [@coreSlideInOut]="message.useridfrom == currentUserId ? '' : 'fromLeft'">
|
|
<!-- User data. -->
|
|
<ion-avatar item-start *ngIf="message.showUserData">
|
|
<img [src]="members[message.useridfrom].profileimageurl" [alt]="'core.pictureof' | translate:{$a: members[message.useridfrom].fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
|
|
</ion-avatar>
|
|
<h2 *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</h2>
|
|
|
|
<!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. -->
|
|
<p class="addon-message-text">
|
|
<core-format-text (afterRender)="last && scrollToBottom()" [text]="message.text"></core-format-text>
|
|
</p>
|
|
<ion-note *ngIf="!message.pending">
|
|
{{ message.timecreated | coreFormatDate: "dftimedate" }}
|
|
</ion-note>
|
|
<ion-note *ngIf="message.pending"><ion-icon name="time"></ion-icon></ion-note>
|
|
|
|
<button ion-button icon-only clear="true" *ngIf="!message.sending && showDelete" (click)="deleteMessage(message, index)" class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'" [attr.aria-label]=" 'addon.messages.deletemessage' | translate">
|
|
<ion-icon name="trash" color="danger"></ion-icon>
|
|
</button>
|
|
</ion-item>
|
|
</ng-container>
|
|
</ion-list>
|
|
<core-empty-box *ngIf="!messages || messages.length <= 0" icon="chatbubbles" [message]="'addon.messages.nomessages' | translate"></core-empty-box>
|
|
</core-loading>
|
|
</ion-content>
|
|
<ion-footer color="light" class="footer-adjustable" *ngIf="!conversationId || conversation">
|
|
<ion-toolbar color="light" position="bottom">
|
|
<!-- @todo: Check if the user can send messages. -->
|
|
<core-send-message-form (onSubmit)="sendMessage($event)" [showKeyboard]="showKeyboard" [placeholder]="'addon.messages.newmessage' | translate" (onResize)="resizeContent()"></core-send-message-form>
|
|
</ion-toolbar>
|
|
</ion-footer>
|