From f19adf082a28951c12d98f4747c8d0c1340dfbfd Mon Sep 17 00:00:00 2001 From: khk Date: Mon, 21 Oct 2019 13:20:14 +0900 Subject: [PATCH] =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/app.theme.scss | 29 +++- .../components/left-side.component.html | 7 +- .../components/left-side.component.scss | 41 +++++- .../left-sidenav/group.component.html | 19 ++- .../left-sidenav/group.component.scss | 21 +++ .../left-sidenav/organization.component.html | 14 +- .../left-sidenav/organization.component.scss | 24 +++- .../components/messages.component.html | 10 +- .../components/messages.component.scss | 34 ++++- .../components/right-side.component.html | 8 +- .../components/right-side.component.scss | 16 +++ .../components/main.page.component.scss | 13 +- .../components/template.page.component.html | 39 ++++-- .../src/assets/images/file/icon_talk_doc.png | Bin 0 -> 21753 bytes .../assets/images/file/icon_talk_doc_d.png | Bin 0 -> 21671 bytes .../src/assets/images/file/icon_talk_exe.png | Bin 0 -> 22012 bytes .../assets/images/file/icon_talk_exe_d.png | Bin 0 -> 21798 bytes .../src/assets/images/file/icon_talk_file.png | Bin 0 -> 21357 bytes .../assets/images/file/icon_talk_file_d.png | Bin 0 -> 21807 bytes .../src/assets/images/file/icon_talk_hwp.png | Bin 0 -> 21762 bytes .../assets/images/file/icon_talk_hwp_d.png | Bin 0 -> 21687 bytes .../src/assets/images/file/icon_talk_img.png | Bin 0 -> 21262 bytes .../assets/images/file/icon_talk_img_d.png | Bin 0 -> 21194 bytes .../src/assets/images/file/icon_talk_ppt.png | Bin 0 -> 21586 bytes .../assets/images/file/icon_talk_ppt_d.png | Bin 0 -> 21524 bytes .../assets/images/file/icon_talk_video.png | Bin 0 -> 1921 bytes .../assets/images/file/icon_talk_video_d.png | Bin 0 -> 20853 bytes .../src/assets/images/file/icon_talk_xls.png | Bin 0 -> 21681 bytes .../assets/images/file/icon_talk_xls_d.png | Bin 0 -> 21634 bytes .../src/assets/images/file/icon_talk_zip.png | Bin 0 -> 21425 bytes .../assets/images/file/icon_talk_zip_d.png | Bin 0 -> 21435 bytes .../src/assets/scss/global/_common.scss | 18 ++- .../src/assets/scss/global/_default.scss | 2 +- .../src/lib/components/form.component.html | 16 ++- .../src/lib/components/form.component.scss | 38 ++++++ .../message-box/attach-file.component.html | 30 +++-- .../message-box/attach-file.component.scss | 103 ++++++++++++++ .../message-box/date-splitter.component.html | 8 +- .../message-box/date-splitter.component.scss | 19 +++ .../message-box/image.component.html | 4 +- .../message-box/image.component.scss | 3 + .../message-box/mass.component.html | 8 +- .../message-box/mass.component.scss | 13 ++ .../message-box/schedule.component.html | 18 +++ .../message-box/schedule.component.scss | 43 ++++++ .../message-box/sticker.component.html | 2 + .../message-box/sticker.component.scss | 6 + .../message-box/text.component.html | 6 +- .../message-box/text.component.scss | 4 + .../message-box/translation.component.html | 20 +++ .../message-box/translation.component.scss | 46 +++++++ .../message-box/video.component.html | 35 +++-- .../message-box/video.component.scss | 62 +++++++++ .../lib/components/messages.component.html | 119 ++++++++-------- .../lib/components/messages.component.scss | 127 +++++++++++++++++- .../components/expansion-panel.component.html | 1 + .../components/expansion-panel.component.scss | 37 +++++ .../components/tenant-search.component.html | 21 ++- .../components/tenant-search.component.scss | 37 +++++ .../src/lib/components/tree.component.html | 7 +- .../src/lib/components/tree.component.scss | 49 +++++++ .../components/user-list-item.component.html | 4 +- .../components/user-list-item.component.scss | 59 ++++---- .../lib/components/list-item.component.html | 25 +++- .../lib/components/list-item.component.scss | 88 +++++++++++- 65 files changed, 1155 insertions(+), 198 deletions(-) create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_doc.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_doc_d.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_exe.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_exe_d.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_file.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_file_d.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_hwp.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_hwp_d.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_img.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_img_d.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_ppt.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_ppt_d.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_video.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_video_d.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_xls.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_xls_d.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_zip.png create mode 100644 projects/ucap-webmessenger-app/src/assets/images/file/icon_talk_zip_d.png diff --git a/projects/ucap-webmessenger-app/src/app/app.theme.scss b/projects/ucap-webmessenger-app/src/app/app.theme.scss index 10a5496a..0301d4f8 100644 --- a/projects/ucap-webmessenger-app/src/app/app.theme.scss +++ b/projects/ucap-webmessenger-app/src/app/app.theme.scss @@ -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); +} diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html index 79460a4a..0b828c20 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html @@ -1,11 +1,12 @@
-
+ + + group diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss index 11d2743e..cb331639 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html index 1f727051..8a346140 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html @@ -1,17 +1,22 @@
+
+

그룹

+
+ + +
+
- + -
+
-
-
+
+
(선택된부서명)
-
+
-
- (하단버튼영역) -
+
+
+ (하단버튼영역)
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 4928b943..1558c8ce 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 @@ -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; +} + diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index 0329993b..1cf4897c 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -2,8 +2,8 @@
-
-
+
+
- -
+
+ 대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명대화방명 +
+
\ No newline at end of file diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss index e69de29b..82c2b835 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.scss @@ -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%; + } +} diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss index 55e75745..4f7e98ab 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss +++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss @@ -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; } } diff --git a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html index e96fec39..49762f34 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html +++ b/projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html @@ -1,17 +1,34 @@
-

User-list-item

- + - + - +

Organization

@@ -21,14 +38,20 @@ Tenant Search
- +

Chat

- +
+
+
    +
  • + {{ fileInfo.FileName }} +
    • +
  • + {{ fileInfo.AttSize }} +
    • +
  • + {{ fileInfo.FileExt }} +
    • +
+
+
  • @@ -18,4 +22,4 @@
- +
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 e69de29b..c58c3d75 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 @@ -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; + } + } + } +} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.html index 3ed87fe9..78be71cf 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.html @@ -1,4 +1,6 @@ -

+

+ - {{ dateInfo }} -

+ {{ dateInfo }}2019.10.3 + +
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss index e69de29b..c28fd375 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss @@ -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; + } +} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html index 84e0b42a..52d3f8db 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html @@ -1 +1,3 @@ - +
+ +
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss index e69de29b..98793e11 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss @@ -0,0 +1,3 @@ +.bubble-main{ + padding:10px; +} \ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html index 2608e1df..cc60a60c 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html @@ -1,12 +1,12 @@ -

+

{{ content }} {{ message.sendDate | date: 'short' }} +
{{detailButteonShow}} - +
- -

+
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss index e69de29b..819f34a7 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss @@ -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; + } +} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html index e69de29b..6b7198a5 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html @@ -0,0 +1,18 @@ +
+
이벤트제목
+
    +
  • + 이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀이벤트 타일틀 +
    • +
  • + 날짜 2019.09.30 +
    • +
  • + 시간오후 10시 +
    • +
+ +
+ +
+
\ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss index e69de29b..926d6e82 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.scss @@ -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; + } + } +} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html index d15340e0..b54fe95d 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html @@ -1,3 +1,4 @@ +
  • @@ -6,3 +7,4 @@ {{ contentJson.chat }}
+
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.scss index e69de29b..bf8e28e1 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.scss @@ -0,0 +1,6 @@ +.bubble-main{ + padding:14px; + li:nth-child(2){ + margin-top:10px; + } +} \ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html index a3063aa5..673d2493 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html @@ -1,5 +1,7 @@ -

+

{{ message.sentMessage }} -

+
+ + diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss index e69de29b..0980d504 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.scss @@ -0,0 +1,4 @@ +.bubble-main { + padding: 14px; + text-align:left; +} \ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html index e69de29b..adc408b9 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html @@ -0,0 +1,20 @@ +
+
+ {{ message.sentMessage }} +
+
+ Kor + 녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 + 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트 +
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
\ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss index e69de29b..039ae60d 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss @@ -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; + } + } + } +} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html index ea35f990..911ce46e 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html @@ -1,11 +1,24 @@ -
    -
  • - {{ fileInfo.FileName }} -
    • -
  • - {{ fileInfo.AttSize }} -
    • -
  • - {{ fileInfo.FileExt }} -
    • -
+
+
+
    +
  • + {{ fileInfo.FileName }} +
    • +
  • + {{ fileInfo.AttSize }} +
    • +
  • + {{ fileInfo.FileExt }} +
    • +
+
+ +
    +
  • + +
    • +
  • + +
    • +
+ diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss index e69de29b..c3f104fb 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html index 1d22fb6b..44021797 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html @@ -1,5 +1,8 @@
+ + +
- -
-
-
    -
  • +
    diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss index a1ef3408..0505074a 100644 --- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss +++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss @@ -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; +} diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html index 5a64567b..f70125d8 100644 --- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html +++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html @@ -13,14 +13,15 @@
  • -
    +
    {{ node.title }} @@ -28,7 +29,7 @@
      -
      +
    diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss index a1ef3408..93b42a1e 100644 --- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss +++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss @@ -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); + } +} diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html index 4cb90c4b..3bd0e08b 100644 --- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html +++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html @@ -39,12 +39,14 @@ {{ userInfo.deptName }}
    -
    {{ userInfo.intro }}
    + --> -
    {{ getRoomName(roomInfo) }}
    -
    {{ roomInfo.finalEventDate }}
    -
    {{ finalEventMessage }}
    -
    noReadCnt : {{ roomInfo.noReadCnt }}
    +
    +
    +
    + +
    +
    +
    +
    +
    {{ getRoomName(roomInfo) }}
    +
    + noReadCnt : {{ roomInfo.noReadCnt }} +
    +
    +
    {{ finalEventMessage }}
    +
    + +
    {{ roomInfo.finalEventDate }}
    +
    +
    + 1
    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 358a7c6a..b81e9f22 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 @@ -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); +}