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" [hasBackdrop]="false"
> >
<button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')"> <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> <span>새 그룹 추가</span>
</button> </button>
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')"> <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%; height: 100%;
overflow: unset; 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" *ngIf="roomInfo && roomInfo.isTimeRoom"
class="room-type text-accent-color " class="room-type text-accent-color "
> >
<span class="bg-accent-light" <span class="bg-accent-dark"
>{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span >{{ getConvertTimer(roomInfo.timeRoomInterval) }} </span
>비밀 대화방입니다. >비밀 대화방입니다.
</div> </div>

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

@ -25,7 +25,7 @@
.chat-toolbar { .chat-toolbar {
width: 100%; width: 100%;
height: 80px; height: 80px;
min-height: 70px; min-height: 80px;
align-items: center; align-items: center;
background-color: #ffffff !important; background-color: #ffffff !important;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
@ -68,7 +68,7 @@
height: 20px; height: 20px;
span { span {
border-radius: 10px; border-radius: 10px;
padding: 1px 10px; padding: 2px 10px;
margin-right: 6px; margin-right: 6px;
font-size: 13px; 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; flex-direction: column;
text-align: left; text-align: left;
line-height: 1.6em; line-height: 1.6em;
width:100%;
margin-top:10px;
.file-name { .file-name {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@ -59,5 +61,14 @@
display: block; 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 { .box-more-spacer {
margin-right: 0; margin-right: 0;
} }
::ng-deep .mat-content{ ::ng-deep .mat-content{
overflow: unset; overflow: unset !important;
} }
.number{ .number{
margin-left:6px; margin-left:6px;
display: inline-flex; display: inline-flex;
flex: 0 0 auto; 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"> <div class="ucap-image-viewer-container">
<mat-toolbar color="primary"> <mat-toolbar class="bg-primary-dark">
<span>Third Line</span> <span>Third Line</span>
<span class="ucap-image-viewer-spacer"></span> <span class="ucap-image-viewer-spacer"></span>
<mat-icon <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"> <div class="ucap-video-viewer-container">
<mat-toolbar color="accent" class="ucap-video-viewer-header"> <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-title">{{ fileInfo.fileName }}</span>
<span class="ucap-video-viewer-spacer"></span> <span class="ucap-video-viewer-spacer"></span>
<button <button
@ -11,16 +22,25 @@
aria-label="" aria-label=""
(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"
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> </button>
<span class="stroke-bar"></span>
<button <button
mat-raised-button mat-icon-button
color="primary" color="warn"
class="ucap-video-viewer-action" class="ucap-image-viewer-action btn-close"
matTooltip="뷰어닫기"
(click)="onClickClose()" (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> </button>
</mat-toolbar> </mat-toolbar>
<div class="ucap-video-viewer-body"> <div class="ucap-video-viewer-body">
@ -41,43 +61,52 @@
(loadeddata)="onLoadedDataVideo()" (loadeddata)="onLoadedDataVideo()"
></video> ></video>
</div> </div>
<div <div class="viewer-bottom">
class="ucap-video-viewer-video-time" <div
fxLayout="row" class="ucap-video-viewer-video-time"
fxLayout.xs="column" fxLayout="row"
fxLayoutAlign="center center" fxLayout.xs="column"
> fxLayoutAlign="center center"
<mat-slider
#timeSlider
min="0"
[max]="duration"
[value]="currentTime"
(change)="onChangeTimeSlider($event)"
> >
</mat-slider> <mat-slider
</div> #timeSlider
<div min="0"
class="ucap-video-viewer-video-controls" [max]="duration"
fxLayout="row" [value]="currentTime"
fxLayout.xs="column" (change)="onChangeTimeSlider($event)"
fxLayoutAlign="center center" >
> </mat-slider>
<div class="ucap-video-viewer-video-time-current">
{{ currentTime | ucapSecondsToMinutes }}
</div> </div>
<span class="ucap-video-viewer-spacer"></span> <div
<button class="ucap-video-viewer-video-controls"
mat-icon-button fxLayout="row"
class="ucap-video-viewer-action" fxLayout.xs="column"
[matTooltip]="playing ? '멈춤' : '재생'"
aria-label=""
(click)="onClickPlayOrPause()"
> >
<mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon> <div class="ucap-video-viewer-video-time-current">
</button> {{ currentTime | ucapSecondsToMinutes }}
<span class="ucap-video-viewer-spacer"></span> </div>
<div class="ucap-video-viewer-video-time-total"> <span class="ucap-video-viewer-spacer"></span>
{{ duration | ucapSecondsToMinutes }} <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> </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 { .ucap-video-viewer-header {
width: 100%; width: 100%;
height: 50px; height: 60px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
background-color: #333333;
.ucap-video-viewer-icon { .ucap-video-viewer-icon {
margin-right: 10px;
} }
.ucap-video-viewer-title { .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 { .ucap-video-viewer-body {
position: relative; position: relative;
background-color: white;
width: 100%; width: 100%;
height: 100%; height: calc(100% - 60px);
padding-bottom: 70px;
.ucap-video-viewer-video-icon { .ucap-video-viewer-video-icon {
width: 100%; width: 100%;
height: calc(100% - 60px); height: calc(100% - 80px);
} }
.ucap-video-viewer-video-time { .viewer-bottom{
width: 100%; background-color: #212121;
height: 30px; color:#ffffff;
} .ucap-video-viewer-video-time {
.ucap-video-viewer-video-controls { width: 100%;
width: 100%; height: 30px;
height: 30px;
.ucap-video-viewer-video-time-current {
padding-left: 30px;
} }
.ucap-video-viewer-video-controls {
width: 100%;
height: 50px;
.ucap-video-viewer-video-time-total { .ucap-video-viewer-video-time-current {
padding-right: 30px; padding-left: 30px;
}
.ucap-video-viewer-video-time-total {
padding-right: 30px;
}
} }
} }
} }
@ -45,9 +62,22 @@
flex: 1 1 auto; flex: 1 1 auto;
} }
.ucap-video-viewer-action { .ucap-video-viewer-action {
.mat-icon{
font-size: 40px;
width: 100%;
height: 100%;
line-height:40px;
}
} }
} }
mat-slider { 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;
}