mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
fix change folder path
This commit is contained in:
Peter Maquiran
@@ -0,0 +1,225 @@
|
||||
<ion-header class="ion-no-border" >
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="header-top">
|
||||
<div class="left">
|
||||
<button class="btn-no-color" (click)="close()">
|
||||
<!-- <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon> -->
|
||||
<fa-icon icon="chevron-left" class="header-top-btn font-awesome-1"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="middle-container" *ngIf="!showMessageOptions">
|
||||
<div class="middle" *ngIf="roomData$ | async as roomData">
|
||||
<ion-label class="title">{{ roomData.roomName }}</ion-label>
|
||||
<span *ngIf="roomStatus$ | async as roomStatus"><ion-icon *ngIf="roomStatus"
|
||||
class="online" name="ellipse"></ion-icon></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div (click)="ChatSystemService.getDmRoom(roomId).deleteAll()" >delete all</div> -->
|
||||
<div class="middle-container-options" *ngIf="showMessageOptions">
|
||||
<fa-icon (click)="deleteMessage(selectedMsgId)" icon="trash" class="middle-container-options-icons"></fa-icon>
|
||||
<!-- <ion-icon name="trash"></ion-icon> -->
|
||||
</div>
|
||||
<div hidden class="right">
|
||||
<button class="btn-no-color" (click)="openMessagesOptions()">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/theme/blue/icons-menu.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
|
||||
</ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div hidden class="header-bottom" (click)="addContacts()">
|
||||
<div class="header-bottom-icon">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/icon/icons-user.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/icon/theme/gov/icons-user.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="header-bottom-contacts">
|
||||
<ion-label class="text-color-blue">Adicionar contacto</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content >
|
||||
|
||||
<div class="messages height-100 width-100 d-flex flex-column" #scrollMe >
|
||||
|
||||
<div
|
||||
*ngFor="let message of messages1[roomId]" class="messages-list-item-wrapper"
|
||||
[ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}"
|
||||
>
|
||||
<div class="message-container">
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<div>
|
||||
{{ message.message }}
|
||||
</div>
|
||||
|
||||
<div *ngFor="let attachment of message.attachments; let i = index">
|
||||
<div *ngIf="attachment.source == MessageAttachmentFileSource.Webtrix">
|
||||
|
||||
<ion-icon src="assets/icon/webtrix.svg" class="file-icon font-25"></ion-icon>
|
||||
<ion-label>{{ attachment.fileName}}</ion-label>
|
||||
<!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
|
||||
<ion-icon *ngIf="( msg.downloadLoader == true || msg.uploadingFile == true )" class="icon-download" src="assets/gif/theme/{{ThemeService.currentTheme}}/Blocks-loader.svg" slot="end"></ion-icon> -->
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
|
||||
<img src="{{attachment.safeFile}}">
|
||||
</div>
|
||||
|
||||
<div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">
|
||||
<audio [src]="attachment.safeFile|safehtml" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
|
||||
</div>
|
||||
|
||||
<div *ngIf="attachment.fileType == MessageAttachmentFileType.Doc">
|
||||
<fa-icon *ngIf="attachment.mimeType == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
|
||||
<fa-icon *ngIf="attachment.mimeType == 'application/word'" icon="file-word" class="word-icon">
|
||||
</fa-icon>
|
||||
<fa-icon *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'" icon="file-word" class="word-icon"></fa-icon>
|
||||
<fa-icon
|
||||
*ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
|
||||
icon="file-word" class="excel-icon"></fa-icon>
|
||||
<ion-icon *ngIf="attachment.mimeType == 'application/webtrix'" src="assets/icon/webtrix.svg">
|
||||
</ion-icon>
|
||||
<ion-icon *ngIf="attachment.mimeType == 'application/meeting'" src="assets/icon/webtrix.svg">
|
||||
</ion-icon>
|
||||
|
||||
<ion-label>{{ attachment.fileName}}</ion-label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="message-item-options d-flex justify-content-end">
|
||||
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
|
||||
<mat-menu #beforeMenu="matMenu" xPosition="before">
|
||||
<button (click)="messageDelete(message)" class="menuButton">Apagar mensagem</button>
|
||||
<button (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
|
||||
<button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="text-align: end;">
|
||||
|
||||
<div *ngIf="message.messageStatus != 'send'" style="font-size: .6875rem;">A enviar</div>
|
||||
<div *ngIf="message.messageStatus == 'send'" style="font-size: .6875rem;">Enviado</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Emoji Picker -->
|
||||
<div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
|
||||
<span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
|
||||
{{ emoji }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- current emoji -->
|
||||
<div>
|
||||
<span *ngFor="let reaction of message.reactions" class="emoji-icon">
|
||||
{{ reaction.reaction }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<ion-fab horizontal="end" vertical="bottom" slot="fixed">
|
||||
<ion-fab-button *ngIf="scrollToBottomBtn" color="light" size="small">
|
||||
<ion-icon name="chevron-down"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab> -->
|
||||
|
||||
|
||||
|
||||
<ion-fab horizontal="start" vertical="bottom" slot="fixed">
|
||||
|
||||
<div #array>
|
||||
|
||||
</div>
|
||||
</ion-fab>
|
||||
|
||||
|
||||
<!-- <div *ngIf="userTyping$?.typingList?.typingList">
|
||||
|
||||
<div
|
||||
*ngFor="let message of userTyping$.typingList.typingList " class="messages-list-item-wrapper"
|
||||
>
|
||||
{{ message.userName }}
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<!-- <div *ngIf="userTyping$" class="header-bottom-contacts" >
|
||||
|
||||
<div *ngFor="let typing of userTyping$; let i = index">
|
||||
{{ typing.userName }}<div *ngIf="i < userTyping$.length - 1">, </div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
|
||||
<!-- <div class="typing" *ngIf="ChatSystemService.getDmRoom(roomId).otherUserType == true">
|
||||
<ngx-letters-avatar [avatarName]="ChatSystemService.getGroupRoom(roomId).name" [width]="30" [circular]="true"
|
||||
fontFamily="Roboto"></ngx-letters-avatar>
|
||||
está a escrever ...
|
||||
</div> -->
|
||||
<div class="width-100 pl-20 pr-20">
|
||||
<span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
|
||||
<audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls
|
||||
controlsList="nodownload noplaybackrate"></audio>
|
||||
</div>
|
||||
|
||||
<div class="container width-100 d-flex">
|
||||
<div>
|
||||
<button *ngIf="!recording && !lastAudioRecorded && allowTyping" class="btn-no-color" (click)="openChatOptions()">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options"
|
||||
src="assets/images/icons-add.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options"
|
||||
src="assets/images/theme/gov/icons-add.svg"></ion-icon>
|
||||
</button>
|
||||
<button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording()">
|
||||
<fa-icon class="icon-size-27" icon="trash"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="width-70 message-container">
|
||||
<div *ngIf="!recording && !lastAudioRecorded" class="type-message">
|
||||
<ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true"
|
||||
placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1"
|
||||
[(ngModel)]="textField"
|
||||
(ionChange)="sendTyping()"></ion-textarea>
|
||||
</div>
|
||||
<div *ngIf="recording" class="d-flex align-items-center justify-content-center">
|
||||
<button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
|
||||
<ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button #recordbtn *ngIf="textField == '' && !lastAudioRecorded" (click)="startRecording()" class="btn-no-color">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/default/icons-chat-record-audio.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-record-audio.svg"></ion-icon>
|
||||
</button>
|
||||
<button *ngIf="textField != ''" class="btn-no-color" (click)="sendMessage()">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
</button>
|
||||
<button *ngIf="textField == '' && lastAudioRecorded" class="btn-no-color" (click)="sendAudio(lastAudioRecorded)">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-footer>
|
||||
Reference in New Issue
Block a user