1. anchor tag cursor styling.

2. anchor tag open url for sticker, mass-text and mass-text-detail
3. mass-detail view component added

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/index.ts

@@ -1,4 +1,9 @@
 import { CreateChatDialogComponent } from './create-chat.dialog.component';
 import { EditChatRoomDialogComponent } from './edit-chat-room.dialog.component';
+import { MassDetailComponent } from './mass-detail.component';
 
-export const DIALOGS = [CreateChatDialogComponent, EditChatRoomDialogComponent];
+export const DIALOGS = [
+  CreateChatDialogComponent,
+  EditChatRoomDialogComponent,
+  MassDetailComponent
+];

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html

@@ -0,0 +1,15 @@
+<mat-card class="confirm-card mat-elevation-z">
+  <mat-card-header>
+    <mat-card-title>{{ data.title }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <perfect-scrollbar>
+      <p [innerHTML]="data.contents | linky" class="contnets"></p>
+    </perfect-scrollbar>
+  </mat-card-content>
+  <mat-card-actions class="button-farm flex-row">
+    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
+      confirm
+    </button>
+  </mat-card-actions>
+</mat-card>

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss

@@ -0,0 +1,25 @@
+::ng-deep .mat-card-header-tex {
+  margin: 0;
+}
+.confirm-card {
+  min-width: 500px;
+  .mat-card-header {
+    margin-bottom: 20px;
+    .mat-card-header-text {
+      .mat-card-title {
+        margin: 0 -16px;
+      }
+    }
+  }
+  .button-farm {
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
+    }
+  }
+}
+
+.contnets {
+  max-height: 500px;
+  word-break: break-word;
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MassDetailComponent } from './mass-detail.component';
+
+describe('MassDetailComponent', () => {
+  let component: MassDetailComponent;
+  let fixture: ComponentFixture<MassDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MassDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MassDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.ts

@@ -0,0 +1,58 @@
+import {
+  Component,
+  OnInit,
+  Inject,
+  ElementRef,
+  AfterViewInit
+} from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
+
+export interface MassDetailDialogData {
+  title: string;
+  contents: string;
+}
+
+// tslint:disable-next-line: no-empty-interface
+export interface MassDetailDialogResult {}
+
+@Component({
+  selector: 'app-layout-messenger-mass-detail',
+  templateUrl: './mass-detail.component.html',
+  styleUrls: ['./mass-detail.component.scss']
+})
+export class MassDetailComponent implements OnInit, AfterViewInit {
+  constructor(
+    public dialogRef: MatDialogRef<
+      MassDetailDialogData,
+      MassDetailDialogResult
+    >,
+    @Inject(MAT_DIALOG_DATA) public data: MassDetailDialogData,
+    private elementRef: ElementRef,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
+  ) {}
+
+  ngOnInit() {}
+
+  ngAfterViewInit(): void {
+    if (
+      !!this.elementRef.nativeElement &&
+      !!this.elementRef.nativeElement.querySelector('a')
+    ) {
+      const elements = this.elementRef.nativeElement.querySelectorAll('a');
+      elements.forEach(element => {
+        element.addEventListener('click', this.onClickEvent.bind(this));
+      });
+    }
+  }
+
+  onClickEvent(event: MouseEvent) {
+    this.nativeService.openDefaultBrowser(
+      (event.target as HTMLAnchorElement).text
+    );
+  }
+
+  onClickConfirm(): void {
+    this.dialogRef.close();
+  }
+}

projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts

@@ -26,6 +26,10 @@ import {
   AlertDialogData
 } from '@ucap-webmessenger/ui';
 import { initialState } from '../event';
+import {
+  MassDetailComponent,
+  MassDetailDialogData
+} from '@app/layouts/messenger/dialogs/chat/mass-detail.component';
 
 @Injectable()
 export class Effects {
@@ -63,21 +67,16 @@ export class Effects {
                 this.store.dispatch(massTalkDownloadSuccess(res));
 
                 const result = this.dialogService.open<
-                  AlertDialogComponent,
+                  MassDetailComponent,
-                  AlertDialogData
+                  MassDetailDialogData
-                >(
+                >(MassDetailComponent, {
-                  AlertDialogComponent,
+                  disableClose: false,
-
+                  width: '550px',
-                  {
+                  data: {
-                    width: '100%',
+                    title: 'Detail View',
-                    height: '500px',
+                    contents: res.content
-                    disableClose: false,
-                    data: {
-                      title: '전체보기',
-                      html: `<pre>` + res.content + `</pre>`
-                    }
                   }
-                );
+                });
               } else {
                 this.store.dispatch(massTalkDownloadFailure({ error: res }));
               }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html

@@ -1,5 +1,5 @@
 <div class="bubble-main">
-  <span class="content" [innerHTML]="content | linefeedtohtml"></span>
+  <span class="content" [innerHTML]="content | linefeedtohtml | linky"></span>
   <span>
     {{ moment(message.sendDate).toDate() | date: 'short' }}
   </span>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html

@@ -6,9 +6,6 @@
         onerror="this.src='assets/sticker/sticker_default.png'"
       />
     </li>
-    <li
+    <li *ngIf="contents" [innerHTML]="contents | linefeedtohtml | linky"></li>
-      *ngIf="contentJson && contentJson.chat"
-      [innerHTML]="contentJson.chat | linefeedtohtml"
-    ></li>
   </ul>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.ts

@@ -1,28 +1,61 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  Inject,
+  ElementRef,
+  AfterViewInit
+} from '@angular/core';
 import { Info, StickerEventJson } from '@ucap-webmessenger/protocol-event';
 import { NGXLogger } from 'ngx-logger';
 import { StickerInfo } from '../../models/sticker-info.json';
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
 @Component({
   selector: 'ucap-chat-message-box-sticker',
   templateUrl: './sticker.component.html',
   styleUrls: ['./sticker.component.scss']
 })
-export class StickerComponent implements OnInit {
+export class StickerComponent implements OnInit, AfterViewInit {
   @Input()
   message: Info<StickerEventJson>;
 
-  contentJson?: StickerInfo;
+  contents: string;
   stickerUrl?: string;
-  constructor(private logger: NGXLogger) {}
+  constructor(
+    private logger: NGXLogger,
+    private elementRef: ElementRef,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
+  ) {}
 
   ngOnInit() {
     try {
       if (!!this.message.sentMessageJson.file) {
         this.stickerUrl = `assets/sticker/sticker_s_${this.message.sentMessageJson.file}.png`;
       }
+      if (!!this.message.sentMessageJson.chat) {
+        this.contents = this.message.sentMessageJson.chat;
+      }
     } catch (e) {
       this.logger.error(e);
     }
   }
+
+  ngAfterViewInit(): void {
+    if (
+      !!this.elementRef.nativeElement &&
+      !!this.elementRef.nativeElement.querySelector('a')
+    ) {
+      const elements = this.elementRef.nativeElement.querySelectorAll('a');
+      elements.forEach(element => {
+        element.addEventListener('click', this.onClickEvent.bind(this));
+      });
+    }
+  }
+
+  onClickEvent(event: MouseEvent) {
+    this.nativeService.openDefaultBrowser(
+      (event.target as HTMLAnchorElement).text
+    );
+  }
 }

projects/ucap-webmessenger-ui/src/assets/scss/partials/_general.scss

@@ -68,3 +68,7 @@ input {
   border: none;
   padding: 0 16px;
 }
+
+a {
+  cursor: pointer;
+}