progress bar is modified

2019-11-26 14:06:50 +09:00 · 2019-11-26 14:06:50 +09:00 · 67a6e4ceaf
commit 67a6e4ceaf
parent 4582a25219
8 changed files with 169 additions and 51 deletions
--- 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')">
--- 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"
--- 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"
--- 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>
+</div>
--- 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>
--- 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"
--- 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"
--- 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"