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

사운드 뷰어 수정

Browse Source
This commit is contained in:
khk 2019-12-31 11:50:13 +09:00
parent 576f9ab07f
commit 23d188faac
2 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -221,6 +221,9 @@ $daesang-grey: (
.text-primary-color { .text-primary-color {
color: mat-color($primary); color: mat-color($primary);
} }
.text-accent-dark {
color: mat-color($accent, 600);
}
.text-accent-darkest { .text-accent-darkest {
color: mat-color($accent, 800); color: mat-color($accent, 800);
} }

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

@ -12,9 +12,20 @@
(click)="onClickDownload()" (click)="onClickDownload()"
> >
<!--<mat-icon>get_app</mat-icon>--> <!--<mat-icon>get_app</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round"> xmlns="http://www.w3.org/2000/svg"
<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" /> 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>
@ -24,8 +35,17 @@
class="ucap-image-viewer-action btn-close" class="ucap-image-viewer-action btn-close"
(click)="onClickClose()" (click)="onClickClose()"
> >
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round"> 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>
@ -60,18 +80,20 @@
(loadeddata)="onLoadedDataAudio()" (loadeddata)="onLoadedDataAudio()"
></audio> ></audio>
<div class="circle-box"> <div class="circle-box">
<!--<mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>--> <mat-icon class="ucap-sound-viewer-icon" *ngIf="!playing">
<div class='sound-wave'> music_note
<div class='sound-bar bg-accent-darkest'></div> </mat-icon>
<div class='sound-bar bg-accent-darkest'></div> <div class="sound-wave" *ngIf="playing">
<div class='sound-bar bg-accent-darkest'></div> <div class="sound-bar bg-accent-dark"></div>
<div class='sound-bar bg-accent-darkest'></div> <div class="sound-bar bg-accent-dark"></div>
<div class='sound-bar bg-accent-darkest'></div> <div class="sound-bar bg-accent-dark"></div>
<div class='sound-bar bg-accent-darkest'></div> <div class="sound-bar bg-accent-dark"></div>
<div class='sound-bar bg-accent-darkest'></div> <div class="sound-bar bg-accent-dark"></div>
<div class='sound-bar bg-accent-darkest'></div> <div class="sound-bar bg-accent-dark"></div>
<div class='sound-bar bg-accent-darkest'></div> <div class="sound-bar bg-accent-dark"></div>
<div class='sound-bar bg-accent-darkest'></div> <div class="sound-bar bg-accent-dark"></div>
<div class="sound-bar bg-accent-dark"></div>
<div class="sound-bar bg-accent-dark"></div>
</div> </div>
</div> </div>
</div> </div>
@ -95,7 +117,6 @@
class="ucap-sound-viewer-sound-controls" class="ucap-sound-viewer-sound-controls"
fxLayout="row" fxLayout="row"
fxLayout.xs="column" fxLayout.xs="column"
fxLayoutAlign="center center"
> >
<div class="ucap-sound-viewer-sound-time-current"> <div class="ucap-sound-viewer-sound-time-current">
{{ currentTime | ucapSecondsToMinutes }} {{ currentTime | ucapSecondsToMinutes }}
@ -117,4 +138,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>