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

user list designed

Browse Source
This commit is contained in:
김남중 2019-10-10 10:03:25 +09:00
parent 6747e06b5c
commit eb6b543b39
6 changed files with 225 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
projects/ucap-webmessenger-app/src/app/pages/template/components/template.page.component.html
View File

@ -1,11 +1,21 @@
<div>
<h3>User-list-item</h3>
<div>
<ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [presence]='presence'>
<ucap-profile-user-list-item
[userInfo]="userInfo"
[profileImageRoot]="profileImageRoot"
[presence]="presence"
></ucap-profile-user-list-item>
<ucap-profile-user-list-item
[userInfo]="userInfo"
[profileImageRoot]="profileImageRoot"
>
</ucap-profile-user-list-item>
<ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot">
</ucap-profile-user-list-item>
<ucap-profile-user-list-item [userInfo]="userInfo" [profileImageRoot]="profileImageRoot" [checkable]='true'>
<ucap-profile-user-list-item
[userInfo]="userInfo"
[profileImageRoot]="profileImageRoot"
[checkable]="true"
>
</ucap-profile-user-list-item>
</div>
</div>

44
projects/ucap-webmessenger-app/src/assets/scss/global/_common.scss Normal file
View File

@ -0,0 +1,44 @@
@charset 'utf-8';
$listH-row3: 90px;
$checkbox-size: 16px;
$presence-size: 10px;
$thumbnail-msize: 50px !global;
$bg-list-hover: #efefef !global;
@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;
}
@function position-m($h, $o, $p) {
@return ($h - $o - $p) / 2;
}
@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;
}
}

47
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss Normal file
View File

@ -0,0 +1,47 @@
@charset 'utf-8';
html {
height: 100%;
overflow-y: scroll;
}
body {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #333;
font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
Gulim, '굴림';
font-size: 12px;
line-height: 18px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div,
p,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
iframe,
dl,
dt,
dd {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}

3
projects/ucap-webmessenger-app/src/assets/scss/ucap.scss
View File

@ -12,3 +12,6 @@
@import 'partials/icons';
@import 'partials/normalize';
@import 'partials/scrollbars';
//creative
@import 'global/default';

28
projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
View File

@ -1,12 +1,20 @@
<div matRipple>
<span *ngIf='presence'>{{ presence.pcStatus }} </span>
<img src='{{ profileImageRoot + userInfo.profileImageFile }}'>
<span>
{{ userInfo.name }} {{ userInfo.grade }}
</span>
<span>
<!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple> 클래스에 checkbox만 추가-->
<div class="list-item checkbox" matRipple>
<!--presence-pcOn , presence-pcOut presence-pcOff , presence-pcOther-->
<span class="presence-pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
<div class="item-default">
<img
class="thumbnail"
src="{{ profileImageRoot + userInfo.profileImageFile }}"
/>
<ul class="info">
<li class="name">{{ userInfo.name }} {{ userInfo.grade }}</li>
<li class="dept">
{{ userInfo.deptName }}
</span>
<span>{{ userInfo.intro }}</span>
<mat-checkbox *ngIf='checkable'></mat-checkbox>
가나다라마바사아자차카파하가나다라마바사아자차카파하
</li>
<li class="record">{{ userInfo.intro }}</li>
</ul>
</div>
<mat-checkbox *ngIf="checkable"></mat-checkbox>
</div>

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

@ -0,0 +1,98 @@
@charset 'utf-8';
@import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss';
%list-item {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: $listH-row3;
border-bottom: 1px solid #dddddd;
padding: 14px;
}
%presence {
display: inline-block;
width: $presence-size;
height: $presence-size;
vertical-align: middle;
margin-top: position-m($thumbnail-msize, $presence-size, 0) * -1;
text-indent: -10000000px;
margin-right: 10px;
border-radius: 100px;
}
.list-item {
@extend %list-item;
&:hover {
background-color: $bg-list-hover;
}
.presence {
&-pcOn {
@extend %presence;
@include presence-status(pcOn);
}
&-pcOut {
@extend %presence;
@include presence-status(pcOut);
}
&-pcOff {
@extend %presence;
@include presence-status(pcOff);
}
&-pcOther {
@extend %presence;
@include presence-status(pcOther);
}
}
.mat-checkbox {
padding-left: 10px;
}
}
.item-default {
display: flex;
width: 100%;
.thumbnail {
width: $thumbnail-msize;
height: $thumbnail-msize;
margin-right: 12px;
@include border-radius(100px);
}
.info {
display: inline-block;
margin: 0;
padding: 0;
width: calc(100% - 62px);
li {
margin-bottom: 4px;
@include ellipsis(1);
&.name {
display: block;
font-size: 15px;
font-weight: bold;
@include ellipsis(1);
}
&.dept {
display: block;
font-size: 13px;
}
&.record {
//@include visible(none);
}
}
}
}
.list-item {
span[class*='presence'] {
+ .item-default {
width: calc(100% - 20px);
}
}
&.checkbox {
.item-default {
width: calc(100% - 30px);
}
}
}