From 04cbdb6d71a9c025415f8131d7c5407951af4d07 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Fri, 3 Jan 2020 17:31:22 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=9C=EC=9D=B8=EC=84=A4=EC=A0=95=20-=20?=
 =?UTF-8?q?=ED=8F=B0=ED=8A=B8=EC=84=A4=EC=A0=95=20=EC=B6=95=EC=86=8C?=
 =?UTF-8?q?=ED=99=95=EB=8C=80,=20=ED=94=84=EB=A1=9C=ED=95=84=20=ED=9C=B4?=
 =?UTF-8?q?=EA=B0=80=EC=9E=90=20=EC=A0=95=EB=B3=B4=20=EC=83=89=EC=83=81=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../native/components/top-bar.component.html  | 50 +++++++++++++------
 .../native/components/top-bar.component.scss  | 25 ++++++++++
 .../src/lib/components/profile.component.html |  3 +-
 .../src/lib/components/profile.component.scss | 20 +++++++-
 4 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 64c53e4c..4c95f5d2 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -322,22 +322,44 @@
 </mat-toolbar>
 
 <mat-menu #profileMenu="matMenu" class="myset">
-  <div class="setting"><button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button></div>
+  <div class="setting">
+    <button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button>
+  </div>
   <div class="setting"><button mat-menu-item>상태 메시지 설정</button></div>
-  <div class="setting"><button mat-menu-item>축소</button><span>100%</span><button mat-menu-item>확대</button></div>
-  <div class="setting"><button mat-menu-item (click)="onClickSettings()">설정</button></div>
+  <div class="setting">
+    <button mat-menu-item class="zoom minus-square">축소</button
+    ><span class="set-size">100%</span
+    ><button mat-menu-item class="zoom plus-square">확대</button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item (click)="onClickSettings()">설정</button>
+  </div>
   <mat-divider></mat-divider>
-  <div class="setting"><button mat-menu-item (click)="onClickLogout()">로그아웃</button></div>
+  <div class="setting">
+    <button mat-menu-item (click)="onClickLogout()">로그아웃</button>
+  </div>
 </mat-menu>
 
 <mat-menu #presenseMenu="matMenu" class="status-pc-set">
-  <div class="setting"><button mat-menu-item><span class="presence pcOn"> </span>온라인</button></div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOut"> </span>부재중</button><button mat-menu-item
-      class="clock"></button></div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>다른용무중</button><button mat-menu-item
-      class="edit"></button></div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>회의중</button><button mat-menu-item
-      class="edit"></button></div>
-  <div class="setting"><button mat-menu-item><span class="presence pcOther"> </span>집중근무중</button><button mat-menu-item
-      class="edit"></button></div>
-</mat-menu>
\ No newline at end of file
+  <div class="setting">
+    <button mat-menu-item><span class="presence pcOn"> </span>온라인</button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item><span class="presence pcOut"> </span>부재중</button
+    ><button mat-menu-item class="clock"></button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item>
+      <span class="presence pcOther"> </span>다른용무중</button
+    ><button mat-menu-item class="edit"></button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item><span class="presence pcOther"> </span>회의중</button
+    ><button mat-menu-item class="edit"></button>
+  </div>
+  <div class="setting">
+    <button mat-menu-item>
+      <span class="presence pcOther"> </span>집중근무중</button
+    ><button mat-menu-item class="edit"></button>
+  </div>
+</mat-menu>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
index b7ad41a2..c5dc8598 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
@@ -218,6 +218,31 @@
       display: flex;
       flex-flow: row;
       align-items: center;
+      height: 48px;
+      .zoom {
+        height: 16px;
+        background-repeat: no-repeat;
+        &.plus-square {
+          margin-left: 10px;
+          padding-left: 26px;
+          background-position: left 50%;
+          line-height: normal;
+          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
+        }
+        &.minus-square {
+          margin-right: 10px;
+          padding-right: 26px;
+          background-position: right 50%;
+          line-height: normal;
+          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");
+        }
+        &:hover {
+          background-repeat: no-repeat;
+        }
+      }
+      .set-size {
+        margin: 0 10px;
+      }
     }
   }
 }
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
index 9a8ace9a..0c4842c6 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
@@ -25,9 +25,10 @@
         <span class="mdi mdi-upload mdi-18px"></span>
       </button>
 
+      <!--morning-off:오전 afternoon-off:오후  day-off:휴가 long-time:장기  leave-of-absence:휴직-->
       <span
         *ngIf="getWorkstatus(userInfo).length > 0"
-        class="work-status text-accent-darkest"
+        class="work-status afternoon-off"
       >
         {{ getWorkstatus(userInfo) }}
       </span>
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 dcc086d4..9d27947e 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
@@ -61,12 +61,28 @@
       .work-status {
         display: inline-flex;
         height: 24px;
-        background-color: #ffffff;
+        border: 1px solid #ffffff;
         padding: 4px 14px;
         border-radius: 100px;
         font-size: 13px;
         justify-content: center;
         align-items: center;
+        color: #ffffff;
+        &.morning-off {
+          background-color: #11845d;
+        }
+        &.afternoon-off {
+          background-color: #875acb;
+        }
+        &.day-off {
+          background-color: #2b98eb;
+        }
+        &.long-time {
+          background-color: #c72f20;
+        }
+        &.leave-of-absence {
+          background-color: #e7853e;
+        }
       }
     }
 
@@ -218,7 +234,7 @@
       display: flex;
       width: 40px;
       height: 40px;
-      line-height: 40px;
+      //line-height: 40px;
       .mat-button-wrapper {
         padding: 0;
         fill: #ffffff;