Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger
This commit is contained in:
commit
d6f32316ee
|
|
@ -1,10 +1,12 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
$listH-row3: 90px;
|
||||
$listH-row2: 60px;
|
||||
$checkbox-size: 16px;
|
||||
$presence-size: 10px;
|
||||
$thumbnail-msize: 50px !global;
|
||||
$bg-list-hover: #efefef !global;
|
||||
$thumbnail-msize: 40px;
|
||||
$bg-list-hover: #efefef;
|
||||
$bg-list-item-msg: #f0f4f6;
|
||||
|
||||
@mixin ellipsis($row) {
|
||||
overflow: hidden;
|
||||
|
|
@ -28,9 +30,6 @@ $bg-list-hover: #efefef !global;
|
|||
@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;
|
||||
|
|
@ -42,3 +41,6 @@ $bg-list-hover: #efefef !global;
|
|||
background-color: #f0c10a;
|
||||
}
|
||||
}
|
||||
@function position-m($h, $o, $p) {
|
||||
@return ($h - $o - $p) / 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,29 @@
|
|||
<!--체크박스 보여줄때는 <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">
|
||||
<div class="list-item" matRipple>
|
||||
<!--pcOn , pcOut pcOff , pcOther-->
|
||||
<span class="presence pcOn" *ngIf="presence">{{ presence.pcStatus }} </span>
|
||||
<dl class="item-default">
|
||||
<dt>
|
||||
<img
|
||||
class="thumbnail"
|
||||
src="{{ profileImageRoot + userInfo.profileImageFile }}"
|
||||
/>
|
||||
<ul class="info">
|
||||
<li class="name">{{ userInfo.name }} {{ userInfo.grade }}</li>
|
||||
<li class="dept">
|
||||
</dt>
|
||||
<dd class="info">
|
||||
<div class="detail">
|
||||
<span class="name">
|
||||
<b>{{ userInfo.name }}</b>
|
||||
{{ userInfo.grade }}
|
||||
</span>
|
||||
<span class="dept">
|
||||
{{ userInfo.deptName }}
|
||||
가나다라마바사아자차카파하가나다라마바사아자차카파하하가나다
|
||||
</li>
|
||||
<li class="record">{{ userInfo.intro }}</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
<div class="msg-status">
|
||||
{{ userInfo.intro }}상태메시지 상태메시지 상태메시지
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
<mat-checkbox *ngIf="checkable"></mat-checkbox>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,21 +6,31 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: $listH-row3;
|
||||
height: $listH-row2;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
padding: 14px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
%presence {
|
||||
display: inline-block;
|
||||
width: $presence-size;
|
||||
height: $presence-size;
|
||||
vertical-align: middle;
|
||||
margin-top: position-m($thumbnail-msize, $presence-size, 0) * -1;
|
||||
//margin-top: position-m($listH-row2, $presence-size, 0);
|
||||
align-items: center;
|
||||
text-indent: -10000000px;
|
||||
margin-right: 10px;
|
||||
margin-right: 8px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
%msg-status {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
background-color: $bg-list-item-msg;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
@include ellipsis(20);
|
||||
@include border-radius(4px);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
@extend %list-item;
|
||||
|
|
@ -28,20 +38,17 @@
|
|||
background-color: $bg-list-hover;
|
||||
}
|
||||
.presence {
|
||||
&-pcOn {
|
||||
@extend %presence;
|
||||
&.pcOn {
|
||||
@include presence-status(pcOn);
|
||||
}
|
||||
&-pcOut {
|
||||
@extend %presence;
|
||||
&.pcOut {
|
||||
@include presence-status(pcOut);
|
||||
}
|
||||
&-pcOff {
|
||||
@extend %presence;
|
||||
&.pcOff {
|
||||
@include presence-status(pcOff);
|
||||
}
|
||||
&-pcOther {
|
||||
@extend %presence;
|
||||
&.pcOther {
|
||||
@include presence-status(pcOther);
|
||||
}
|
||||
}
|
||||
|
|
@ -60,39 +67,65 @@
|
|||
@include border-radius(100px);
|
||||
}
|
||||
.info {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: calc(100% - 62px);
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
width: calc(100% - 50px);
|
||||
.detail {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
@include ellipsis(1);
|
||||
&.name {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.dept {
|
||||
font-size: 12px;
|
||||
@include ellipsis(1);
|
||||
}
|
||||
&.dept {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
&.record {
|
||||
//@include visible(none);
|
||||
.msg-status {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
@extend %msg-status;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//가변에 따른 list-item width값 변경
|
||||
.list-item {
|
||||
span[class*='presence'] {
|
||||
.item-default {
|
||||
.detail {
|
||||
width: 60%;
|
||||
}
|
||||
.msg-status {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
.presence {
|
||||
+ .item-default {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
&.checkbox {
|
||||
.presence {
|
||||
+ .item-default {
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
.item-default {
|
||||
width: calc(100% - 30px);
|
||||
.info {
|
||||
.detail {
|
||||
width: 100%;
|
||||
}
|
||||
.msg-status {
|
||||
@include visible(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user