Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.html

@@ -2,6 +2,7 @@
   <mat-tab-group
     mat-stretch-tabs
     animationDuration="0ms"
+    [backgroundColor]="'transparent'"
     (selectedTabChange)="onSelectedTabChange($event)"
     class="global-menu"
   >

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

@@ -182,7 +182,11 @@
     (fileDragLeave)="onFileDragLeave()"
   >
     <!-- CHAT MESSAGES -->
-    <button mat-stroked-button class=" icon-button text-accent-darkest">
+    <button
+      mat-stroked-button
+      class=" icon-button text-accent-darkest"
+      (click)="onClickScrollToBottom()"
+    >
       <i class="mid  mdi-arrow-collapse-down"></i>
     </button>
 

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

@@ -691,7 +691,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         req: {
           roomSeq: this.roomInfoSubject.value.roomSeq,
           eventType: EventType.Character,
-          sentMessage: StringUtil.escapeHtml(message)
+          sentMessage: message
         }
       })
     );
@@ -726,7 +726,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     const stickerJson: StickerEventJson = {
       name: '스티커',
       file: this.selectedSticker.index,
-      chat: !!message ? StringUtil.escapeHtml(message.trim()) : ''
+      chat: !!message ? message.trim() : ''
     };
     this.store.dispatch(
       EventStore.send({
@@ -751,7 +751,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           roomSeq: this.roomInfoSubject.value.roomSeq,
           eventType: EventType.MassText,
           // sentMessage: message.replace(/\n/gi, '\r\n')
-          sentMessage: StringUtil.escapeHtml(message)
+          sentMessage: message
         }
       })
     );
@@ -759,7 +759,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   /** Send Translation message */
   sendMessageOfTranslate(message: string) {
     const destLocale = this.destLocale;
-    const original = StringUtil.escapeHtml(message);
+    const original = message;
     const roomSeq = this.roomInfoSubject.value.roomSeq;
 
     if (!!this.isTranslationProcess) {
@@ -2007,4 +2007,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
       }
     });
   }
+
+  onClickScrollToBottom() {
+    this.chatMessages.initEventMore();
+    this.chatMessages.scrollToBottom();
+  }
 }

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -15,6 +15,12 @@
       ></app-layout-messenger-left-side>
     </mat-drawer>
     <div class="chat-messages bg-accent-brightest">
+      <!-- <div class="messenger-statusbar-container">
+        <div class="messenger-statusbar-message">
+          업데이트가 존재합니다.
+        </div>
+        <div class="messenger-statusbar-actions"></div>
+      </div> -->
       <app-layout-messenger-intro
         *ngIf="!(this.selectedChat$ | async)"
       ></app-layout-messenger-intro>

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -16,10 +16,26 @@
     flex: 1 1 auto;
     min-width: 320px;
     height: 100%;
+
     .chat-messages {
       width: 100%;
       height: 100%;
       font-size: 1em;
+
+      .messenger-statusbar-container {
+        width: 100%;
+        height: 25px;
+        background-color: silver;
+        text-align: center;
+
+        .messenger-statusbar-message {
+          width: calc(100% - 20px);
+          height: 100%;
+        }
+
+        .messenger-statusbar-actions {
+        }
+      }
     }
     .rightDrawer {
       width: 320px;

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -391,6 +391,14 @@ $daesang-grey: (
     background-color: transparent;
   }
 
+  app-page-messenger-main mat-drawer-content {
+    overflow: hidden !important;
+  }
+
+  .mat-tab-labels .cdk-focused {
+    background-color: transparent !important;
+  }
+
   .messages .container {
     background: mat-color($accent, 50);
   }
@@ -455,11 +463,11 @@ $daesang-grey: (
       background-color: mat-color($accent, 500);
     }
   }
-  .chatroom-search{
-    .search-form{
+  .chatroom-search {
+    .search-form {
       border: 2px solid mat-color($accent, B100);
     }
-    .btns{
+    .btns {
       background-color: mat-color($accent, B100);
     }
   }

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

@@ -165,11 +165,16 @@ $tablet-s-width: 768px;
     }
   }
 }
-.bubble-main {
+::ng-deep .bubble-main {
   word-wrap: break-word;
   white-space: pre-wrap;
   word-break: break-word;
+  a {
+    color: #0367a6;
+    text-decoration: underline;
+  }
 }
+
 ::ng-deep .view-previous {
   display: flex;
   flex-flow: column;

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

@@ -2,7 +2,7 @@
   <div
     *ngIf="!translationSimpleview || (!!translationSimpleview && !!isMe)"
     class="original"
-    [innerHTML]="message.sentMessageJson.original | linky"
+    [innerHTML]="message.sentMessageJson.original | ucapSafeHtml | linky"
     (contextmenu)="onContextMenuMessage($event, 'original')"
   ></div>
   <div
@@ -11,7 +11,10 @@
     (contextmenu)="onContextMenuMessage($event, 'translation')"
   >
     <span class="language">{{ message.sentMessageJson.destLocale }}</span>
-    <span [innerHTML]="message.sentMessageJson.translation | linky"> </span>
+    <span
+      [innerHTML]="message.sentMessageJson.translation | ucapSafeHtml | linky"
+    >
+    </span>
   </div>
   <div class="btn-box">
     <ul>

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

@@ -1,5 +1,8 @@
 <div class="bubble-main">
-  <span class="content" [innerHTML]="content | linefeedtohtml | linky"></span>
+  <span
+    class="content"
+    [innerHTML]="content | linefeedtohtml | ucapSafeHtml | linky"
+  ></span>
   <span>
     {{ message.sendDate | ucapDate: 'YYYY.MM.DD a hh:mm' }}
   </span>

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

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

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

@@ -1,3 +1,3 @@
 <div class="bubble-main">
-  <span [innerHTML]="message.sentMessage | linky"></span>
+  <span [innerHTML]="message.sentMessage | ucapSafeHtml | linky"></span>
 </div>

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -69,7 +69,10 @@
             <i class="mdi mid-18 mdi-bell-off-outline text-primary-light"></i>
           </div>
         </div>
-        <div class="final-message" [innerHTML]="finalEventMessage"></div>
+        <div
+          class="final-message"
+          [innerHTML]="finalEventMessage | ucapSafeHtml"
+        ></div>
       </div>
 
       <div class="date">

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html

@@ -171,14 +171,7 @@
         *ngIf="fileDownloadUrl"
         [src]="fileDownloadUrl"
         [style.width]="'auto'"
-        [style.height]="
-          naturalHeight > imageContainer.clientHeight
-            ? ((imageContainer.clientHeight - 20) / naturalHeight) *
-                (zoomRatio / 100) *
-                naturalHeight +
-              'px'
-            : naturalHeight + 'px'
-        "
+        [style.height]="getImageHeight(imageContainer.clientHeight)"
         (load)="onLoadFileDownloadUrl(downloadImage)"
       />
     </div>

projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.ts

@@ -82,4 +82,14 @@ export class ImageViewerComponent implements OnInit {
 
     this.changeDetectorRef.detectChanges();
   }
+
+  getImageHeight(containerHeight: number): string {
+    const realContainerHeight = containerHeight - 20;
+    const oriHeight =
+      this.naturalHeight > realContainerHeight
+        ? realContainerHeight
+        : this.naturalHeight;
+
+    return oriHeight * (this.zoomRatio / 100) + 'px';
+  }
 }

projects/ucap-webmessenger-ui/src/lib/pipes/safe-html.pipe.ts

@@ -1,11 +1,15 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { StringUtil } from '../utils/string.util';
 
 @Pipe({ name: 'ucapSafeHtml' })
 export class SafeHtmlPipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) {}
 
   public transform(value: string) {
-    return this.domSanitizer.bypassSecurityTrustHtml(value);
+    // return this.domSanitizer.bypassSecurityTrustHtml(
+    //   StringUtil.escapeHtml(value)
+    // );
+    return StringUtil.escapeHtml(value);
   }
 }

projects/ucap-webmessenger-ui/src/lib/services/status-bar.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StatusBarService {
+  public constructor() {}
+
+  open() {}
+}