From be60e02f94c1bf4e17222e761ac8fae704f02643 Mon Sep 17 00:00:00 2001 From: Richard Park Date: Wed, 15 Jan 2020 13:53:17 +0900 Subject: [PATCH] refactoring of chat room --- package-lock.json | 2 +- .../lib/components/message-box.component.html | 191 ++++++++++++++++ .../lib/components/message-box.component.scss | 193 ++++++++++++++++ .../components/message-box.component.spec.ts | 24 ++ .../lib/components/message-box.component.ts | 186 +++++++++++++++ .../lib/components/messages.component.html | 212 ++---------------- .../src/lib/components/messages.component.ts | 20 +- .../src/lib/ucap-ui-chat.module.ts | 7 +- 8 files changed, 626 insertions(+), 209 deletions(-) create mode 100644 projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html create mode 100644 projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss create mode 100644 projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.spec.ts create mode 100644 projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts diff --git a/package-lock.json b/package-lock.json index 155d0e0f..bcfa12dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ucap-webmessenger", - "version": "0.0.0", + "version": "0.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html new file mode 100644 index 00000000..f5bc42a8 --- /dev/null +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html @@ -0,0 +1,191 @@ + +
+ + + + + + +
+
+ + + + + + + + + + + + + + + +
+ + +
+ +
+
+ {{ senderName }} +
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ + {{ message.type }} / {{ message.sentMessage }} +
+ +
+
+ +
+
    +
  • {{ unreadCount }}
    • +
  • + {{ message.sendDate | ucapDate: 'a hh:mm' }} +
    • +
+
+ +
+
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss new file mode 100644 index 00000000..455b7b2f --- /dev/null +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss @@ -0,0 +1,193 @@ +.hide { + opacity: 0 !important; +} + +$otherBox-line: #cccccc; +$otherBox-bg: #ffffff; +$meBox-line: #cccccc; +$meBox-bg: #ffffff; + +.chat-messages { + padding: 30px 40px; + display: flex; + flex-direction: column; +} +.information-msg { + width: 100%; +} + +.message-row { + width: 100%; + height: 100%; + margin-bottom: 20px; + .date-splitter { + display: block; + width: 100%; + margin-bottom: 10px; + } + .chat-row { + position: relative; + display: flex; + flex-direction: row; + margin-left: 0; + .profile-img { + flex: 0 0 auto; + &.thumbnail-mask { + border-radius: 50%; + width: 50px; + height: 50px; + overflow: hidden; + img { + width: 50px; + height: auto; + } + } + } + } + &.me { + .chat-row { + flex-direction: row-reverse; + margin-left: 0; + margin-right: 0; + .profile-info { + flex-direction: row-reverse; + display: flex; + justify-content: flex-end; + } + } + } + + .message-main { + margin-left: 20px; + margin-right: 10px; + max-width: 80%; + .chat-name { + font-size: 12px; + color: #333333; + margin-bottom: 6px; + } + .bubble { + border-radius: 0 10px 10px 10px; + font-weight: 900; + position: relative; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + word-break: break-all; + word-wrap: break-word; + } + } + .secondary-text { + align-self: flex-end; + font-size: 11px; + color: #666666; + word-wrap: break-word; + white-space: nowrap; + } + &.me { + .secondary-text { + text-align: end; + } + } + &.searched { + .bubble { + color: red; + } + } +} + +/*.message-row.me > .bubble { + border: 1px solid $meBox-line; + background-color: $meBox-bg; +}*/ +.message-row.me { + .profile-img { + display: none; + } + .chat-name { + display: none; + } + .message-main { + text-align: right; + margin-left: 10px; + margin-right: 20px; + .bubble { + border-radius: 10px 10px 0 10px; + } + /* & .bubble:before { + content: ''; + width: 0px; + height: 0px; + position: absolute; + border-left: 6px solid $meBox-line; + border-right: 6px solid transparent; + border-top: 6px solid $meBox-line; + border-bottom: 6px solid transparent; + left: initial; + right: -12px; + top: 4px; + } + & .bubble:after { + content: ''; + width: 0px; + height: 0px; + position: absolute; + border-left: 6px solid $meBox-bg; + border-right: 6px solid transparent; + border-top: 6px solid $meBox-bg; + border-bottom: 6px solid transparent; + left: initial; + right: -10px; + top: 5px; + }*/ + } +} +.bubble-main { + word-wrap: break-word; + white-space: pre-wrap; + word-break: break-word; +} +::ng-deep .view-previous { + display: flex; + flex-flow: column; + //background-color: rgba(0, 0, 0, 0.4); + color: #ffffff; + justify-content: center; + justify-items: center; + margin: 10px 0 20px; + button { + height: 100%; + width: 100%; + line-height: 2em; + border-radius: 100px; + .mat-button-wrapper { + justify-items: center; + svg { + stroke: #ffffff; + align-self: center; + margin-right: 4px; + } + } + } + .unRead-count { + display: flex; + justify-items: self-end; + flex-flow: row; + align-items: flex-end; + height: 20px; + margin: 10px 0; + .line { + height: 1px; + background-color: #cccccc; + width: 40%; + flex: 1 1 auto; + margin-bottom: 10px; + display: inline-flex; + } + .count { + width: 260px; + font-size: 13px; + text-align: center; + font-weight: 600; + color: #333333; + } + } +} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.spec.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.spec.ts new file mode 100644 index 00000000..a6974e41 --- /dev/null +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MessageBoxComponent } from './message-box.component'; + +describe('Chat::MessageBoxComponent', () => { + let component: MessageBoxComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [MessageBoxComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MessageBoxComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts new file mode 100644 index 00000000..e9138496 --- /dev/null +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.ts @@ -0,0 +1,186 @@ +import { + Component, + OnInit, + Input, + EventEmitter, + Output, + AfterViewInit, + ElementRef, + ViewChild +} from '@angular/core'; + +import { + Info, + EventType, + InfoResponse, + EventJson, + FileEventJson, + MassTranslationEventJson +} from '@ucap-webmessenger/protocol-event'; +import { NGXLogger } from 'ngx-logger'; +import { DatePipe } from '@angular/common'; +import moment from 'moment'; +import { FileDownloadItem } from '@ucap-webmessenger/api'; + +@Component({ + selector: 'ucap-chat-message-box', + templateUrl: './message-box.component.html', + styleUrls: ['./message-box.component.scss'] +}) +export class MessageBoxComponent implements OnInit, AfterViewInit { + @Input() + message: Info; + + @Input() + mine = false; + + @Input() + searched = false; + + @Input() + existReadToHere = false; + + @Input() + dateChanged = false; + + @Input() + senderName: string; + + @Input() + profileImageRoot: string; + + @Input() + profileImage: string; + + @Input() + eventInfoStatus?: InfoResponse; + + @Input() + translationSimpleview = false; + + @Input() + unreadCount: number; + + @Output() + openProfile = new EventEmitter(); + + @Output() + massDetail = new EventEmitter(); + + @Output() + massTranslationDetail = new EventEmitter<{ + message: Info; + contentsType: string; + }>(); + + @Output() + fileViewer = new EventEmitter(); + + @Output() + save = new EventEmitter<{ + fileInfo: FileEventJson; + fileDownloadItem: FileDownloadItem; + type: string; + }>(); + + @Output() + contextMenu = new EventEmitter<{ + event: MouseEvent; + message: Info; + type?: string; + }>(); + + @ViewChild('mbContainer', { static: true }) + mbContainer: ElementRef; + + EventType = EventType; + + moment = moment; + + firstEventSeq = 0; + existReadHere = false; + + constructor( + private elementRef: ElementRef, + private logger: NGXLogger, + private datePipe: DatePipe + ) {} + + ngOnInit() { + // this.elementRef.nativeElement.classList.add('hide'); + } + + ngAfterViewInit(): void { + this.logger.debug( + 'offsetHeight' + this.message.seq, + this.elementRef.nativeElement.offsetHeight + ); + this.elementRef.nativeElement.style.height = `${this.elementRef.nativeElement.offsetHeight}px`; + this.elementRef.nativeElement.style.maxHeight = `${this.elementRef.nativeElement.offsetHeight}px`; + this.mbContainer.nativeElement.classList.remove('hide'); + } + + /** + * 정보성 Event 인지 판단. + * @description 정보성 event 일 경우 프로필, 일시 를 표현하지 않는다. + * Edit with reducers.ts / sync / updateRoomForNewEventMessage + */ + isInformation(info: Info) { + if ( + info.type === EventType.Join || + info.type === EventType.Exit || + info.type === EventType.ForcedExit || + info.type === EventType.RenameRoom || + info.type === EventType.NotificationForTimerRoom || + info.type === EventType.GuideForRoomTimerChanged + ) { + return true; + } + return false; + } + + onClickOpenProfile(event: MouseEvent, userSeq: number) { + event.preventDefault(); + event.stopPropagation(); + + this.openProfile.emit(userSeq); + } + + /** [Event] MassTalk Detail View */ + onMassDetail(value: number) { + this.massDetail.emit(value); + } + + onMassTranslationDetail(params: { + message: Info; + contentsType: string; + }) { + this.massTranslationDetail.emit(params); + } + + /** [Event] Image Viewer */ + onFileViewer(fileInfo: FileEventJson) { + this.fileViewer.emit(fileInfo); + } + + /** [Event] Attach File Save & Save As */ + onSave(value: { + fileInfo: FileEventJson; + fileDownloadItem: FileDownloadItem; + type: string; + }) { + this.save.emit(value); + } + + /** [Event] Context Menu */ + onContextMenu(event: any, message: Info) { + if ( + message.type === EventType.Translation || + message.type === EventType.MassTranslation + ) { + this.contextMenu.emit({ event: event.event, message, type: event.type }); + } else { + this.contextMenu.emit({ event, message }); + } + } +} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html index fb12c61c..b21eda25 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html @@ -45,200 +45,26 @@ -
- - - - - - -
-
- - - - - - - - - - - - - - - -
- - -
- -
-
- {{ getUserName(message.senderSeq) }} -
- -
- - - - - - - - - - - - - - - - - - - - - -
- - {{ message.type }} / {{ message.sentMessage }} -
- -
-
- -
-
    -
  • {{ getUnreadCount(message) }}
    • -
  • - {{ message.sendDate | ucapDate: 'a hh:mm' }} -
    • -
-
- -
-
+ diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts index 47f28103..c60593dc 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts @@ -209,10 +209,7 @@ export class MessagesComponent implements OnInit { return false; } - onClickOpenProfile(event: MouseEvent, userSeq: number) { - event.preventDefault(); - event.stopPropagation(); - + onClickOpenProfile(userSeq: number) { this.openProfile.emit(userSeq); } @@ -250,14 +247,11 @@ export class MessagesComponent implements OnInit { } /** [Event] Context Menu */ - onContextMenuMessage(event: any, message: Info) { - if ( - message.type === EventType.Translation || - message.type === EventType.MassTranslation - ) { - this.contextMenu.emit({ event: event.event, message, type: event.type }); - } else { - this.contextMenu.emit({ event, message }); - } + onContextMenu(event: { + event: MouseEvent; + message: Info; + type?: string; + }) { + this.contextMenu.emit(event); } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts b/projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts index c2df5dd4..0b627e8e 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts @@ -10,10 +10,14 @@ import { MatInputModule } from '@angular/material/input'; import { MatButtonModule } from '@angular/material/button'; import { MatMenuModule } from '@angular/material/menu'; +import { TranslateModule } from '@ngx-translate/core'; + import { UCapUiModule } from '@ucap-webmessenger/ui'; import { FormComponent } from './components/form.component'; +import { MessageBoxComponent } from './components/message-box.component'; import { MessagesComponent } from './components/messages.component'; +import { SearchComponent } from './components/search.component'; import { DateSplitterComponent as MBDateSplitterComponent } from './components/message-box/date-splitter.component'; import { FileComponent as MBFileComponent } from './components/message-box/file.component'; @@ -32,12 +36,11 @@ import { TranslationComponent as MBTranslationComponent } from './components/mes import { VideoComponent as MBVideoComponent } from './components/message-box/video.component'; import { VideoConferenceComponent as MBVideoConferenceComponent } from './components/message-box/video-conference.component'; import { AllimComponent as MBAllimComponent } from './components/message-box/allim.component'; -import { SearchComponent } from './components/search.component'; -import { TranslateModule } from '@ngx-translate/core'; const COMPONENTS = [ FormComponent, MessagesComponent, + MessageBoxComponent, SearchComponent, MBDateSplitterComponent,