From 576f9ab07f1b44e5e0be7bf3dff8181e040abae0 Mon Sep 17 00:00:00 2001 From: khk Date: Mon, 30 Dec 2019 19:19:39 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EB=8C=80=ED=99=94=EB=B0=A9=20=EA=B2=80?= =?UTF-8?q?=EC=83=89,=20=EC=82=AC=EC=9A=B4=EB=93=9C=20=EB=B7=B0=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8,=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20-=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 | 10 ++ .../src/assets/scss/global/_default.scss | 25 ++++- .../message-box/schedule.component.html | 17 +-- .../message-box/schedule.component.scss | 49 ++++++-- .../lib/components/messages.component.html | 32 ++---- .../lib/components/messages.component.scss | 30 ++++- .../src/lib/components/search.component.html | 80 ++++++++++++- .../src/lib/components/search.component.scss | 43 +++++++ .../file-viewer/sound-viewer.component.html | 14 ++- .../file-viewer/sound-viewer.component.scss | 106 +++++++++++++++--- 10 files changed, 330 insertions(+), 76 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 37343312..39b09c17 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 @@ -50,6 +50,16 @@ line-height: 40px; } } + width: 50px; + height: 50px; + &.thumbnail-mask { + border-radius: 50%; + overflow: hidden; + img { + width: 50px; + height: auto; + } + } } .room-info { display: flex; 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 05fd1daf..a566af77 100644 --- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss +++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss @@ -90,8 +90,8 @@ $lg-red: ( $aquaBlue-daesang: ( 50: #f9feff, //#e0f7fa, - 100: #b2ebf2, - 200: #4dd0e1, + /* 100: #b2ebf2,*/ 100: #ebfdff, + 200: #65e4f5, //#80deea, 300: #4dd0e1, 400: #26c6da, @@ -379,4 +379,25 @@ $daesang-grey: ( background-color: mat-color($accent, B100); } } + + .message-row { + .message-main { + .bubble { + background-color: mat-color($accent, 100); + border: 1px solid mat-color($accent, 200); + overflow: hidden; + } + } + &.me { + .message-main { + .bubble { + background-color: #ffffff; + border: 1px solid mat-color($primary, 300); + .event-info { + border-radius: 0 0 0 6px; + } + } + } + } + } } 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 d4b70a6a..84d8abf8 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 @@ -1,4 +1,4 @@ -
+
    -
  • +
  • + 날짜{{ date | ucapDate: 'YYYY.MM.DD' }} +
    • +
  • + 시간{{ date | ucapDate: 'a hh:mm' }} +
    • +
  • {{ message.sentMessageJson.title }}
    • -
  • - 날짜{{ date | ucapDate: 'YYYY.MM.DD' }} -
    • -
  • - 시간{{ date | ucapDate: 'a hh:mm' }} -
- +
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 79c31be4..bfb83a0c 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,6 +1,7 @@ .chatroom-search { display: flex; flex: 1 1 auto; + justify-items: center; .search-form { flex-flow: row; flex: 1 1 auto; @@ -11,6 +12,10 @@ flex-flow: row; flex: 1 1 auto; margin-right: 20px; + .mat-form-field-label, + .mat-hint { + color: rgba(0, 0, 0, 0.54); + } } .text-amount { display: inline-flex; @@ -24,3 +29,41 @@ flex: 0 0 0%; } } + +.mat-form-field-label, +.mat-hint { + color: rgba(0, 0, 0, 0.54); +} + +::ng-deep .btns { + border: 1px solid #dddddd; + border-radius: 4px; + height: 42px; + .mat-stroked-button { + border: none; + min-width: 40px; + height: 42px; + padding: 0 10px; + &.btn-toggle { + display: flex; + border-right: 1px solid #dddddd; + justify-items: center; + &:last-child { + border-right: none; + } + .mat-button-wrapper { + display: flex; + line-height: inherit; + justify-content: center; + justify-items: center; + width: 20px; + height: 20px; + svg { + width: 100%; + height: 100%; + stroke: #555555; + } + } + } + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html index b603f572..79f051ec 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html @@ -60,7 +60,19 @@ (loadeddata)="onLoadedDataAudio()" >
- music_note + +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss index 9fb05407..726d0a6e 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss @@ -13,7 +13,7 @@ } .ucap-sound-viewer-title { - font-size:16px; + font-size: 16px; } .stroke-bar { width: 1px; @@ -33,29 +33,38 @@ width: 100%; height: calc(100% - 60px); - .circle-box{ - display:flex; - width:140px; - height:140px; - border-radius:50%; + .circle-box { + position: relative; + display: flex; + width: 140px; + height: 140px; + border-radius: 50%; justify-content: center; align-items: center; - border:2px solid #ffffff; - background-color:rgba(256, 256, 256, 0.7); - .mat-icon{ + border: 2px solid #ffffff; + background-color: rgba(256, 256, 256, 0.7); + .mat-icon { font-size: 100px; height: 100px; width: 100px; } + .sound-wave { + height: 80px; + left: 50%; + margin: -35px 0 0 -35px; + position: absolute; + bottom: 30px; + width: 70px; + } } - .ucap-sound-viewer-sound-icon{ + .ucap-sound-viewer-sound-icon { width: 100%; - height: calc(100% - 80px); + height: calc(100% - 80px); } - .viewer-bottom{ + .viewer-bottom { background-color: #212121; - color:#ffffff; + color: #ffffff; .ucap-sound-viewer-sound-time { width: 100%; height: 30px; @@ -78,22 +87,83 @@ flex: 1 1 auto; } .ucap-sound-viewer-action { - .mat-icon{ + .mat-icon { font-size: 40px; width: 100%; height: 100%; - line-height:40px; + line-height: 50px; } } } +.sound-bar { + bottom: 1px; + height: 10px; + position: absolute; + width: 5px; + animation: sound-play 0ms -800ms linear infinite alternate; +} +.sound-bar:nth-child(1) { + left: 0px; + animation-duration: 474ms; +} +.sound-bar:nth-child(2) { + left: 7px; + animation-duration: 433ms; +} +.sound-bar { + left: 14px; + animation-duration: 407ms; +} +.sound-bar:nth-child(4) { + left: 21px; + animation-duration: 458ms; +} +.sound-bar:nth-child(5) { + left: 28px; + animation-duration: 400ms; +} +.sound-bar:nth-child(6) { + left: 35px; + animation-duration: 427ms; +} +.sound-bar:nth-child(7) { + left: 42px; + animation-duration: 441ms; +} +.sound-bar:nth-child(8) { + left: 49px; + animation-duration: 419ms; +} +.sound-bar:nth-child(9) { + left: 56px; + animation-duration: 487ms; +} +.sound-bar:nth-child(10) { + left: 63px; + animation-duration: 442ms; +} + +@keyframes sound-play { + 0% { + opacity: 0.35; + height: 10px; + } + 100% { + opacity: 1; + height: 60px; + } +} + mat-slider { width: 94%; } -::ng-deep .mat-slider-horizontal .mat-slider-track-background{ +::ng-deep .mat-slider-horizontal .mat-slider-track-background { background-color: #999999 !important; } -::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{ +::ng-deep + .mat-slider-min-value:not(.mat-slider-thumb-label-showing) + .mat-slider-thumb { border-color: #999999 !important; -} \ No newline at end of file +} From 23d188faaca71d230e04c1e67b0e89dd07683163 Mon Sep 17 00:00:00 2001 From: khk Date: Tue, 31 Dec 2019 11:50:13 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EC=82=AC=EC=9A=B4=EB=93=9C=20=EB=B7=B0?= =?UTF-8?q?=EC=96=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/scss/global/_default.scss | 3 + .../file-viewer/sound-viewer.component.html | 59 +++++++++++++------ 2 files changed, 43 insertions(+), 19 deletions(-) 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 a566af77..6346aee1 100644 --- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss +++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss @@ -221,6 +221,9 @@ $daesang-grey: ( .text-primary-color { color: mat-color($primary); } + .text-accent-dark { + color: mat-color($accent, 600); + } .text-accent-darkest { color: mat-color($accent, 800); } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html index 79f051ec..4a40a037 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.html @@ -12,9 +12,20 @@ (click)="onClickDownload()" > - - + + @@ -24,8 +35,17 @@ class="ucap-image-viewer-action btn-close" (click)="onClickClose()" > - + @@ -60,18 +80,20 @@ (loadeddata)="onLoadedDataAudio()" >
- -
-
-
-
-
-
-
-
-
-
-
+ + music_note + +
+
+
+
+
+
+
+
+
+
+
@@ -95,7 +117,6 @@ class="ucap-sound-viewer-sound-controls" fxLayout="row" fxLayout.xs="column" - fxLayoutAlign="center center" >
{{ currentTime | ucapSecondsToMinutes }} @@ -117,4 +138,4 @@
- \ No newline at end of file +