From 67a6e4ceafa5198e48a5373bef45a9982f43b664 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 26 Nov 2019 14:06:50 +0900
Subject: [PATCH] progress bar is modified

---
 .../left-sidenav/group.component.html         | 39 ++++++--
 .../components/messages.component.html        | 12 ++-
 .../chat/create-chat.dialog.component.html    | 10 +-
 .../file-viewer/binary-viewer.component.html  | 95 +++++++++++++++----
 .../document-viewer.component.html            | 16 +++-
 .../file-viewer/image-viewer.component.html   | 16 +++-
 .../file-viewer/sound-viewer.component.html   | 16 +++-
 .../file-viewer/video-viewer.component.html   | 16 +++-
 8 files changed, 169 insertions(+), 51 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index 85578952..e22eec97 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -46,9 +46,12 @@
   </ucap-group-expansion-panel>
 </div>
 <div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result">
-  <div *ngIf="searchProcessing">
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  <div style="position: relative;">
+    <div *ngIf="searchProcessing" style="position: absolute; width: 100%;">
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
   </div>
+
   <div class="result-num">
     검색결과<span class="text-accent-color"
       >({{ searchUserInfos.length }}명)</span
@@ -93,16 +96,36 @@
   </button>
   <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
     <!--<mat-icon>expand_more</mat-icon>-->
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-      stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-      <path d="M6 9l6 6 6-6" /></svg>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+    >
+      <path d="M6 9l6 6 6-6" />
+    </svg>
     <span>그룹 전체 열기</span>
   </button>
   <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
     <!--<mat-icon>expand_less</mat-icon>-->
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-        <path d="M18 15l-6-6-6 6" /></svg>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+    >
+      <path d="M18 15l-6-6-6 6" />
+    </svg>
     <span>그룹 전체 닫기</span>
   </button>
   <!-- <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index ec18b44b..d7d90dc1 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -142,10 +142,14 @@
     </div>
   </mat-toolbar>
   <!-- / CHAT TOOLBAR -->
-  <mat-progress-bar
-    *ngIf="eventListProcessing$ | async"
-    mode="indeterminate"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="eventListProcessing$ | async"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
+  </div>
   <!-- CHAT CONTENT -->
   <div
     fxFlex="1 1 auto"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
index 4d0fa70d..cb93dc2e 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@@ -93,9 +93,15 @@
                 [style.display]="isShowSearch ? 'block' : 'none'"
                 class="search-result"
               >
-                <div *ngIf="searchProcessing">
-                  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+                <div style="position: relative;">
+                  <div
+                    *ngIf="searchProcessing"
+                    style="position: absolute; width: 100%;"
+                  >
+                    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+                  </div>
                 </div>
+
                 <div class="result-num">
                   검색결과
                   <span class="text-accent-color"
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
index 3e8b3161..66f712ed 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
@@ -1,35 +1,91 @@
 <div class="ucap-binary-viewer-container">
   <mat-toolbar class="ucap-binary-viewer-header">
     <!--<mat-icon class="ucap-binary-viewer-icon">attachment</mat-icon>-->
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-      stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="ucap-binary-viewer-icon">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="butt"
+      stroke-linejoin="round"
+      class="ucap-binary-viewer-icon"
+    >
       <path
-        d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
-      </path>
+        d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
+      ></path>
     </svg>
     <span class="ucap-binary-viewer-title">{{ fileInfo.fileName }}</span>
     <span class="ucap-binary-viewer-spacer"></span>
 
-    <button mat-icon-button class="ucap-binary-viewer-action" matTooltip="다운로드" matTooltipPosition="below" aria-label=""
-      (click)="onClickDownload()">
-      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
-        <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" />
+    <button
+      mat-icon-button
+      class="ucap-binary-viewer-action"
+      matTooltip="다운로드"
+      matTooltipPosition="below"
+      aria-label=""
+      (click)="onClickDownload()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
+        />
       </svg>
     </button>
     <span class="stroke-bar"></span>
-    <button mat-icon-button color="warn" class="ucap-binary-viewer-action" (click)="onClickClose()">
-      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+    <button
+      mat-icon-button
+      color="warn"
+      class="ucap-binary-viewer-action"
+      (click)="onClickClose()"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="21"
+        height="21"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
         <line x1="18" y1="6" x2="6" y2="18"></line>
         <line x1="6" y1="6" x2="18" y2="18"></line>
       </svg>
     </button>
   </mat-toolbar>
-
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-binary-viewer-body">
-    <div class="ucap-binary-viewer-content-wrapper" fxLayout="column" fxLayout.xs="row" fxFlexFill
-      fxLayoutAlign="center center">
+    <div
+      class="ucap-binary-viewer-content-wrapper"
+      fxLayout="column"
+      fxLayout.xs="row"
+      fxFlexFill
+      fxLayoutAlign="center center"
+    >
       <div class="circle-box">
         <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
           <div class="ico"></div>
@@ -39,10 +95,15 @@
         미리보기를 지원하지 않는 파일입니다.
       </div>
       <div>
-        <button colori mat-raised-button aria-label="" (click)="onClickDownload()">
+        <button
+          colori
+          mat-raised-button
+          aria-label=""
+          (click)="onClickDownload()"
+        >
           Download
         </button>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
index b9df4234..1590190a 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
@@ -15,9 +15,15 @@
       >delete</mat-icon
     >
   </mat-toolbar>
-  <mat-progress-bar
-    *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
-    mode="determinate"
-    [value]="fileDownloadItem.downloadingProgress$ | async"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
 </div>
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
index 343a55d6..c336f3c0 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/image-viewer.component.html
@@ -143,11 +143,17 @@
       </svg>
     </button>
   </mat-toolbar>
-  <mat-progress-bar
-    *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
-    mode="determinate"
-    [value]="fileDownloadItem.downloadingProgress$ | async"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-image-viewer-body">
     <div
       class="ucap-image-viewer-image-wrapper"
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
index 1d791071..959d7f31 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
@@ -22,11 +22,17 @@
       Close
     </button>
   </mat-toolbar>
-  <mat-progress-bar
-    *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
-    mode="determinate"
-    [value]="fileDownloadItem.downloadingProgress$ | async"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-sound-viewer-body">
     <div
       class="ucap-sound-viewer-sound-icon"
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
index 9a3f9778..d06f5100 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
@@ -73,11 +73,17 @@
       </svg>
     </button>
   </mat-toolbar>
-  <mat-progress-bar
-    *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
-    mode="determinate"
-    [value]="fileDownloadItem.downloadingProgress$ | async"
-  ></mat-progress-bar>
+  <div style="position: relative;">
+    <div
+      *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
+      style="position: absolute; width: 100%;"
+    >
+      <mat-progress-bar
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+    </div>
+  </div>
   <div class="ucap-video-viewer-body">
     <div
       class="ucap-video-viewer-video-icon"