From ab228738856cccef4923f2830fbc472c69c8e416 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Thu, 13 Feb 2020 13:55:19 +0900
Subject: [PATCH] =?UTF-8?q?rightDrawer=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EB=B0=9C=EC=83=9D=20=EC=88=98=EC=A0=95=20,=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20ng-deep=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../right-drawer/album-box.component.html     |   6 +-
 .../right-drawer/album-box.component.scss     | 105 +++++++------
 .../right-drawer/file-box.component.html      |   3 -
 .../right-drawer/file-box.component.scss      | 140 ++++++++++--------
 .../room-user-list.component.html             |   5 +-
 .../room-user-list.component.scss             |  20 ++-
 .../src/lib/components/profile.component.scss |  28 ++--
 7 files changed, 156 insertions(+), 151 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
index c25d0f1a..ab291689 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
@@ -164,11 +164,7 @@
       </div>
     </perfect-scrollbar>
   </div>
-  <div
-    fxFlex="1 1 50px"
-    fxLayout="row"
-    fxLayoutAlign="center center"
-    class="btn-box"
+  <div class="btn-box"
   >
     <button
       mat-flat-button
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 9ba471ce..e8677900 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
@@ -17,64 +17,63 @@ $tablet-s-width: 768px;
 .rightDrawer-albumbox {
   position: relative;
   width: 100%;
-  height: 100%;
-}
-.select-filebox {
-  display: flex;
-  flex-flow: column;
-  margin: 10px;
-  padding: 10px;
-  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 {
-    height: 150px;
-    color: #212121;
-    border-bottom: 1px dotted #dddddd;
-    text-align: center;
-    .guide-msg {
-      div {
-        display: flex;
-        flex-flow: column;
-        height: 140px;
-        justify-content: center;
-        justify-items: center;
-        color: #999999;
-        .icon-img {
-          margin-bottom: 6px;
+  height: calc(100% - 50px);
+  .select-filebox {
+    display: flex;
+    flex-flow: column;
+    margin: 10px;
+    padding: 10px;
+    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 {
+      height: 150px;
+      color: #212121;
+      border-bottom: 1px dotted #dddddd;
+      text-align: center;
+      .guide-msg {
+        div {
+          display: flex;
+          flex-flow: column;
+          height: 140px;
+          justify-content: center;
+          justify-items: center;
+          color: #999999;
+          .icon-img {
+            margin-bottom: 6px;
+          }
         }
       }
     }
-  }
-  ul {
-    padding-top: 10px;
-    li {
-      @include ellipsis(1);
-      &.name {
-        font-weight: 600;
+    ul {
+      padding-top: 10px;
+      li {
+        @include ellipsis(1);
+        &.name {
+          font-weight: 600;
+        }
+      }
+    }
+    .empty-msg {
+      display: inline-flex;
+      flex-flow: column;
+      margin: auto 0;
+      align-items: center;
+      justify-content: center;
+      color: #999999;
+      span {
+        padding: 6px;
       }
     }
   }
-  .empty-msg {
-    display: inline-flex;
-    flex-flow: column;
-    margin: auto 0;
-    align-items: center;
-    justify-content: center;
-    color: #999999;
-    span {
-      padding: 6px;
-    }
-  }
 }
-
 .search-list {
   display: flex;
   padding: 0 10px;
-  height: calc(100% - 450px);
+  height: calc(100% - 380px);
   @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
     margin-top: 10px;
     height: calc(100% - 170px);
@@ -141,10 +140,18 @@ $tablet-s-width: 768px;
 
 .btn-box {
   position: absolute;
-  bottom: 50px;
+  bottom: 0;
   height: 50px;
   margin-bottom: 10px;
   width: 100%;
+  flex-direction: row;
+  flex: 1 1 50px;
+  max-height: 50px;
+  box-sizing: border-box;
+  display: flex;
+  place-content: center;
+  align-items: center;
+
   button {
     margin: 5px;
     font-size: 0.9em;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
index c1877a1c..d246bd85 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
@@ -247,9 +247,6 @@
     ></mat-paginator>
 
     <div
-      fxFlex="1 1 50px"
-      fxLayout="row"
-      fxLayoutAlign="center center"
       class="btn-box"
     >
       <button
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 3feca976..8ce49a9a 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
@@ -17,75 +17,75 @@ $tablet-s-width: 768px;
 }
 
 .rightDrawer-filebox {
-  width: 100%;
-  height: calc(100% - 60px);
-}
-
-.select-filebox {
   position: relative;
-  display: flex;
-  flex-flow: column;
-  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;
-    .select-flie {
-      display: flex;
-      flex-flow: row;
-      align-items: flex-start;
-      color: #212121;
-      padding: 10px;
-      border-bottom: 1px dotted #dddddd;
-      ul {
-        padding: 0;
-        .name {
-          font-weight: 600;
-          word-wrap: break-word;
-          white-space: pre-wrap;
-          word-break: break-word;
+  width: 100%;
+  height: calc(100% - 50px);
+  .select-filebox {
+    position: relative;
+    display: flex;
+    flex-flow: column;
+    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;
+      .select-flie {
+        display: flex;
+        flex-flow: row;
+        align-items: flex-start;
+        color: #212121;
+        padding: 10px;
+        border-bottom: 1px dotted #dddddd;
+        ul {
+          padding: 0;
+          .name {
+            font-weight: 600;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+            word-break: break-word;
+          }
         }
       }
     }
-  }
-  .empty-msg {
-    display: inline-flex;
-    flex-flow: column;
-    margin: auto 0;
-    align-items: center;
-    justify-content: center;
-    color: #999999;
-    span {
-      padding: 6px;
-    }
-  }
-  .select-file-option {
-    position: absolute;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    text-align: center;
-    padding: 10px 0;
-    bottom: 4px;
-    span {
-      width: 28px;
-      height: 28px;
+    .empty-msg {
       display: inline-flex;
-      text-align: center;
-      justify-content: center;
+      flex-flow: column;
+      margin: auto 0;
       align-items: center;
-      margin: 0 20px;
-      cursor: pointer;
-      svg {
+      justify-content: center;
+      color: #999999;
+      span {
+        padding: 6px;
       }
-      &:hover {
-        border-radius: 50%;
-        background-color: #999999;
-        color: #ffffff !important;
+    }
+    .select-file-option {
+      position: absolute;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      text-align: center;
+      padding: 10px 0;
+      bottom: 4px;
+      span {
+        width: 28px;
+        height: 28px;
+        display: inline-flex;
+        text-align: center;
+        justify-content: center;
+        align-items: center;
+        margin: 0 20px;
+        cursor: pointer;
+        svg {
+        }
+        &:hover {
+          border-radius: 50%;
+          background-color: #999999;
+          color: #ffffff !important;
+        }
       }
     }
   }
@@ -135,7 +135,7 @@ $tablet-s-width: 768px;
   }
 }
 .table-box {
-  height: calc(100% - 420px);
+  height: calc(100% - 440px);
   overflow-y: auto;
   @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
     height: calc(100% - 146px);
@@ -153,15 +153,25 @@ $tablet-s-width: 768px;
   bottom: 0;
   min-height: 40px;
   width: 100%;
+  height: 170px;
   flex-direction: column;
   box-sizing: border-box;
   display: flex;
   border-top: 1px solid #dddddd;
   .btn-box {
+    position: absolute;
+    bottom: 0;
     height: 50px;
-    padding-bottom: 10px;
+    margin-bottom: 10px;
     width: 100%;
-    background-color: #ffffff;
+    flex-direction: row;
+    flex: 1 1 50px;
+    max-height: 50px;
+    box-sizing: border-box;
+    display: flex;
+    place-content: center;
+    align-items: center;
+
     button {
       margin: 5px;
       font-size: 0.9em;
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
index 1af97737..22b424b4 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column" class="list">
+<div fxLayout="column" class="rightDrawer-userlist">
   <div class="search-list">
     <perfect-scrollbar class="room-user-scrollbar">
       <ucap-profile-user-list-item
@@ -13,9 +13,6 @@
     </perfect-scrollbar>
   </div>
   <div
-    fxFlex="1 1 50px"
-    fxLayout="row"
-    fxLayoutAlign="center center"
     class="btn-box"
   >
     <button mat-flat-button class="mat-primary" (click)="onClickAddMember()">
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
index a1e8468f..eaa9bf54 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
@@ -1,12 +1,11 @@
 @import '../../../../../../../ucap-webmessenger-ui/src/assets/scss/partials/presence';
-.list {
+.rightDrawer-userlist {
+  position: relative;
   width: 100%;
-  height: 100%;
-  overflow: hidden;
-
+  height: calc(100% - 50px);
   .search-list {
     overflow-y: auto;
-    height: calc(100% - 110px);
+    height: calc(100% - 60px);
   }
 }
 
@@ -16,9 +15,18 @@
   height: 50px;
   margin-bottom: 10px;
   width: 100%;
+  flex-direction: row;
+  flex: 1 1 50px;
+  max-height: 50px;
+  box-sizing: border-box;
+  display: flex;
+  place-content: center;
+  align-items: center;
+
   button {
     margin: 5px;
-    width: 50%;
     font-size: 0.9em;
+    padding: 0 12px;
+    min-width: 140px;
   }
 }
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 a32114bb..69d963c2 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
@@ -225,7 +225,7 @@ $login-max-height: 800px;
   }
 }
 
-::ng-deep .userInfo-call {
+.userInfo-call {
   position: relative;
   display: flex;
   flex: 0 0 26px;
@@ -234,20 +234,18 @@ $login-max-height: 800px;
   line-height: 26px;
   justify-content: center;
   justify-items: center;
-  .mat-button-wrapper {
+
+  svg {
     padding: 0;
+    margin-top: -4px;
     width: 18px;
     height: 18px;
-    justify-content: center;
-    text-align: center;
-    svg {
-      fill: #ffffff;
-      display: flex;
-    }
+    fill: #ffffff;
+    display: flex;
   }
 }
 
-::ng-deep .button-text-item {
+.button-text-item {
   display: flex;
   button {
     justify-content: center;
@@ -259,20 +257,12 @@ $login-max-height: 800px;
       width: 36px;
       height: 36px;
       flex: 0 0 36px;
-      //line-height: 40px;
-      .mat-button-wrapper {
+      svg {
         padding: 0;
         fill: #ffffff;
         width: 20px;
         height: 20px;
-        display: inline-flex;
-        justify-content: center;
-        text-align: center;
-        svg {
-          display: flex;
-          width: 100%;
-          height: 100%;
-        }
+        display: flex;
       }
     }
   }