2019-09-23 05:23:24 +00:00
|
|
|
<!-- CHAT -->
|
2019-09-26 05:38:21 +00:00
|
|
|
<div class="container" fxFlex fxLayout="column">
|
2019-09-23 05:23:24 +00:00
|
|
|
<!-- CHAT TOOLBAR -->
|
|
|
|
<mat-toolbar class="chat-toolbar">
|
2019-10-22 00:30:23 +00:00
|
|
|
<div fxFlex fxLayout="row" class="chat-header">
|
2019-10-21 04:20:14 +00:00
|
|
|
<div fxLayout="row" fxLayoutAlign="start center" class="profile-img">
|
2019-09-23 05:23:24 +00:00
|
|
|
<!-- RESPONSIVE CHATS BUTTON-->
|
2019-10-16 07:33:19 +00:00
|
|
|
<button
|
|
|
|
mat-icon-button
|
|
|
|
aria-label="chats button"
|
|
|
|
fxHide.gt-md
|
|
|
|
class="responsive-chats-button"
|
|
|
|
>
|
2019-09-23 05:23:24 +00:00
|
|
|
<mat-icon>chat</mat-icon>
|
|
|
|
</button>
|
|
|
|
<!-- / RESPONSIVE CHATS BUTTON-->
|
|
|
|
</div>
|
2019-10-21 04:20:14 +00:00
|
|
|
<div class="room-name">
|
2019-10-22 00:30:23 +00:00
|
|
|
{{ getRoomName() }}
|
2019-10-21 04:20:14 +00:00
|
|
|
</div>
|
2019-10-31 06:05:59 +00:00
|
|
|
<div *ngIf="!!roomInfo && roomInfo.isTimeRoom">
|
|
|
|
<mat-icon>timer</mat-icon> {{ getConvertTimer(roomInfo.timeRoomInterval) }}
|
|
|
|
</div>
|
2019-10-21 04:20:14 +00:00
|
|
|
<div class="room-option">
|
2019-10-16 07:33:19 +00:00
|
|
|
<button
|
|
|
|
*ngIf="!!roomInfo"
|
|
|
|
mat-icon-button
|
|
|
|
(click)="onClickReceiveAlarm($event)"
|
|
|
|
aria-label="Toggle Receive Alarm"
|
|
|
|
>
|
|
|
|
<mat-icon class="amber-fg" *ngIf="roomInfo.receiveAlarm"
|
|
|
|
>notifications_active</mat-icon
|
|
|
|
>
|
|
|
|
<mat-icon class="secondary-text" *ngIf="!roomInfo.receiveAlarm"
|
|
|
|
>notifications_off</mat-icon
|
|
|
|
>
|
2019-10-11 06:55:27 +00:00
|
|
|
</button>
|
|
|
|
|
2019-10-16 07:33:19 +00:00
|
|
|
<button
|
|
|
|
mat-icon-button
|
|
|
|
[matMenuTriggerFor]="contactMenu"
|
|
|
|
aria-label="more"
|
|
|
|
>
|
2019-09-23 05:23:24 +00:00
|
|
|
<mat-icon>more_vert</mat-icon>
|
|
|
|
</button>
|
|
|
|
|
2019-10-25 04:04:21 +00:00
|
|
|
<mat-menu #contactMenu="matMenu" [hasBackdrop]="false">
|
2019-10-24 07:53:21 +00:00
|
|
|
<button mat-menu-item (click)="onClickContextMenu('CLOSE_ROOM')">
|
|
|
|
방닫기
|
2019-09-23 05:23:24 +00:00
|
|
|
</button>
|
|
|
|
</mat-menu>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</mat-toolbar>
|
|
|
|
<!-- / CHAT TOOLBAR -->
|
2019-10-16 07:33:19 +00:00
|
|
|
<mat-progress-bar
|
|
|
|
*ngIf="eventListProcessing$ | async"
|
|
|
|
mode="indeterminate"
|
|
|
|
></mat-progress-bar>
|
2019-09-23 05:23:24 +00:00
|
|
|
<!-- CHAT CONTENT -->
|
2019-10-21 04:36:58 +00:00
|
|
|
<div
|
|
|
|
fxFlex="1 1 auto"
|
|
|
|
class="chat-content"
|
|
|
|
#messageBoxContainer
|
|
|
|
ucapUiFileUploadFor
|
|
|
|
(fileSelected)="onFileSelected($event)"
|
|
|
|
(fileDragEnter)="onFileDragEnter()"
|
|
|
|
(fileDragOver)="onFileDragOver()"
|
|
|
|
(fileDragLeave)="onFileDragLeave()"
|
|
|
|
>
|
2019-10-15 02:50:23 +00:00
|
|
|
<!-- Timer Room Info -->
|
|
|
|
<span *ngIf="roomInfo && roomInfo.isTimeRoom">비밀 대화방입니다.</span>
|
|
|
|
<!-- Timer Room Info -->
|
|
|
|
|
2019-09-23 05:23:24 +00:00
|
|
|
<!-- CHAT MESSAGES -->
|
2019-10-29 02:39:34 +00:00
|
|
|
<perfect-scrollbar fxFlex="1 1 auto" #psChatContent>
|
|
|
|
<ucap-chat-messages
|
|
|
|
[messages]="eventList$ | async"
|
2019-10-29 09:11:31 +00:00
|
|
|
[eventInfoStatus]="eventInfoStatus$ | async"
|
2019-10-29 02:39:34 +00:00
|
|
|
[userInfos]="userInfoList"
|
|
|
|
[loginRes]="loginRes"
|
|
|
|
[sessionVerInfo]="sessionVerInfo"
|
|
|
|
(massDetail)="onMassDetail($event)"
|
|
|
|
(save)="onSave($event)"
|
|
|
|
(imageViewer)="onImageViewer($event)"
|
|
|
|
(contextMenu)="onContextMenuMessage($event)"
|
|
|
|
>
|
|
|
|
</ucap-chat-messages>
|
|
|
|
</perfect-scrollbar>
|
2019-09-23 05:23:24 +00:00
|
|
|
<!-- CHAT MESSAGES -->
|
2019-10-29 09:19:41 +00:00
|
|
|
</div>
|
|
|
|
<!-- / CHAT CONTENT -->
|
2019-10-21 04:36:58 +00:00
|
|
|
|
2019-10-29 09:19:41 +00:00
|
|
|
<!-- CHAT FOOTER -->
|
|
|
|
<div fxFlex="0 0 auto" fxLayout="column">
|
2019-10-21 04:36:58 +00:00
|
|
|
<div
|
|
|
|
*ngIf="fileDragOver || (files && 0 < files.length)"
|
|
|
|
class="file-drop-zone-container"
|
|
|
|
>
|
|
|
|
<div class="file-drop-zone">
|
|
|
|
<ucap-ui-file-upload-queue
|
|
|
|
[(files)]="files"
|
|
|
|
></ucap-ui-file-upload-queue>
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-09-23 05:23:24 +00:00
|
|
|
|
|
|
|
<!-- REPLY FORM -->
|
2019-10-29 09:19:41 +00:00
|
|
|
<ucap-chat-form
|
|
|
|
(send)="onSendMessage($event)"
|
|
|
|
(sendFiles)="onFileSelected($event)"
|
|
|
|
></ucap-chat-form>
|
2019-09-23 05:23:24 +00:00
|
|
|
<!-- / REPLY FORM -->
|
|
|
|
</div>
|
|
|
|
<!-- / CHAT FOOTER-->
|
|
|
|
</div>
|
|
|
|
<!-- / CHAT -->
|
2019-10-16 07:33:19 +00:00
|
|
|
|
|
|
|
<div
|
|
|
|
style="visibility: hidden; position: fixed"
|
|
|
|
[style.left]="messageContextMenuPosition.x"
|
|
|
|
[style.top]="messageContextMenuPosition.y"
|
|
|
|
#messageContextMenuTrigger="matMenuTrigger"
|
|
|
|
[matMenuTriggerFor]="messageContextMenu"
|
|
|
|
></div>
|
2019-10-25 06:56:03 +00:00
|
|
|
<mat-menu
|
|
|
|
#messageContextMenu="matMenu"
|
|
|
|
[hasBackdrop]="false"
|
|
|
|
(ucapUiClickOutside)="messageContextMenuTrigger.closeMenu()"
|
|
|
|
>
|
2019-10-16 07:33:19 +00:00
|
|
|
<ng-template matMenuContent let-message="message" let-loginRes="loginRes">
|
|
|
|
<ng-container *ngIf="!isRecalledMessage(message.type)">
|
|
|
|
<button
|
|
|
|
mat-menu-item
|
|
|
|
*ngIf="isCopyableMessage(message.type)"
|
|
|
|
(click)="onClickMessageContextMenu('COPY', message)"
|
|
|
|
>
|
|
|
|
대화 복사
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
mat-menu-item
|
|
|
|
(click)="onClickMessageContextMenu('REPLAY', message)"
|
|
|
|
>
|
|
|
|
대화 전달
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
mat-menu-item
|
|
|
|
(click)="onClickMessageContextMenu('REPLAY_TO_ME', message)"
|
|
|
|
>
|
|
|
|
대화 나에게 전달
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
mat-menu-item
|
|
|
|
(click)="onClickMessageContextMenu('DELETE', message)"
|
|
|
|
>
|
|
|
|
대화 삭제
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
mat-menu-item
|
|
|
|
*ngIf="isRecallableMessage(message, loginRes.userSeq)"
|
|
|
|
(click)="onClickMessageContextMenu('RECALL', message)"
|
|
|
|
>
|
|
|
|
대화 회수
|
|
|
|
</button>
|
|
|
|
</ng-container>
|
|
|
|
</ng-template>
|
|
|
|
</mat-menu>
|