프로필- 개인정보 추가
This commit is contained in:
khk
parent
73e2632044
commit
2cea9e4cd1
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -66,7 +66,6 @@ $thumbnail-msize: 40px;
|
|||
.thumbnail {
|
||||
width: $thumbnail-msize;
|
||||
height: auto;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user