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

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

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

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

@ -49,33 +49,90 @@
font-size: 13px; font-size: 13px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
td.mat-cell { display: flex;
padding: 6px; table {
div { table-layout: fixed;
@include ellipsis(1); width: 100%;
&.name { th {
font-size: 1em; text-align: center;
font-weight: 600; }
} td.mat-cell {
&.status { padding: 6px;
font-size: 0.84em; position: relative;
width: 100px;
div {
@include ellipsis(1);
.name {
font-size: 1em;
font-weight: 600;
}
.status {
font-size: 0.84em;
}
&.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: 0;
position: relative;
img {
width: 40px;
height: auto;
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;
}
}
}
} }
} }
} }
} }
.thumbnail { .work-status {
&-mask { display: inline-block;
width: 40px; justify-content: center;
height: 40px; justify-items: center;
border-radius: 50%; color: #ffffff;
overflow: hidden; height: 100%;
margin-right: 12px; min-width: 32px;
position: relative; margin-right: 4px;
img { border-radius: 24px;
width: 40px; flex: 0 0 auto;
height: auto; font-size: 0.8em;
background-color: #efefef; text-align: center;
} }
} .mat-paginator-container {
display: flex;
flex-flow: column;
} }