From b9e135dfabaea83dfeebdf0624a59b70659ca75b Mon Sep 17 00:00:00 2001 From: khk Date: Tue, 28 Jan 2020 15:40:18 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EB=8B=AB=EA=B8=B0?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../group/select-group.dialog.component.html | 3 +++ .../group/select-group.dialog.component.scss | 13 +++++++++++-- .../src/assets/scss/partials/_icons.scss | 8 ++++++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html index bfe1f51d..fb972630 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html @@ -1,6 +1,9 @@ {{ data.title }} +
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss index 03bbadc6..b885c9d7 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.scss @@ -1,5 +1,14 @@ -::ng-deep .mat-card-header-tex { - margin: 0; +::ng-deep .mat-card-header { + .mat-card-header-tex { + margin: 0; + } + .btn-dialog-close { + font-size: 20px; + display: flex; + margin-left: auto; + align-self: flex-start; + color: #444444; + } } .mat-form-field { width: 100%; diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss index 02f7c065..54222924 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss +++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss @@ -24,3 +24,11 @@ mat-icon { } } } + +.icon-button { + background: none; + border: none; + i { + font-family: 'material-outline-icons'; + } +} From 2da4bb69f79fd80d03ac4398d9054167b46b5c50 Mon Sep 17 00:00:00 2001 From: khk Date: Tue, 28 Jan 2020 20:50:52 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EB=8C=80=ED=99=94=EB=B0=A9=EA=B2=80?= =?UTF-8?q?=EC=83=89,=20=EC=8A=A4=ED=8B=B0=EC=BB=A4,=20=EB=B2=88=EC=97=AD?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/messages.component.scss | 1 + .../components/right-drawer.component.scss | 1 + .../right-drawer/album-box.component.scss | 3 +- .../src/lib/components/form.component.scss | 4 + .../message-box/schedule.component.html | 12 +- .../message-box/schedule.component.scss | 10 +- .../src/lib/components/search.component.html | 70 ++----- .../src/lib/components/search.component.scss | 191 +++++++++++------- .../src/assets/scss/partials/_icons.scss | 19 ++ .../sticker-selector.component.scss | 30 ++- .../translation-section.component.scss | 33 ++- 11 files changed, 225 insertions(+), 149 deletions(-) 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 e7cda71a..c871684f 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 @@ -92,6 +92,7 @@ } .room-option { margin-left: auto; + margin-right: -10px; } } .chat-search-frame { diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss index b9f3ad20..8508f68b 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss @@ -8,6 +8,7 @@ font-weight: 600; span { margin-left: auto; + margin-right: -10px; } } ::ng-deep .mat-tab-labels { 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 fe8e1949..d07e9674 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 @@ -69,7 +69,8 @@ $tablet-s-width: 768px; padding: 0 10px; height: calc(100% - 450px); @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) { - height: calc(100% - 160px); + margin-top: 10px; + height: calc(100% - 170px); } overflow-y: auto; flex-wrap: wrap; 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 8eb2d778..d6ab9e39 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 @@ -45,8 +45,12 @@ textarea[name='message'] { line-height: 1.2em; font-size: 0.9em; } +.mat-form-field-flex { + padding-top: 0; +} .mat-form-field-underline { background-color: none; + transform: scaleY(0); } ::ng-deep .send-message-button { margin-left: 20px; 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 d6e09e9b..079e7dcd 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 @@ -21,16 +21,16 @@
  • - {{ + {{ date | ucapDate: 'YYYY.MM.DD' }} + }}{{ date | ucapDate: 'YYYY.MM.DD' }}
  • - {{ + {{ date | ucapDate: 'a hh:mm' }} + }}{{ date | ucapDate: 'a hh:mm' }}
  • {{ message.sentMessageJson.title }} 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 14948b37..f176eaec 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 @@ -29,8 +29,14 @@ &.event-time { padding: 4px 10px; border-bottom: 1px dotted #dddddd; + label { + margin-right: 10px; + flex: 0 0 auto; + font-size: 0.96em; + font-weight: 600; + width: 30px; + } span { - width: 60px; padding: 1px 6px; margin-right: 6px; border-radius: 100px; @@ -39,7 +45,7 @@ justify-content: center; font-size: 0.96em; margin-bottom: 2px; - color: #777777; + color: #444444; } } &.event-content { diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html index ba96ae81..2994f6fe 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html @@ -1,6 +1,6 @@
    -
    + close - + {{ curIndex }} / {{ totalCount }}
    - +
    - - -
    - - {{ curIndex }} / {{ totalCount }} - + + +
    diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss index 5076cf96..f795a56d 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss @@ -1,18 +1,31 @@ +$tablet-l-width: 1024px; +$tablet-s-width: 768px; + .chatroom-search { display: flex; - flex: 1 1 auto; + flex: 0 0 auto; justify-items: center; + width: 100%; .search-form { flex-flow: row; padding: 0 0 0 20px; - flex: 1 1 auto; + width: calc(100% - 126px); + position: relative; + @media screen and (max-width: #{$tablet-s-width}), + (max-height: 600px) { + padding: 0 0 0 14px; + flex: 0 0 auto; + } form { - display: flex; + display: inline-flex; + flex: 0 0 auto; + width: 100%; .mat-form-field { - width: 100%; flex-flow: row; flex: 1 1 auto; - margin-right: 20px; + width: 70%; + align-items: center; + display: flex; .mat-form-field-label, .mat-hint { color: rgba(0, 0, 0, 0.54); @@ -22,59 +35,115 @@ } .text-amount { display: inline-flex; - min-width: 80px; + flex: 0 0 auto; + min-width: 30px; padding: 0 10px; align-self: center; - font-size: 0.7em; + font-size: 0.9em; + font-weight: normal; justify-content: center; - border-radius: 50px; - margin-right: 10px; + margin-left: auto; } } ::ng-deep .search-form { - .mat-form-field-appearance-legacy { - .mat-form-field-wrapper { + form { + .icon-search { + height: 100%; + display: flex; + align-self: center; color: #ffffff; - padding-bottom: 0.8em; - .mat-form-field-infix { - .mat-input-element { + margin-right: 10px; + } + @media screen and (max-width: #{$tablet-s-width}), + (max-height: 600px) { + .icon-search { + display: none; + } + } + .mat-form-field-appearance-legacy { + .mat-form-field-wrapper { + color: #ffffff; + width: 100%; + padding-bottom: 0.8em; + .mat-form-field-infix { + .mat-input-element { + font-size: 1em; + } + } + .mat-form-field-suffix { + button { + position: relative; + transform: translateY(2px); + .mat-button-wrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + font-size: 1.2em; + } + } + } + .mat-form-field-label { + color: rgba(255, 255, 255, 0.7) !important; font-size: 1em; } - } - .mat-form-field-suffix { - button { - position: relative; - transform: translateY(4px); - .mat-button-wrapper { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - font-size: 1.2em; + .mat-form-field-underline { + height: 0; + .mat-form-field-ripple { + top: 6px; + height: 1px; + overflow: hidden; + display: none; } } } - .mat-form-field-label { - color: rgba(255, 255, 255, 0.7) !important; - } - .mat-form-field-underline { - height: 0; - .mat-form-field-ripple { - top: 6px; - height: 1px; - overflow: hidden; + } + } +} +::ng-deep .chat-search { + margin: 0 4px 4px; + padding: 6px; + font-size: 14px; + @media screen and (max-width: #{$tablet-s-width}), + (max-height: 600px) { + padding: 4px; + .search-form { + form { + display: flex; + i { display: none; } } } } - .icon-search { - height: 100%; - display: flex; - align-self: center; - color: #ffffff; - margin-right: 10px; + + .search-form { + form { + display: flex; + .mat-form-field { + .mat-form-field-wrapper { + padding: 0; + display: flex; + flex: 1 1 auto; + .mat-form-field-infix { + border: 0; + padding: 0; + width: auto; + input { + margin: 0; + } + .mat-form-field-label-wrapper { + top: 0; + .mat-form-field-label { + top: 0; + font-size: 0.9em; + } + } + } + } + } + } } } @@ -83,39 +152,21 @@ .btns { display: flex; flex: 0 0 0%; - height: 40px; - margin-top: 10px; - border-radius: 50px; - .mat-stroked-button { - border: none; - min-width: 40px; - height: 40px; - padding: 0 10px; - overflow: hidden; - border-radius: 50%; - background-color: (0, 0, 0, 0.7); - &.btn-toggle { - display: flex; - //border-right: 1px solid #ffffff; - justify-items: center; - .mat-button-wrapper { - display: flex; - line-height: inherit; - justify-content: center; - justify-items: center; - width: 20px; - height: 20px; - svg { - width: 100%; - height: 100%; - stroke: #ffffff; - } - } + margin-left: auto; + margin-top: 0; + height: 100%; + button { + margin-left: 4px; + &.btn-search.icon-button { + align-self: center; + width: 30px; + height: 30px; + color: #ffffff; } } } .btn-close-searchbox { - width: 3em; + width: 36px; height: 100%; //background: #0367a6; stroke: #ffffff; @@ -133,7 +184,7 @@ width: 2px; height: 20px; background-color: rgba(255, 255, 255, 0.3); - margin: 0 10px; display: inline-flex; align-self: center; + margin: 0 6px; } diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss index 54222924..342fc231 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss +++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss @@ -26,9 +26,28 @@ mat-icon { } .icon-button { + display: flex; + justify-content: center; + justify-items: center; background: none; border: none; + width: 20px; + height: 20px; i { font-family: 'material-outline-icons'; + font-size: 20px; + width: 20px; + height: 20px; + line-height: 20px; + font-weight: normal; + &:before { + display: inline-block; + font: normal normal normal 20px/1 'Material Design Icons'; + font-size: inherit; + text-rendering: auto; + line-height: inherit; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss index e55a76a3..cce5c8c9 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss @@ -1,5 +1,8 @@ +$tablet-l-width: 1024px; +$tablet-s-width: 768px; + ::ng-deep .sticker-selector { - height: 220px; + height: 210px; border-top: 1px solid #cccccc; .mat-tab-header { .mat-tab-label { @@ -7,27 +10,40 @@ } } .mat-tab-body-wrapper { - height: 180px; + height: 150px; overflow: auto; } + @media screen and (max-width: #{$tablet-s-width}) { + height: 180px; + .mat-tab-body-wrapper { + height: 130px; + } + } } - .sticker-item-box { flex-wrap: wrap; - padding: 20px 20px 0; + padding: 10px 20px 0; overflow: auto; .sticker-item { width: 60px; - margin-bottom: 20px; + margin-bottom: 10px; display: inline-flex; cursor: pointer; } } +@media screen and (max-width: #{$tablet-s-width}) { + .sticker-item-box { + .sticker-item { + width: 50px; + } + } +} + .selected-sticker { position: relative; - padding: 20px; + padding: 10px 20px; text-align: right; background-color: rgba(45, 58, 74, 0.8); img { @@ -36,7 +52,7 @@ .btn-close { position: absolute; top: 2px; - right: 20px; + right: 10px; width: 40px; height: 40px; color: #ffffff; diff --git a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss index f3c96b67..47d517fb 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss @@ -1,3 +1,6 @@ +$tablet-l-width: 1024px; +$tablet-s-width: 768px; + .translation-preview { position: relative; display: flex; @@ -7,7 +10,7 @@ .translation-section { display: flex; flex: 1 1 auto; - font-size: 1.1em; + font-size: 1em; .translate-text { margin: 14px 20px 14px 30px; @@ -18,6 +21,10 @@ overflow-y: auto; display: flex; flex: 1 1 auto; + @media screen and (max-width: #{$tablet-s-width}), + (max-height: 600px) { + margin: 10px; + } } .btn-translation-send { align-self: center; @@ -27,7 +34,7 @@ min-width: 40px; border: 2px solid #ffffff; border-radius: 50%; - margin-right: 20px; + margin-right: 10px; padding: 0; line-height: 1; } @@ -52,10 +59,6 @@ padding: 0 2vw; justify-items: flex-end; align-content: space-between; - font-size: 0.9em; - /*background-color: rgba(30, 167, 185, 0.1); - border-top: 1px solid rgba(30, 167, 185, 0.3); - border-bottom: 1px solid rgba(30, 167, 185, 0.3);*/ .text-language { display: inline-flex; margin-right: 20px; @@ -65,11 +68,22 @@ align-items: center; margin-right: 20px; } + @media screen and (max-width: #{$tablet-s-width}) { + padding: 10px 20px 4px; + .text-language { + display: none; + } + } .select-language { display: inline-flex; width: 300px; flex: 0 1 auto; margin-right: 20px; + font-size: 1em; + @media screen and (max-width: #{$tablet-s-width}), + (max-height: 600px) { + width: 50%; + } .mat-form-field-wrapper { width: 100%; line-height: 0.8em; @@ -85,6 +99,13 @@ display: inline-flex; width: 120px; height: unset; + @media screen and (max-width: #{$tablet-s-width}) { + .mat-slide-toggle-label { + width: 20%; + flex-flow: column; + font-size: 0.9em; + } + } &.simpleview { margin-right: 20px; margin-left: auto;