프로필- 개인정보 추가

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

@@ -5,7 +5,16 @@
         <img ucapImage [base]="profileImageRoot" [path]="userInfo.profileImageFile"
         [default]="'assets/images/img_nophoto_50.png'" />
       </div>
-      <span class="work-status">
+
+      <button mat-mini-fab class="mat-elevation-z6 btn-upload-profile-image" *ngIf="isMe && editableProfileImage"
+        matTooltip="프로필 이미지 변경" matTooltipPosition="above" [disabled]="
+                        profileImageFileUploadItem &&
+                        profileImageFileUploadItem.uploadingProgress$
+                      " (click)="profileImageFileInput.click()">
+        <span class="mdi mdi-upload mdi-18px"></span>
+      </button>
+
+      <span class="work-status text-accent-darkest">
         {{ getWorkstatus(userInfo) }} 휴가중
       </span>
 
@@ -13,26 +22,20 @@
                   profileImageFileUploadItem &&
                   profileImageFileUploadItem.uploadingProgress$
                 " mode="determinate" strokeWidth="5" diameter="84"
-        [value]="profileImageFileUploadItem.uploadingProgress$ | async" class="upload-profile-image-spinner">1111</mat-spinner>
+        [value]="profileImageFileUploadItem.uploadingProgress$ | async" class="upload-profile-image-spinner"></mat-spinner>
 
-      <button mat-mini-fab class="mat-elevation-z6 upload-profile-image-btn" *ngIf="isMe && editableProfileImage"
-        matTooltip="프로필 이미지 변경" matTooltipPosition="above" [disabled]="
-                  profileImageFileUploadItem &&
-                  profileImageFileUploadItem.uploadingProgress$
-                " (click)="profileImageFileInput.click()">
-        <span class="mdi mdi-upload mdi-18px">2222</span>
-      </button>
       <input type="file" #profileImageFileInput style="display: none" (change)="onChangeFileInput()" />
 
     </div>
 
     <mat-card-title>
-      <span>{{ userInfo | ucapTranslate: 'name' }}</span>
-      <span>{{ userInfo | ucapTranslate: 'grade' }}</span>
+      <span class="name">{{ userInfo | ucapTranslate: 'name' }}</span>
+      <span class="number">(A123456)</span>
     </mat-card-title>
-    <mat-card-subtitle>{{
-      userInfo | ucapTranslate: 'deptName'
-    }}</mat-card-subtitle>
+    <mat-card-subtitle>
+      <span class="deptName">{{userInfo | ucapTranslate: 'deptName'}}</span>
+      <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
+    </mat-card-subtitle>
 
     <div class="intro">{{ userInfo.intro }}가나다라라라마마마바사아자차카타파하가나다라마사아자차카타파하가나다라마사아자차카타파하가나다라마사아자차카타파하가나다라마사아자차카타파하</div>
 
@@ -80,9 +83,13 @@
         <dd>{{ userInfo.workplace }}</dd>
       </li>
       <li>
-        <dt class="division">담당업무</dt>
+        <dt class="division">담당업무/근무지</dt>
         <dd>{{ userInfo.responsibilities }}</dd>
       </li>
+      <li>
+        <dt class="division">사원직무/거래처</dt>
+        <dd>가나다라마바사아자차카타파하</dd>
+      </li>
       <li>
         <dt class="division">이메일</dt>
         <dd>{{ userInfo.email }}</dd>

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

@@ -42,7 +42,7 @@
       flex-flow: row;
       align-items: flex-end;
       top: 20px;
-      margin-bottom: 20px;
+      margin-bottom: 16px;
 
       &-mask {
         width: 80px;
@@ -57,40 +57,40 @@
           background-color: #efefef;
         }
       }
+
       .work-status {
         display: inline-flex;
         height: 24px;
         background-color: #ffffff;
         padding: 4px 14px;
         border-radius: 100px;
-        color: #777777;
         font-size: 13px;
         justify-content: center;
         align-items: center;
       }
-
-      /*.upload-profile-image-spinner {
-        position: absolute;
-        top: 90px;
-        left: 160px;
-      }
-
-      .upload-profile-image-btn {
-        position: absolute;
-        top: 140px;
-        left: 210px;
-      }*/
     }
+
     .mat-card-title {
       display: flex;
+      flex-flow: column;
       margin-top: 120px;
       span {
         @include ellipsis(1);
+        &.number {
+          font-size: 0.8em;
+        }
       }
     }
     .mat-card-subtitle {
       margin-left: -16px;
-      font-size: 1.2em;
+      font-size: 1.1em;
+      flex-flow: column;
+      span {
+        @include ellipsis(1);
+        &.deptName {
+          font-size: 1.2em;
+        }
+      }
     }
     .intro {
       @include ellipsis(3);
@@ -142,15 +142,15 @@
         height: 30px;
         align-items: center;
         flex-flow: row;
-        margin-bottom: 20px;
+        margin-bottom: 16px;
         dt {
-          width: 100px;
+          width: 120px;
           font-weight: 800;
           @include ellipsis(1);
         }
         dd {
-          width: 260px;
-          margin-right: 10px;
+          width: 240px;
+          margin-right: 20px;
           @include ellipsis(1);
         }
       }
@@ -166,6 +166,25 @@
   }
 }
 
+::ng-deep .btn-upload-profile-image {
+  display: flex;
+  margin-left: -26px;
+  margin-right: 10px;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  justify-content: center;
+  justify-content: center;
+  &.mat-mini-fab {
+    .mat-button-wrapper {
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      padding: 0;
+    }
+  }
+}
+
 ::ng-deep .userInfo-call {
   position: relative;
   display: flex;
@@ -197,7 +216,6 @@
     &.mat-mini-fab {
       position: relative;
       display: flex;
-      flex: 0 0 auto;
       width: 40px;
       height: 40px;
       line-height: 40px;

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

@@ -66,7 +66,6 @@ $thumbnail-msize: 40px;
     .thumbnail {
       width: $thumbnail-msize;
       height: auto;
-      margin-right: 16px;
     }
   }