next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

210 lines
6.7 KiB
HTML
Raw Normal View History

<!-- CHAT -->
2019-09-26 05:38:21 +00:00
<div class="container" fxFlex fxLayout="column">
<!-- CHAT TOOLBAR -->
<mat-toolbar class="chat-toolbar">
<div fxFlex fxLayout="row" class="chat-header">
2019-10-21 04:20:14 +00:00
<div fxLayout="row" fxLayoutAlign="start center" class="profile-img">
<!-- RESPONSIVE CHATS BUTTON-->
2019-10-16 07:33:19 +00:00
<button
mat-icon-button
aria-label="chats button"
class="responsive-chats-button"
>
2019-11-07 23:58:22 +00:00
<!--<mat-icon>chat</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<g>
<path d="M3,21.8c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.2-0.3-0.5-0.2-0.8l1.8-5.4c-0.6-1.2-0.8-2.5-0.8-3.9c0-3.5,2-6.7,5.1-8.3
c1.3-0.6,2.7-0.9,4.1-1H13c4.7,0.3,8.5,4,8.7,8.7l0,0.5c0,1.4-0.3,2.9-1,4.1c-1.6,3.2-4.7,5.1-8.3,5.1c0,0,0,0,0,0
c-1.3,0-2.6-0.3-3.8-0.8l-5.4,1.8C3.2,21.7,3.1,21.8,3,21.8z M12.5,3.8C11.3,3.8,10.1,4,9,4.6c-2.6,1.3-4.3,4-4.3,6.9
c0,1.2,0.3,2.4,0.8,3.5c0.1,0.2,0.1,0.4,0,0.6l-1.4,4.3l4.3-1.4c0.2-0.1,0.4,0,0.6,0c1.1,0.5,2.3,0.8,3.5,0.8c3,0,5.6-1.6,6.9-4.3
c0.5-1.1,0.8-2.3,0.8-3.5c0,0,0,0,0,0V11C20,7.1,16.9,4,13,3.7L12.5,3.8C12.5,3.8,12.5,3.8,12.5,3.8z" />
</g>
<g>
<circle cx="9" cy="12" r="1" />
<circle cx="12.5" cy="12" r="1" />
<circle cx="16" cy="12" r="1" />
</g>
</svg>
</button>
<!-- / RESPONSIVE CHATS BUTTON-->
2019-11-01 04:03:57 +00:00
<button
mat-icon-button
aria-label="chats button"
class="responsive-chats-button"
2019-11-01 06:53:54 +00:00
*ngIf="!!roomInfo && roomInfo.isTimeRoom"
>
2019-11-01 04:03:57 +00:00
<mat-icon>timer</mat-icon>
</button>
</div>
2019-11-01 04:03:57 +00:00
<div class="room-info">
<h3 class="room-name">
{{ getRoomName() }}
</h3>
<!-- Timer Room Info -->
2019-11-01 06:53:54 +00:00
<div
*ngIf="roomInfo && roomInfo.isTimeRoom"
class="room-type text-accent-color "
>
<span class="bg-accent-light"
>{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span
>비밀 대화방입니다.
2019-11-01 04:03:57 +00:00
</div>
<!-- Timer Room Info -->
2019-10-21 04:20:14 +00:00
</div>
<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"
>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #contactMenu="matMenu" [hasBackdrop]="false">
2019-11-01 06:53:54 +00:00
<button mat-menu-item (click)="onClickContextMenu('ADD_MEMBER')">
대화상대추가
</button>
<button mat-menu-item (click)="onClickContextMenu('EDIT_ROOM')">
대화방설정
</button>
<button mat-menu-item (click)="onClickContextMenu('CLOSE_ROOM')">
방닫기
</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>
<!-- CHAT CONTENT -->
2019-10-21 04:36:58 +00:00
<div
fxFlex="1 1 auto"
class="chat-content"
#messageBoxContainer
2019-11-05 04:46:17 +00:00
ucapFileUploadFor
[fileUploadQueue]="fileUploadQueue"
2019-10-21 04:36:58 +00:00
(fileSelected)="onFileSelected($event)"
2019-10-31 08:09:38 +00:00
(fileDragEnter)="onFileDragEnter($event)"
2019-10-21 04:36:58 +00:00
(fileDragOver)="onFileDragOver()"
(fileDragLeave)="onFileDragLeave()"
>
<!-- CHAT MESSAGES -->
<perfect-scrollbar
fxFlex="1 1 auto"
#psChatContent
(psScrollUp)="onScrollup($event)"
(psYReachStart)="onScrollReachStart($event)"
(psYReachEnd)="onScrollReachEnd($event)"
>
<ucap-chat-messages
[messages]="eventList"
[eventInfoStatus]="eventInfoStatus$ | async"
[eventRemain]="eventRemain$ | async"
[userInfos]="userInfoList"
[loginRes]="loginRes"
[sessionVerInfo]="sessionVerInfo"
(moreEvent)="onMoreEvent($event)"
(massDetail)="onMassDetail($event)"
(save)="onSave($event)"
2019-11-07 06:46:02 +00:00
(fileViewer)="onFileViewer($event)"
(contextMenu)="onContextMenuMessage($event)"
2019-11-08 04:35:39 +00:00
(openProfile)="onClickOpenProfile($event)"
>
</ucap-chat-messages>
</perfect-scrollbar>
<!-- CHAT MESSAGES -->
2019-11-05 04:46:17 +00:00
<div class="file-drop-zone-container">
<ucap-file-upload-queue
#fileUploadQueue
2019-11-05 05:55:17 +00:00
[dropZoneIncludeParent]="true"
2019-11-05 04:46:17 +00:00
class="file-drop-zone"
></ucap-file-upload-queue>
2019-10-21 04:36:58 +00:00
</div>
2019-10-31 08:09:38 +00:00
</div>
<!-- / CHAT CONTENT -->
2019-10-31 08:09:38 +00:00
<!-- CHAT FOOTER -->
<div fxFlex="0 0 auto" fxLayout="column" *ngIf="getEnableSend()">
<!-- REPLY FORM -->
<ucap-chat-form
2019-11-01 06:06:37 +00:00
#chatForm
2019-11-05 04:46:17 +00:00
[fileUploadQueue]="fileUploadQueue"
(send)="onSendMessage($event)"
(sendFiles)="onFileSelected($event)"
></ucap-chat-form>
<!-- / 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"
2019-11-05 04:46:17 +00:00
(ucapClickOutside)="messageContextMenuTrigger.closeMenu()"
2019-10-25 06:56:03 +00:00
>
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>