From f00028f2b0c4f365212ec7bf0cbe69bbe4b083c9 Mon Sep 17 00:00:00 2001 From: khk Date: Thu, 23 Jan 2020 15:56:24 +0900 Subject: [PATCH] =?UTF-8?q?=ED=99=94=EB=A9=B4=EC=82=AC=EC=9D=B4=EC=A6=88?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=AF=B8?= =?UTF-8?q?=EB=94=94=EC=96=B4=EC=BF=BC=EB=A6=AC=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EC=A7=84=ED=96=89=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../right-drawer/album-box.component.scss | 10 +- .../right-drawer/file-box.component.scss | 17 +- .../src/assets/scss/global/_default.scss | 9 +- .../src/lib/components/form.component.html | 38 +++- .../src/lib/components/form.component.scss | 38 ++-- .../lib/components/message-box.component.html | 208 +++++++++--------- .../lib/components/message-box.component.scss | 167 +++++++------- .../message-box/attach-file.component.scss | 12 +- .../message-box/information.component.scss | 5 +- .../message-box/recall.component.scss | 18 +- .../lib/components/messages.component.scss | 126 ++++------- .../src/assets/scss/file-icon/_icons.scss | 2 +- 12 files changed, 356 insertions(+), 294 deletions(-) diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss index f6094483..fe8e1949 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss @@ -1,3 +1,5 @@ +$tablet-s-width: 768px; + @mixin ellipsis($row) { overflow: hidden; text-overflow: ellipsis; @@ -31,6 +33,9 @@ border: 1px solid #cccccc; border-radius: 4px; font-size: 0.9em; + @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) { + display: none; + } .select-file { color: #212121; border-bottom: 1px dotted #dddddd; @@ -63,6 +68,9 @@ display: flex; padding: 0 10px; height: calc(100% - 450px); + @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) { + height: calc(100% - 160px); + } overflow-y: auto; flex-wrap: wrap; @@ -87,7 +95,7 @@ dd { .btn-download { margin-left: auto; - height:40px; + height: 40px; } } } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss index 766b9f07..1e275d6d 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss @@ -1,4 +1,5 @@ $listH-row2: 60px; +$tablet-s-width: 768px; @mixin ellipsis($row) { overflow: hidden; @@ -32,6 +33,9 @@ $listH-row2: 60px; margin: 10px; border: 1px solid #cccccc; border-radius: 4px; + @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) { + display: none; + } .select-filed { height: calc(100% - 50px); overflow-y: auto; @@ -138,6 +142,9 @@ $listH-row2: 60px; .table-box { height: calc(100% - 440px); overflow-y: auto; + @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) { + height: calc(100% - 146px); + } th { font-size: 1em; color: #333333; @@ -157,10 +164,11 @@ $listH-row2: 60px; cursor: pointer; } -.footer-fix { +::ng-deep .footer-fix { position: absolute; bottom: 0; - height: 160px; + min-height: 40px; + width: 100%; flex-direction: column; box-sizing: border-box; display: flex; @@ -176,6 +184,11 @@ $listH-row2: 60px; padding: 0 12px; } } + .mat-paginator-page-size { + @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) { + display: none; + } + } } ::ng-deep .mat-form-field-appearance-legacy { 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 b24375c3..9005f3f6 100644 --- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss +++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss @@ -1,5 +1,6 @@ @charset 'utf-8'; - +$win-min-w: 700px; +$win-min-h: 600px; html { height: 100%; overflow: hidden; @@ -8,8 +9,10 @@ body { position: relative; width: 100%; height: 100%; - min-width: 1160px; - min-height: 800px; + /*min-width: 1160px; + min-height: 800px;*/ + min-width: $win-min-w; + min-height: $win-min-h; overflow: auto; padding: 0; margin: 0; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html index a5f1fd87..46601924 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html @@ -36,7 +36,7 @@ (click)="onClickTranslation()" matTooltip="{{ 'chat.btnTranslate' | translate }}" > - + + + + + + + + + diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss index dcde2020..8eb2d778 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss @@ -1,36 +1,41 @@ @charset 'utf-8'; - +$tablet-l-width: 1024px; .container { display: flex; flex-direction: column; width: 100%; height: 100%; flex: 1; - padding: 10px 30px 20px; + padding: 0 2vw 2vh; .add-option { display: inline-flex; margin-right: 20px; justify-items: center; width: 80px; justify-content: space-between; - i { - font-size: 20px; - color: #666; - width: 30px; - height: 30px; - text-align: center; - line-height: 30px; - &:hover { - color: #333333; - background-color: #efefef; - border-radius: 50%; - } + @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) { + margin-right: 10px; } button { width: 20px; height: 20px; + line-height: normal; + + .mat-icon { + font-size: 20px; + color: rgb(0, 0, 0, 0.87); + width: 20px; + height: 20px; + text-align: center; + &:hover { + color: rgb(0, 0, 0, 0.6); + background-color: #efefef; + border-radius: 50%; + } + } + svg { - fill: #666666; + fill: rgb(0, 0, 0, 0.87); } } } @@ -45,6 +50,9 @@ textarea[name='message'] { } ::ng-deep .send-message-button { margin-left: 20px; + @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) { + margin-left: 10px; + } .mat-button-wrapper { display: flex; justify-content: center; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html index e30d689f..68b7a62a 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.html @@ -82,113 +82,115 @@ > --> -
-
- {{ senderName }} +
+
+
+ {{ senderName }} +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + {{ message.type }} / {{ message.sentMessage }} +
+ +
-
- - - - - - - - - - - - - - - - - - - - - - - -
- - {{ message.type }} / {{ message.sentMessage }} -
- +
+
    +
  • {{ unreadCount }}
    • +
  • + {{ message.sendDate | ucapDate: 'a hh:mm' }} +
    • +
- -
-
    -
  • {{ unreadCount }}
    • -
  • - {{ message.sendDate | ucapDate: 'a hh:mm' }} -
    • -
-
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss index 26d1a8bf..782c837c 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss @@ -6,12 +6,8 @@ $otherBox-line: #cccccc; $otherBox-bg: #ffffff; $meBox-line: #cccccc; $meBox-bg: #ffffff; - -.chat-messages { - padding: 30px 40px; - display: flex; - flex-direction: column; -} +$tablet-l-width: 1024px; +$mob-l-width: 640px; .information-msg { width: 100%; } @@ -34,11 +30,11 @@ $meBox-bg: #ffffff; flex: 0 0 auto; &.thumbnail-mask { border-radius: 50%; - width: 50px; - height: 50px; + width: 40px; + height: 40px; overflow: hidden; img { - width: 50px; + width: 40px; height: auto; } } @@ -56,88 +52,105 @@ $meBox-bg: #ffffff; } } } - - .message-main { - margin-left: 20px; - margin-right: 10px; + .message-main-container { + display: Flex; + flex-flow: row; + margin-left: 10px; max-width: 80%; - .chat-name { - font-size: 12px; - color: #333333; - margin-bottom: 6px; + @media screen and (max-width: #{$mob-l-width}), + (max-height: 600px) { + flex-flow: column; } - .bubble { - border-radius: 0 10px 10px 10px; - font-weight: 900; - position: relative; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); - word-break: break-all; - word-wrap: break-word; + .message-main { + margin-right: 6px; + max-width: calc(100% - 60px); + @media screen and (max-width: #{$mob-l-width}), + (max-height: 600px) { + flex-flow: column; + max-width: 100%; + } + .chat-name { + font-size: 12px; + color: #333333; + margin-bottom: 6px; + } + .bubble { + border-radius: 0 10px 10px 10px; + position: relative; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + word-break: break-all; + word-wrap: break-word; + } } - } - .secondary-text { - align-self: flex-end; - font-size: 11px; - color: #666666; - word-wrap: break-word; - white-space: nowrap; - } - &.me { .secondary-text { - text-align: end; + align-self: flex-end; + font-size: 0.84em; + color: #666666; + word-wrap: break-word; + white-space: nowrap; + @media screen and (max-width: #{$mob-l-width}), (max-height: 600px) { + flex-flow: row; + align-self: flex-start; + ul { + display: flex; + flex-flow: row-reverse; + justify-items: flex-end; + margin-top: 4px; + li { + display: inline-flex; + &.unread { + padding: 0px 6px; + margin-left: 10px; + border-radius: 30px; + background-color: #666666; + color: #ffffff; + } + } + } + } } - } - &.highlight { - .bubble { - color: red; + &.me { + .message-main-container { + display: Flex; + flex-flow: row; + margin-left: 0px; + margin-right: 10px; + @media screen and (max-width: #{$tablet-l-width}), + (max-height: 800px) { + flex-flow: column; + } + } + } + &.highlight { + .bubble { + color: red; + } } } } - -/*.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 { - border-radius: 10px 10px 0 10px; + .message-main-container { + .chat-name { + display: none; } - /* & .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; + .message-main { + text-align: right; + margin-left: 6px; + margin-right: 0; + .bubble { + border-radius: 10px 10px 0 10px; + } + } + .secondary-text { + text-align: end; + @media screen and (max-width: #{$mob-l-width}), (max-height: 600px) { + flex-flow: column; + align-self: flex-end; + } } - & .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; - }*/ } } .bubble-main { 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 937da8b2..83125ac5 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 @@ -1,3 +1,4 @@ +$tablet-s-width: 768px; .bubble-main { display: flex; flex-direction: row; @@ -62,7 +63,7 @@ float: left; line-height: 1.6em; .file-name { - font-size: 14px; + font-size: 1em; font-weight: bold; display: inline-flex; } @@ -84,6 +85,7 @@ display: flex; width: 100%; text-align: center; + font-size: 1em; ul { width: 100%; li { @@ -92,15 +94,21 @@ display: inline-block; text-align: center; align-items: center; - font-size: 13px; border-right: 1px solid #dddddd; + @media screen and (max-width: #{$tablet-s-width}) { + width: 30%; + } &:last-child { border-right: none; + @media screen and (max-width: #{$tablet-s-width}) { + width: 70%; + } } .mat-button { width: 100%; display: block; height: 100%; + font-size: 1em; } } &.expired { diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss index 825201f0..ee814b3b 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss @@ -4,11 +4,12 @@ flex-flow: row; width: 100%; background-color: rgba(0, 0, 0, 0.4); - padding: 4px 20px; + padding: 6px 20px; color: #ffffff; border-radius: 100px; justify-content: center; justify-items: center; margin: 10px 0 20px; - font-size: 0.84em; + font-size: 0.9em; + line-height:1.2em } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss index a763b322..d6fafd1c 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.scss @@ -1,9 +1,9 @@ .bubble-main { - padding: 14px; - text-align:left; - display:flex; + padding: 10px; + text-align: left; + display: flex; align-items: center; - .icon-recall{ + .icon-recall { width: 30px; height: 30px; display: inline-flex; @@ -12,14 +12,14 @@ align-items: center; justify-content: center; margin-right: 6px; - i{ - color:#ffffff; - font-size:20px; + i { + color: #ffffff; + font-size: 20px; padding-left: 2px; padding-top: 2px; } } - .recall-msg{ - color:#999999; + .recall-msg { + color: #999999; } } 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 cdbba32e..1178e2a9 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 @@ -2,11 +2,16 @@ $otherBox-line: #cccccc; $otherBox-bg: #ffffff; $meBox-line: #cccccc; $meBox-bg: #ffffff; +$tablet-l-width: 1024px; .chat-messages { - padding: 30px 40px; + padding: 2vh 2vw; display: flex; flex-direction: column; + width: 100%; + @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) { + font-size: 13px; + } } .information-msg { width: 100%; @@ -38,35 +43,23 @@ $meBox-bg: #ffffff; } } } - &.me { - .chat-row { - flex-direction: row-reverse; - margin-left: 0; - margin-right: 0; - .profile-info { - flex-direction: row-reverse; - display: flex; - justify-content: flex-end; + .message-main-container { + .message-main { + margin-left: 20px; + margin-right: 10px; + .chat-name { + font-size: 12px; + color: #333333; + margin-bottom: 6px; + } + .bubble { + border-radius: 0 10px 10px 10px; + font-weight: 900; + position: relative; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + word-break: break-all; + word-wrap: break-word; } - } - } - - .message-main { - margin-left: 20px; - margin-right: 10px; - max-width: 80%; - .chat-name { - font-size: 12px; - color: #333333; - margin-bottom: 6px; - } - .bubble { - border-radius: 0 10px 10px 10px; - font-weight: 900; - position: relative; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); - word-break: break-all; - word-wrap: break-word; } } .secondary-text { @@ -76,11 +69,6 @@ $meBox-bg: #ffffff; word-wrap: break-word; white-space: nowrap; } - &.me { - .secondary-text { - text-align: end; - } - } &.searched { .bubble { color: red; @@ -88,52 +76,35 @@ $meBox-bg: #ffffff; } } -/*.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 { - border-radius: 10px 10px 0 10px; +.message-row { + &.me { + .chat-row { + flex-direction: row-reverse; + margin-left: 0; + margin-right: 0; + .profile-img { + display: none; + } + .message-main-container { + .chat-name { + display: none; + } + .message-main { + text-align: right; + margin-left: 10px; + margin-right: 20px; + .bubble { + border-radius: 10px 10px 0 10px; + } + } + .secondary-text { + text-align: end; + } + } } - /* & .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; - }*/ } } + .bubble-main { word-wrap: break-word; white-space: pre-wrap; @@ -142,7 +113,6 @@ $meBox-bg: #ffffff; ::ng-deep .view-previous { display: flex; flex-flow: column; - //background-color: rgba(0, 0, 0, 0.4); color: #ffffff; justify-content: center; justify-items: center; diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_icons.scss b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_icons.scss index 524b74a5..9c1ae1c0 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_icons.scss +++ b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_icons.scss @@ -1,5 +1,5 @@ // CONFIGURATION -$icon-container-size: 70px; // the size of the icons +$icon-container-size: 60px; // the size of the icons $icon-edge-color: ''; // the default edge color of the icon $font-size: 38; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg $font-family: 'Myriad, Tahoma-Bold, sans-serif'; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg