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

Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

Browse Source
This commit is contained in:
richard-loafle 2020-01-30 14:22:45 +09:00
commit 968543f21d
2 changed files with 133 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
View File

@ -1,5 +1,4 @@
<div fxLayout="column" class="rightDrawer-notice">
<div fxLayout="column" fxFlex="1 1 auto" class="rightDrawer-notice">
<div class="search-area">
<ucap-integrated-search-form
[searchWord]="!!searchWord ? searchWord : ''"
@ -19,17 +18,27 @@
<perfect-scrollbar class="search-scrollbar">
<table mat-table [dataSource]="searchUserInfos">
<ng-container matColumnDef="profile">
<th
<!--<th
mat-header-cell
*matHeaderCellDef
#header
class="profile"
(mousedown)="resizeTable($event, header)"
>
>-->
<th mat-header-cell *matHeaderCellDef #header class="profile" >
{{ 'search.fieldProfile' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<div class="profile thumbnail-mask">
<td mat-cell *matCellDef ="let element">
<!--
{{ getPresence(element, PresenceType.PC) }}
{{ getPresence(element, PresenceType.MOBILE) }}
-->
<div class="profile">
<span
class="presence pcOn"
[ngClass]="getPresence(PresenceType.PC)"
></span>
<span class="thumbnail-mask">
<img
class="thumbnail"
ucapImage
@ -38,8 +47,12 @@
[default]="'assets/images/img_nophoto_50.png'"
(click)="onClickOpenProfile($event, element.seq)"
/>
</span>
<!--모바일 상태-->
<span class="text-accent-color marker-mobile-state">
<mat-icon>phone_android</mat-icon>
</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="name">
@ -52,20 +65,27 @@
>
{{ 'search.fieldName' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<div class="name">
<td mat-cell *matCellDef ="let element">
<div>
<!-- morning-off: 오전 afternoon-off: 오후 day-off: 휴가 long-time: 장기 leave-of-absence: 휴직-->
<span class="work-status morning-off">
{{ getWorkstatus(element) }}</span
>
<span class="name">
{{ element.name }}
</div>
<div class="status">
{{ getPresence(element, PresenceType.PC) }} /
{{ getPresence(element, PresenceType.MOBILE) }} /
{{ getWorkstatus(element) }}
</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="grade">
<th mat-header-cell *matHeaderCellDef #header class="grade" (mousedown)="resizeTable($event, header)">
<th
mat-header-cell
*matHeaderCellDef
#header
class="grade"
(mousedown)="resizeTable($event, header)"
>
{{ 'search.fieldGrade' | translate }}
</th>
<td mat-cell *matCellDef="let element" class="grade">
@ -84,7 +104,7 @@
>
{{ 'search.fieldDeptartment' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<td mat-cell *matCellDef ="let element">
<div class="deptName">
{{ element.deptName }}
</div>
@ -100,7 +120,7 @@
>
{{ 'search.fieldCompany' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<td mat-cell *matCellDef ="let element">
<div class="companyName">
{{ element.companyName }}
</div>
@ -117,7 +137,7 @@
>
{{ 'search.fieldOfficePhoneNumber' | translate }}
</th>
<td mat-cell *matCellDef="let element" class="lineNumber">
<td mat-cell *matCellDef ="let element" class="lineNumber">
<div class="lineNumber">
{{ element.lineNumber }}
</div>
@ -133,7 +153,7 @@
>
{{ 'search.fieldHandphone' | translate }}
</th>
<td mat-cell *matCellDef="let element" class="hpNumber">
<td mat-cell *matCellDef ="let element" class="hpNumber">
<div class="hpNumber">
{{ element.hpNumber }}
</div>
@ -149,7 +169,7 @@
>
{{ 'search.fieldEmail' | translate }}
</th>
<td mat-cell *matCellDef="let element" class="email">
<td mat-cell *matCellDef ="let element" class="email">
<div class="email">
{{ element.email }}
</div>
@ -165,7 +185,7 @@
>
{{ 'search.fieldResponsibilities' | translate }}
</th>
<td mat-cell *matCellDef="let element" class="responsibilities">
<td mat-cell *matCellDef ="let element" class="responsibilities">
<div class="responsibilities">
{{ element.responsibilities }}
</div>
@ -181,7 +201,7 @@
>
{{ 'search.fieldWorkPlace' | translate }}
</th>
<td mat-cell *matCellDef="let element" class="workplace">
<td mat-cell *matCellDef ="let element" class="workplace">
<div class="workplace">
{{ element.workplace }}
</div>

71
projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
View File

@ -49,28 +49,41 @@
font-size: 13px;
width: 100%;
overflow: hidden;
display: flex;
table {
table-layout: fixed;
width: 100%;
th {
text-align: center;
}
td.mat-cell {
padding: 6px;
position: relative;
width: 100px;
div {
@include ellipsis(1);
&.name {
.name {
font-size: 1em;
font-weight: 600;
}
&.status {
.status {
font-size: 0.84em;
}
}
}
}
.thumbnail {
&.profile {
width: 60px;
text-overflow: unset;
.presence {
transform: translateY(-30px);
}
.thumbnail {
&-mask {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 12px;
margin-right: 0;
position: relative;
img {
width: 40px;
@ -78,4 +91,48 @@
background-color: #efefef;
}
}
}
.marker-mobile-state {
position: absolute;
background-color: #ffffff;
width: 20px;
height: 20px;
border-radius: 50%;
bottom: 6px;
left: 50px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
.mat-icon {
font-size: 0.9em;
width: 18px;
height: 18px;
line-height: 18px;
min-width: 18px;
min-height: 18px;
}
}
}
}
}
}
}
.work-status {
display: inline-block;
justify-content: center;
justify-items: center;
color: #ffffff;
height: 100%;
min-width: 32px;
margin-right: 4px;
border-radius: 24px;
flex: 0 0 auto;
font-size: 0.8em;
text-align: center;
}
.mat-paginator-container {
display: flex;
flex-flow: column;
}