+
-
+
-
검색결과({{ searchUserInfos.length }}명)
+
검색결과({{ searchUserInfos.length }}명)
-
+
(CreateChatDialogComponent, {
width: '600px',
- height: '700px',
data: {
type: UserSelectDialogType.NewGroup,
title: 'New Group'
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index 9b8572d9..44ab06ee 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -10,8 +10,7 @@
>
-
-
+
-
{{ getSelectedDepartmentName() }}
@@ -25,7 +24,6 @@
-
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
index 0f24738c..dd444aaa 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
@@ -16,16 +16,17 @@
}
- .oraganization-tab {
- height: 100%;
- flex-direction: inherit;
- display: flex;
- .oraganization-tab-tree {
- height:40%;
- overflow-y: auto;
- }
+.oraganization-tab {
+ height: 100%;
+ flex-direction: inherit;
+ display: flex;
+ .oraganization-tab-tree {
+ 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;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
index 554f144a..0e64a9f6 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
@@ -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;
+/*.chat-messages {
+ position: relative;
+ padding: 16px 40px;
+
+ .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;
+ 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%;
+ font-size: 11px;
+ margin-top: 8px;
+ top: 100%;
+ left: 0;
+ white-space: nowrap;
+ }
+ }
+
+ &.contact {
+ .bubble {
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+
+ 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;
+ }
+ }
+ }
}
}
-:host {
+*/
+$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%;
- flex: 1;
+ text-align: center;
+ background-color: #dddddd;
+ padding: 10px;
+ margin: 10px 0;
+}
- .container {
+.message-row {
+ margin-bottom: 20px;
+ .date-splitter {
+ display: block;
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 {
- position: relative;
- background: transparent;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-
- .file-drop-zone-container {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(255, 255, 255, 0.95);
-
- .file-drop-zone {
- position: absolute;
-
- top: 10%;
- left: 10%;
- width: 80%;
- height: 80%;
- }
+ 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;
+ }
+ }
}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
index 4460c97b..eaa233e9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@@ -55,6 +55,7 @@
[selectedUserList]="selectedUserList"
[checkable]="true"
(checkGroup)="onCheckGroup($event)"
+ class="group-expansion"
>
-
+
-
검색결과({{ searchUserInfos.length }}명)
+
검색결과 ({{ searchUserInfos.length }}명)
-
+
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
index a3979d30..a1758367 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss
@@ -102,5 +102,14 @@
height: 100%;
}
}
+ &.expired{
+ li{
+ width:100%;
+ white-space: nowrap;
+ color:#999999;
+ align-items: center;
+ line-height:40px;
+ }
+ }
}
}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
index 4fdbc36e..0e64a9f6 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
@@ -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 {
diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
index f954f928..da6da3b0 100644
--- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
+++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html
@@ -46,10 +46,10 @@
class="groupExpansionPanel"
>
- {{ groupBuddy.group.name }}
- ({{ groupBuddy.buddyList.length }}명)
+
+ {{ groupBuddy.group.name }}
+ ({{ groupBuddy.buddyList.length }}명)
+