디자인 레이아웃 변경
This commit is contained in:
khk
parent
2d20686a8c
commit
35a3292ddb
|
|
@ -11,7 +11,7 @@
|
|||
<ng-template mat-tab-label>
|
||||
<mat-icon>group</mat-icon>
|
||||
</ng-template>
|
||||
<app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
|
||||
<app-layout-chat-left-sidenav-group class="left-group-side"></app-layout-chat-left-sidenav-group>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
|
|
|
|||
|
|
@ -49,3 +49,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.left-group-side{
|
||||
position: relative;
|
||||
height:100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,18 @@
|
|||
</button>
|
||||
</mat-form-field>
|
||||
</form>-->
|
||||
|
||||
<div>
|
||||
<div class="current-head">
|
||||
<h3>대화</h3>
|
||||
<div class="btn-box">
|
||||
<button mat-icon-button>
|
||||
<mat-icon>timer</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button>
|
||||
<mat-icon> add_comment</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-search">
|
||||
<div class="searchbox">
|
||||
<form [formGroup]="fgSearch" class="w-100-p">
|
||||
|
|
@ -65,7 +76,7 @@
|
|||
<div
|
||||
*ngIf="!isSearch"
|
||||
class="app-layout-chat-left-sidenav-chat-list"
|
||||
perfectScrollbar
|
||||
|
||||
>
|
||||
<ucap-room-list-item
|
||||
*ngFor="let room of roomList"
|
||||
|
|
@ -96,7 +107,7 @@
|
|||
<div
|
||||
*ngIf="!!isSearch"
|
||||
class="app-layout-chat-left-sidenav-chat-list search"
|
||||
perfectScrollbar
|
||||
|
||||
>
|
||||
<ucap-room-list-item
|
||||
*ngFor="let room of searchRoomList"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,69 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.searchbox{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
::ng-deep .searchbox{
|
||||
.mat-form-field{
|
||||
display:block;
|
||||
.mat-form-field-wrapper{
|
||||
padding: 0;
|
||||
padding-bottom:0 !important;
|
||||
height: 100%;
|
||||
.mat-form-field-flex{
|
||||
height: 59px;
|
||||
padding:0 20px;
|
||||
align-items: center;
|
||||
.mat-form-field-infix{
|
||||
width:100%;
|
||||
font-size:14px;
|
||||
border:none;
|
||||
}
|
||||
.mat-form-field-suffix{
|
||||
.mat-icon{
|
||||
line-height:24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-form-field-appearance-legacy{
|
||||
.mat-form-field-wrapper{
|
||||
padding: 0;
|
||||
}
|
||||
.mat-form-field-underline{
|
||||
bottom:0;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-layout-chat-left-sidenav-chat-header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
|
@ -11,59 +77,3 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.room-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
.list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.searchbox{
|
||||
width:100%;
|
||||
.mat-form-field{
|
||||
display:block;
|
||||
.mat-form-field-wrapper{
|
||||
padding-bottom:0 !important;
|
||||
height: 60px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::ng-deep .searchbox .mat-form-field-flex{
|
||||
height: 60px;
|
||||
padding:0 10px;
|
||||
}
|
||||
::ng-deep .searchbox .mat-form-field-appearance-legacy .mat-form-field-wrapper{
|
||||
padding: 0;
|
||||
}
|
||||
::ng-deep .searchbox .mat-form-field-appearance-legacy .mat-form-field-underline{
|
||||
bottom:0;
|
||||
background-color: #cccccc !important;
|
||||
}
|
||||
/*.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;
|
||||
}
|
||||
}*/
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div>
|
||||
|
||||
<div>
|
||||
<div class="current-head">
|
||||
<h3>그룹</h3>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div *ngIf="!isShowSearch">
|
||||
<div *ngIf="!isShowSearch" class="search-result" style="overflow: auto;">
|
||||
<ucap-group-expansion-panel
|
||||
#groupExpansionPanel
|
||||
[groupBuddyList]="groupBuddyList$ | async"
|
||||
|
|
@ -71,11 +71,11 @@
|
|||
</ucap-profile-user-list-item>
|
||||
</ucap-group-expansion-panel>
|
||||
</div>
|
||||
<div *ngIf="isShowSearch">
|
||||
<div *ngIf="isShowSearch" class="search-result">
|
||||
<div *ngIf="searchProcessing">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
<div>검색결과({{ searchUserInfos.length }}명)</div>
|
||||
<div class="result-num">검색결과<span class="text-accent-color">({{ searchUserInfos.length }}명)</span></div>
|
||||
<ucap-profile-user-list-item
|
||||
*ngFor="let userInfo of searchUserInfos"
|
||||
[userInfo]="userInfo"
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
>
|
||||
</ucap-profile-user-list-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
style="visibility: hidden; position: fixed"
|
||||
|
|
|
|||
|
|
@ -18,3 +18,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.search-result {
|
||||
height: calc(100% - 120px);
|
||||
overflow: auto;
|
||||
.result-num {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-tab-body-content {
|
||||
height: 100%;
|
||||
overflow: unset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -170,7 +170,6 @@ export class GroupComponent implements OnInit, OnDestroy {
|
|||
CreateChatDialogResult
|
||||
>(CreateChatDialogComponent, {
|
||||
width: '600px',
|
||||
height: '700px',
|
||||
data: {
|
||||
type: UserSelectDialogType.NewGroup,
|
||||
title: 'New Group'
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@
|
|||
></ucap-organization-tree>
|
||||
</div>
|
||||
<div class="select-list ">
|
||||
<div class="select-dept text-accent-color">
|
||||
<dl>
|
||||
<dl class="select-dept text-accent-color">
|
||||
<dt>
|
||||
{{ getSelectedDepartmentName() }}
|
||||
</dt>
|
||||
|
|
@ -25,7 +24,6 @@
|
|||
</mat-checkbox>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div *ngIf="selectedDepartmentProcessing">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
|
||||
.oraganization-tab {
|
||||
.oraganization-tab {
|
||||
height: 100%;
|
||||
flex-direction: inherit;
|
||||
display: flex;
|
||||
|
|
@ -24,8 +24,9 @@
|
|||
height:40%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//팝업에 있는 조직도
|
||||
.mat-card-content{
|
||||
.mat-tab-body-content{
|
||||
.oraganization-box{
|
||||
|
|
@ -37,34 +38,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-box{
|
||||
height:100px;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
border-top:1px solid #ddd;
|
||||
align-items: center;
|
||||
width:100%;
|
||||
background-color:#ffffff;
|
||||
}
|
||||
|
||||
.select-list{
|
||||
height:60%;
|
||||
border-top:1px solid #dddddd;
|
||||
.select-dept{
|
||||
padding:0 10px;
|
||||
padding:0 20px;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
.dept-name{
|
||||
border-top:1px solid #dddddd;
|
||||
height:40px;
|
||||
width:100%;
|
||||
display:inline-flex;
|
||||
align-items: center;
|
||||
padding:0 10px;
|
||||
display:flex;
|
||||
background-color: #f9f9f9;
|
||||
dt{
|
||||
|
||||
}
|
||||
dd{
|
||||
margin-left:auto;
|
||||
}
|
||||
}
|
||||
.search-list{
|
||||
height: calc(100% - 140px);
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
.list-item{
|
||||
height:70px;
|
||||
|
|
|
|||
|
|
@ -1,82 +1,278 @@
|
|||
@charset 'utf-8';
|
||||
$line-basic: 1px solid #dddddd;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
:host {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.chat-toolbar {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
/*.chat-messages {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 16px 40px;
|
||||
|
||||
.file-drop-zone-container {
|
||||
.message-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px 4px 16px;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: -32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
|
||||
.message {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.file-drop-zone {
|
||||
position: absolute;
|
||||
&.contact {
|
||||
.bubble {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
|
||||
.time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.me {
|
||||
padding-left: 40px;
|
||||
|
||||
.avatar {
|
||||
order: 2;
|
||||
margin: 0 0 0 16px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
margin-left: auto;
|
||||
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
||||
.time {
|
||||
justify-content: flex-end;
|
||||
right: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
.bubble {
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
.bubble {
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.contact + .me,
|
||||
&.me + .contact {
|
||||
padding-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
padding-bottom: 13px;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
$otherBox-line: #cccccc;
|
||||
$otherBox-bg: #ffffff;
|
||||
$meBox-line: #cccccc;
|
||||
$meBox-bg: #ffffff;
|
||||
|
||||
.chat-messages {
|
||||
padding: 30px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.information-msg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: #dddddd;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.message-row {
|
||||
margin-bottom: 20px;
|
||||
.date-splitter {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.chat-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.profile-img {
|
||||
flex: 0 0 auto;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.me {
|
||||
.chat-row {
|
||||
flex-direction: row-reverse;
|
||||
.profile-info {
|
||||
flex-direction: row-reverse;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #666666;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.me {
|
||||
.secondary-text {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
[selectedUserList]="selectedUserList"
|
||||
[checkable]="true"
|
||||
(checkGroup)="onCheckGroup($event)"
|
||||
class="group-expansion"
|
||||
>
|
||||
<ucap-profile-user-list-item
|
||||
*ucapGroupExpansionPanelItem="let userInfo"
|
||||
|
|
@ -68,11 +69,11 @@
|
|||
</ucap-profile-user-list-item>
|
||||
</ucap-group-expansion-panel>
|
||||
</div>
|
||||
<div *ngIf="isShowSearch">
|
||||
<div *ngIf="isShowSearch" class="search-result">
|
||||
<div *ngIf="searchProcessing">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
<div>검색결과({{ searchUserInfos.length }}명)</div>
|
||||
<div class="result-num">검색결과 <span class="text-accent-color">({{ searchUserInfos.length }}명)</span></div>
|
||||
<ucap-profile-user-list-item
|
||||
*ngFor="let userInfo of searchUserInfos"
|
||||
[userInfo]="userInfo"
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
//조직도 레이아웃 변경
|
||||
::ng-deep .dialog-org {
|
||||
.oraganization-tab {
|
||||
width: 100%;
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
.confirm-card {
|
||||
min-width: 500px;
|
||||
.mat-card-header {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
.mat-card-header-text {
|
||||
.mat-card-title {
|
||||
margin: 0 -16px;
|
||||
|
|
@ -69,4 +70,9 @@
|
|||
.list-panel{
|
||||
overflow: auto;
|
||||
height: calc(100% - 60px);
|
||||
.group-expansion{
|
||||
.list-item{
|
||||
height:70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<ul *ngIf="expired">
|
||||
<ul *ngIf="expired" class="expired">
|
||||
<li>기간이 만료된 파일입니다.</li>
|
||||
</ul>
|
||||
<ul *ngIf="!expired && fileInfo && fileInfo.AttSEQ">
|
||||
|
|
|
|||
|
|
@ -102,5 +102,14 @@
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.expired{
|
||||
li{
|
||||
width:100%;
|
||||
white-space: nowrap;
|
||||
color:#999999;
|
||||
align-items: center;
|
||||
line-height:40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,13 +144,13 @@ $meBox-bg: #ffffff;
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: #cccccc;
|
||||
background-color: #dddddd;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.message-row {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
.date-splitter {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -162,6 +162,9 @@ $meBox-bg: #ffffff;
|
|||
flex-direction: row;
|
||||
.profile-img {
|
||||
flex: 0 0 auto;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.me {
|
||||
|
|
|
|||
|
|
@ -46,10 +46,10 @@
|
|||
class="groupExpansionPanel"
|
||||
>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title
|
||||
>{{ groupBuddy.group.name }}
|
||||
<span>({{ groupBuddy.buddyList.length }}명)</span></mat-panel-title
|
||||
>
|
||||
<mat-panel-title class="panel-title">
|
||||
<div class="title-name ellipsis">{{ groupBuddy.group.name }}</div>
|
||||
<span class="text-accent-color number">({{ groupBuddy.buddyList.length }}명)</span>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
<span class="more-spacer"></span>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -38,6 +38,18 @@
|
|||
.mat-content {
|
||||
color: #666666;
|
||||
overflow: unset;
|
||||
.panel-title{
|
||||
display:inline-flex;
|
||||
.title-name{
|
||||
display:inline-flex;
|
||||
flex:1 1 auto;
|
||||
}
|
||||
.number{
|
||||
margin-left:6px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -48,3 +60,9 @@
|
|||
::ng-deep .mat-content{
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.number{
|
||||
margin-left:6px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="list-search">
|
||||
<!--<div class="list-search">
|
||||
<div class="selectbox">
|
||||
<mat-select [(value)]="companyCode">
|
||||
<mat-option
|
||||
|
|
@ -28,8 +28,27 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="list-search">
|
||||
<div class="selectbox">
|
||||
<!--<mat-label>회사선택</mat-label>-->
|
||||
<mat-select [(value)]="companyCode">
|
||||
<mat-option *ngFor="let company of companyList" [value]="company.companyCode">
|
||||
{{ company.companyName }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
|
||||
</div>
|
||||
<div class="searchbox">
|
||||
<mat-form-field floatLabel="never" style="width:100%;">
|
||||
<input matInput #searchWordInput placeholder="name" (keydown.enter)="onKeyDownEnter(searchWordInput.value)" />
|
||||
<button mat-button matSuffix mat-icon-button aria-label="Clear"
|
||||
(click)="inputSearch.value = ''; onClickSearchCancel()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<!--검색창만 있는 경우--------------------------------------------------------------------------
|
||||
<div class="list-search">
|
||||
<div class="searchbox">
|
||||
|
|
|
|||
|
|
@ -15,13 +15,19 @@
|
|||
.list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0 10px 0 20px;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.selectbox {
|
||||
display: inline-flex;
|
||||
width: 38%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
.searchbox {
|
||||
width: 100%;
|
||||
width: 60%;
|
||||
display: flex;
|
||||
input {
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
line-height: 14px;
|
||||
width:20px;
|
||||
height:20px;
|
||||
box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
|
||||
box-shadow: 0 2px 1px rgba(48, 48, 48, 0.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
[path]="imagePath"
|
||||
[default]="defaultPath"
|
||||
/>
|
||||
<span *ngIf="roomInfo.isTimeRoom" class="badge-timer">
|
||||
<mat-icon>timer</mat-icon>
|
||||
</span>
|
||||
<!-- <ucap-ui-imaage
|
||||
[imageClass]="'thumbnail'"
|
||||
[base]="sessionVerinfo.profileRoot"
|
||||
|
|
@ -20,14 +23,16 @@
|
|||
<div class="detail">
|
||||
<div class="room-name">
|
||||
<div class="name">{{ getRoomName(roomInfo) }}</div>
|
||||
<div class="num" *ngIf="roomInfo.roomType === RoomType.Multi">
|
||||
<div class="num text-accent-color" *ngIf="roomInfo.roomType === RoomType.Multi">
|
||||
{{ roomInfo.joinUserCount }}명
|
||||
</div>
|
||||
<div *ngIf="!checkable && !roomInfo.receiveAlarm">
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-msg">{{ finalEventMessage }}</div>
|
||||
<div class="room-msg">
|
||||
{{ finalEventMessage }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="date">
|
||||
|
|
@ -44,9 +49,7 @@
|
|||
</mat-checkbox>
|
||||
</dd>
|
||||
</dl>
|
||||
<span *ngIf="roomInfo.isTimeRoom">
|
||||
<mat-icon>timer</mat-icon>
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="notiBadge"
|
||||
*ngIf="roomInfo.noReadCnt > 0"
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@ $font-dark: #212121;
|
|||
$font-mid: #666666;
|
||||
$font-light: #848d95;
|
||||
$font-white: #ffffff;
|
||||
$line-basic:1px solid #dddddd;
|
||||
$line-basic: 1px solid #dddddd;
|
||||
$bg-list-hover: #efefef;
|
||||
$color-main:#e53096;
|
||||
$listH-row2: 80px;
|
||||
$presence-size: 8px;
|
||||
$thumbnail-msize: 40px;
|
||||
|
|
@ -25,6 +24,24 @@ $thumbnail-msize: 40px;
|
|||
}
|
||||
}
|
||||
|
||||
.badge-timer {
|
||||
position:absolute;
|
||||
background-color: #ffffff;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
bottom: 14px;
|
||||
left: 46px;
|
||||
text-align:center;
|
||||
.mat-icon{
|
||||
font-size:14px;
|
||||
color:red;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height:18px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
|
|
@ -84,7 +101,7 @@ $thumbnail-msize: 40px;
|
|||
width: $thumbnail-msize;
|
||||
height: $thumbnail-msize;
|
||||
margin-right: 16px;
|
||||
border-radius:50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info {
|
||||
position: relative;
|
||||
|
|
@ -117,9 +134,8 @@ $thumbnail-msize: 40px;
|
|||
}
|
||||
.num {
|
||||
font-size: 12px;
|
||||
color: $color-main;
|
||||
flex: none;
|
||||
margin-left: 10px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
.room-msg {
|
||||
|
|
@ -155,9 +171,8 @@ $thumbnail-msize: 40px;
|
|||
padding: 0 6px;
|
||||
font-size: 11px;
|
||||
color: #ffffff;
|
||||
background-color: $color-main;
|
||||
@include ellipsis(1);
|
||||
border-radius:50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.notiBadge {
|
||||
|
|
|
|||
|
|
@ -18,3 +18,10 @@
|
|||
margin:0 -16px;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
.search-result{
|
||||
.result-num{
|
||||
padding:10px;
|
||||
display:flex;
|
||||
height:40px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user