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

video-viewer 디자인적용

Browse Source
This commit is contained in:
khk 2019-11-11 11:42:08 +09:00
parent b5f3773c98
commit b93d78b02e
10 changed files with 158 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,14 @@
[hasBackdrop]="false"
>
<button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
<mat-icon>group_add</mat-icon>
<!--<mat-icon>group_add</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="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
<span>새 그룹 추가</span>
</button>
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">

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

@ -37,3 +37,10 @@
height: 100%;
overflow: unset;
}
.mat-menu-item{
display:flex;
align-items: center;
svg{
margin-right:10px;
}
}

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

@ -48,7 +48,7 @@
*ngIf="roomInfo && roomInfo.isTimeRoom"
class="room-type text-accent-color "
>
<span class="bg-accent-light"
<span class="bg-accent-dark"
>{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span
>비밀 대화방입니다.
</div>

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
View File

@ -25,7 +25,7 @@
.chat-toolbar {
width: 100%;
height: 80px;
min-height: 70px;
min-height: 80px;
align-items: center;
background-color: #ffffff !important;
border-bottom: 1px solid #dddddd;
@ -68,7 +68,7 @@
height: 20px;
span {
border-radius: 10px;
padding: 1px 10px;
padding: 2px 10px;
margin-right: 6px;
font-size: 13px;
}

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

@ -76,3 +76,6 @@
}
}
}
.mat-tab-group>.mat-tab-header .mat-tab-label{
border-bottom:2px solid #dddddd;
}

13
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
View File

@ -20,6 +20,8 @@
flex-direction: column;
text-align: left;
line-height: 1.6em;
width:100%;
margin-top:10px;
.file-name {
font-size: 14px;
font-weight: bold;
@ -59,5 +61,14 @@
display: block;
}
}
&.expired{
li{
width:100%;
white-space: nowrap;
color:#999999;
align-items: center;
line-height:40px;
}
}
}
}
}

11
projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss
View File

@ -51,16 +51,17 @@
}
}
}
.box-more-spacer {
margin-right: 0;
}
::ng-deep .mat-content{
overflow: unset;
overflow: unset !important;
}
.number{
margin-left:6px;
display: inline-flex;
flex: 0 0 auto;
}
margin-left:6px;
display: inline-flex;
flex: 0 0 auto;
}

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

@ -1,5 +1,5 @@
<div class="ucap-image-viewer-container">
<mat-toolbar color="primary">
<mat-toolbar class="bg-primary-dark">
<span>Third Line</span>
<span class="ucap-image-viewer-spacer"></span>
<mat-icon

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

@ -1,6 +1,17 @@
<div class="ucap-video-viewer-container">
<mat-toolbar color="accent" class="ucap-video-viewer-header">
<mat-icon class="ucap-video-viewer-icon">video_label</mat-icon>
<!--<mat-icon class="ucap-video-viewer-icon">video_label</mat-icon>-->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" class="ucap-video-viewer-icon">
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
<line x1="7" y1="2" x2="7" y2="22"></line>
<line x1="17" y1="2" x2="17" y2="22"></line>
<line x1="2" y1="12" x2="22" y2="12"></line>
<line x1="2" y1="7" x2="7" y2="7"></line>
<line x1="2" y1="17" x2="7" y2="17"></line>
<line x1="17" y1="17" x2="22" y2="17"></line>
<line x1="17" y1="7" x2="22" y2="7"></line>
</svg>
<span class="ucap-video-viewer-title">{{ fileInfo.fileName }}</span>
<span class="ucap-video-viewer-spacer"></span>
<button
@ -11,16 +22,25 @@
aria-label=""
(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"
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-raised-button
color="primary"
class="ucap-video-viewer-action"
mat-icon-button
color="warn"
class="ucap-image-viewer-action btn-close"
matTooltip="뷰어닫기"
(click)="onClickClose()"
>
Close
<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 class="ucap-video-viewer-body">
@ -41,43 +61,52 @@
(loadeddata)="onLoadedDataVideo()"
></video>
</div>
<div
class="ucap-video-viewer-video-time"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center center"
>
<mat-slider
#timeSlider
min="0"
[max]="duration"
[value]="currentTime"
(change)="onChangeTimeSlider($event)"
<div class="viewer-bottom">
<div
class="ucap-video-viewer-video-time"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center center"
>
</mat-slider>
</div>
<div
class="ucap-video-viewer-video-controls"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center center"
>
<div class="ucap-video-viewer-video-time-current">
{{ currentTime | ucapSecondsToMinutes }}
<mat-slider
#timeSlider
min="0"
[max]="duration"
[value]="currentTime"
(change)="onChangeTimeSlider($event)"
>
</mat-slider>
</div>
<span class="ucap-video-viewer-spacer"></span>
<button
mat-icon-button
class="ucap-video-viewer-action"
[matTooltip]="playing ? '멈춤' : '재생'"
aria-label=""
(click)="onClickPlayOrPause()"
<div
class="ucap-video-viewer-video-controls"
fxLayout="row"
fxLayout.xs="column"
>
<mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
</button>
<span class="ucap-video-viewer-spacer"></span>
<div class="ucap-video-viewer-video-time-total">
{{ duration | ucapSecondsToMinutes }}
<div class="ucap-video-viewer-video-time-current">
{{ currentTime | ucapSecondsToMinutes }}
</div>
<span class="ucap-video-viewer-spacer"></span>
<button
mat-icon-button
class="ucap-video-viewer-action"
[matTooltip]="playing ? '멈춤' : '재생'"
aria-label=""
(click)="onClickPlayOrPause()"
>
<mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
<!--{{ playing ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<rect x="6" y="4" width="4" height="16"></rect>
<rect x="14" y="4" width="4" height="16"></rect>
</svg>' : '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>'}}-->
</button>
<span class="ucap-video-viewer-spacer"></span>
<div class="ucap-video-viewer-video-time-total">
{{ duration | ucapSecondsToMinutes }}
</div>
</div>
</div>
</div>

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

@ -4,40 +4,57 @@
.ucap-video-viewer-header {
width: 100%;
height: 50px;
height: 60px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
background-color: #333333;
.ucap-video-viewer-icon {
margin-right: 10px;
}
.ucap-video-viewer-title {
font-size:16px;
}
.stroke-bar {
width: 1px;
height: 30px;
background-color: rgba(256, 256, 256, 0.3);
margin: 0 10px;
}
.ucap-image-viewer-action {
&:hover {
opacity: 0.7;
}
}
}
.ucap-video-viewer-body {
position: relative;
background-color: white;
width: 100%;
height: 100%;
padding-bottom: 70px;
height: calc(100% - 60px);
.ucap-video-viewer-video-icon {
width: 100%;
height: calc(100% - 60px);
height: calc(100% - 80px);
}
.ucap-video-viewer-video-time {
width: 100%;
height: 30px;
}
.ucap-video-viewer-video-controls {
width: 100%;
height: 30px;
.ucap-video-viewer-video-time-current {
padding-left: 30px;
.viewer-bottom{
background-color: #212121;
color:#ffffff;
.ucap-video-viewer-video-time {
width: 100%;
height: 30px;
}
.ucap-video-viewer-video-controls {
width: 100%;
height: 50px;
.ucap-video-viewer-video-time-total {
padding-right: 30px;
.ucap-video-viewer-video-time-current {
padding-left: 30px;
}
.ucap-video-viewer-video-time-total {
padding-right: 30px;
}
}
}
}
@ -45,9 +62,22 @@
flex: 1 1 auto;
}
.ucap-video-viewer-action {
.mat-icon{
font-size: 40px;
width: 100%;
height: 100%;
line-height:40px;
}
}
}
mat-slider {
width: 95%;
width: 94%;
}
::ng-deep .mat-slider-horizontal .mat-slider-track-background{
background-color: #999999 !important;
}
::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{
border-color: #999999 !important;
}