Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger
This commit is contained in:
commit
5b3a5fdb28
|
|
@ -5,7 +5,8 @@
|
|||
// Angular Material typography
|
||||
// $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
|
||||
$typography: mat-typography-config(
|
||||
$font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
|
||||
$font-family:
|
||||
'나눔고딕, Malgun Gothic, 맑은고딕, Arial, Muli, Helvetica Neue, Arial, sans-serif',
|
||||
$title: mat-typography-level(20px, 32px, 600),
|
||||
$body-2: mat-typography-level(14px, 24px, 600),
|
||||
$button: mat-typography-level(14px, 14px, 600),
|
||||
|
|
@ -95,3 +96,29 @@ body.theme-pink-dark {
|
|||
// Apply the theme to the user components
|
||||
@include components-theme($pink-dark-theme);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Define a pink light theme --LG RED 변경 예정(샘플링)
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Define the primary, accent and warn palettes
|
||||
$pink-light-theme-primary-palette: mat-palette($lg-red);
|
||||
$pink-light-theme-accent-palette: mat-palette($mat-pink);
|
||||
$pink-light-theme-warn-palette: mat-palette($mat-red);
|
||||
|
||||
// Create the Material theme object
|
||||
$pink-light-theme: mat-light-theme(
|
||||
$pink-light-theme-primary-palette,
|
||||
$pink-light-theme-accent-palette,
|
||||
$pink-light-theme-warn-palette
|
||||
);
|
||||
|
||||
// Add ".theme-pink-dark" class to the body to activate this theme.
|
||||
// Class name must start with "theme-" !!!
|
||||
body.theme-pink-light {
|
||||
// Generate the Angular Material theme
|
||||
@include angular-material-theme($pink-light-theme);
|
||||
|
||||
// Apply the theme to the user components
|
||||
@include components-theme($pink-light-theme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<div class="container">
|
||||
<div>
|
||||
<!--<div>
|
||||
LG ucap
|
||||
<button mat-icon-button aria-label="New Chat" (click)="onClickNewChat()">
|
||||
<mat-icon>chat</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-tab-group mat-stretch-tabs animationDuration="0ms">
|
||||
</div>-->
|
||||
<div class="logo">로고</div>
|
||||
<mat-tab-group mat-stretch-tabs animationDuration="0ms" class="global-menu">
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>group</mat-icon>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,43 @@
|
|||
::ng-deep .mat-tab-body-wrapper,
|
||||
::ng-deep .mat-tab-body {
|
||||
height: 100%;
|
||||
width:100%;
|
||||
}
|
||||
.logo{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
height:60px;
|
||||
width:70px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
mat-tab-group {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-group {
|
||||
display: flex;
|
||||
width:100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
::ng-deep .global-menu{
|
||||
border-right:1px solid #dddddd;
|
||||
.mat-tab-label-container{
|
||||
border-right:1px solid #dddddd;
|
||||
.mat-tab-list{
|
||||
.mat-tab-labels{
|
||||
padding-top:60px;
|
||||
flex-flow: column;
|
||||
height: 60%;
|
||||
.mat-tab-label{
|
||||
height:80px;
|
||||
}
|
||||
}
|
||||
.mat-ink-bar{
|
||||
background-color:none;
|
||||
height:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,22 @@
|
|||
<div>
|
||||
<div>
|
||||
<div class="current-head">
|
||||
<h3>그룹</h3>
|
||||
<div class="btn-box">
|
||||
<button mat-icon-button >
|
||||
<mat-icon>person_add</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button [matMenuTriggerFor]="groupMenu" aria-label="group menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ucap-organization-tenant-search
|
||||
[companyList]="companyList$ | async"
|
||||
[companyCode]="companyCode"
|
||||
(keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
|
||||
></ucap-organization-tenant-search>
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="groupMenu"
|
||||
aria-label="group menu"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu
|
||||
#groupMenu="matMenu"
|
||||
xPosition="after"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
.current-head{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
padding:0 10px;
|
||||
height:60px;
|
||||
h3{
|
||||
display:inline-flex;
|
||||
padding-left:10px;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-box{
|
||||
height: 100%;
|
||||
margin-left:auto;
|
||||
display:inline-flex;
|
||||
align-items: center;
|
||||
.mat-icon-button{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
<div class="oraganization-tab" fxLayout="column" *ngIf="departmentInfoList$ | async">
|
||||
<div class="oraganization-tab-tree" fxFlex="50" style="overflow: scroll">
|
||||
<div class="oraganization-tab-tree" fxFlex="40" style="overflow: scroll">
|
||||
<ucap-organization-tree [oraganizationList]="departmentInfoList$ | async"
|
||||
(selected)="onSelectedOrganization($event)"></ucap-organization-tree>
|
||||
</div>
|
||||
<div fxFlex="50" style="overflow: scroll">
|
||||
<div>
|
||||
<div fxFlex="60" >
|
||||
<div class="select-dept">
|
||||
(선택된부서명)
|
||||
</div>
|
||||
<div>
|
||||
<div class="select-list" >
|
||||
<ucap-profile-user-list-item *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
|
||||
[userInfo]="userInfo" [checkable]="true" [sessionVerinfo]="sessionVerinfo" [selectedUserList]="selectedUserList"
|
||||
[isChecked]="getCheckedUser(userInfo)" (checkUser)="onCheckUser($event)">
|
||||
</ucap-profile-user-list-item>
|
||||
</div>
|
||||
<div *ngIf="!isUserSelect">
|
||||
(하단버튼영역)
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!isUserSelect" class="btn-box">
|
||||
(하단버튼영역)
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,28 @@
|
|||
height: 100%;
|
||||
|
||||
.oraganization-tab-tree {
|
||||
overflow: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.btn-box{
|
||||
height:80px;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
border-top:1px solid #ddd;
|
||||
align-items: center;
|
||||
width:100%;
|
||||
background-color:#ffffff;
|
||||
}
|
||||
.select-dept{
|
||||
border-top:1px solid #dddddd;
|
||||
height:40px;
|
||||
width:100%;
|
||||
display:inline-flex;
|
||||
align-items: center;
|
||||
padding:0 10px;
|
||||
}
|
||||
.select-list{
|
||||
height: calc(100% - 120px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div class="container" fxFlex fxLayout="column">
|
||||
<!-- CHAT TOOLBAR -->
|
||||
<mat-toolbar class="chat-toolbar">
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<div fxFlex fxLayout="row" class="chat-header" >
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="profile-img">
|
||||
<!-- RESPONSIVE CHATS BUTTON-->
|
||||
<button
|
||||
mat-icon-button
|
||||
|
|
@ -15,8 +15,10 @@
|
|||
</button>
|
||||
<!-- / RESPONSIVE CHATS BUTTON-->
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="room-name">
|
||||
대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명
|
||||
</div>
|
||||
<div class="room-option">
|
||||
<button
|
||||
*ngIf="!!roomInfo"
|
||||
mat-icon-button
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@charset 'utf-8';
|
||||
@import '../../../../assets/scss/global/common';
|
||||
:host {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -9,12 +11,32 @@
|
|||
height: 100%;
|
||||
|
||||
.chat-toolbar {
|
||||
height: 49px;
|
||||
min-height: 49px;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
.responsive-chats-button {
|
||||
padding: 0;
|
||||
height: 70px;
|
||||
min-height: 70px;
|
||||
border-bottom: $line-basic;
|
||||
background-color:#ffffff;
|
||||
.chat-header{
|
||||
width:100%;
|
||||
.responsive-chats-button {
|
||||
padding: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #252525;
|
||||
color: #efefef;
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
line-height: 40px;
|
||||
}
|
||||
.room-name{
|
||||
font-size:16px;
|
||||
padding:0 10px;
|
||||
@include ellipsis(1)
|
||||
}
|
||||
.room-option{
|
||||
width:100px;
|
||||
margin-left:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
dd
|
||||
<div fxLayout="row-reverse" class="right">
|
||||
<div class="slide-menu" >
|
||||
</div>
|
||||
<div class="slide-box">
|
||||
slide dashboard
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
$right-color:#565e6b;
|
||||
.right{
|
||||
height:100%;
|
||||
flex-direction: row-reverse;
|
||||
border-left:1px solid #dddddd;
|
||||
.slide-menu{
|
||||
width:70px;
|
||||
height:100%;
|
||||
display:inline-flex;
|
||||
background-color:$right-color;
|
||||
}
|
||||
.slide-box{
|
||||
display:inline-flex;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
.container {
|
||||
height: 100%;
|
||||
display:flex;
|
||||
flex-flow: row;
|
||||
|
||||
.left-side {
|
||||
float: left;
|
||||
width: 300px;
|
||||
width: 380px;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.contents {
|
||||
float: left;
|
||||
width: calc(100% - 360px);
|
||||
flex:1 1 auto;
|
||||
min-width:400px;
|
||||
height: 100%;
|
||||
|
||||
.messages {
|
||||
|
|
@ -17,8 +19,7 @@
|
|||
}
|
||||
}
|
||||
.right-side {
|
||||
float: left;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,34 @@
|
|||
<div class="template" fxLayout="column">
|
||||
<button mat-raised-button color="accent" class="submit-button" aria-label="Login" (click)="onClickLogin()">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
class="submit-button"
|
||||
aria-label="Login"
|
||||
(click)="onClickLogin()"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
|
||||
<h3>User-list-item</h3>
|
||||
<div>
|
||||
<ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [presence]="presence"
|
||||
[sessionVerinfo]="sessionVerinfo">
|
||||
<ucap-profile-user-list-item
|
||||
[userInfo]="userInfo"
|
||||
[profileImageRoot]="profileImageRoot"
|
||||
[presence]="presence"
|
||||
[sessionVerinfo]="sessionVerinfo"
|
||||
>
|
||||
</ucap-profile-user-list-item>
|
||||
<ucap-profile-user-list-item [userInfo]="userInfo" [sessionVerinfo]="sessionVerinfo">
|
||||
<ucap-profile-user-list-item
|
||||
[userInfo]="userInfo"
|
||||
[sessionVerinfo]="sessionVerinfo"
|
||||
>
|
||||
</ucap-profile-user-list-item>
|
||||
<ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [checkable]="true"
|
||||
[sessionVerinfo]="sessionVerinfo">
|
||||
<ucap-profile-user-list-item
|
||||
[userInfo]="userInfo"
|
||||
[profileImageRoot]="profileImageRoot"
|
||||
[checkable]="true"
|
||||
[sessionVerinfo]="sessionVerinfo"
|
||||
>
|
||||
</ucap-profile-user-list-item>
|
||||
</div>
|
||||
<h3>Organization</h3>
|
||||
|
|
@ -21,14 +38,20 @@
|
|||
Tenant Search
|
||||
</div>
|
||||
<div>
|
||||
<ucap-organization-tenant-search [companyList]="companyList" [companyCode]="companyCode">
|
||||
<ucap-organization-tenant-search
|
||||
[companyList]="companyList"
|
||||
[companyCode]="companyCode"
|
||||
>
|
||||
</ucap-organization-tenant-search>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Chat</h3>
|
||||
<div>
|
||||
<ucap-room-list-item [roomInfo]="roomInfo" [sessionVerinfo]="sessionVerinfo">
|
||||
<ucap-room-list-item
|
||||
[roomInfo]="roomInfo"
|
||||
[sessionVerinfo]="sessionVerinfo"
|
||||
>
|
||||
</ucap-room-list-item>
|
||||
</div>
|
||||
<!-- <h3>Chat::MessageBox</h3>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -1,13 +1,22 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
$listH-row3: 90px;
|
||||
$listH-row2: 60px;
|
||||
$listH-row3: 120px;
|
||||
$listH-row2: 90px;
|
||||
$listH-row2-s: 70px;
|
||||
$checkbox-size: 16px;
|
||||
$presence-size: 10px;
|
||||
$presence-size: 8px;
|
||||
$thumbnail-msize: 40px;
|
||||
$bg-list-hover: #efefef;
|
||||
$bg-list-item-msg: #f0f4f6;
|
||||
|
||||
$font-dark: #212121;
|
||||
$font-mid: #666666;
|
||||
$font-light: #848d95;
|
||||
$font-white: #ffffff;
|
||||
|
||||
$line-basic: 1px solid #dddddd;
|
||||
$color-main: #ee278b;
|
||||
|
||||
@mixin ellipsis($row) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -41,6 +50,3 @@ $bg-list-item-msg: #f0f4f6;
|
|||
background-color: #f0c10a;
|
||||
}
|
||||
}
|
||||
@function position-m($h, $o, $p) {
|
||||
@return ($h - $o - $p) / 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ body {
|
|||
color: #333;
|
||||
font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
|
||||
Gulim, '굴림';
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
line-height: 18px !important;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,18 @@
|
|||
fxLayout="row"
|
||||
fxLayoutAlign="center center"
|
||||
>
|
||||
<div class="add-option">
|
||||
<i class="material-icons">
|
||||
attach_file
|
||||
</i>
|
||||
<i class="material-icons">
|
||||
sentiment_satisfied_alt
|
||||
</i>
|
||||
<i class="material-icons">
|
||||
g_translate
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<form
|
||||
#replyForm="ngForm"
|
||||
(ngSubmit)="onSend($event)"
|
||||
|
|
@ -35,7 +47,9 @@
|
|||
type="submit"
|
||||
aria-label="Send message"
|
||||
>
|
||||
Send
|
||||
<i class="material-icons">
|
||||
send
|
||||
</i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,44 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
padding: 20px 30px;
|
||||
.add-option {
|
||||
display: inline-flex;
|
||||
margin-right: 20px;
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
width:30px;
|
||||
height:30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
&:hover {
|
||||
color: #333333;
|
||||
background-color: #efefef;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-form-field-underline{
|
||||
background-color:none;
|
||||
}
|
||||
.send-message-button {
|
||||
margin-left: 20px;
|
||||
i {
|
||||
background-color: #ff3399;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
line-height:40px;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
&:hover{
|
||||
background-color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
<ul>
|
||||
<li>
|
||||
{{ fileInfo.FileName }}
|
||||
</li>
|
||||
<li>
|
||||
{{ fileInfo.AttSize }}
|
||||
</li>
|
||||
<li>
|
||||
{{ fileInfo.FileExt }}
|
||||
</li>
|
||||
</ul>
|
||||
<span *ngIf="fileInfo && fileInfo.AttSEQ">
|
||||
<div class="bubble-main">
|
||||
<!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
|
||||
<div class="file-img ppt"></div>
|
||||
<ul class="file-info">
|
||||
<li class="file-name">
|
||||
{{ fileInfo.FileName }}
|
||||
</li>
|
||||
<li class="file-size">
|
||||
{{ fileInfo.AttSize }}
|
||||
</li>
|
||||
<li class="file-ext">
|
||||
{{ fileInfo.FileExt }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="fileInfo && fileInfo.AttSEQ" class="btn-box">
|
||||
<ul>
|
||||
<li>
|
||||
<button mat-button (click)="onClickSave()">Save</button>
|
||||
|
|
@ -18,4 +22,4 @@
|
|||
<button mat-button (click)="onClickSaveAs()">Save As</button>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
@charset "UTF-8"
|
||||
.bubble-main {
|
||||
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;
|
||||
&.doc {
|
||||
background-image: url(/assets/images/file/icon_talk_doc.png);
|
||||
&.disable{
|
||||
background-image: url(/assets/images/file/icon_talk_doc_d.png);
|
||||
}
|
||||
}
|
||||
&.exe {
|
||||
background-image: url(/assets/images/file/icon_talk_exe.png);
|
||||
&.disable{
|
||||
background-image: url(/assets/images/file/icon_talk_exe_d.png);
|
||||
}
|
||||
}
|
||||
&.file {
|
||||
background-image: url(/assets/images/file/icon_talk_file.png);
|
||||
&.disable{
|
||||
background-image: url(/assets/images/file/icon_talk_file_d.png);
|
||||
}
|
||||
}
|
||||
&.hwp {
|
||||
background-image: url(/assets/images/file/icon_talk_hwp.png);
|
||||
&.disable{
|
||||
background-image: url(/assets/images/file/icon_talk_hwp_d.png);
|
||||
}
|
||||
}
|
||||
&.ppt {
|
||||
background-image: url(/assets/images/file/icon_talk_ppt.png);
|
||||
&.disable{
|
||||
background-image: url(/assets/images/file/icon_talk_ppt_d.png);
|
||||
}
|
||||
}
|
||||
&.xls {
|
||||
background-image: url(/assets/images/file/icon_talk_xls.png);
|
||||
&.disable{
|
||||
background-image: url(/assets/images/file/icon_talk_xls_d.png);
|
||||
}
|
||||
}
|
||||
&.zip {
|
||||
background-image: url(/assets/images/file/icon_talk_zip.png);
|
||||
&.disable{
|
||||
background-image: url(/assets/images/file/icon_talk_doc_d.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
.file-info {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
float: left;
|
||||
line-height: 1.6em;
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
}
|
||||
.file-size {
|
||||
display: inline-flex;
|
||||
font-size: 11px;
|
||||
color: #666666;
|
||||
}
|
||||
.file-ext {
|
||||
font-size: 12px;
|
||||
color: #848d95;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-top: 1px solid #dddddd;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
ul {
|
||||
width: 100%;
|
||||
li {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
border-right:1px solid #dddddd;
|
||||
&:last-child{
|
||||
border-right:none;
|
||||
}
|
||||
.mat-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
<p>
|
||||
<div class="date-split">
|
||||
<span class="line"></span>
|
||||
<!-- {{ message.sendDate | date: 'short' }} -->
|
||||
{{ dateInfo }}
|
||||
</p>
|
||||
<span class="date">{{ dateInfo }}2019.10.3</span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
@charset 'utf-8';
|
||||
.date-split {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-flow: row;
|
||||
.line {
|
||||
height: 1px;
|
||||
background-color: #cccccc;
|
||||
width:40%;
|
||||
flex:1 1 auto;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.date {
|
||||
width: 160px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1,3 @@
|
|||
<img [src]="fileInfo.ThumbURL">
|
||||
<div class="bubble-main">
|
||||
<img [src]="fileInfo.ThumbURL">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.bubble-main{
|
||||
padding:10px;
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<p>
|
||||
<div class="bubble-main">
|
||||
<span>
|
||||
{{ content }}
|
||||
</span>
|
||||
<span>
|
||||
{{ message.sendDate | date: 'short' }}
|
||||
</span>
|
||||
</div>
|
||||
{{detailButteonShow}}
|
||||
<span *ngIf="detailButteonShow">
|
||||
<div *ngIf="detailButteonShow" class="btn-box">
|
||||
<button mat-button (click)="onClickDetailView()">Detail View</button>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
@charset "UTF-8"
|
||||
.bubble-main {
|
||||
padding: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
.btn-box {
|
||||
border-top: 1px solid #dddddd;
|
||||
height: 40px;
|
||||
.mat-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<div class="event-main">
|
||||
<div class="event-header">이벤트제목</div>
|
||||
<ul class="event-info">
|
||||
<li class="event-title">
|
||||
이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀
|
||||
</li>
|
||||
<li class="event-date">
|
||||
<span>날짜</span> 2019.09.30
|
||||
</li>
|
||||
<li class="event-time">
|
||||
<span>시간</span>오후 10시
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="btn-box">
|
||||
<button mat-button (click)="onClickSave()">상세보기</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
@charset "UTF-8"
|
||||
.event-main {
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
.event-header {
|
||||
padding: 10px;
|
||||
background-color: #efefef;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.event-info {
|
||||
padding: 10px 14px;
|
||||
line-height: 1.6em;
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
&.event-title {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&.event-date,
|
||||
&.event-time {
|
||||
color: #666666;
|
||||
}
|
||||
span {
|
||||
padding: 2px 6px;
|
||||
background-color: #efefef;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
border-top: 1px solid #dddddd;
|
||||
height: 40px;
|
||||
.mat-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
<div class="bubble-main">
|
||||
<ul>
|
||||
<li *ngIf="stickerUrl">
|
||||
<img [src]="stickerUrl" onerror="this.src='assets/sticker/sticker_default.png'">
|
||||
|
|
@ -6,3 +7,4 @@
|
|||
{{ contentJson.chat }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
.bubble-main{
|
||||
padding:14px;
|
||||
li:nth-child(2){
|
||||
margin-top:10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
<p>
|
||||
<div class="bubble-main">
|
||||
<span>
|
||||
{{ message.sentMessage }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.bubble-main {
|
||||
padding: 14px;
|
||||
text-align:left;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="translation-main">
|
||||
<div class="original">
|
||||
{{ message.sentMessage }}
|
||||
</div>
|
||||
<div class="translation">
|
||||
<span class="language">Kor</span>
|
||||
녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문
|
||||
롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<ul>
|
||||
<li>
|
||||
<button mat-button>Save</button>
|
||||
</li>
|
||||
<li>
|
||||
<button mat-button><span class="language">Kor</span>번역보기</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
@charset "UTF-8"
|
||||
.translation-main {
|
||||
text-align: left;
|
||||
.original {
|
||||
padding: 14px;
|
||||
}
|
||||
.translation {
|
||||
padding: 10px;
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
}
|
||||
.language {
|
||||
padding: 2px 6px;
|
||||
background-color: #222222;
|
||||
margin-right: 6px;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-top: 1px solid #dddddd;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
ul {
|
||||
width: 100%;
|
||||
li {
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
border-right: 1px solid #dddddd;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.mat-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,24 @@
|
|||
<ul>
|
||||
<li>
|
||||
{{ fileInfo.FileName }}
|
||||
</li>
|
||||
<li>
|
||||
{{ fileInfo.AttSize }}
|
||||
</li>
|
||||
<li>
|
||||
{{ fileInfo.FileExt }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bubble-main">
|
||||
<div class="file-img video"></div>
|
||||
<ul class="file-info">
|
||||
<li class="file-name">
|
||||
{{ fileInfo.FileName }}
|
||||
</li>
|
||||
<li class="file-size">
|
||||
{{ fileInfo.AttSize }}
|
||||
</li>
|
||||
<li class="file-ext">
|
||||
{{ fileInfo.FileExt }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span class="btn-box">
|
||||
<ul>
|
||||
<li>
|
||||
<button mat-button >Save</button>
|
||||
</li>
|
||||
<li>
|
||||
<button mat-button >Save As</button>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
@charset "UTF-8"
|
||||
.bubble-main{
|
||||
flex-direction: column;
|
||||
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-info{
|
||||
display:inline-flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
line-height:1.6em;
|
||||
.file-name{
|
||||
font-size:14px;
|
||||
font-weight:bold;
|
||||
display:inline-flex
|
||||
}
|
||||
.file-size{
|
||||
display:inline-flex;
|
||||
font-size:11px;
|
||||
color:#666666;
|
||||
}
|
||||
.file-ext{
|
||||
font-size:12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box{
|
||||
width:100%;
|
||||
height:40px;
|
||||
border-top:1px solid #dddddd;
|
||||
display:flex;
|
||||
ul{
|
||||
width:100%;
|
||||
li{
|
||||
width:50%;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
align-items: center;
|
||||
font-size:13px;
|
||||
border-right:1px solid #dddddd;
|
||||
&:last-child{
|
||||
border-right:none;
|
||||
}
|
||||
.mat-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
<div class="chat-messages">
|
||||
<!-- MESSAGE -->
|
||||
<ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
|
||||
</ucap-chat-message-box-date-splitter>
|
||||
|
||||
<div
|
||||
*ngFor="let message of messages; let i = index"
|
||||
class="message-row"
|
||||
|
|
@ -8,11 +11,6 @@
|
|||
contact: message.senderSeq !== loginRes.userSeq
|
||||
}"
|
||||
>
|
||||
<ucap-chat-message-box-date-splitter
|
||||
*ngIf="getDateSplitter(i)"
|
||||
[message]="message"
|
||||
>
|
||||
</ucap-chat-message-box-date-splitter>
|
||||
|
||||
<div
|
||||
*ngIf="getIsInformation(message); then information; else contents"
|
||||
|
|
@ -47,9 +45,7 @@
|
|||
</ng-container>
|
||||
</ng-template>
|
||||
<ng-template #contents>
|
||||
<div>
|
||||
<ul>
|
||||
<li *ngIf="getUserProfile(message.senderSeq) != ''">
|
||||
<div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img">
|
||||
<!-- <img
|
||||
class="avatar"
|
||||
style="width: 50px; height: 50px;"
|
||||
|
|
@ -70,61 +66,64 @@
|
|||
[path]="getUserProfile(message.senderSeq)"
|
||||
[default]="'assets/images/img_nophoto_50.png'"
|
||||
></ucap-ui-imaage>
|
||||
</li>
|
||||
<li>
|
||||
{{ getUserName(message.senderSeq) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ng-container
|
||||
class="bubble"
|
||||
*ngIf="message.type !== EventType.NotificationForTimerRoom"
|
||||
[ngSwitch]="message.type"
|
||||
>
|
||||
<ucap-chat-message-box-mass
|
||||
*ngSwitchCase="EventType.MassText"
|
||||
[message]="message"
|
||||
(massDetail)="onMassDetail($event)"
|
||||
>
|
||||
</ucap-chat-message-box-mass>
|
||||
<ucap-chat-message-box-file
|
||||
*ngSwitchCase="EventType.File"
|
||||
[message]="message"
|
||||
(save)="onSave($event)"
|
||||
(imageViewer)="onImageViewer($event)"
|
||||
>
|
||||
</ucap-chat-message-box-file>
|
||||
<ucap-chat-message-box-sticker
|
||||
*ngSwitchCase="EventType.Sticker"
|
||||
[message]="message"
|
||||
>
|
||||
</ucap-chat-message-box-sticker>
|
||||
<ucap-chat-message-box-recall
|
||||
*ngSwitchCase="EventType.RecalledMessage"
|
||||
></ucap-chat-message-box-recall>
|
||||
<ucap-chat-message-box-text
|
||||
*ngSwitchCase="EventType.Character"
|
||||
[message]="message"
|
||||
(contextmenu)="onContextMenuMessage($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-text>
|
||||
<div *ngSwitchDefault>
|
||||
mass-translation
|
||||
<ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
|
||||
notice
|
||||
<ucap-chat-message-box-notice></ucap-chat-message-box-notice>
|
||||
<ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
|
||||
translation
|
||||
<ucap-chat-message-box-translation></ucap-chat-message-box-translation>
|
||||
video-conference
|
||||
<ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
|
||||
|
||||
<div class="message">
|
||||
{{ message.sentMessage }}
|
||||
</div>
|
||||
<div class="message-main">
|
||||
<div class="chat-name">
|
||||
{{ getUserName(message.senderSeq) }}
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div class="bubble">
|
||||
<ng-container
|
||||
class="bubble"
|
||||
*ngIf="message.type !== EventType.NotificationForTimerRoom"
|
||||
[ngSwitch]="message.type"
|
||||
>
|
||||
<ucap-chat-message-box-mass
|
||||
*ngSwitchCase="EventType.MassText"
|
||||
[message]="message"
|
||||
(massDetail)="onMassDetail($event)"
|
||||
>
|
||||
</ucap-chat-message-box-mass>
|
||||
<ucap-chat-message-box-file
|
||||
*ngSwitchCase="EventType.File"
|
||||
[message]="message"
|
||||
(save)="onSave($event)"
|
||||
(imageViewer)="onImageViewer($event)"
|
||||
>
|
||||
</ucap-chat-message-box-file>
|
||||
<ucap-chat-message-box-sticker
|
||||
*ngSwitchCase="EventType.Sticker"
|
||||
[message]="message"
|
||||
>
|
||||
</ucap-chat-message-box-sticker>
|
||||
<ucap-chat-message-box-recall
|
||||
*ngSwitchCase="EventType.RecalledMessage"
|
||||
></ucap-chat-message-box-recall>
|
||||
<ucap-chat-message-box-text
|
||||
*ngSwitchCase="EventType.Character"
|
||||
[message]="message"
|
||||
(contextmenu)="onContextMenuMessage($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-text>
|
||||
<div *ngSwitchDefault>
|
||||
mass-translation
|
||||
<ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
|
||||
notice
|
||||
<ucap-chat-message-box-notice></ucap-chat-message-box-notice>
|
||||
<ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
|
||||
translation
|
||||
<ucap-chat-message-box-translation></ucap-chat-message-box-translation>
|
||||
video-conference
|
||||
<ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
|
||||
|
||||
<div class="message">
|
||||
{{ message.sentMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time secondary-text">
|
||||
{{ message.sendDate | date: 'a hh:mm' }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.chat-messages {
|
||||
/*.chat-messages {
|
||||
position: relative;
|
||||
padding: 16px 0 40px 40px;
|
||||
padding: 16px 40px;
|
||||
|
||||
.message-row {
|
||||
position: relative;
|
||||
|
|
@ -129,3 +129,126 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
$otherBox-line: #cccccc;
|
||||
$otherBox-bg: #ffffff;
|
||||
$meBox-line: #cccccc;
|
||||
$meBox-bg: #ffffff;
|
||||
|
||||
.chat-messages {
|
||||
padding: 30px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.message-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&.me {
|
||||
flex-direction: row-reverse;
|
||||
.profile-info {
|
||||
flex-direction: row-reverse;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-row {
|
||||
margin-bottom: 30px;
|
||||
.profile-img {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.message-main {
|
||||
margin-left: 20px;
|
||||
margin-right: 10px;
|
||||
.chat-name {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.bubble {
|
||||
border: 1px solid $otherBox-line;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
background-color: $otherBox-bg;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
&:before {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid $otherBox-line;
|
||||
border-top: 6px solid $otherBox-line;
|
||||
border-bottom: 6px solid transparent;
|
||||
left: -12px;
|
||||
top: 4px;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid $otherBox-bg;
|
||||
border-top: 6px solid $otherBox-bg;
|
||||
border-bottom: 6px solid transparent;
|
||||
left: -10px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.secondary-text {
|
||||
align-self: flex-end;
|
||||
font-size: 11px;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.message-row.me > .bubble {
|
||||
border: 1px solid $meBox-line;
|
||||
background-color: $meBox-bg;
|
||||
}
|
||||
.message-row.me {
|
||||
.profile-img{
|
||||
display:none;
|
||||
}
|
||||
.chat-name{
|
||||
display:none;
|
||||
}
|
||||
.message-main {
|
||||
text-align: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 20px;
|
||||
& .bubble:before {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 6px solid $meBox-line;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $meBox-line;
|
||||
border-bottom: 6px solid transparent;
|
||||
left: initial;
|
||||
right: -12px;
|
||||
top: 4px;
|
||||
}
|
||||
& .bubble:after {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 6px solid $meBox-bg;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $meBox-bg;
|
||||
border-bottom: 6px solid transparent;
|
||||
left: initial;
|
||||
right: -10px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
<mat-expansion-panel
|
||||
*ngFor="let groupBuddy of groupBuddyList"
|
||||
[togglePosition]="'before'"
|
||||
class="groupExpansionPanel"
|
||||
>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title> {{ groupBuddy.group.name }} </mat-panel-title>
|
||||
|
|
|
|||
|
|
@ -5,5 +5,42 @@
|
|||
|
||||
.more-spacer {
|
||||
flex: 1 1 auto;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::ng-deep .groupExpansionPanel .mat-expansion-panel-body {
|
||||
padding: 0;
|
||||
}
|
||||
.mat-expansion-panel-header{
|
||||
height:40px ! important;
|
||||
padding: 0 20px;
|
||||
.mat-expansion-panel-header-title {
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.mat-expansion-panel-header-description{
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mat-icon-button {
|
||||
margin-right: 0;
|
||||
width: inherit;
|
||||
}
|
||||
.mat-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
.groupList {
|
||||
.mat-expansion-panel-header {
|
||||
padding: 0 20px;
|
||||
.mat-content {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-more-spacer {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div>
|
||||
<div>
|
||||
<div class="list-search">
|
||||
<div class="selectbox">
|
||||
<mat-select [(value)]="companyCode">
|
||||
<mat-option
|
||||
*ngFor="let company of companyList"
|
||||
|
|
@ -9,12 +9,27 @@
|
|||
</mat-option>
|
||||
</mat-select>
|
||||
</div>
|
||||
<div>
|
||||
<div class="searchbox">
|
||||
<input
|
||||
matInput
|
||||
#searchWordInput
|
||||
placeholder="name"
|
||||
(keydown.enter)="onKeyDownEnter(searchWordInput.value)"
|
||||
/>
|
||||
<div class="btn-search"><i class="material-icons">search</i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--검색창만 있는 경우--------------------------------------------------------------------------
|
||||
<div class="list-search">
|
||||
<div class="searchbox">
|
||||
<input
|
||||
matInput
|
||||
#searchWordInput
|
||||
placeholder="name"
|
||||
(keydown.enter)="onKeyDownEnter(searchWordInput.value)"
|
||||
/>
|
||||
<div class="btn-search"><i class="material-icons">search</i></div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@charset 'utf-8';
|
||||
.organization-tree {
|
||||
ul,
|
||||
li {
|
||||
|
|
@ -10,3 +11,39 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.searchbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
input {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.btn-search {
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
margin-left: auto;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.selectbox {
|
||||
display: inline-flex;
|
||||
width: 45%;
|
||||
margin-right: 1%;
|
||||
}
|
||||
+ .searchbox {
|
||||
width: 54%;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,14 +13,15 @@
|
|||
</mat-nested-tree-node>
|
||||
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
|
||||
<li>
|
||||
<div class="mat-tree-node" (click)="onClickNode(node)">
|
||||
<div class="mat-tree-node" (click)="onClickNode(node)" class="path">
|
||||
<button
|
||||
mat-icon-button
|
||||
matTreeNodeToggle
|
||||
[attr.aria-label]="'toggle ' + node.filename"
|
||||
>
|
||||
<mat-icon class="mat-icon-rtl-mirror">
|
||||
{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
|
||||
<!-- {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}-->
|
||||
{{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
|
||||
</mat-icon>
|
||||
</button>
|
||||
{{ node.title }}
|
||||
|
|
@ -28,7 +29,7 @@
|
|||
<ul
|
||||
[class.organization-tree-node-invisible]="!treeControl.isExpanded(node)"
|
||||
>
|
||||
<div *ngIf="treeControl.isExpanded(node)">
|
||||
<div *ngIf="treeControl.isExpanded(node)" class="boxnone">
|
||||
<ng-container matTreeNodeOutlet></ng-container>
|
||||
</div>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,61 @@
|
|||
.organization-tree {
|
||||
padding:10px;
|
||||
ul,
|
||||
li {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
list-style-type: none;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.organization-tree-node-invisible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mat-tree-node {
|
||||
min-height: 30px;
|
||||
font-size: 13px;
|
||||
padding-left:20px;
|
||||
margin-top:4px;
|
||||
&:hover {
|
||||
background-color: #f4f4f4;
|
||||
border:1px solid #cccccc;
|
||||
border-radius:4px;
|
||||
box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.path {
|
||||
//border: 1px solid #dddddd;
|
||||
padding: 4px;
|
||||
margin-top: 10px;
|
||||
//box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
|
||||
+ ul{
|
||||
li:last-chlid{
|
||||
border-bottom:1px solid #dddddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-icon-button{
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
line-height: 20px;
|
||||
margin-right:10px;
|
||||
.mat-icon-rtl-mirror{
|
||||
line-height: 14px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #dddddd;
|
||||
padding: 2px;
|
||||
font-size: 14px;
|
||||
min-width: 14px;
|
||||
min-height: 14px;
|
||||
line-height: 14px;
|
||||
width:20px;
|
||||
height:20px;
|
||||
box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,12 +39,14 @@
|
|||
{{ userInfo.deptName }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
<!-- 상태메시지 제외
|
||||
<div
|
||||
class="msg-status"
|
||||
*ngIf="!checkable && userInfo.intro.trim() && !compactable"
|
||||
>
|
||||
{{ userInfo.intro }}
|
||||
</div>
|
||||
-->
|
||||
</dd>
|
||||
</dl>
|
||||
<mat-checkbox
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@charset 'utf-8';
|
||||
@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
|
||||
@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common';
|
||||
|
||||
|
||||
%list-item {
|
||||
position: relative;
|
||||
|
|
@ -7,17 +8,17 @@
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
height: $listH-row2;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
padding: 0 10px;
|
||||
border-bottom: $line-basic;
|
||||
padding: 20px;
|
||||
}
|
||||
%presence {
|
||||
display: inline-block;
|
||||
width: $presence-size;
|
||||
height: $presence-size;
|
||||
//margin-top: position-m($listH-row2, $presence-size, 0);
|
||||
align-self: flex-start;
|
||||
align-items: center;
|
||||
text-indent: -10000000px;
|
||||
margin-right: 8px;
|
||||
margin-right: 4px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
%msg-status {
|
||||
|
|
@ -28,7 +29,7 @@
|
|||
padding: 2px 6px;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
@include ellipsis(20);
|
||||
@include ellipsis(2);
|
||||
@include border-radius(4px);
|
||||
}
|
||||
|
||||
|
|
@ -60,51 +61,49 @@
|
|||
.item-default {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.thumbnail {
|
||||
width: $thumbnail-msize;
|
||||
height: $thumbnail-msize;
|
||||
margin-right: 12px;
|
||||
@include border-radius(100px);
|
||||
dt{
|
||||
flex:none;
|
||||
.thumbnail {
|
||||
width: $thumbnail-msize;
|
||||
height: $thumbnail-msize;
|
||||
margin-right: 16px;
|
||||
@include border-radius(50%);
|
||||
}
|
||||
}
|
||||
.info {
|
||||
|
||||
.info{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: calc(100% - 50px);
|
||||
.detail {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
.detail{
|
||||
flex-flow: column;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 2px;
|
||||
color: $font-dark;
|
||||
@include ellipsis(1);
|
||||
b {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.dept {
|
||||
font-size: 12px;
|
||||
color: $font-mid;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
}
|
||||
.msg-status {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
@extend %msg-status;
|
||||
.msg-status {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
@extend %msg-status;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//가변에 따른 list-item width값 변경
|
||||
.list-item {
|
||||
.item-default {
|
||||
.detail {
|
||||
width: 60%;
|
||||
}
|
||||
.msg-status {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
.presence {
|
||||
+ .item-default {
|
||||
width: calc(100% - 20px);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,21 @@
|
|||
<div>
|
||||
<div class="room-name">{{ getRoomName(roomInfo) }}</div>
|
||||
<div>{{ roomInfo.finalEventDate }}</div>
|
||||
<div>{{ finalEventMessage }}</div>
|
||||
<div *ngIf="roomInfo.noReadCnt > 0">noReadCnt : {{ roomInfo.noReadCnt }}</div>
|
||||
<div class="list-item">
|
||||
<dl class="item-default">
|
||||
<dt>
|
||||
<img class="thumbnail" />
|
||||
</dt>
|
||||
<dd class="info">
|
||||
<div class="detail">
|
||||
<div class="room-name">
|
||||
<div class="name">{{ getRoomName(roomInfo) }}</div>
|
||||
<div class="num" *ngIf="roomInfo.noReadCnt > 0">
|
||||
noReadCnt : {{ roomInfo.noReadCnt }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-msg">{{ finalEventMessage }}</div>
|
||||
</div>
|
||||
|
||||
<div class="date">{{ roomInfo.finalEventDate }}</div>
|
||||
</dd>
|
||||
</dl>
|
||||
<span class="noti">1</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
@charset 'utf-8';
|
||||
@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
|
||||
.profile {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
letter-spacing: 0.01em;
|
||||
min-height: 88px;
|
||||
border-bottom: 1px solid;
|
||||
border-bottom: $line-basic;
|
||||
padding: 16px;
|
||||
font-weight: 400;
|
||||
border-radius: 0;
|
||||
|
|
@ -16,8 +18,7 @@
|
|||
|
||||
.profile-name {
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@include ellipsis(1)
|
||||
}
|
||||
|
||||
.profile-last-message {
|
||||
|
|
@ -44,3 +45,84 @@
|
|||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
%list-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: $listH-row2;
|
||||
border-bottom: $line-basic;
|
||||
padding: 20px;
|
||||
}
|
||||
.item-default {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.thumbnail {
|
||||
width: $thumbnail-msize;
|
||||
height: $thumbnail-msize;
|
||||
margin-right: 16px;
|
||||
@include border-radius(100px);
|
||||
}
|
||||
.info {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: calc(100% - 50px);
|
||||
.detail {
|
||||
flex-direction: column;
|
||||
width: calc(100% - 80px);
|
||||
.room-name {
|
||||
display: inline-flex;
|
||||
color: $font-dark;
|
||||
width: 100%;
|
||||
margin-bottom: 2px;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
@include ellipsis(1);
|
||||
font-weight: 600;
|
||||
}
|
||||
.num {
|
||||
font-size: 12px;
|
||||
color: $color-main;
|
||||
flex: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.room-msg {
|
||||
font-size: 12px;
|
||||
color: $font-mid;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
float: right;
|
||||
width: 70px;
|
||||
font-size: 11px;
|
||||
text-align: right;
|
||||
margin-left: 10px;
|
||||
color: $font-mid;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
@extend %list-item;
|
||||
&:hover {
|
||||
background-color: $bg-list-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.noti {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
bottom: 22px;
|
||||
max-width: 60px;
|
||||
padding: 0 6px;
|
||||
font-size: 11px;
|
||||
color: #ffffff;
|
||||
background-color: $color-main;
|
||||
@include ellipsis(1);
|
||||
@include border-radius(100px);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user