+
+
@@ -51,13 +51,13 @@
{{ roomInfo.roomName }}
- {{ _roomUserInfos | ucapTranslate: 'name':',' }}
+ {{ getRoomNameByRoomUser(_roomUserInfos) }}
{{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
@@ -66,7 +66,7 @@
notifications_off
-
+
{{ finalEventMessage }}
@@ -87,13 +87,12 @@
0"
[matBadgeHidden]="roomInfo.noReadCnt === 0"
[matBadge]="roomInfo.noReadCnt"
matBadgeOverlap="true"
matBadgeColor="accent"
matBadgePosition="below after"
- >
-
+ >
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
index e2c32a28..050af097 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@@ -78,20 +78,19 @@ $thumbnail-msize: 40px;
.info {
position: relative;
display: flex;
+ flex: 0 0 auto;
margin: 0;
padding: 0;
- .detail {
+ .room-info {
flex-direction: column;
width: calc(100% - 80px);
- .room-name {
+ .detail {
display: inline-flex;
color: $font-dark;
width: 100%;
align-items: center;
.name {
- font-size: 1.1em;
- @include ellipsis(1);
font-weight: 600;
}
.mat-icon {
@@ -105,8 +104,7 @@ $thumbnail-msize: 40px;
margin-left: 4px;
line-height: unset;
}
- .num {
- font-size: 0.9em;
+ .member {
flex: none;
margin-left: 6px;
border-radius: 3px;
@@ -114,10 +112,8 @@ $thumbnail-msize: 40px;
color: #ffffff;
}
}
- .room-msg {
- font-size: 12px;
+ .final-message {
color: $font-mid;
- @include ellipsis(1);
}
}
.date {
@@ -127,7 +123,8 @@ $thumbnail-msize: 40px;
text-align: right;
margin-left: 10px;
color: $font-mid;
- @include ellipsis(1);
+ align-items: flex-start;
+ margin-top: -2px;
}
}
@@ -145,21 +142,3 @@ $thumbnail-msize: 40px;
background-color: $bg-list-hover;
}
}
-
-.noti {
- position: absolute;
- right: 22px;
- bottom: 22px;
- max-width: 60px;
- padding: 0 6px;
- font-size: 11px;
- color: #ffffff;
- @include ellipsis(1);
- border-radius: 50%;
-}
-
-.notiBadge {
- position: absolute !important;
- right: 22px;
- bottom: 22px;
-}
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
index ed2afc16..b14ec23f 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
@@ -4,7 +4,8 @@ import {
Input,
Output,
EventEmitter,
- ViewChildren
+ ViewChildren,
+ ChangeDetectorRef
} from '@angular/core';
import {
RoomInfo,
@@ -15,8 +16,9 @@ import {
import { NGXLogger } from 'ngx-logger';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import { FormsModule } from '@angular/forms';
-import { MatCheckbox } from '@angular/material';
+import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe';
+import { TranslateService as uiTranslateService } from '@ucap-webmessenger/ui';
+import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'ucap-room-list-item',
@@ -50,7 +52,12 @@ export class ListItemComponent implements OnInit {
finalEventMessage: string;
RoomType = RoomType;
- constructor(private logger: NGXLogger) {}
+ constructor(
+ private logger: NGXLogger,
+ private uiTranslateService: uiTranslateService,
+ private translateService: TranslateService,
+ private changeDetectorRef: ChangeDetectorRef
+ ) {}
ngOnInit() {
if (this.roomInfo.isTimeRoom) {
@@ -96,6 +103,18 @@ export class ListItemComponent implements OnInit {
.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
}
+ getRoomNameByRoomUser(roomUserInfos: (RoomUserInfo | UserInfoShort)[]) {
+ let roomName = new TranslatePipe(
+ this.uiTranslateService,
+ this.changeDetectorRef
+ ).transform(roomUserInfos, 'name', ',');
+
+ if (!roomName || roomName.trim().length === 0) {
+ roomName = this.translateService.instant('chat.noRoomUser');
+ }
+ return roomName;
+ }
+
// getChecked(value: boolean, roomInfo: RoomInfo) {
// if (value && !this.multiCheckable) {
// if (this.selected === roomInfo.roomSeq) {
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
index 67e1bfa4..35905a7a 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
@@ -6,6 +6,7 @@
// Partials
@import 'partials/breakpoints';
+@import 'partials/main-frame';
@import 'partials/forms';
@import 'partials/general';
@import 'partials/helpers';
@@ -14,6 +15,7 @@
@import 'partials/scrollbars';
@import 'partials/paginator';
@import 'partials/presence';
+@import 'partials/search-frame';
@import 'partials/list-item';
@import 'partials/dialogs';
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
index 01e6a649..204c4065 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
@@ -1,32 +1,40 @@
@charset 'utf-8';
-.ellipsis {
+@mixin ellipsis($row) {
overflow: hidden;
text-overflow: ellipsis;
- display: block;
- white-space: nowrap;
- word-wrap: normal;
-}
-.ellipsis2 {
- overflow: hidden;
- text-overflow: ellipsis;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- word-wrap: break-word;
+ @if $row == 1 {
+ 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;
+ }
}
-$listH-row2: 64px;
+$listH-row2: 60px;
$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;
}
+
+//expansion-panel 높이
+.group-tree {
+ .tree-node-frame {
+ height: $listH-row2;
+ .group-name {
+ font-size: 0.96em;
+ }
+ }
+}
.mat-card-header .mat-card-title {
margin: 0 -16px;
padding-bottom: 10px;
@@ -56,7 +64,12 @@ $line-basic: 1px solid #dddddd;
}
}
}
- span[class*='badge'] {
+ &.checkbox {
+ .mat-checkbox {
+ margin-left: auto;
+ }
+ }
+ span[class*='marker'] {
position: absolute;
background-color: #ffffff;
width: 20px;
@@ -77,4 +90,37 @@ $line-basic: 1px solid #dddddd;
min-height: 18px;
}
}
+ .noti-sum.mat-badge {
+ position: absolute;
+ right: 30px;
+ bottom: 20px;
+ font-size: 0.9em;
+ }
+}
+
+//list-item 폰트 사이즈
+.list-item {
+ font-size: 1em;
+ .name {
+ font-weight: 600;
+ @include ellipsis(1);
+ }
+ .grade {
+ font-size: 0.8em;
+ margin-left: 4px;
+ color: #777777;
+ }
+ .work-status,
+ .member {
+ font-size: 0.8em;
+ }
+ .final-message,
+ .dept {
+ font-size: 0.86em;
+ @include ellipsis(1);
+ }
+ .date {
+ font-size: 0.7em;
+ @include ellipsis(1);
+ }
}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss
new file mode 100644
index 00000000..9b0de731
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss
@@ -0,0 +1,50 @@
+$frame-border: 3px;
+$frame-outside: 50px;
+$current-head: 50px;
+$search-frame: 50px;
+
+@mixin div-box-shadow {
+ width: calc(100% - #{$frame-outside});
+}
+
+.mat-toolbar {
+ &.mat-toolbar-single-row {
+ height: $frame-outside;
+ }
+}
+
+.main-container {
+ padding-top: $frame-outside;
+ border-width: $frame-border;
+ border-style: solid;
+ .mat-tab-group {
+ &.global-menu {
+ width: $frame-outside;
+ }
+ }
+ .left-side-tabs-body {
+ @include div-box-shadow;
+ }
+}
+
+.current-head {
+ height: $frame-outside;
+}
+
+// 글로벌 메뉴 별 리스트 높이 값
+.left-side-tabs-contents {
+ .left-group-side {
+ .search-result {
+ height: calc(100% - #{$current-head + $search-frame});
+ }
+ }
+ .app-layout-chat-left-sidenav-chat-list {
+ height: calc(100% - #{$current-head + $search-frame});
+ }
+ .oraganization-tab {
+ height: calc(100% - #{$current-head + $search-frame});
+ }
+ .message-section {
+ height: calc(100% - #{$current-head + $search-frame});
+ }
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss
new file mode 100644
index 00000000..f7bc43d4
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss
@@ -0,0 +1,112 @@
+$search-font-size: 14px;
+
+@mixin list-search {
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ height: $search-frame;
+ align-items: center;
+ // padding: 0 10px 0 20px;
+ font-size: $search-font-size;
+ background-color: #f9f9f9;
+ border-bottom: 1px solid #dddddd;
+}
+
+.list-search-frame {
+ @include list-search;
+ .searchbox {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ input {
+ display: inline-flex;
+ width: 100%;
+ font-size: 1em;
+ padding-left: 0;
+ }
+ .btn-search {
+ color: #777777;
+ font-size: 12px;
+ display: inline-flex;
+ margin-left: auto;
+ flex: none;
+ }
+ }
+}
+
+/*.list-search-frame {
+ .selectbox {
+ display: inline-flex;
+ width: 40%;
+ padding: 0 20px;
+ }
+ & + .searchbox {
+ width: 60%;
+ padding-right: 20px;
+ }
+}
+*/
+.list-search-frame {
+ .searchbox {
+ height: 100%;
+ .mat-form-field {
+ width: 100%;
+ height: $search-frame;
+ .mat-form-field-wrapper {
+ padding: 0;
+ padding-bottom: 0 !important;
+ height: 100%;
+ .mat-form-field-flex {
+ height: 100%;
+ align-items: center;
+ flex: 1 1 auto;
+ padding: 0 20px;
+ .mat-form-field-infix {
+ font-size: 14px;
+ border: none;
+ }
+ .mat-form-field-suffix {
+ margin-left: auto;
+ .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;
+ }
+ }
+ }
+}
+
+.selectbox {
+ display: inline-flex;
+ width: 46%;
+ padding-left: 20px;
+
+ & + .searchbox {
+ width: 54%;
+ display: inline-flex;
+ input {
+ display: inline-flex;
+ width: 100%;
+ font-size: 1em;
+ padding-left: 0;
+ }
+ .btn-search {
+ color: #777777;
+ font-size: 12px;
+ display: inline-flex;
+ margin-left: auto;
+ flex: none;
+ }
+ }
+}