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-11-13 17:46:25 +09:00
parent ae1b3503d3
commit fea937cd12
9 changed files with 340 additions and 131 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/messages.component.scss
View File

@ -95,12 +95,9 @@
.file-drop-zone {
position: absolute;
background-color: rgb(180, 180, 180);
top: calc(100% - 200px);
left: 20%;
width: 60%;
height: 200px;
padding:10px 10px 0 10px;
background-color: rgb(54, 54, 54, 0.8);
bottom:0
}
}
}

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

@ -1,7 +1,5 @@
<div class="bubble-main">
<!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
<!-- <div class="file-img" [ngClass]="fileInfo.FileExt"></div> -->
<div>
<div class="file-thumbimg">
<img *ngIf="!!fileInfo.thumbUrl" [src]="fileInfo.thumbUrl" />
</div>
<div

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

@ -1,18 +1,13 @@
.bubble-main {
flex-direction: column;
display:flex;
flex-direction: row;
padding: 14px;
.file-img {
display: inline-flex;
width: 50px;
height: 50px;
float: left;
margin-right: 14px;
background-repeat: no-repeat;
&.video {
background-image: url(/assets/images/file/icon_talk_video.png);
&.disable {
background-image: url(/assets/images/file/icon_talk_video_d.png);
}
.file-thumbimg{
display:inline-flex;
img {
width:200px;
padding-right: 20px;
background-repeat: no-repeat;
}
}
.file-info {
@ -20,7 +15,7 @@
flex-direction: column;
text-align: left;
line-height: 1.6em;
width:100%;
min-width:100px;
margin-top:10px;
.file-name {
font-size: 14px;

144
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
View File

@ -1,4 +1,4 @@
<mat-card class="example-card">
<mat-card class="example-card mat-elevation-z">
<mat-card-header>
<mat-card-title>
<span>{{ userInfo.name }}</span>
@ -6,71 +6,125 @@
</mat-card-title>
<mat-card-subtitle>{{ userInfo.deptName }}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div class="profile-img">
<img ucapImage [base]="profileImageRoot" [path]="userInfo.profileImageFile"
[default]="'assets/images/img_nophoto_50.png'" />
</div>
<!-- 내프로필의 경우<div class="profile-option">이 없음 -->
<div class="profile-option">
<span class="btn-favorite">
<!--즐겨찾기 추가버튼 추가된 상태: svg에 class="on"-->
<svg 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">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</span>
<span class="btn-groupadd">
<!--친구 추가 버튼-->
<svg 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="on">
<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>
<!--친구 삭제 버튼-->
<svg 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">
<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="23" y1="11" x2="17" y2="11"></line>
</svg>
</span>
</div>
<ul>
<li>
<img
ucapImage
[base]="profileImageRoot"
[path]="userInfo.profileImageFile"
[default]="'assets/images/img_nophoto_50.png'"
/>
</li>
<li>
<mat-icon>chat</mat-icon>
<!--<mat-icon>chat</mat-icon>-->
<svg 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">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
{{ userInfo.intro }}
</li>
<li>
<mat-icon>email</mat-icon>
<!--<mat-icon>email</mat-icon>-->
<svg 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">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
{{ userInfo.email }}
</li>
<li>
<mat-icon>local_phone</mat-icon>
<!--<mat-icon>local_phone</mat-icon>-->
<svg 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">
<path
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z">
</path>
</svg>
{{ userInfo.lineNumber }}
</li>
<li>
<mat-icon>phone_android</mat-icon>
<!--<mat-icon>phone_android</mat-icon>-->
<svg 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">
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
<line x1="12" y1="18" x2="12" y2="18"></line>
</svg>
{{ userInfo.hpNumber }}
</li>
</ul>
</mat-card-content>
<mat-card-actions>
<div fxFlex fxLayout="row" fxLayoutAlign="space-around center">
<button
mat-mini-fab
[matTooltip]="isMe ? 'MyTalk' : '1:1 대화'"
matTooltipPosition="above"
(click)="onClickOpenChat()"
>
<mat-icon>chat</mat-icon>
<button mat-mini-fab class="mat-elevation-z" [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'" matTooltipPosition="above"
(click)="onClickOpenChat()">
<!--<mat-icon>chat</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">
<path
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
</path>
</svg>
</button>
<button
mat-mini-fab
*ngIf="!isMe"
matTooltip="전화"
matTooltipPosition="above"
(click)="onClickCall()"
>
<mat-icon>call</mat-icon>
<button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="전화" matTooltipPosition="above"
(click)="onClickCall()">
<!--<mat-icon>call</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">
<path
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z">
</path>
</svg>
</button>
<button
mat-mini-fab
*ngIf="!isMe"
matTooltip="화상회의"
matTooltipPosition="above"
(click)="onClickVideoConference()"
>
<mat-icon>videocam</mat-icon>
<button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="화상회의" matTooltipPosition="above"
(click)="onClickVideoConference()">
<!--<mat-icon>videocam</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">
<path
d="M15.6 11.6L22 7v10l-6.4-4.5v-1zM4 5h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2z" />
</svg>
</button>
<button
mat-mini-fab
*ngIf="!isMe"
matTooltip="쪽지"
matTooltipPosition="above"
(click)="onClickMessage()"
>
<mat-icon>sms</mat-icon>
<button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="쪽지" matTooltipPosition="above"
(click)="onClickMessage()">
<!--<mat-icon>sms</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">
<line class="st0" x1="18" y1="2" x2="9.2" y2="10.8" />
<polygon class="st0" points="18,2 12.4,18 9.2,10.8 2,7.6 " />
</svg>
</button>
</div>
</mat-card-actions>
</mat-card>
</mat-card>

101
projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss
View File

@ -1,3 +1,104 @@
@mixin ellipsis($row) {
overflow: hidden;
text-overflow: ellipsis;
@if $row == 1 {
display: block;
white-space: nowrap;
word-wrap: normal;
} @else if $row >= 2 {
display: -webkit-box;
-webkit-line-clamp: $row;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
}
::ng-deep .mat-card-header-text{
width:100%;
.mat-card-subtitle{
color: rgb(256, 256, 256, 0.7) !important;
text-align:center;
margin-top:10px !important;
}
}
.example-card {
width: 400px;
padding: 0 0 20px;
position: relative;
.mat-card-header{
justify-content: center;
padding-bottom: 40px;
background: #ce395d;
background: linear-gradient(to right, #345385, #ef4c73);
color: #ffffff;
padding-top: 20px;
width:100%;
.mat-card-title{
margin-bottom: 12px;
max-width: 100%;
justify-content: center;
display: flex;
margin:0 20px;
span{
@include ellipsis(1);
}
}
}
.mat-card-content{
margin-top:-40px;
.profile-img{
display:flex;
height:80px;
justify-content: center;
margin-bottom:20px;
img{
widows: 80px;
height: 80px;
border-radius: 50%;
background-color:#efefef;
border:2px solid #ffffff;
}
}
.profile-option{
display:flex;
padding:0 20px;
color:#ffffff;
margin-top: -100px;
height: 120px;
.btn-favorite{
cursor: pointer;
.on{
fill:yellow;
}
}
.btn-groupadd{
margin-left:auto;
cursor: pointer;
svg{
display:none;
&.on{
display:block;
}
}
}
}
ul{
padding:0 20px;
display:flex;
flex-flow: column;
margin-top:-20px;
li{
display:inline-flex;
height:30px;
align-items: center;
flex-flow:row;
margin-bottom:20px;
svg{
margin-right:10px;
color:#777777;
}
}
}
}
}

34
projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html
View File

@ -1,25 +1,23 @@
<div fxLayout="row wrap" fxFlex="100" class="ucap-file-upload-queue-container">
<div
fxLayout="column"
fxFlex="100"
fxFlex.gt-xs="100"
fxFlex.gt-md="25"
*ngFor="let fileUploadItem of fileUploadItems"
>
<div fxLayout="row">
<div>
<mat-icon>image</mat-icon>
</div>
<div>{{ fileUploadItem.file.name }}</div>
<div *ngFor="let fileUploadItem of fileUploadItems" class="file-upload-item">
<div fxLayout="row" class="file-upload-info">
<!--<mat-icon>image</mat-icon>-->
<!--파일이미지 svg-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<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">
</path>
</svg>
<div class="file-upload-name">{{ fileUploadItem.file.name }}</div>
<!-- <div (click)="onClickClear(fileUploadItem)">
<mat-icon>clear</mat-icon>
</div> -->
</div>
<div fxLayout="row">
<mat-progress-bar
mode="determinate"
[value]="fileUploadItem.uploadingProgress$ | async"
>
<div fxLayout="row" class="file-upload-progress">
<mat-progress-bar mode="determinate" [value]="fileUploadItem.uploadingProgress$ | async">
</mat-progress-bar>
</div>
</div>
@ -28,4 +26,4 @@
<div>여기에 파일을 Drop하시면 업로드 됩니다.</div>
<div></div>
</div>
</div>
</div>

44
projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss
View File

@ -1,4 +1,48 @@
@mixin ellipsis($row) {
overflow: hidden;
text-overflow: ellipsis;
@if $row == 1 {
display: block;
white-space: nowrap;
word-wrap: normal;
} @else if $row >= 2 {
display: -webkit-box;
-webkit-line-clamp: $row;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
}
.ucap-file-upload-queue-container {
width: 100%;
height: 100%;
.file-upload-item {
background-color: #eeeeee;
min-width: 200px;
margin: 0 0.5%;
margin-bottom: 10px;
width: 32%;
border-radius: 3px;
.file-upload-info {
padding: 10px;
background-color:#ffffff;
border-bottom: 1px solid #dddddd;
svg {
margin-right: 6px;
}
.file-upload-name {
height: 40px;
@include ellipsis(2);
}
}
.file-upload-progress {
padding: 6px 10px;
}
&:nth-child(3n + 1) {
margin-left: 1%;
}
&:nth-child(3n + 0) {
margin-right: 1%;
}
}
}

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

@ -1,58 +1,48 @@
<div class="ucap-binary-viewer-container">
<mat-toolbar color="accent" class="ucap-binary-viewer-header">
<mat-icon class="ucap-binary-viewer-icon">attachment</mat-icon>
<mat-toolbar class="ucap-binary-viewer-header">
<!--<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"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="ucap-binary-viewer-icon">
<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">
</path>
</svg>
<span class="ucap-binary-viewer-title">{{ fileInfo.fileName }}</span>
<span class="ucap-binary-viewer-spacer"></span>
<button
mat-icon-button
class="ucap-binary-viewer-action"
matTooltip="다운로드"
matTooltipPosition="below"
aria-label=""
(click)="onClickDownload()"
>
<mat-icon>get_app</mat-icon>
<button mat-icon-button class="ucap-binary-viewer-action" matTooltip="다운로드" 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>
</button>
<button
mat-raised-button
color="primary"
class="ucap-binary-viewer-action"
(click)="onClickClose()"
>
Close
<span class="stroke-bar"></span>
<button mat-icon-button 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="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</mat-toolbar>
<mat-progress-bar
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
mode="determinate"
[value]="fileDownloadItem.downloadingProgress$ | async"
></mat-progress-bar>
<div class="ucap-binary-viewer-body">
<div
class="ucap-binary-viewer-content-wrapper"
fxLayout="column"
fxLayout.xs="row"
fxFlexFill
fxLayoutAlign="center center"
>
<div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
<div class="ico"></div>
<div class="ucap-binary-viewer-content-wrapper" fxLayout="column" fxLayout.xs="row" fxFlexFill
fxLayoutAlign="center center">
<div class="circle-box">
<div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
<div class="ico"></div>
</div>
</div>
<div>
<div class="guide-msg">
미리보기를 지원하지 않는 파일입니다.
</div>
<div>
<button
color="warn"
mat-raised-button
aria-label=""
(click)="onClickDownload()"
>
<button colori mat-raised-button aria-label="" (click)="onClickDownload()">
Download
</button>
</div>
</div>
</div>
</div>
</div>

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

@ -4,29 +4,61 @@
.ucap-binary-viewer-header {
width: 100%;
height: 50px;
height: 60px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
background-color: #333333;
color:#ffffff;
.ucap-binary-viewer-icon {
margin-right: 10px;
}
.ucap-binary-viewer-title {
font-size: 16px;
}
.ucap-binary-viewer-spacer {
flex: 1 1 auto;
}
.stroke-bar {
width: 1px;
height: 30px;
background-color: rgba(256, 256, 256, 0.3);
margin: 0 10px;
}
.ucap-binary-viewer-action {
margin-left: auto;
&:hover {
opacity: 0.7;
}
}
}
.ucap-binary-viewer-body {
position: relative;
width: 100%;
height: 100%;
background-color: white;
height: calc(100% - 60px);
.ucap-binary-viewer-content-wrapper {
.ucap-image-viewer-image-wrapper {
height: 100%;
padding: 20px;
background-color: rgba(0, 0, 0, 0.9);
}
.circle-box{
display:flex;
width:140px;
height:140px;
border-radius:50%;
justify-content: center;
align-items: center;
border:2px solid #ffffff;
background-color:rgba(256, 256, 256, 0.6);
}
.guide-msg{
font-size:16px;
margin:30px;
color:#ffffff;
}
}
}