ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

context menu of EventType.Character is added

Browse Source
This commit is contained in:
병준 박 2019-10-15 15:02:00 +09:00
parent a6b5ac05aa
commit 04fc05c9e4
3 changed files with 133 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
View File

@ -1,25 +1,48 @@
<div class="chat-messages">
<!-- MESSAGE -->
<div *ngFor="let message of messages; let i = index" class="message-row" [ngClass]="{
<div
*ngFor="let message of messages; let i = index"
class="message-row"
[ngClass]="{
me: message.senderSeq === loginRes.userSeq,
contact: message.senderSeq !== loginRes.userSeq
}">
<ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
}"
>
<ucap-chat-message-box-date-splitter
*ngIf="getDateSplitter(i)"
[message]="message"
>
</ucap-chat-message-box-date-splitter>
<div *ngIf="getIsInformation(message); then information else contents"></div>
<div
*ngIf="getIsInformation(message); then information; else contents"
></div>
<ng-template #information>
<ng-container class="bubble" *ngIf="message.type !== EventType.NotificationForTimerRoom"
[ngSwitch]="message.type">
<ucap-chat-message-box-information *ngSwitchCase="EventType.Join" [message]="message">
<ng-container
class="bubble"
*ngIf="message.type !== EventType.NotificationForTimerRoom"
[ngSwitch]="message.type"
>
<ucap-chat-message-box-information
*ngSwitchCase="EventType.Join"
[message]="message"
>
</ucap-chat-message-box-information>
<ucap-chat-message-box-information *ngSwitchCase="EventType.Exit" [message]="message">
<ucap-chat-message-box-information
*ngSwitchCase="EventType.Exit"
[message]="message"
>
</ucap-chat-message-box-information>
<ucap-chat-message-box-information *ngSwitchCase="EventType.RenameRoom" [message]="message">
<ucap-chat-message-box-information
*ngSwitchCase="EventType.RenameRoom"
[message]="message"
>
</ucap-chat-message-box-information>
<ucap-chat-message-box-information *ngSwitchCase="EventType.GuideForRoomTimerChanged" [message]="message"
[senderName]="getUserName(message.senderSeq)">
<ucap-chat-message-box-information
*ngSwitchCase="EventType.GuideForRoomTimerChanged"
[message]="message"
[senderName]="getUserName(message.senderSeq)"
>
</ucap-chat-message-box-information>
</ng-container>
</ng-template>
@ -27,8 +50,12 @@
<div>
<ul>
<li *ngIf="getUserProfile(message.senderSeq) != ''">
<img [src]="getUserProfile(message.senderSeq)" onerror="this.src='assets/images/img_nophoto_50.png'"
class="avatar" style="width: 50px; height: 50px;" />
<img
[src]="getUserProfile(message.senderSeq)"
onerror="this.src='assets/images/img_nophoto_50.png'"
class="avatar"
style="width: 50px; height: 50px;"
/>
</li>
<li>
{{ getUserName(message.senderSeq) }}
@ -36,18 +63,39 @@
</ul>
</div>
<ng-container class="bubble" *ngIf="message.type !== EventType.NotificationForTimerRoom"
[ngSwitch]="message.type">
<ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
(massDetail)="onMassDetail($event)">
<ng-container
class="bubble"
*ngIf="message.type !== EventType.NotificationForTimerRoom"
[ngSwitch]="message.type"
>
<ucap-chat-message-box-mass
*ngSwitchCase="EventType.MassText"
[message]="message"
(massDetail)="onMassDetail($event)"
>
</ucap-chat-message-box-mass>
<ucap-chat-message-box-file *ngSwitchCase="EventType.File" [message]="message" (save)="onSave($event)"
(imageViewer)="onImageViewer($event)">
<ucap-chat-message-box-file
*ngSwitchCase="EventType.File"
[message]="message"
(save)="onSave($event)"
(imageViewer)="onImageViewer($event)"
>
</ucap-chat-message-box-file>
<ucap-chat-message-box-sticker *ngSwitchCase="EventType.Sticker" [message]="message">
<ucap-chat-message-box-sticker
*ngSwitchCase="EventType.Sticker"
[message]="message"
>
</ucap-chat-message-box-sticker>
<ucap-chat-message-box-recall *ngSwitchCase="EventType.RecalledMessage"></ucap-chat-message-box-recall>
<ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message">
<ucap-chat-message-box-recall
*ngSwitchCase="EventType.RecalledMessage"
></ucap-chat-message-box-recall>
<ucap-chat-message-box-text
*ngSwitchCase="EventType.Character"
[message]="message"
(contextmenu)="
onContextMenuMessage($event, EventType.Character, message)
"
>
</ucap-chat-message-box-text>
<div *ngSwitchDefault>
mass-translation
@ -72,3 +120,23 @@
</ng-template>
</div>
</div>
<div
style="visibility: hidden; position: fixed"
[style.left]="messageContextMenuPosition.x"
[style.top]="messageContextMenuPosition.y"
[matMenuTriggerFor]="messageContextMenu"
></div>
<mat-menu #messageContextMenu="matMenu" [overlapTrigger]="false">
<ng-template matMenuContent let-eventType="eventType" let-message="message">
<ng-container *ngIf="!isRecalledMessage(eventType)">
<button mat-menu-item *ngIf="isCopyableMessage(eventType)">
대화 복사
</button>
<button mat-menu-item>대화 전달</button>
<button mat-menu-item>대화 나에게 전달</button>
<button mat-menu-item>대화 삭제</button>
<button mat-menu-item *ngIf="isMine(message)">대화 회수</button>
</ng-container>
</ng-template>
</mat-menu>

40
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
View File

@ -1,4 +1,13 @@
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import {
Component,
OnInit,
Input,
EventEmitter,
Output,
ViewChild,
ViewChildren,
QueryList
} from '@angular/core';
import { Info, EventType } from '@ucap-webmessenger/protocol-event';
import {
@ -10,6 +19,7 @@ import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { KEY_VER_INFO, VerInfo2 } from '@app/types/ver-info.type';
import { FileInfo } from '../models/file-info.json';
import { DatePipe } from '@angular/common';
import { MatMenu, MatMenuTrigger } from '@angular/material';
@Component({
selector: 'ucap-chat-messages',
@ -31,6 +41,12 @@ export class MessagesComponent implements OnInit {
@Output()
save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();
@ViewChildren(MatMenuTrigger) menuTriggerList: QueryList<MatMenuTrigger>;
@ViewChild('messageContextMenu', { static: true })
messageContextMenu: MatMenu;
messageContextMenuPosition = { x: '0px', y: '0px' };
EventType = EventType;
profileImageRoot: string;
@ -109,6 +125,20 @@ export class MessagesComponent implements OnInit {
return false;
}
isCopyableMessage(eventType: EventType): boolean {
return (
EventType.Character === eventType || EventType.Translation === eventType
);
}
isRecalledMessage(eventType: EventType): boolean {
return EventType.RecalledMessage === eventType;
}
isMine(message: Info): boolean {
return message.senderSeq === this.loginRes.userSeq;
}
/** [Event] MassTalk Detail View */
onMassDetail(value: number) {
this.massDetail.emit(value);
@ -123,4 +153,12 @@ export class MessagesComponent implements OnInit {
onSave(value: { fileInfo: FileInfo; type: string }) {
this.save.emit(value);
}
onContextMenuMessage(event: MouseEvent, eventType: EventType, message: Info) {
this.messageContextMenuPosition.x = event.clientX + 'px';
this.messageContextMenuPosition.y = event.clientY + 'px';
const messageContextMenuTrigger = this.menuTriggerList.toArray()[0];
messageContextMenuTrigger.menuData = { eventType, message };
messageContextMenuTrigger.openMenu();
}
}

4
projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts
View File

@ -8,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { FormComponent } from './components/form.component';
import { MessagesComponent } from './components/messages.component';
@ -60,7 +61,8 @@ const PROVIDERS = [DatePipe];
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatButtonModule
MatButtonModule,
MatMenuModule
],
exports: [...COMPONENTS],
declarations: [...COMPONENTS],