From 0a3abc9b0a8dd216061414da5774b47cb5792173 Mon Sep 17 00:00:00 2001 From: khk Date: Thu, 26 Dec 2019 17:34:57 +0900 Subject: [PATCH] =?UTF-8?q?=EC=97=AC=EA=B8=B0=EA=B9=8C=EC=A7=80=EC=9D=BD?= =?UTF-8?q?=EC=9D=8C&=20=EC=95=8C=EB=A6=BC=EB=A9=94=EC=8B=9C=EC=A7=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../message-detail.dialog.component.scss | 2 +- .../src/assets/scss/global/_default.scss | 3 + .../message-box/allim.component.html | 20 +-- .../message-box/allim.component.scss | 35 +++-- .../message-box/read-here.component.html | 6 +- .../message-box/read-here.component.scss | 18 +-- .../lib/components/messages.component.scss | 136 +----------------- 7 files changed, 48 insertions(+), 172 deletions(-) diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss index 4a9405a2..fc124522 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss @@ -81,7 +81,7 @@ flex-flow: row; align-items: center; font-size: 18px; - font-weight: 500; + font-weight: 600; padding: 10px 0 6px; line-height: 24px; color: #222222; diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss index 655d3875..05fd1daf 100644 --- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss +++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss @@ -236,6 +236,9 @@ $daesang-grey: ( .border-accent-color { border: 1px solid mat-color($accent); } + .stroke-accent-darkest { + stroke: mat-color($accent, 800); + } .border-warn-color { border: mat-color($warn); } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.html index deb14ffa..42969e0f 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.html @@ -1,20 +1,20 @@
-
+
{{ message.sentMessageJson.title }}
    -
  • +
  • + 발송인 + {{ message.sentMessageJson.sendName }} +
    • +
  • + 발송시간 + {{ message.sentMessageJson.postDate | ucapDate: 'YYYY.MM.DD a hh:mm' }} +
    • +
  • {{ message.sentMessageJson.content }}
    • -
  • - 발송인{{ message.sentMessageJson.sendName }} -
    • -
  • - 발송시간{{ message.sentMessageJson.postDate | ucapDate: 'YYYY.MM.DD a hh:mm' }} -
- diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.scss index 012437db..bed77d39 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.scss @@ -3,30 +3,43 @@ text-align: left; .event-header { padding: 10px; - background-color: #efefef; - text-align: center; font-size: 14px; font-weight: 600; + margin: 6px 6px 2px; + padding: 10px 20px; + border-radius: 3px 3px 0 0; } .event-info { - padding: 10px 14px; + margin: 0 4px; 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-sender, &.event-time { - color: #666666; + padding: 4px 10px; + border-bottom: 1px dotted #dddddd; + span { + width: 80px; + padding: 2px 6px; + margin-right: 10px; + border-radius: 100px; + line-height: 20px; + display: inline-flex; + justify-content: center; + font-size: 0.96em; + margin-bottom: 2px; + } } - span { - padding: 2px 6px; - background-color: #efefef; - margin-right: 10px; + &.event-content { + padding: 10px; + color: #444444; + font-weight: normal; + margin-bottom: 10px; + font-size: 1em; } } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.html index dd9c6c4a..d6ec3490 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.html @@ -1,5 +1,5 @@ -
- +
+ 여기까지 읽었습니다. - +
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.scss index cc55babf..2d73cb38 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.scss @@ -2,17 +2,9 @@ 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: 600; - } + //background-color: rgba(0, 0, 0, 0.4); + padding: 4px 10px; + color: #ffffff; + border-radius: 100px; + justify-content: center; } 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 ed5cf557..51d70d2c 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 @@ -1,135 +1,3 @@ -/*.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; - } - } - } - } -} -*/ $otherBox-line: #cccccc; $otherBox-bg: #ffffff; $meBox-line: #cccccc; @@ -141,12 +9,12 @@ $meBox-bg: #ffffff; flex-direction: column; } .information-msg { - width: 100%; + /* width: 100%; height: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.1); padding: 10px; - margin: 10px 0; + margin: 10px 0;*/ } .message-row {