테마, 컴포넌트 분리

projects/ucap-webmessenger-app/src/app/app.theme.scss

@@ -43,6 +43,7 @@ body.theme-default {
 
   // Apply the theme to the user components
   @include components-theme($theme);
+  @include  ucap-material-theme($theme);
 }
 
 // -----------------------------------------------------------------------------------------------------

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

@@ -1,21 +1,20 @@
-.current-head{
+@charset 'utf-8';
-  display:flex;
+.current-head {
+  display: flex;
   justify-content: center;
-  padding:0 10px;
+  padding: 0 10px;
-  height:60px;
+  height: 60px;
-  h3{
+  h3 {
-    display:inline-flex;
+    display: inline-flex;
-    padding-left:10px;
+    padding-left: 10px;
     align-items: center;
   }
-  .btn-box{
+  .btn-box {
     height: 100%;
-    margin-left:auto;
+    margin-left: auto;
-    display:inline-flex;
+    display: inline-flex;
     align-items: center;
-    .mat-icon-button{
+    .mat-icon-button {
-
     }
   }
-
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html

@@ -30,13 +30,16 @@
     </div>
   </div>
   <div *ngIf="!isUserSelect" class="btn-box">
-    <button mat-stroked-button (click)="onClickShowSelectedUserList()">
+    <!--선택된 후에는 disabled="true" 빼주세요. -->
+    <button mat-stroked-button  class="mat-primary" (click)="onClickShowSelectedUserList()">
       선택<span *ngIf="selectedUserList.length > 0"
         >({{ selectedUserList.length }})</span
       >
     </button>
-    <button mat-stroked-button (click)="onClickAddGroup()">그룹에 추가</button>
+    <ul>
-    <button mat-stroked-button (click)="onClickChatOpen()">대화</button>
+    <li><button mat-flat-button (click)="onClickAddGroup()" class="mat-primary">그룹에 추가</button></li>
-    <button mat-stroked-button (click)="onClickConference()">화상회의</button>
+    <li><button mat-flat-button (click)="onClickChatOpen()" class="mat-primary">대화</button></li>
+    <li><button mat-flat-button (click)="onClickConference()" class="mat-primary">화상회의</button></li>
+    </ul>
   </div>
 </div>

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

@@ -1,28 +1,76 @@
+@charset 'utf-8';
+
+@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;
+  }
+}
+
 .oraganization-tab {
   height: 100%;
-
   .oraganization-tab-tree {
     overflow-y: auto;
   }
 }
-.btn-box {
+.btn-box{
-  height: 80px;
+  height:100px;
   position: absolute;
-  bottom: 0;
+  bottom:0;
-  border-top: 1px solid #ddd;
+  border-top:1px solid #ddd;
   align-items: center;
-  width: 100%;
+  width:100%;
-  background-color: #ffffff;
+  background-color:#ffffff;
 }
-.select-dept {
+.select-dept{
-  border-top: 1px solid #dddddd;
+  border-top:1px solid #dddddd;
-  height: 40px;
+  height:40px;
-  width: 100%;
+  width:100%;
-  display: inline-flex;
+  display:inline-flex;
   align-items: center;
-  padding: 0 10px;
+  padding:0 10px;
 }
-.select-list {
+.search-list{
   height: calc(100% - 120px);
   overflow: auto;
+  .list-item{
+    height:70px;
+  }
+}
+.btn-box{
+  padding:10px;
+  button{
+    width:100%;
+     @include ellipsis(1);
+  }
+  ul{
+    display:flex;
+    flex-flow: row;
+    align-content: space-between;
+    margin-top:4px;
+    li{
+      display:inline-flex;
+      align-items: center;
+      flex-grow: 1;
+      width:33%;
+      margin-right: 4px;
+       &:last-child{
+        margin-right: 0;
+      }
+      button{
+        text-align:center;
+        width:100%;
+        height:100%;
+        padding: 0 6px;
+      }
+    }
+  }
 }

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

@@ -1,5 +1,19 @@
 @charset 'utf-8';
-@import '../../../../assets/scss/global/common';
+$line-basic:1px solid #dddddd;
+@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;
+  }
+}
 :host {
   display: flex;
   width: 100%;

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

@@ -7,7 +7,7 @@
     </ucap-account-login>
   </div>
 
-  <button
+  <!--<button
     mat-raised-button
     color="accent"
     class="submit-button"
@@ -15,5 +15,5 @@
     (click)="onClickTemplate()"
   >
     Template
-  </button>
+  </button>-->
 </div>

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

@@ -1,9 +1,14 @@
 .login {
   width: 100%;
   background-size: cover;
+  height: 100%;
+  background: #eaeff1;
+  background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
+  background: linear-gradient(to top, #93a3af, #eaeff1);
 
   .login-wrapper {
     flex: 1 0 auto;
-    padding: 32px;
+    background: url(/assets/images/bg_login.png)no-repeat 50% bottom;
+    background-size: 100% auto;
   }
 }

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

@@ -1,52 +0,0 @@
-@charset 'utf-8';
-
-$listH-row3: 120px;
-$listH-row2: 90px;
-$listH-row2-s: 70px;
-$checkbox-size: 16px;
-$presence-size: 8px;
-$thumbnail-msize: 40px;
-$bg-list-hover: #efefef;
-$bg-list-item-msg: #f0f4f6;
-
-$font-dark: #212121;
-$font-mid: #666666;
-$font-light: #848d95;
-$font-white: #ffffff;
-
-$line-basic: 1px solid #dddddd;
-$color-main: #ee278b;
-
-@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;
-  }
-}
-@mixin border-radius($radius) {
-  border-radius: $radius;
-  -webkit-border-radius: $radius;
-  -moz-border-radius: $radius;
-}
-@mixin visible($sh) {
-  display: $sh;
-}
-@mixin presence-status($status) {
-  @if $status == pcOn {
-    background-color: #28ad66;
-  } @else if $status == pcOut {
-    background-color: #f35b5b;
-  } @else if $status == pcOff {
-    background-color: #a29f9f;
-  } @else if $status == pcOther {
-    background-color: #f0c10a;
-  }
-}

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

@@ -45,3 +45,36 @@ ul,
 ol {
   list-style: none;
 }
+@mixin ucap-material-theme($theme) {
+  @include ucap-core-theme($theme);
+}
+
+
+@mixin ucap-core-theme($theme) {
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .bg-primary-color {
+    background: mat-color($primary);
+    color: mat-color($primary, default-contrast);
+  }
+  .bg-accent-color{
+      background: mat-color($accent);
+      color: mat-color($accent, default-contrast);
+  }
+  .text-primary-color{
+    color: mat-color($primary);
+  }
+  .text-accent-color{
+    color: mat-color($accent);
+  }
+  .border-primary-color{
+    border:1px solid mat-color($primary);
+  }
+   .border-accent-color{
+    border:1px solid mat-color($accent);
+  }
+}

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

@@ -1,8 +1,8 @@
 <div class="login-form">
-  <div class="title">LOGIN TO YOUR ACCOUNT</div>
+  <div class="mat-title">LOGIN TO YOUR ACCOUNT</div>
 
   <form name="loginForm" [formGroup]="loginForm" novalidate>
-    <mat-form-field appearance="outline">
+    <mat-form-field >
       <mat-label>Company</mat-label>
       <mat-select formControlName="companyCode" required>
         <mat-option
@@ -16,7 +16,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field appearance="outline">
+    <mat-form-field>
       <mat-label>Login ID</mat-label>
       <input matInput formControlName="loginId" />
       <mat-error *ngIf="loginForm.get('loginId').hasError('required')">
@@ -27,7 +27,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field appearance="outline">
+    <mat-form-field >
       <mat-label>Password</mat-label>
       <input matInput type="password" formControlName="loginPw" #loginPw />
       <mat-error>
@@ -61,4 +61,5 @@
     <span class="text">Don't have an account?</span>
     <a class="link">Create an account</a>
   </div>
+  <div class="policy"><a class="link">개인정보 처리방침</a></div>
 </div>

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

@@ -1,11 +1,15 @@
+
 .login-form {
+  position: relative;
   width: 384px;
   max-width: 384px;
-  padding: 32px;
+  padding: 50px;
   text-align: center;
+  background-color: rgba( 255, 255, 255, 0.8 );
+  border-radius: 0px;
+  box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
 
-  .title {
+  .mat-title {
-    font-size: 20px;
     margin: 16px 0 32px 0;
   }
 
@@ -37,8 +41,8 @@
     }
 
     .submit-button {
-      width: 220px;
+      width: 100%;
-      margin: 16px auto;
+      margin: 0 auto;
       display: block;
     }
   }
@@ -85,6 +89,15 @@
       }
     }
   }
+  .policy{
+    position: absolute;
+    bottom:0;
+    width:100%;
+    padding:10px;
+    left:0;
+    background-color: #4f586b;
+    color: #ffffff;
+  }
 
   button {
     &.google,

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -47,7 +47,7 @@
       type="submit"
       aria-label="Send message"
     >
-      <i class="material-icons">
+      <i class="material-icons bg-primary-color">
         send
       </i>
     </button>

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss

@@ -1,3 +1,5 @@
+@charset 'utf-8';
+
 .container {
   display: flex;
   flex-direction: column;
@@ -28,8 +30,7 @@
 }
 .send-message-button {
   margin-left: 20px;
-  i {
+  i{
-    background-color: #ff3399;
     display: inline-block;
     width: 40px;
     height: 40px;
@@ -38,7 +39,7 @@
     font-size: 20px;
     color: #ffffff;
     &:hover{
-      background-color: #333333;
+      opacity: 0.8;
     }
   }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss

@@ -85,6 +85,7 @@
     width: 100%;
     li {
       width: 50%;
+      height: 100%;
       display: inline-block;
       text-align: center;
       align-items: center;
@@ -96,6 +97,7 @@
       .mat-button {
         width: 100%;
         display: block;
+        height: 100%;
       }
     }
   }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/date-splitter.component.scss

@@ -13,6 +13,6 @@
     width: 160px;
     font-size: 13px;
     text-align: center;
-    font-weight: 500;
+    font-weight: 600;
   }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.scss

@@ -1,5 +1,20 @@
 @charset 'utf-8';
-@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
+
+@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;
+  }
+}
+
 .bubble-main {
   padding: 14px;
   text-align: left;

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html

@@ -3,5 +3,3 @@
     {{ message.sentMessage }}
   </span>
 </div>
-
-

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss

@@ -44,6 +44,7 @@
     width: 100%;
     li {
       width: 50%;
+      height:100%;
       display: inline-block;
       text-align: center;
       align-items: center;
@@ -54,6 +55,7 @@
       }
       .mat-button {
         width: 100%;
+        height:100%;
         display: block;
       }
     }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -8,14 +8,15 @@
       contact: message.senderSeq !== loginRes.userSeq
     }"
   >
-    <div>
+
     <ucap-chat-message-box-date-splitter
       *ngIf="getDateSplitter(i)"
+      class="date-splitter"
       [message]="message"
     >
     </ucap-chat-message-box-date-splitter>
-    </div>
 
+    <div class="chat-row">
       <div
         *ngIf="getIsInformation(message); then information; else contents"
       ></div>
@@ -134,4 +135,5 @@
         </div>
       </ng-template>
     </div>
+  </div>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss

@@ -139,11 +139,25 @@ $meBox-bg: #ffffff;
   padding: 30px 40px;
   display: flex;
   flex-direction: column;
-  .message-row {
+}
+
+.message-row {
+  margin-bottom: 30px;
+  .date-splitter{
+    display:block;
+    width:100%;
+    margin-bottom:10px;
+  }
+  .chat-row{
     position: relative;
     display: flex;
     flex-direction: row;
+    .profile-img {
+      flex: 0 0 auto;
+    }
+  }
   &.me {
+    .chat-row{
       flex-direction: row-reverse;
       .profile-info {
         flex-direction: row-reverse;
@@ -152,13 +166,7 @@ $meBox-bg: #ffffff;
       }
      }
   }
-}
 
-.message-row {
-  margin-bottom: 30px;
-  .profile-img {
-    flex: 0 0 auto;
-  }
   .message-main {
     margin-left: 20px;
     margin-right: 10px;
@@ -203,6 +211,7 @@ $meBox-bg: #ffffff;
   .secondary-text {
     align-self: flex-end;
     font-size: 11px;
+    color:#666666;
     word-wrap: break-word;
     white-space: nowrap;
   }

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -1,3 +1,4 @@
+@charset 'utf-8';
 :host {
   display: flex;
   flex: 1;
@@ -7,25 +8,23 @@
     flex: 1 1 auto;
     width: 20px;
   }
-
 }
 
 ::ng-deep .groupExpansionPanel .mat-expansion-panel-body {
   padding: 0;
 }
-.mat-expansion-panel-header{
+.mat-expansion-panel-header {
-  height:40px ! important;
+  height: 40px !important;
   padding: 0 20px;
   .mat-expansion-panel-header-title {
     align-items: center;
     font-size: 13px;
   }
-  .mat-expansion-panel-header-description{
+  .mat-expansion-panel-header-description {
-    margin-right:0;
+    margin-right: 0;
   }
 }
 
-
 .mat-icon-button {
   margin-right: 0;
   width: inherit;

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss

@@ -1,3 +1,4 @@
+@charset 'utf-8';
 .organization-tree {
   padding:10px;
   ul,
@@ -46,8 +47,6 @@
   line-height: 20px;
   margin-right:10px;
   .mat-icon-rtl-mirror{
-      line-height: 14px;
-      font-size: 14px;
       border: 1px solid #dddddd;
       padding: 2px;
       font-size: 14px;

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss

@@ -1,6 +1,30 @@
 @charset 'utf-8';
-@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common';
 
+$font-dark: #212121;
+$font-mid: #666666;
+$font-light: #848d95;
+$font-white: #ffffff;
+$line-basic:1px solid #dddddd;
+$bg-list-item-msg: #f0f4f6;
+$bg-list-hover: #efefef;
+$listH-row2: 80px;
+$presence-size: 8px;
+$thumbnail-msize: 40px;
+
+@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;
+  }
+}
 
 %list-item {
   position: relative;
@@ -11,16 +35,7 @@
   border-bottom: $line-basic;
   padding: 20px;
 }
-%presence {
+
-  display: inline-block;
-  width: $presence-size;
-  height: $presence-size;
-  align-self: flex-start;
-  align-items: center;
-  text-indent: -10000000px;
-  margin-right: 4px;
-  border-radius: 100px;
-}
 %msg-status {
   display: inline-block;
   height: 40px;
@@ -30,7 +45,7 @@
   vertical-align: middle;
   align-items: center;
   @include ellipsis(2);
-  @include border-radius(4px);
+  border-radius: 4px;
 }
 
 .list-item {
@@ -38,21 +53,6 @@
   &:hover {
     background-color: $bg-list-hover;
   }
-  .presence {
-    @extend %presence;
-    &.pcOn {
-      @include presence-status(pcOn);
-    }
-    &.pcOut {
-      @include presence-status(pcOut);
-    }
-    &.pcOff {
-      @include presence-status(pcOff);
-    }
-    &.pcOther {
-      @include presence-status(pcOther);
-    }
-  }
   .mat-checkbox {
     padding-left: 10px;
   }
@@ -67,7 +67,7 @@
       width: $thumbnail-msize;
       height: $thumbnail-msize;
       margin-right: 16px;
-      @include border-radius(50%);
+      border-radius: 50%;
     }
   }
 
@@ -122,9 +122,15 @@
           width: 100%;
         }
         .msg-status {
-          @include visible(none);
+          display:none;
         }
       }
     }
   }
 }
+
+.org{
+  .list-item{
+    height:70px;
+  }
+}

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -1,5 +1,30 @@
 @charset 'utf-8';
-@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
+$font-dark: #212121;
+$font-mid: #666666;
+$font-light: #848d95;
+$font-white: #ffffff;
+$line-basic:1px solid #dddddd;
+$bg-list-hover: #efefef;
+$color-main:#e53096;
+$listH-row2: 80px;
+$presence-size: 8px;
+$thumbnail-msize: 40px;
+
+@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;
+  }
+}
+
 .profile {
   white-space: normal;
   text-align: left;
@@ -9,7 +34,6 @@
   padding: 16px;
   font-weight: 400;
   border-radius: 0;
-
   .avatar-wrapper {
     .avatar {
       margin-right: 16px;
@@ -28,7 +52,6 @@
 
   .profile-last-message-time {
     font-size: 12px;
-    margin-top: 4px;
   }
 
   .profile-mood {
@@ -61,7 +84,7 @@
     width: $thumbnail-msize;
     height: $thumbnail-msize;
     margin-right: 16px;
-    @include border-radius(100px);
+     border-radius:50%;
   }
   .info {
     position: relative;
@@ -92,7 +115,6 @@
       .room-msg {
         font-size: 12px;
         color: $font-mid;
-        margin-top: 4px;
         @include ellipsis(1);
       }
     }
@@ -125,7 +147,7 @@
   color: #ffffff;
   background-color: $color-main;
   @include ellipsis(1);
-  @include border-radius(100px);
+  border-radius:50%;
 }
 
 .notiBadge {

projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss

@@ -12,3 +12,5 @@
 @import 'partials/icons';
 @import 'partials/normalize';
 @import 'partials/scrollbars';
+@import 'partials/presence.scss';
+@import 'partials/list-item';

projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss

@@ -0,0 +1,16 @@
+@charset 'utf-8';
+
+.ellipsis{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+.ellipsis2{
+  overflow: hidden;
+  text-overflow: ellipsis;
+   -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+}

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

@@ -0,0 +1,25 @@
+%presence {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  align-self: flex-start;
+  align-items: center;
+  text-indent: -10000000px;
+  margin-right: 4px;
+  border-radius: 100px;
+}
+.presence{
+  @extend %presence;
+  &.pcOn {
+    background-color: #28ad66;
+  }
+  &.pcOut {
+    background-color: #f35b5b;
+  }
+  & .pcOff {
+    background-color: #a29f9f;
+  }
+  &.pcOther {
+    background-color: #f0c10a;
+  }
+}