ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

progress bar is modified

Browse Source
This commit is contained in:
병준 박 2019-11-26 14:06:50 +09:00
parent 4582a25219
commit 67a6e4ceaf
8 changed files with 169 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
View File

@ -46,9 +46,12 @@
</ucap-group-expansion-panel> </ucap-group-expansion-panel>
</div> </div>
<div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result"> <div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result">
<div *ngIf="searchProcessing"> <div style="position: relative;">
<mat-progress-bar mode="indeterminate"></mat-progress-bar> <div *ngIf="searchProcessing" style="position: absolute; width: 100%;">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
</div> </div>
<div class="result-num"> <div class="result-num">
검색결과<span class="text-accent-color" 검색결과<span class="text-accent-color"
>({{ searchUserInfos.length }}명)</span >({{ searchUserInfos.length }}명)</span
@ -93,16 +96,36 @@
</button> </button>
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')"> <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
<!--<mat-icon>expand_more</mat-icon>--> <!--<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" <svg
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round"> xmlns="http://www.w3.org/2000/svg"
<path d="M6 9l6 6 6-6" /></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> <span>그룹 전체 열기</span>
</button> </button>
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')"> <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
<!--<mat-icon>expand_less</mat-icon>--> <!--<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" <svg
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round"> xmlns="http://www.w3.org/2000/svg"
<path d="M18 15l-6-6-6 6" /></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> <span>그룹 전체 닫기</span>
</button> </button>
<!-- <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')"> <!-- <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">

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

@ -142,10 +142,14 @@
</div> </div>
</mat-toolbar> </mat-toolbar>
<!-- / CHAT TOOLBAR --> <!-- / CHAT TOOLBAR -->
<mat-progress-bar <div style="position: relative;">
*ngIf="eventListProcessing$ | async" <div
mode="indeterminate" *ngIf="eventListProcessing$ | async"
></mat-progress-bar> style="position: absolute; width: 100%;"
>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
</div>
<!-- CHAT CONTENT --> <!-- CHAT CONTENT -->
<div <div
fxFlex="1 1 auto" fxFlex="1 1 auto"

10
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
View File

@ -93,9 +93,15 @@
[style.display]="isShowSearch ? 'block' : 'none'" [style.display]="isShowSearch ? 'block' : 'none'"
class="search-result" class="search-result"
> >
<div *ngIf="searchProcessing"> <div style="position: relative;">
<mat-progress-bar mode="indeterminate"></mat-progress-bar> <div
*ngIf="searchProcessing"
style="position: absolute; width: 100%;"
>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
</div> </div>
<div class="result-num"> <div class="result-num">
검색결과 검색결과
<span class="text-accent-color" <span class="text-accent-color"

95
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html
View File

@ -1,35 +1,91 @@
<div class="ucap-binary-viewer-container"> <div class="ucap-binary-viewer-container">
<mat-toolbar class="ucap-binary-viewer-header"> <mat-toolbar class="ucap-binary-viewer-header">
<!--<mat-icon class="ucap-binary-viewer-icon">attachment</mat-icon>--> <!--<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" <svg
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="ucap-binary-viewer-icon"> 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 <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"> 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> ></path>
</svg> </svg>
<span class="ucap-binary-viewer-title">{{ fileInfo.fileName }}</span> <span class="ucap-binary-viewer-title">{{ fileInfo.fileName }}</span>
<span class="ucap-binary-viewer-spacer"></span> <span class="ucap-binary-viewer-spacer"></span>
<button mat-icon-button class="ucap-binary-viewer-action" matTooltip="다운로드" matTooltipPosition="below" aria-label="" <button
(click)="onClickDownload()"> mat-icon-button
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" class="ucap-binary-viewer-action"
stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round"> matTooltip="다운로드"
<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" /> 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> </svg>
</button> </button>
<span class="stroke-bar"></span> <span class="stroke-bar"></span>
<button mat-icon-button color="warn" class="ucap-binary-viewer-action" (click)="onClickClose()"> <button
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" mat-icon-button
stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round"> 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="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>
</svg> </svg>
</button> </button>
</mat-toolbar> </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-body">
<div class="ucap-binary-viewer-content-wrapper" fxLayout="column" fxLayout.xs="row" fxFlexFill <div
fxLayoutAlign="center center"> class="ucap-binary-viewer-content-wrapper"
fxLayout="column"
fxLayout.xs="row"
fxFlexFill
fxLayoutAlign="center center"
>
<div class="circle-box"> <div class="circle-box">
<div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]"> <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
<div class="ico"></div> <div class="ico"></div>
@ -39,10 +95,15 @@
미리보기를 지원하지 않는 파일입니다. 미리보기를 지원하지 않는 파일입니다.
</div> </div>
<div> <div>
<button colori mat-raised-button aria-label="" (click)="onClickDownload()"> <button
colori
mat-raised-button
aria-label=""
(click)="onClickDownload()"
>
Download Download
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

16
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/document-viewer.component.html
View File

@ -15,9 +15,15 @@
>delete</mat-icon >delete</mat-icon
> >
</mat-toolbar> </mat-toolbar>
<mat-progress-bar <div style="position: relative;">
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$" <div
mode="determinate" *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
[value]="fileDownloadItem.downloadingProgress$ | async" style="position: absolute; width: 100%;"
></mat-progress-bar> >
<mat-progress-bar
mode="determinate"
[value]="fileDownloadItem.downloadingProgress$ | async"
></mat-progress-bar>
</div>
</div>
</div> </div>

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

@ -143,11 +143,17 @@
</svg> </svg>
</button> </button>
</mat-toolbar> </mat-toolbar>
<mat-progress-bar <div style="position: relative;">
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$" <div
mode="determinate" *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
[value]="fileDownloadItem.downloadingProgress$ | async" style="position: absolute; width: 100%;"
></mat-progress-bar> >
<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-body">
<div <div
class="ucap-image-viewer-image-wrapper" class="ucap-image-viewer-image-wrapper"

16
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html
View File

@ -22,11 +22,17 @@
Close Close
</button> </button>
</mat-toolbar> </mat-toolbar>
<mat-progress-bar <div style="position: relative;">
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$" <div
mode="determinate" *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
[value]="fileDownloadItem.downloadingProgress$ | async" style="position: absolute; width: 100%;"
></mat-progress-bar> >
<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-body">
<div <div
class="ucap-sound-viewer-sound-icon" class="ucap-sound-viewer-sound-icon"

16
projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.html
View File

@ -73,11 +73,17 @@
</svg> </svg>
</button> </button>
</mat-toolbar> </mat-toolbar>
<mat-progress-bar <div style="position: relative;">
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$" <div
mode="determinate" *ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
[value]="fileDownloadItem.downloadingProgress$ | async" style="position: absolute; width: 100%;"
></mat-progress-bar> >
<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-body">
<div <div
class="ucap-video-viewer-video-icon" class="ucap-video-viewer-video-icon"