From fea937cd12619ab5240ae0ceb32f1f4630b10363 Mon Sep 17 00:00:00 2001 From: khk Date: Wed, 13 Nov 2019 17:46:25 +0900 Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84&=EB=B7=B0=EC=96=B4?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/messages.component.scss | 9 +- .../message-box/video.component.html | 4 +- .../message-box/video.component.scss | 23 ++- .../src/lib/components/profile.component.html | 144 ++++++++++++------ .../src/lib/components/profile.component.scss | 101 ++++++++++++ .../file-upload-queue.component.html | 34 ++--- .../file-upload-queue.component.scss | 44 ++++++ .../file-viewer/binary-viewer.component.html | 72 ++++----- .../file-viewer/binary-viewer.component.scss | 40 ++++- 9 files changed, 340 insertions(+), 131 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 5a051a2b..3788c0be 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 @@ -95,12 +95,9 @@ .file-drop-zone { position: absolute; - background-color: rgb(180, 180, 180); - - top: calc(100% - 200px); - left: 20%; - width: 60%; - height: 200px; + padding:10px 10px 0 10px; + background-color: rgb(54, 54, 54, 0.8); + bottom:0 } } } 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 4c61ae6e..fad3ada5 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,7 +1,5 @@
- - -
+
+ {{ userInfo.name }} @@ -6,71 +6,125 @@ {{ userInfo.deptName }} + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
+
  • - -
    • -
  • - chat + + + + {{ userInfo.intro }}
  • - email + + + + + {{ userInfo.email }}
  • - local_phone + + + + + {{ userInfo.lineNumber }}
  • - phone_android + + + + + {{ userInfo.hpNumber }}
+
- - - -
- + \ No newline at end of file diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss index f9a5c726..d345084b 100644 --- a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss +++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss @@ -1,3 +1,104 @@ +@mixin ellipsis($row) { + overflow: hidden; + text-overflow: ellipsis; + @if $row == 1 { + display: block; + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -webkit-box-orient: vertical; + word-wrap: break-word; + } +} +::ng-deep .mat-card-header-text{ + width:100%; + .mat-card-subtitle{ + color: rgb(256, 256, 256, 0.7) !important; + text-align:center; + margin-top:10px !important; + } +} + .example-card { width: 400px; + padding: 0 0 20px; + position: relative; + .mat-card-header{ + justify-content: center; + padding-bottom: 40px; + background: #ce395d; + background: linear-gradient(to right, #345385, #ef4c73); + color: #ffffff; + padding-top: 20px; + width:100%; + .mat-card-title{ + margin-bottom: 12px; + max-width: 100%; + justify-content: center; + display: flex; + margin:0 20px; + span{ + @include ellipsis(1); + } + } + } + .mat-card-content{ + margin-top:-40px; + .profile-img{ + display:flex; + height:80px; + justify-content: center; + margin-bottom:20px; + img{ + widows: 80px; + height: 80px; + border-radius: 50%; + background-color:#efefef; + border:2px solid #ffffff; + } + } + .profile-option{ + display:flex; + padding:0 20px; + color:#ffffff; + margin-top: -100px; + height: 120px; + .btn-favorite{ + cursor: pointer; + .on{ + fill:yellow; + } + } + .btn-groupadd{ + margin-left:auto; + cursor: pointer; + svg{ + display:none; + &.on{ + display:block; + } + } + } + } + ul{ + padding:0 20px; + display:flex; + flex-flow: column; + margin-top:-20px; + li{ + display:inline-flex; + height:30px; + align-items: center; + flex-flow:row; + margin-bottom:20px; + + svg{ + margin-right:10px; + color:#777777; + } + } + } + } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html index db5aa429..9990fad3 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html @@ -1,25 +1,23 @@
-
-
-
- image -
-
{{ fileUploadItem.file.name }}
+
+
+ + + + + + + +
{{ fileUploadItem.file.name }}
-
- + +
+
@@ -28,4 +26,4 @@
여기에 파일을 Drop하시면 업로드 됩니다.
-
+
\ No newline at end of file diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss index d628a704..35e07c2a 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss @@ -1,4 +1,48 @@ +@mixin ellipsis($row) { + overflow: hidden; + text-overflow: ellipsis; + @if $row == 1 { + display: block; + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -webkit-box-orient: vertical; + word-wrap: break-word; + } +} + .ucap-file-upload-queue-container { width: 100%; height: 100%; + .file-upload-item { + background-color: #eeeeee; + min-width: 200px; + margin: 0 0.5%; + margin-bottom: 10px; + width: 32%; + border-radius: 3px; + .file-upload-info { + padding: 10px; + background-color:#ffffff; + border-bottom: 1px solid #dddddd; + svg { + margin-right: 6px; + } + .file-upload-name { + height: 40px; + @include ellipsis(2); + } + } + .file-upload-progress { + padding: 6px 10px; + } + &:nth-child(3n + 1) { + margin-left: 1%; + } + &:nth-child(3n + 0) { + margin-right: 1%; + } + } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html index 32a33be9..3e8b3161 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.html @@ -1,58 +1,48 @@
- - attachment + + + + + + {{ fileInfo.fileName }} - - - - +
-
-
-
+
+
+
+
+
-
+
미리보기를 지원하지 않는 파일입니다.
-
-
+
\ No newline at end of file diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss index e6208221..776b1d9f 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/binary-viewer.component.scss @@ -4,29 +4,61 @@ .ucap-binary-viewer-header { width: 100%; - height: 50px; + height: 60px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); + background-color: #333333; + color:#ffffff; .ucap-binary-viewer-icon { + margin-right: 10px; } .ucap-binary-viewer-title { + font-size: 16px; } .ucap-binary-viewer-spacer { flex: 1 1 auto; } + .stroke-bar { + width: 1px; + height: 30px; + background-color: rgba(256, 256, 256, 0.3); + margin: 0 10px; + } .ucap-binary-viewer-action { + margin-left: auto; + &:hover { + opacity: 0.7; + } } } .ucap-binary-viewer-body { position: relative; width: 100%; - height: 100%; - background-color: white; + height: calc(100% - 60px); - .ucap-binary-viewer-content-wrapper { + .ucap-image-viewer-image-wrapper { + height: 100%; + padding: 20px; + background-color: rgba(0, 0, 0, 0.9); + } + .circle-box{ + 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.6); + } + .guide-msg{ + font-size:16px; + margin:30px; + color:#ffffff; } } }