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

리스트 목록 - 높이값 64px조정

Browse Source
This commit is contained in:
khk 2020-01-15 19:21:58 +09:00
parent 3eca5d2d2d
commit 9f091fef50
22 changed files with 332 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
View File

@ -10,12 +10,13 @@
} }
::ng-deep .mat-tab-header { ::ng-deep .mat-tab-header {
border-bottom: none !important; border-bottom: none !important;
width: 100%;
} }
.left-side-tabs-body { .left-side-tabs-body {
position: relative; position: relative;
height: 100%; height: 100%;
width: calc(100% - 70px); width: calc(100% - 60px);
div[id^='tabs'] { div[id^='tabs'] {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -30,7 +31,7 @@
.mat-tab-group { .mat-tab-group {
display: flex; display: flex;
width: 70px; width: 60px;
flex-direction: row; flex-direction: row;
} }
@ -64,7 +65,7 @@
.mat-tab-label { .mat-tab-label {
width: 100%; width: 100%;
height: 80px; height: 80px;
padding: 0 16px; padding: 0;
} }
} }
.mat-ink-bar { .mat-ink-bar {
@ -102,6 +103,9 @@
stroke-linejoin: miter; stroke-linejoin: miter;
fill: none; fill: none;
} }
.mat-badge-content {
right: -4px !important;
}
} }
} }
&[aria-selected='true'] { &[aria-selected='true'] {

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

@ -17,7 +17,6 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 60px;
align-items: center; align-items: center;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
@ -70,7 +69,7 @@
} }
.app-layout-chat-left-sidenav-chat-list { .app-layout-chat-left-sidenav-chat-list {
height: calc(100% - 130px); height: calc(100% - 120px);
position: relative; position: relative;
} }

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

@ -20,7 +20,6 @@
.list-search { .list-search {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 60px;
align-items: center; align-items: center;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
@ -75,7 +74,7 @@
::ng-deep .message-box { ::ng-deep .message-box {
.message-section { .message-section {
position: relative; position: relative;
height: calc(100% - 130px); height: calc(100% - 120px);
.message-tab { .message-tab {
position: relative; position: relative;
height: 100%; height: 100%;

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

@ -42,7 +42,7 @@
} }
} }
.search-result { .search-result {
height: calc(100% - 40px); height: calc(100% - 30px);
overflow: auto; overflow: auto;
.result-num { .result-num {
padding: 10px; padding: 10px;
@ -52,7 +52,7 @@
} }
.oraganization-tab { .oraganization-tab {
height: calc(100% - 130px); height: calc(100% - 120px);
flex-direction: inherit; flex-direction: inherit;
display: flex; display: flex;
.oraganization-tab-tree { .oraganization-tab-tree {

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

@ -43,6 +43,8 @@
padding: 10px 20px; padding: 10px 20px;
.profile-img { .profile-img {
margin-right: 10px; margin-right: 10px;
width: 40px;
height: 40px;
.responsive-chats-button { .responsive-chats-button {
display: none; display: none;
line-height: normal; line-height: normal;
@ -57,8 +59,6 @@
font-size: 16px; font-size: 16px;
} }
} }
width: 50px;
height: 50px;
&.thumbnail-mask { &.thumbnail-mask {
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
@ -73,20 +73,20 @@
flex-flow: column; flex-flow: column;
overflow: hidden; overflow: hidden;
.room-name { .room-name {
font-size: 16px; font-size: 1rem;
line-height: normal; line-height: normal;
@include ellipsis(1); @include ellipsis(1);
} }
.room-type { .room-type {
font-size: 14px; font-size: 0.9rem;
line-height: normal; line-height: normal;
margin-top: 6px; margin-top: 2px;
height: 20px; height: 20px;
span { span {
border-radius: 10px; border-radius: 10px;
padding: 1px 10px; padding: 1px 10px;
margin-right: 6px; margin-right: 6px;
font-size: 13px; font-size: 0.7rem;
} }
} }
} }
@ -182,7 +182,7 @@
.mat-icon { .mat-icon {
line-height: normal; line-height: normal;
color: #ffffff; color: #ffffff;
transform: translateY(-3px); transform: translateY(-1px);
} }
} }
} }

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

@ -73,7 +73,8 @@
} }
} }
::ng-deep .mat-dialog-container .mat-tab-body-wrapper { ::ng-deep .mat-dialog-container {
.mat-tab-body-wrapper {
height: 380px; height: 380px;
width: 100%; width: 100%;
.mat-tab-body { .mat-tab-body {
@ -84,7 +85,9 @@
height: 100%; height: 100%;
} }
} }
}
} }
.mat-tab-frame { .mat-tab-frame {
width: 100%; width: 100%;
height: 100%; height: 100%;

2
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
View File

@ -9,7 +9,7 @@
display: flex; display: flex;
padding: 0 10px; padding: 0 10px;
cursor: pointer; cursor: pointer;
height: 50px; height: 60px;
color: #ffffff; color: #ffffff;
//background: rgba(37, 27, 30, 0.9); //background: rgba(37, 27, 30, 0.9);
//border-bottom: 1px solid #d5dadb; //border-bottom: 1px solid #d5dadb;

2
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
View File

@ -2,7 +2,7 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
padding-top: 47px; padding-top: 57px;
border-top: none; border-top: none;
.split-area { .split-area {
overflow: hidden; overflow: hidden;

6
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -337,7 +337,7 @@ $daesang-grey: (
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0 10px; padding: 0 10px;
height: 70px; height: 60px;
background-color: #eeeeee; background-color: #eeeeee;
background: $gradient-light; background: $gradient-light;
background: -webkit-linear-gradient( background: -webkit-linear-gradient(
@ -349,6 +349,10 @@ $daesang-grey: (
color: #ffffff; color: #ffffff;
} }
.list-search{
height:60px;
}
mat-tab-group[vertical] { mat-tab-group[vertical] {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

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

@ -1,6 +1,6 @@
<cdk-virtual-scroll-viewport <cdk-virtual-scroll-viewport
#cvsvGroup #cvsvGroup
itemSize="80" itemSize="64"
perfectScrollbar perfectScrollbar
fxFlexFill fxFlexFill
> >
@ -16,7 +16,6 @@
<!-- This is the tree node template for leaf nodes --> <!-- This is the tree node template for leaf nodes -->
<mat-tree-node <mat-tree-node
*matTreeNodeDef="let node" *matTreeNodeDef="let node"
style="height: 80px;"
[attr.node-type]="node?.nodeType" [attr.node-type]="node?.nodeType"
matRipple matRipple
> >
@ -37,7 +36,6 @@
<mat-tree-node <mat-tree-node
*matTreeNodeDef="let node; when: isHeader" *matTreeNodeDef="let node; when: isHeader"
class="tree-node-frame ucap-clickable" class="tree-node-frame ucap-clickable"
style="height: 80px;"
[attr.node-type]="node?.nodeType" [attr.node-type]="node?.nodeType"
matRipple matRipple
> >

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

@ -13,7 +13,7 @@
.tree-node-frame { .tree-node-frame {
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
height: 40px; height: 64px;
.tree-node-header { .tree-node-header {
position: relative; position: relative;
@ -49,6 +49,7 @@
.mat-tree-node { .mat-tree-node {
width: 100%; width: 100%;
height: 100%;
&:hover { &:hover {
background-color: #f4f4f4; background-color: #f4f4f4;
border: 1px solid #cccccc; border: 1px solid #cccccc;

2
projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
View File

@ -64,7 +64,7 @@
<span>{{ message.regDate | ucapDate: 'C' }}</span> <span>{{ message.regDate | ucapDate: 'C' }}</span>
<span <span
*ngIf="message.type === MessageType.Receive && !message.readYn" *ngIf="message.type === MessageType.Receive && !message.readYn"
class="badge-new bg-warn-darkest" class="noti-new bg-warn-darkest"
> >
N N
</span> </span>

17
projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss
View File

@ -7,22 +7,22 @@
width: calc(100% - 80px); width: calc(100% - 80px);
dt { dt {
.name { .name {
font-size: 16px; font-size: 1.1em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
font-weight: 600; font-weight: 600;
margin-bottom: 2px;
span { span {
font-size: 13px; font-size: 0.9em;
} }
} }
} }
dd { dd {
color: #777777; color: #777777;
margin-top: 4px;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -30,22 +30,25 @@
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
font-size: 0.9em;
} }
} }
.date { .date {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-self: flex-start; font-size: 0.9em;
.badge-new { height: 40px;
.noti-new {
border-radius: 50%; border-radius: 50%;
color: #ffffff; color: #ffffff;
padding: 0; padding: 0;
text-align: center; text-align: center;
align-self: flex-end; align-self: flex-end;
align-items: center;
width: 20px; width: 20px;
height: 20px; height: 20px;
font-size: 12px; font-size: 0.9em;
margin-top: 4px; margin-top: 3px;
} }
} }
} }

65
projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html
View File

@ -1,5 +1,6 @@
<mat-card class="mat-elevation-z0 ucap-message-write"> <mat-card class="mat-elevation-z0 ucap-message-write">
<form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate> <form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
<perfect-scrollbar>
<div class="add-row"> <div class="add-row">
<button <button
mat-button mat-button
@ -16,7 +17,8 @@
class="receiver-sum text-accent-color" class="receiver-sum text-accent-color"
> >
{{ {{
'message.countOfReceiver' | translate: { count: receiverList.length } 'message.countOfReceiver'
| translate: { count: receiverList.length }
}} }}
</span> </span>
</div> </div>
@ -82,17 +84,46 @@
<span class="mdi mdi-delete"></span> <span class="mdi mdi-delete"></span>
</button> </button>
</mat-list-item> </mat-list-item>
<mat-list-item *ngFor="let attachment of attachmentList"> <mat-list-item
{{ attachment.name }} *ngFor="let attachment of attachmentList"
class="attach-file"
>
<div class="file-name">
<span class="mdi mdi-attachment mdi-18px"> </span
>{{ attachment.name }}
<button mat-button aria-label="파일삭제">
<!--<span class="mdi mdi-delete"></span>-->
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-trash-2"
>
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</button>
</div>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</mat-card-content>
</div>
</perfect-scrollbar>
</form>
<div class="message-option"> <div class="message-option">
<div class="editor-tools"> <div class="editor-tools">
<button <button mat-icon-button aria-label="이미지" (click)="onClickImage()">
mat-icon-button
aria-label="이미지"
(click)="onClickImage()"
>
<span class="mdi mdi-camera mdi-24px"></span> <span class="mdi mdi-camera mdi-24px"></span>
</button> </button>
<button <button
@ -112,24 +143,11 @@
>/1000 >/1000
</div> </div>
</div> </div>
</mat-card-content>
</div>
<mat-card-actions> <mat-card-actions>
<!--<div>
<span
[class.editor-length-invalid]="
0 === contentLength || 1000 < contentLength
"
>{{ contentLength }}</span
>/1000
</div>-->
<div class="editor-actions-spacer"></div> <div class="editor-actions-spacer"></div>
<div class="editor-actions"> <div class="editor-actions">
<button <button mat-stroked-button (click)="onClickCancel()" class="mat-primary">
mat-stroked-button
(click)="onClickCancel()"
class="mat-primary"
>
{{ 'common.messages.cancel' | translate }} {{ 'common.messages.cancel' | translate }}
</button> </button>
<button <button
@ -198,5 +216,4 @@
</button>--> </button>-->
</div> </div>
</mat-card-actions> </mat-card-actions>
</form>
</mat-card> </mat-card>

77
projects/ucap-webmessenger-ui-message/src/lib/components/write.component.scss
View File

@ -1,22 +1,16 @@
.ucap-message-write { .ucap-message-write {
width: 100%; width: 100%;
height: 100%; height: 100%;
form {
.message-receiver-list { height: 400px;
width: 100%; perfect-scrollbar {
height: 100px; .ps--active-x > .ps__rail-x {
display: none;
}
}
} }
.message-write-body { .message-write-body {
[contenteditable] {
}
[contenteditable]:hover,
[contenteditable]:focus {
}
[contenteditable]:hover { [contenteditable]:hover {
background: #fafafa; background: #fafafa;
} }
@ -37,6 +31,18 @@
flex: 1 1 auto; flex: 1 1 auto;
} }
} }
.message-option {
display: flex;
flex-flow: row;
flex: 1 1 auto;
height: 40px;
.editor-tools {
}
.length {
margin-left: auto;
align-self: center;
}
}
} }
.message-content { .message-content {
@ -60,23 +66,13 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 10px; padding: 10px;
height: 280px; min-height: 250px;
overflow: auto; border: 1px solid #dddddd;
} //overflow: auto;
.message-option {
display: flex;
flex-flow: row;
flex: 1 1 auto;
height: 40px;
.editor-tools {
}
.length {
margin-left: auto;
align-self: center;
}
} }
} }
} }
.mat-card-actions { .mat-card-actions {
margin: 0 0 20px; margin: 0 0 20px;
border-top: 1px solid #dddddd; border-top: 1px solid #dddddd;
@ -119,8 +115,9 @@
} }
.mat-chip-list { .mat-chip-list {
.mat-chip-list-wrapper { .mat-chip-list-wrapper {
max-height: 100px; margin: 0;
overflow: auto; /* max-height: 100px;
overflow: auto;*/
} }
} }
.message-title { .message-title {
@ -128,3 +125,25 @@
margin-top: 10px; margin-top: 10px;
} }
} }
::ng-deep .attach-file {
display: flex;
flex-flow: row;
flex: 1 1 auto;
.mat-list-item-content {
padding: 0 !important;
.file-name {
display: flex;
width: 100%;
align-items: center;
font-size: 0.9em;
border-bottom: 1px dotted #dddddd;
span {
margin-right: 6px;
}
button {
width: 24px;
margin-left: auto;
}
}
}
}

1
projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss
View File

@ -39,6 +39,7 @@
height: 10px; height: 10px;
border: 1px solid #ffffff; border: 1px solid #ffffff;
align-self: flex-end; align-self: flex-end;
transform: translateY(0px);
} }
button { button {
cursor: pointer; cursor: pointer;

4
projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
View File

@ -23,7 +23,7 @@
</dt> </dt>
<dd class="info"> <dd class="info">
<div class="detail"> <div class="detail">
<div> <div class="user-info">
<span <span
*ngIf="getWorkstatusInfo('text').length > 0" *ngIf="getWorkstatusInfo('text').length > 0"
class="work-status" class="work-status"
@ -32,7 +32,7 @@
> >
<span class="name"> <span class="name">
<b>{{ userInfo | ucapTranslate: 'name' }}</b> <b>{{ userInfo | ucapTranslate: 'name' }}</b>
{{ userInfo | ucapTranslate: 'grade' }} <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
</span> </span>
</div> </div>
<span class="dept"> <span class="dept">

37
projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss
View File

@ -7,7 +7,7 @@ $font-white: #ffffff;
$line-basic: 1px solid #dddddd; $line-basic: 1px solid #dddddd;
$bg-list-item-msg: #f0f4f6; $bg-list-item-msg: #f0f4f6;
$bg-list-hover: #efefef; $bg-list-hover: #efefef;
$listH-row2: 80px; $listH-row2: 60px;
$presence-size: 8px; $presence-size: 8px;
$thumbnail-msize: 40px; $thumbnail-msize: 40px;
@ -26,23 +26,6 @@ $thumbnail-msize: 40px;
} }
} }
.badge-mobile-state {
position: absolute;
background-color: #ffffff;
width: 18px;
height: 18px;
border-radius: 50%;
bottom: 14px;
left: 60px;
text-align: center;
.mat-icon {
font-size: 14px;
width: 18px;
height: 18px;
line-height: 18px;
}
}
%list-item { %list-item {
position: relative; position: relative;
display: flex; display: flex;
@ -65,7 +48,7 @@ $thumbnail-msize: 40px;
border-radius: 4px; border-radius: 4px;
} }
.list-item { /*.list-item {
@extend %list-item; @extend %list-item;
&:hover { &:hover {
background-color: $bg-list-hover; background-color: $bg-list-hover;
@ -73,13 +56,14 @@ $thumbnail-msize: 40px;
.mat-checkbox { .mat-checkbox {
padding-left: 10px; padding-left: 10px;
} }
} }*/
.item-default { .item-default {
display: flex; display: flex;
width: 100%; width: 100%;
dt { dt {
flex: none; flex: none;
position: relative;
.thumbnail { .thumbnail {
width: $thumbnail-msize; width: $thumbnail-msize;
height: auto; height: auto;
@ -92,34 +76,37 @@ $thumbnail-msize: 40px;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: calc(100% - 50px); width: calc(100% - 50px);
transform: translateY(2px);
.detail { .detail {
div { .user-info {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
margin-bottom: 2px;
.work-status { .work-status {
margin-right: 4px; margin-right: 4px;
border-radius: 4px; border-radius: 4px;
padding: 0 6px; padding: 0 6px;
color: #ffffff; color: #ffffff;
font-size: 12px; font-size: 0.9em;
width: 40px; width: 40px;
justify-items: center; justify-items: center;
height: 100%; height: 100%;
} }
.name { .name {
font-size: 13px;
margin-bottom: 2px; margin-bottom: 2px;
color: $font-dark; color: $font-dark;
width: calc(100% - 40px); width: calc(100% - 40px);
@include ellipsis(1); @include ellipsis(1);
b { b {
font-size: 16px;
font-weight: 600; font-weight: 600;
} }
.grade {
font-size: 0.9em;
}
} }
} }
.dept { .dept {
font-size: 12px; font-size: 0.9em;
color: $font-mid; color: $font-mid;
@include ellipsis(1); @include ellipsis(1);
} }

3
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
View File

@ -60,8 +60,7 @@
class="num bg-accent-light" class="num bg-accent-light"
*ngIf="roomInfo.roomType === RoomType.Multi" *ngIf="roomInfo.roomType === RoomType.Multi"
> >
{{ roomInfo.joinUserCount }} {{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
{{ 'common.units.persons' | translate }}
</div> </div>
<div *ngIf="!checkable && !roomInfo.receiveAlarm"> <div *ngIf="!checkable && !roomInfo.receiveAlarm">
<mat-icon>notifications_off</mat-icon> <mat-icon>notifications_off</mat-icon>

37
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
View File

@ -24,23 +24,6 @@ $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;
width: 18px;
height: 18px;
line-height: 18px;
}
}
.profile { .profile {
white-space: normal; white-space: normal;
text-align: left; text-align: left;
@ -84,15 +67,7 @@ $thumbnail-msize: 40px;
line-height: 20px; 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 { .item-default {
display: flex; display: flex;
width: 100%; width: 100%;
@ -113,10 +88,9 @@ $thumbnail-msize: 40px;
display: inline-flex; display: inline-flex;
color: $font-dark; color: $font-dark;
width: 100%; width: 100%;
margin-bottom: 2px;
align-items: center; align-items: center;
.name { .name {
font-size: 16px; font-size: 1.1em;
@include ellipsis(1); @include ellipsis(1);
font-weight: 600; font-weight: 600;
} }
@ -126,17 +100,17 @@ $thumbnail-msize: 40px;
fill: currentColor; fill: currentColor;
height: 12px; height: 12px;
width: 12px; width: 12px;
font-size: 16px; font-size: 1.1em;
color: #666666; color: #666666;
margin-left: 4px; margin-left: 4px;
line-height: unset; line-height: unset;
} }
.num { .num {
font-size: 12px; font-size: 0.9em;
flex: none; flex: none;
margin-left: 6px; margin-left: 6px;
border-radius: 3px; border-radius: 3px;
padding: 1px 6px; padding: 0 4px;
color: #ffffff; color: #ffffff;
} }
} }
@ -167,7 +141,6 @@ $thumbnail-msize: 40px;
} }
.list-item { .list-item {
@extend %list-item;
&:hover { &:hover {
background-color: $bg-list-hover; background-color: $bg-list-hover;
} }

36
projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
View File

@ -14,6 +14,19 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-wrap: break-word; word-wrap: break-word;
} }
$listH-row2: 64px;
$line-basic: 1px solid #dddddd;
%list-item {
position: relative;
display: flex;
align-items: center;
font-size: 14px;
width: 100%;
height: $listH-row2;
border-bottom: $line-basic;
padding: 0 20px;
}
.mat-card-header .mat-card-title { .mat-card-header .mat-card-title {
margin: 0 -16px; margin: 0 -16px;
padding-bottom: 10px; padding-bottom: 10px;
@ -27,6 +40,7 @@
} }
.list-item { .list-item {
@extend %list-item;
.thumbnail { .thumbnail {
&-mask { &-mask {
width: 40px; width: 40px;
@ -34,6 +48,7 @@
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
margin-right: 16px; margin-right: 16px;
position: relative;
img { img {
width: 40px; width: 40px;
height: auto; height: auto;
@ -41,4 +56,25 @@
} }
} }
} }
span[class*='badge'] {
position: absolute;
background-color: #ffffff;
width: 20px;
height: 20px;
border-radius: 50%;
bottom: 0px;
left: 30px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
.mat-icon {
font-size: 1em;
width: 18px;
height: 18px;
line-height: 18px;
min-width: 18px;
min-height: 18px;
}
}
} }

1
projects/ucap-webmessenger-ui/src/assets/scss/partials/_presence.scss
View File

@ -7,6 +7,7 @@
text-indent: -10000000px; text-indent: -10000000px;
margin-right: 4px; margin-right: 4px;
border-radius: 50%; border-radius: 50%;
transform: translateY(12px);
} }
.presence { .presence {
@extend %presence; @extend %presence;