0710 sync

projects/ui-chat/src/lib/components/message-box/attach-file.component.html

@@ -1,37 +1,128 @@
-<div class="ucap-chat-message-box-attach-file" (click)="onClickOpenViewer()">
-  <!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
-  <!-- <div class="file-img" [ngClass]="fileInfo.FileExt"></div> -->
-  <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
-    <div class="ico"></div>
+<div class="chat-bubble-area">
+  <div
+    class="ucap-chat-message-box-attach-file-bubble"
+    (mouseenter)="mouseEnter($event)"
+    (mouseleave)="mouseLeave($event)"
+  >
+    <div class="file-info-box" (click)="onClickOpenViewer()">
+      <!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
+      <!-- <div class="file-img" [ngClass]="fileInfo.FileExt"></div> -->
+      <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
+        <div class="ico"></div>
+      </div>
+      <ul class="file-info">
+        <li class="file-name">
+          {{ fileInfo.fileName }}
+        </li>
+        <li class="date">
+          {{ fileInfo.attachmentRegDate | ucapDate }}
+          <span *ngIf="!!fileRetentionPeriod && fileRetentionPeriod > 0">
+            ~
+            {{
+              fileInfo.attachmentRegDate
+                | ucapDate: 'YYYY.MM.DD':fileRetentionPeriodOptions
+            }}
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div class="btn-box" [ngClass]="!!showOverButtons ? 'over' : ''">
+      <ul>
+        <li *ngIf="!existFile">
+          <button
+            mat-flat-button
+            color="accent"
+            class="btn-file-ctrl"
+            (click)="onClickSave()"
+            aria-label="저장"
+            [matTooltip]="'common:file.save' | ucapI18n"
+          >
+            <mat-icon>save_alt</mat-icon>
+          </button>
+        </li>
+        <li *ngIf="!existFile">
+          <button
+            mat-flat-button
+            *ngIf="deviceType !== DeviceType.Web"
+            color="accent"
+            class="btn-file-ctrl"
+            (click)="onClickSaveAs()"
+            aria-label="다른 이름 저장"
+            [matTooltip]="'common:file.saveAs' | ucapI18n"
+          >
+            <mat-icon>save</mat-icon>
+          </button>
+        </li>
+        <li *ngIf="!!existFile">
+          <button
+            mat-flat-button
+            *ngIf="deviceType !== DeviceType.Web"
+            color="accent"
+            class="btn-file-ctrl"
+            (click)="onClickOpenFile()"
+            aria-label="파일열기"
+            [matTooltip]="'common:file.fileOpen' | ucapI18n"
+          >
+            <mat-icon class="material-icons-outlined">text_snippet</mat-icon>
+          </button>
+        </li>
+        <li *ngIf="!!existFile">
+          <button
+            mat-flat-button
+            *ngIf="deviceType !== DeviceType.Web"
+            color="accent"
+            class="btn-file-ctrl"
+            (click)="onClickOpenFolder()"
+            aria-label="폴더열기"
+            [matTooltip]="'common:file.folderOpen' | ucapI18n"
+          >
+            <mat-icon class="material-icons-outlined">folder</mat-icon>
+          </button>
+        </li>
+        <li>
+          <button
+            mat-flat-button
+            color="accent"
+            class="btn-file-ctrl"
+            (click)="onClickOpenViewer()"
+            aria-label="뷰어 열기"
+            [matTooltip]="'label.openViewer' | ucapI18n"
+          >
+            <mat-icon>open_in_new</mat-icon>
+          </button>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="progress"
+      [ngClass]="
+        !!fileDownloadItem &&
+        !!fileDownloadItem.downloadingProgress$ &&
+        (fileDownloadItem.downloadingProgress$ | async) > 0 &&
+        (fileDownloadItem.downloadingProgress$ | async) < 100
+          ? 'over'
+          : ''
+      "
+    >
+      <button
+        mat-icon-button
+        aria-label="close"
+        class="btn-close"
+        color="accent"
+        style="display: none;"
+      >
+        <mat-icon color="accent">cancel</mat-icon>
+      </button>
+      <mat-progress-bar
+        color="accent"
+        mode="determinate"
+        [value]="fileDownloadItem.downloadingProgress$ | async"
+      ></mat-progress-bar>
+
+      <div class="progress-info-area">
+        <span>{{ 'common:file.downloading' | ucapI18n }}</span
+        ><strong>{{ fileDownloadItem.downloadingProgress$ | async }}%</strong>
+      </div>
+    </div>
   </div>
-  <ul class="file-info">
-    <li class="file-name">
-      {{ fileInfo.fileName }}
-    </li>
-    <li class="date">
-      {{ fileInfo.attachmentRegDate | ucapDate }}
-    </li>
-  </ul>
-</div>
-<div class="btn-box over">
-  <ul *ngIf="!expired">
-    <li>
-      <button mat-button (click)="onClickSave()">
-        저장
-      </button>
-    </li>
-    <li>
-      <button mat-button (click)="onClickSave()">
-        폴더열기
-      </button>
-    </li>
-    <li>
-      <button mat-button (click)="onClickSave()">
-        ???
-      </button>
-    </li>
-  </ul>
-</div>
-<div class="progress over">
-  프로그레스 영역
 </div>