ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

위젯- 마이프로필 수정

Browse Source
This commit is contained in:
khk 2019-12-31 15:49:48 +09:00
parent 23d188faac
commit ccc7b981fd
2 changed files with 55 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html
View File

@ -1,5 +1,5 @@
<div class="myprofile"> <div class="myprofile">
<span class="myprofile-img"> <span class="myprofile-img thumbnail-mask">
<img <img
class="thumbnail" class="thumbnail"
ucapImage ucapImage
@ -8,5 +8,20 @@
[default]="'assets/images/img_nophoto_50.png'" [default]="'assets/images/img_nophoto_50.png'"
/> />
</span> </span>
<span>내프로필</span> <div class="btn-setting">
<span class="presence pcOff"></span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="butt"
stroke-linejoin="round"
>
<path d="M6 9l6 6 6-6" />
</svg>
</div>
</div> </div>

52
projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss
View File

@ -1,26 +1,50 @@
.myprofile { .myprofile {
position: absolute; position: relative;
display: flex; flex-flow: row;
flex-flow: column; width: 60px;
justify-content: center; height: 30px;
height: 80px;
width: 68px;
bottom: 10px; bottom: 10px;
color: #ffffff; color: #ffffff;
font-size: 11px; font-size: 11px;
text-align: center; justify-items: flex-end;
margin: 0 10px;
.myprofile-img { .myprofile-img {
display: block; display: block;
border-radius: 10px; border-radius: 10px;
height: 42px; height: 30px;
width: 42px; width: 30px;
background-color: #efefef; background-color: #efefef;
align-self: center; &.thumbnail-mask {
margin-bottom: 6px; border-radius: 50%;
width: 30px;
.thumbnail { height: 30px;
border-radius: 10px; overflow: hidden;
.thumbnail {
width: 30px;
height: auto;
}
}
}
.btn-setting {
position: absolute;
bottom: 0;
display: inline-flex;
justify-items: flex-end;
left: 20px;
.presence {
display: inline-block;
bottom: 0;
width: 10px;
height: 11px;
border: 1px solid #ffffff;
align-self: flex-end;
}
svg {
padding-left: 6px;
&.on {
transform: rotate(180deg);
}
} }
} }
} }