ng-deep 제거

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss

@@ -18,9 +18,6 @@
 .message-item {
   cursor: pointer;
 }
-::ng-deep .ps__rail-y {
-  left: auto !important;
-}
 .message-box {
   position: relative;
   height: 100%;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -1560,7 +1560,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             CreateChatDialogData,
             CreateChatDialogResult
           >(CreateChatDialogComponent, {
-            width: '600px',
+            maxWidth: '94vw',
+            maxHeight: '90vh',
             data: {
               type: UserSelectDialogType.MessageForward,
               title: this.translateService.instant('chat.forwardEventTo'),
@@ -1765,6 +1766,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             CreateChatDialogData,
             CreateChatDialogResult
           >(CreateChatDialogComponent, {
+            maxWidth: '94vw',
+            maxHeight: '90vh',
             data: {
               type: UserSelectDialogType.EditChatMember,
               title: this.translateService.instant('chat.modifyRoomMember'),
@@ -1831,6 +1834,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
             SelectGroupDialogData,
             SelectGroupDialogResult
           >(SelectGroupDialogComponent, {
+            maxWidth: '90vw',
+            maxHeight: '94vh',
             data: {
               title: this.translateService.instant('chat.addMemberToGroup')
             }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/account/notice.dialog.component.scss

@@ -30,6 +30,8 @@
     }
   }
 }
+
+//이용시 주의사항
 ::ng-deep.use-caution {
   .notice {
     ol {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss

@@ -47,7 +47,7 @@
 }
 
 .dialog-tab-grouplist {
-  height: calc(100% - 140px);
+  height: calc(100% - 130px);
   width: 100%;
   .group,
   .search-result {
@@ -64,7 +64,7 @@
   }
 }
 
-::ng-deep .dialog-tab-chatlist {
+/*::ng-deep .dialog-tab-chatlist {
   height: 508px;
   width: 100%;
   .chat {
@@ -82,10 +82,10 @@
     }
   }
 }
-
+*/
 ::ng-deep .dialog-tab-orglist {
   width: 100%;
-  height: calc(100% - 150px);
+  height: calc(100% - 130px);
   border-bottom: 1px solid #dddddd;
   position: relative;
   .oraganization {
@@ -95,7 +95,6 @@
     &-tab {
       width: 100%;
       height: calc(100% - 50px);
-      // border-bottom: 1px solid #dddddd;
       position: relative;
       &-tree {
         display: inline-flex;
@@ -133,8 +132,8 @@
   margin-top: 10px;
 }
 .mat-chip.mat-standard-chip .mat-chip-remove {
-  line-height: 24px;
 }
+
 .confirm-card {
   .mat-card-content {
     .content-box {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-write.dialog.component.ts

@@ -124,7 +124,8 @@ export class MessageWriteDialogComponent implements OnInit {
       CreateChatDialogData,
       CreateChatDialogResult
     >(CreateChatDialogComponent, {
-      //width: '600px',
+      maxWidth: '94vw',
+      maxHeight: '90vh',
       data: {
         type: UserSelectDialogType.EditChatMember,
         title: this.translateService.instant('message.selectRecipient'),

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss

@@ -1,358 +1,15 @@
-$desktop-l-width: 1440px;
-$tablet-l-width: 1024px;
-$tablet-s-width: 768px;
-$mob-l-width: 640px;
-
-@mixin tab {
-  @media screen and (max-width: #{$tablet-l-width}), (max-height: #{$tablet-s-width}) {
-    @content;
-  }
-}
-
 .login {
   width: 100%;
-  background-size: cover;
+  height: 100%;
-  height: calc(100% - 50px);
-  background: #eaeff1;
-  margin-top: 50px;
-  overflow: hidden;
-  /*background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
-  background: linear-gradient(to top, #93a3af, #eaeff1);*/
-
   .login-wrapper {
-    flex: 1 0 auto;
+    display: flex;
-    background-color: #ffffff;
-    background-size: 100% auto;
-    position: relative;
     justify-content: center;
     align-items: center;
-    display: flex;
-  }
-}
-
-$main: #777;
-$back: #aaa;
-$accent: hsl(220, 50%, 40%);
-
-$sans: 'Open Sans', sans-serif;
-$heebo: 'Heebo', sans-serif;
-$hangul: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움';
-
-$base: 3vh;
-
-$time: 1800ms;
-
-$ease-out: cubic-bezier(0.26, 0.005, 0.135, 1);
-$ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-
-@mixin word-break-keep {
-  word-break: keep-all;
-}
-
-.slider {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  &_wrap {
-    position: absolute;
     width: 100%;
     height: 100%;
-    transform: translateX(100%);
+    .login-form-box {
-    top: 0%;
+      width: 300px;
-    left: 0;
+      height: 400px;
-    right: auto;
-    overflow: hidden;
-    transition: transform $time/4 $ease-in-out;
-    transform-origin: 0% 50%;
-    transition-delay: $time/4;
-    opacity: 0;
-    &-hacked {
-      opacity: 1;
-    }
-  }
-
-  &_back {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-size: auto 100%;
-    background-position: center;
-    background-repeat: none;
-    transition: filter $time/4 $ease-in-out;
-    background-color: #2d3a4a;
-  }
-
-  &_inner {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0%;
-    background-size: auto 133.3333%;
-    background-position: center;
-    background-repeat: none;
-    transform: scale(0.7);
-    transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
-      opacity $time/4 step-end;
-    opacity: 0;
-    //box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
-    padding: $base * 3;
-    box-sizing: border-box;
-    border: 1px solid #ffffff;
-  }
-  &_header {
-    display: flex;
-    flex-flow: row;
-    width: 40%;
-    height: 20px;
-    justify-content: center;
-    font-size: $base * 0.6;
-    color: #ffffff;
-    .company-name {
-      flex: 0 0 auto;
-      padding-right: 20px;
-    }
-    .h-line {
-      flex: 1 1 auto;
-      align-self: center;
-      height: 2px;
-      border-bottom: 1px solid #ffffff;
-    }
-  }
-  &_content {
-    position: relative;
-    top: 64%;
-    width: 40%;
-    transform: translateY(-50%);
-    color: white;
-    font-family: $hangul;
-    opacity: 0;
-    transition: opacity $time/4;
-    h1 {
-      font-weight: 900;
-      font-size: $base * 1.24;
-      line-height: 1.2;
-      margin-bottom: $base/2;
-      pointer-events: none;
-      text-shadow: 0 $base/8 $base/4 rgba(darken($accent, 50%), 0.1);
-      @include word-break-keep();
-    }
-    p {
-      font-size: $base * 0.64;
-      line-height: $base * 0.9;
-      margin-bottom: $base/2;
-      @include word-break-keep();
-    }
-  }
-  &_link {
-    cursor: pointer;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    justify-items: center;
-    font-family: $heebo;
-    font-size: 1.2rem;
-    letter-spacing: $base * 0.1;
-    font-weight: 100;
-    display: block;
-    bottom: 10%;
-    color: #ffffff;
-    padding: 10px 60px 10px 30px;
-    border-radius: 100px;
-    color: #00dbed;
-    width: $base * 5;
-    // next버튼 숨김
-    display: none;
-    &:before {
-      content: '';
-      border-top: 1px solid white;
-      border-right: 1px solid white;
-      display: block;
-      width: $base/3;
-      height: $base/3;
-      transform: translateX(0) translateY(-50%) rotate(45deg);
-      position: absolute;
-      font-family: $heebo;
-      font-weight: 100;
-      top: 50%;
-      left: $base * 4;
-    }
-    &:hover {
-      background-color: #134a67;
-      color: #ffffff;
-    }
-  }
-
-  &_slide {
-    position: absolute;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    transition: transform $time/3 $ease-in-out;
-    transition-delay: $time/3;
-    pointer-events: none;
-    z-index: 0;
-
-    &-active {
-      transform: translatex(0%);
-      z-index: 2;
-      .slider_wrap {
-        transform: translateX(0);
-        transform-origin: 100% 50%;
-        opacity: 1;
-        animation: none;
-      }
-      .slider_back {
-        filter: blur(#{$base * 0.2});
-        transition: filter $time/2 $ease-in-out;
-        transition-delay: $time/2 !important;
-      }
-      .slider_inner {
-        transform: scale(0.7);
-        box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
-        pointer-events: auto;
-        opacity: 1;
-        transition: transform $time/2 $ease-in-out,
-          box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
-        transition-delay: $time/2;
-      }
-      .slider_content {
-        opacity: 1;
-        transition-delay: $time * 3/4;
-      }
-    }
-
-    &:not(.slider_slide-active) .slider_wrap {
-      @keyframes hack {
-        0% {
-          transform: translateX(0);
-          opacity: 1;
-        }
-        50% {
-          transform: translateX(-100vw);
-          opacity: 1;
-        }
-        51% {
-          transform: translateX(-100vw);
-          opacity: 0;
-        }
-        52% {
-          transform: translateX(100vw);
-          opacity: 0;
-        }
-        100% {
-          transform: translateX(100vw);
-          opacity: 1;
-        }
-      }
-      animation-name: hack;
-      animation-duration: $time/2;
-      animation-delay: $time/4;
-      animation-timing-function: $ease-in-out;
-    }
-
-    &:nth-child(1) .slider_back,
-    &:nth-child(1) .slider_inner {
-      // background-image: url(/assets/images/login/bg_login01.png);
-      //background: #eee;
-    }
-    &:nth-child(2) .slider_back,
-    &:nth-child(2) .slider_inner {
-      // background-image: url(/assets/images/login/bg_login02.png);
-      //background: #aaa;
-    }
-    &:nth-child(3) .slider_back,
-    &:nth-child(3) .slider_inner {
-      // background-image: url(/assets/images/login/bg_login03.png);
-      //background: #888;
-    }
-  }
-}
-
-::ng-deep .login-form-box {
-  position: absolute;
-  width: 20vw;
-  height: 50%;
-  min-height: 480px;
-  display: flex;
-  justify-content: flex-end;
-  z-index: 100;
-  @media screen and (max-width: #{$desktop-l-width}) {
-    width: 24vw;
-    min-height: 480px;
-  }
-
-  @media screen and (max-width: #{$tablet-l-width}) {
-    width: 36vw;
-    min-height: 420px;
-  }
-  .mat-form-field-label-wrapper {
-    color: #06b2d6;
-  }
-  /*.mat-form-field {
-    padding-top: 20px;
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-      .mat-form-field-infix {
-        padding-top: 0;
-        border: 0;
-      }
-      .mat-form-field-label-wrapper {
-        top: -1.4em;
-      }
-      .mat-form-field-underline {
-        bottom: 0;
-      }
-      //min-size 반응형 적용
-      @include tab {
-        .mat-form-field-infix {
-          input {
-            font-size: 0.9em;
-          }
-        }
-        .mat-form-field-label-wrapper {
-          font-size: 0.9em;
-        }
-        .mat-form-field-subscript-wrapper {
-          .mat-error {
-            font-size: 0.8em;
-          }
-        }
-        &.mat-focused,
-        &:not(.mat-form-field-hide-placeholder) {
-          .mat-form-field-label-wrapper {
-            font-size: 0;
-          }
-        }
-      }
-    }
-  }
-  .error-container {
-    padding-top: 10px;
-  }*/
-}
-@media all and (max-width: 1400px) {
-  .slider {
-    &_content {
-      transform: translateY(-50%);
-      color: white;
-      font-family: $heebo;
-      opacity: 0;
-      transition: opacity $time/4;
-      h1 {
-        font-weight: 900;
-        font-size: $base * 1.2;
-        margin-bottom: $base;
-      }
-      p {
-        display: none;
-      }
-    }
-    &-active {
-      .slider_inner {
-        transform: scale(0.9);
-      }
     }
   }
 }

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -55,13 +55,13 @@ $lg-red: (
   50: #ffffff,
   100: #fff9fc,
   200: #f1e1e5,
-  /*300: #f06292,*/ 300: #ef4c73,
+  300: #ef4c73,
   400: #ec407a,
   500: #ed097e,
   600: #d81b60,
   700: #c2185b,
   800: #ad1457,
-  /*900: #880e4f,*/ 900: #5f2a41,
+  900: #5f2a41,
   A100: #ff80ab,
   A200: #ff4081,
   A400: #ff3399,
@@ -291,29 +291,12 @@ $daesang-grey: (
   .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
     background-color: mat-color($accent, 700);
     cursor: pointer;
-    .mat-chip-remove {
-      opacity: 0.6;
-    }
   }
 
   .load-container .loader:after {
     background-color: mat-color($accent, 300);
   }
 
-  .ps__rail-y {
-    & > .ps__thumb-y {
-      margin-right: -2px;
-    }
-  }
-
-  .cdk-virtual-scroll-orientation-vertical {
-    .cdk-virtual-scroll-content-wrapper {
-      width: 100%;
-      height: 100%;
-      contain: none;
-    }
-  }
-
   .global-menu {
     .mat-tab-label[aria-selected='true'] {
       .mat-tab-label-content {
@@ -372,7 +355,7 @@ $daesang-grey: (
     color: #ffffff;
   }
 
-  //탭개수에 의한 width 정의
+  //[S]탭개수에 의한 width 정의
   .mat-tab-group {
     &.tab_num2 {
       .mat-tab-label {
@@ -394,8 +377,9 @@ $daesang-grey: (
       border: none;
     }
   }
+  //[E]탭개수에 의한 width 정의
 
-  //쪽지 라디오 버튼 정렬
+  //[S]쪽지 라디오 버튼 정렬
   .message-box {
     .mat-radio-label {
       .mat-radio-label-content {
@@ -403,10 +387,23 @@ $daesang-grey: (
       }
     }
   }
+  //[E]쪽지 라디오 버튼 정렬
+
+  //[S]mat-tab-group
+  /*mat-tab-group {
+    display: flex;
+    flex-direction: row;
+    .mat-tab-header {
+      width: 100%;
+      .mat-tab-label-container {
+        width: 100%;
+      }
+    }
+  }*/
 
   mat-tab-group[vertical] {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     .mat-tab-header {
       border-bottom: none;
       .mat-tab-labels {
@@ -435,6 +432,32 @@ $daesang-grey: (
     }
   }
 
+  //설정 general-theme
+  .theme-list {
+    .mat-tab-header {
+      width: 100%;
+      border: none !important;
+      .mat-tab-labels {
+        position: relative;
+        width: 100%;
+        flex-direction: row !important;
+        .mat-tab-label {
+          width: 140px;
+          height: 120px;
+          &.mat-tab-label-active {
+            opacity: 1;
+          }
+          .mat-tab-label-content {
+            position: relative;
+            flex-flow: column;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  //[E]mat-tab-group
+
   nav[mat-tab-nav-bar][vertical] {
     display: flex;
     flex-direction: row !important;
@@ -466,7 +489,7 @@ $daesang-grey: (
     }
   }
 
-  //대화 말풍선 global 적용
+  //[S]대화 말풍선 global 적용
   .message-row {
     .message-main {
       .bubble {
@@ -502,8 +525,22 @@ $daesang-grey: (
       }
     }
   }
+  //[E]대화 말풍선 global 적용
 
-  //[s] 번역
+  //[S]스티커
+  .sticker-selector {
+    .mat-tab-header {
+      .mat-tab-label {
+        min-width: 16%;
+        @media screen and (max-width: #{$tablet-s-width}) {
+          padding: 0 10px;
+        }
+      }
+    }
+  }
+  //[E]스티커
+
+  //[S]번역
   .translationForm {
     background-color: mat-color($accent, 200, 0.4);
     .select-language {
@@ -531,6 +568,7 @@ $daesang-grey: (
   .translation-preview {
     background-color: mat-color($accent, 900, 0.8);
   }
+  //[E] 번역
 
   .tree-has-child {
     li {

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss

@@ -159,7 +159,7 @@ $login-max-height: 800px;
   .policy {
     cursor: pointer;
     position: absolute;
-    bottom: 2vh;
+    bottom: 0;
     display: block;
     background-color: #58b0b1;
     width: 100%;

projects/ucap-webmessenger-ui-message/src/lib/components/write.component.html

@@ -64,7 +64,9 @@
             placeholder="{{ 'message.fieldTitle' | translate }}"
             maxlength="100"
           />
-        <mat-hint align="end">{{ inputTitle.value?.length || 0 }}/100</mat-hint>
+          <mat-hint align="end"
+            >{{ inputTitle.value?.length || 0 }}/100</mat-hint
+          >
         </mat-form-field>
 
         <div class="message-content">

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html

@@ -18,10 +18,9 @@
         animationDuration="0ms"
         (selectedTabChange)="onSelectedTabChange($event)"
         fxLayout="row"
-        horizontal
         class="theme-list"
       >
-        <mat-tab>
+        <mat-tab fxLayout="row" fxFlex="0 0 auto">
           <ng-template mat-tab-label class="theme-item">
             <div class="theme-box default-theme"></div>
             <div class="theme-name">

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss

@@ -23,33 +23,6 @@
   }
 }
 
-::ng-deep .theme-list {
-  .mat-tab-header {
-    width: 100%;
-    border: none !important;
-    .mat-tab-labels {
-      position: relative;
-      width: 100%;
-      flex-direction: row !important;
-      .mat-tab-label {
-        width: 140px;
-        height: 120px;
-        &.mat-tab-label-active {
-          opacity: 1;
-        }
-        .mat-tab-label-content {
-          position: relative;
-          flex-flow: column;
-          width: 100%;
-        }
-      }
-    }
-  }
-  .mat-tab-body-wrapper {
-    border: none !important;
-  }
-}
-
 .theme-box {
   width: 140px;
   height: 98px;
@@ -75,3 +48,6 @@
   position: relative;
   padding-top: 10px;
 }
+.theme-item {
+  height: 100%;
+}

projects/ucap-webmessenger-ui/src/assets/scss/partials/_scrollbars.scss

@@ -20,6 +20,15 @@ body:not(.is-mobile) {
     border-radius: 12px;
   }
 }
+
+.cdk-virtual-scroll-orientation-vertical {
+  .cdk-virtual-scroll-content-wrapper {
+    width: 100%;
+    height: 100%;
+    contain: none;
+  }
+}
+
 perfect-scrollbar {
   .ps-content {
     position: inherit;
@@ -27,3 +36,10 @@ perfect-scrollbar {
     height: inherit;
   }
 }
+
+.ps__rail-y {
+  left: auto !important;
+  & > .ps__thumb-y {
+    margin-right: -2px;
+  }
+}

projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss

@@ -1,52 +1,15 @@
 $tablet-l-width: 1024px;
 $tablet-s-width: 768px;
 
-::ng-deep .sticker-selector {
+.sticker-selector {
-  height: 210px;
+  .mat-tab-group {
-  border-top: 1px solid #cccccc;
+    height: 200px;
-  .mat-tab-header {
-    .mat-tab-label {
-      //padding: 0 10px;
-      min-width: 16%;
-      @media screen and (max-width: #{$tablet-s-width}) {
-        padding: 0 10px;
-      }
-    }
-  }
-  .mat-tab-body-wrapper {
-    height: 150px !important;
-    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: 10px 20px 0;
-  overflow: auto;
-
-  .sticker-item {
-    width: 60px;
-    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 {
+  height: 80px;
+  border-top: 1px solid #cccccc;
   position: relative;
   padding: 10px 20px;
   text-align: right;
@@ -63,3 +26,27 @@ $tablet-s-width: 768px;
     color: #ffffff;
   }
 }
+
+.sticker-item-box {
+  flex-wrap: wrap;
+  padding: 10px 20px 0;
+  overflow: auto;
+  height: 150px !important;
+  overflow: auto;
+
+  @media screen and (max-width: #{$tablet-s-width}) {
+    height: 130px;
+  }
+
+  .sticker-item {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 10px;
+    display: inline-flex;
+    cursor: pointer;
+    @media screen and (max-width: #{$tablet-s-width}) {
+      width: 50px;
+      height: 50px;
+    }
+  }
+}