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 2020-01-30 19:41:37 +09:00
parent 8f7092def9
commit f54a26fb9e
10 changed files with 175 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
View File

@ -113,18 +113,19 @@
(click)="onClickReceiveAlarm()"
aria-label="Toggle Receive Alarm"
>
<mat-icon
<!--<mat-icon
class="amber-fg"
*ngIf="roomInfoSubject.value.receiveAlarm"
matTooltip="{{ 'chat.notificationIsOn' | translate }}"
>notifications_active</mat-icon
>
>notifications_active</mat-icon>-->
<mat-icon class="icon-button" *ngIf="roomInfoSubject.value.receiveAlarm"
matTooltip="{{ 'chat.notificationIsOn' | translate }}"><i class="mid mdi-bell-ring-outline"></i></mat-icon>
<mat-icon
class="secondary-text"
class="icon-button"
*ngIf="!roomInfoSubject.value.receiveAlarm"
matTooltip="{{ 'chat.notificationIsOff' | translate }}"
>notifications_off</mat-icon
>
><i class="mid mdi-bell-off-outline"></i></mat-icon>
</button>
<button

6
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
View File

@ -93,6 +93,12 @@
.room-option {
margin-left: auto;
margin-right: -10px;
.icon-button {
transform: translateY(-2px);
i {
font-size: 0.9em;
}
}
}
}
.chat-search-frame {

2
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
View File

@ -14,7 +14,7 @@
(mouseleave)="onMouseLeaveLeftSideContainer($event)"
></app-layout-messenger-left-side>
</mat-drawer>
<div class="chat-messages">
<div class="chat-messages bg-accent-brightest">
<app-layout-messenger-intro
*ngIf="!(this.selectedChat$ | async)"
></app-layout-messenger-intro>

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

@ -224,6 +224,9 @@ $daesang-grey: (
.bg-warn-darkest {
background-color: mat-color($warn, 600);
}
.text-primary-light {
color: mat-color($primary, 500);
}
.text-primary-color {
color: mat-color($primary);
}

3
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
View File

@ -173,3 +173,6 @@ $tablet-l-width: 1024px;
.chat-messages-buffer {
}
}
.translation-container {
font-size: 0.9em;
}

5
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
View File

@ -62,8 +62,11 @@
>
{{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
</div>
<div *ngIf="!checkable && !roomInfo.receiveAlarm">
<!--<div *ngIf="!checkable && !roomInfo.receiveAlarm">
<mat-icon>notifications_off</mat-icon>
</div>-->
<div class="icon-img" *ngIf="!checkable && !roomInfo.receiveAlarm">
<i class="mdi mdi-bell-off-outline text-primary-light"></i>
</div>
</div>
<div class="final-message">

14
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
View File

@ -39,21 +39,21 @@ $thumbnail-msize: 40px;
}
}
.profile-name {
&-name {
font-size: 16px;
@include ellipsis(1);
}
.profile-last-message {
&-last-message {
line-height: normal;
margin-top: 0;
}
.profile-last-message-time {
&-last-message-time {
font-size: 12px;
}
.profile-mood {
&-mood {
line-height: normal;
margin: 0;
}
@ -104,6 +104,12 @@ $thumbnail-msize: 40px;
margin-left: 4px;
line-height: unset;
}
.icon-img {
i {
font-size: 1.1em;
text-align: center;
}
}
.member {
flex: none;
margin-left: 6px;

17
projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss
View File

@ -99,3 +99,20 @@ textarea {
}
}
}
//label 선명도
.mat-form-field {
&.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float
.mat-form-field-label,
.mat-form-field-appearance-legacy.mat-form-field-can-float
.mat-input-server:focus
+ .mat-form-field-label-wrapper
.mat-form-field-label {
font-size: 0.7em;
transform: translateY(-1.28125em) scale(1);
}
}
.mat-error {
font-size: 0.8em;
}

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

@ -18,49 +18,59 @@
<perfect-scrollbar class="search-scrollbar">
<table mat-table [dataSource]="searchUserInfos">
<ng-container matColumnDef="profile">
<th mat-header-cell *matHeaderCellDef class="profile">
<th
mat-header-cell
*matHeaderCellDef
class="profile"
(mousedown)="resizeTable($event)"
>
{{ 'search.fieldProfile' | translate }}
</th>
<td mat-cell *matCellDef="let element">
<div class="profile">
<span
class="presence"
[ngClass]="getPresence(element, 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
*ngIf="getPresence(element, PresenceType.MOBILE) === 'mobileOn'"
class="text-accent-color marker-mobile-state"
>
<mat-icon>phone_android</mat-icon>
</span>
</div>
<div>
<span
class="work-status"
[ngClass]="getWorkstatusInfo(element, 'style')"
>
{{ getWorkstatusInfo(element, 'text') }}
</span>
<span class="name">
{{ element.name }}
</span>
<div class="table-item">
<div class="profile">
<span
class="presence"
[ngClass]="getPresence(element, 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
*ngIf="
getPresence(element, PresenceType.MOBILE) === 'mobileOn'
"
class="text-accent-color marker-mobile-state"
>
<mat-icon>phone_android</mat-icon>
</span>
</div>
<div>
<span
class="work-status"
[ngClass]="getWorkstatusInfo(element, 'style')"
>
{{ getWorkstatusInfo(element, 'text') }}
</span>
<span class="name">
{{ element.name }}
</span>
</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="grade">
<th
mat-header-cell
*matHeaderCellDef class="grade"
*matHeaderCellDef
class="grade"
(mousedown)="resizeTable($event)"
>
{{ 'search.fieldGrade' | translate }}
@ -74,7 +84,8 @@
<ng-container matColumnDef="deptName">
<th
mat-header-cell
*matHeaderCellDef class="deptName"
*matHeaderCellDef
class="deptName"
(mousedown)="resizeTable($event)"
>
{{ 'search.fieldDeptartment' | translate }}
@ -88,7 +99,8 @@
<ng-container matColumnDef="companyName">
<th
mat-header-cell
*matHeaderCellDef class="companyName"
*matHeaderCellDef
class="companyName"
(mousedown)="resizeTable($event)"
>
{{ 'search.fieldCompany' | translate }}
@ -103,7 +115,8 @@
<ng-container matColumnDef="lineNumber">
<th
mat-header-cell
*matHeaderCellDef class="lineNumber"
*matHeaderCellDef
class="lineNumber"
(mousedown)="resizeTable($event)"
>
{{ 'search.fieldOfficePhoneNumber' | translate }}
@ -117,7 +130,8 @@
<ng-container matColumnDef="hpNumber">
<th
mat-header-cell
*matHeaderCellDef class="hpNumber"
*matHeaderCellDef
class="hpNumber"
(mousedown)="resizeTable($event)"
>
{{ 'search.fieldHandphone' | translate }}
@ -131,7 +145,8 @@
<ng-container matColumnDef="email">
<th
mat-header-cell
*matHeaderCellDef class="email"
*matHeaderCellDef
class="email"
(mousedown)="resizeTable($event)"
>
{{ 'search.fieldEmail' | translate }}
@ -145,7 +160,8 @@
<ng-container matColumnDef="responsibilities">
<th
mat-header-cell
*matHeaderCellDef class="responsibilities"
*matHeaderCellDef
class="responsibilities"
(mousedown)="resizeTable($event)"
>
{{ 'search.fieldResponsibilities' | translate }}
@ -159,7 +175,8 @@
<ng-container matColumnDef="workplace">
<th
mat-header-cell
*matHeaderCellDef class="workplace"
*matHeaderCellDef
class="workplace"
(mousedown)="resizeTable($event)"
>
{{ 'search.fieldWorkPlace' | translate }}

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

@ -41,15 +41,6 @@
.mat-form-field-infix {
padding-left: 26px;
}
&.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float
.mat-form-field-label,
.mat-form-field-appearance-legacy.mat-form-field-can-float
.mat-input-server:focus
+ .mat-form-field-label-wrapper
.mat-form-field-label {
font-size: 0.7em;
transform: translateY(-1.28125em) scale(1);
}
}
}
}
@ -65,6 +56,10 @@
th {
@include disable-selection;
text-align: center;
&.profile {
width: 200px;
min-width: 200px;
}
}
td.mat-cell {
padding: 6px;
@ -72,56 +67,70 @@
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 {
cursor: pointer;
&-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;
}
&.table-item {
display: flex;
width: 200px;
min-width: 200px;
font-size: 1em;
div {
display: inline-flex;
height: 100%;
align-self: center;
.name {
@include ellipsis(1);
font-size: 1em;
font-weight: 600;
}
}
.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;
.status {
font-size: 0.84em;
}
&.profile {
width: 70px;
text-overflow: unset;
flex: 0 0 auto;
.presence {
transform: translateY(6px);
}
.thumbnail {
cursor: pointer;
&-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: 4px;
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;
}
}
}
}
}