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

2020-02-03 13:58:53 +09:00 · 2020-02-03 13:58:53 +09:00 · 51dbc01dd6
commit 51dbc01dd6
parent 8400b6911d 8b31156489
21 changed files with 239 additions and 76 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html
@ -10,7 +10,7 @@
    </div>

    <span
-      class="app-title text-accent-darkest "
+      class="app-title text-primary-color"
      [@animate]="{ value: '*', params: { delay: '100ms', y: '25px' } }"
    >
      {{ getTitle() }}
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
@ -48,9 +48,12 @@
    >
      <mat-tab [label]="MessageType.Receive">
        <ng-template mat-tab-label>
-          {{ 'message.messageTypeReceiving' | translate }}
+          {{ 'message.type.messageTypeReceiving' | translate }}
        </ng-template>
-        <perfect-scrollbar fxFlex="1 1 auto">
+        <perfect-scrollbar
+          fxFlex="1 1 auto"
+          *ngIf="!!(messageRetrieveList$ | async)"
+        >
          <ucap-message-list-item
            *ngFor="let message of messageRetrieveList$ | async"
            [message]="message"
@ -58,12 +61,25 @@
            class="message-item"
          ></ucap-message-list-item>
        </perfect-scrollbar>
+        <div
+          class="no-search-result"
+          fxFlexFill
+          *ngIf="
+            !(messageRetrieveList$ | async) ||
+            0 === (messageRetrieveList$ | async).length
+          "
+        >
+          {{ 'common.noResult' | translate }}
+        </div>
      </mat-tab>
      <mat-tab [label]="MessageType.Send">
        <ng-template mat-tab-label>
-          {{ 'message.messageTypeOutgoing' | translate }}
+          {{ 'message.type.messageTypeOutgoing' | translate }}
        </ng-template>
-        <perfect-scrollbar fxFlex="1 1 auto">
+        <perfect-scrollbar
+          fxFlex="1 1 auto"
+          *ngIf="!!(messageSendList$ | async)"
+        >
          <ucap-message-list-item
            *ngFor="let message of messageSendList$ | async"
            [message]="message"
@ -71,12 +87,25 @@
            class="message-item"
          ></ucap-message-list-item>
        </perfect-scrollbar>
+        <div
+          class="no-search-result"
+          fxFlexFill
+          *ngIf="
+            !(messageSendList$ | async) ||
+            0 === (messageSendList$ | async).length
+          "
+        >
+          {{ 'common.noResult' | translate }}
+        </div>
      </mat-tab>
      <mat-tab [label]="MessageType.Reservation">
        <ng-template mat-tab-label>
-          {{ 'message.messageTypeReservation' | translate }}
+          {{ 'message.type.messageTypeReservation' | translate }}
        </ng-template>
-        <perfect-scrollbar fxFlex="1 1 auto">
+        <perfect-scrollbar
+          fxFlex="1 1 auto"
+          *ngIf="!!(messageReservationList$ | async)"
+        >
          <ucap-message-list-item
            *ngFor="let message of messageReservationList$ | async"
            [message]="message"
@ -84,6 +113,16 @@
            class="message-item"
          ></ucap-message-list-item>
        </perfect-scrollbar>
+        <div
+          class="no-search-result"
+          fxFlexFill
+          *ngIf="
+            !(messageReservationList$ | async) ||
+            0 === (messageReservationList$ | async).length
+          "
+        >
+          {{ 'common.noResult' | translate }}
+        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
@ -93,21 +132,16 @@
      <form [formGroup]="fgSearchType" class="w-100-p">
        <mat-form-field style="width: 100px;">
          <mat-select
+            value="A"
            formControlName="searchMessageType"
            (selectionChange)="onChangeSelection($event)"
          >
-            <mat-option [value]="MessageType.All">{{
-              'message.messageTypeAll' | translate
-            }}</mat-option>
-            <mat-option [value]="MessageType.Receive">{{
-              'message.messageTypeReceiving' | translate
-            }}</mat-option>
-            <mat-option [value]="MessageType.Send">{{
-              'message.messageTypeOutgoing' | translate
-            }}</mat-option>
-            <mat-option [value]="MessageType.Reservation">{{
-              'message.messageTypeReservation' | translate
-            }}</mat-option>
+            <mat-option
+              *ngFor="let messageType of messageTypeList"
+              [value]="messageType.name"
+            >
+              {{ messageType.displayName }}
+            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-radio-group
@ -128,7 +162,10 @@
      </form>
    </div>
    <div style="height: calc(100% - 65.5px)">
-      <perfect-scrollbar fxFlex="1 1 auto">
+      <perfect-scrollbar
+        fxFlex="1 1 auto"
+        *ngIf="!!(messageSearchList$ | async)"
+      >
        <ucap-message-list-item
          *ngFor="let message of messageSearchList$ | async"
          [message]="message"
@ -136,6 +173,16 @@
          class="message-item"
        ></ucap-message-list-item>
      </perfect-scrollbar>
+      <div
+        class="no-search-result"
+        fxFlexFill
+        *ngIf="
+          !(messageSearchList$ | async) ||
+          0 === (messageSearchList$ | async).length
+        "
+      >
+        {{ 'common.noSearchResult' | translate }}
+      </div>
    </div>
  </div>
 </div>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss
@ -30,5 +30,10 @@
      position: relative;
      height: 100%;
    }
+
+    .no-search-result {
+      padding-top: 10px;
+      padding-left: 10px;
+    }
  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.ts
@ -8,9 +8,8 @@ import {
  Input,
  AfterViewChecked
 } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, merge } from 'rxjs';
 import { Store, select } from '@ngrx/store';
-import { tap } from 'rxjs/operators';
 import { NGXLogger } from 'ngx-logger';

 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
@ -53,6 +52,11 @@ import * as AppStore from '@app/store';
 import * as MessageStore from '@app/store/messenger/message';
 import { TranslateService } from '@ngx-translate/core';

+export interface MessageTypeData {
+  displayName: string;
+  name: string;
+}
+
@Component({
  selector: 'app-layout-chat-left-sidenav-message',
  templateUrl: './message.component.html',
@ -95,6 +99,9 @@ export class MessageBoxComponent

  isSearch = false;

+  messageTypeList: MessageTypeData[] = [];
+  langChangeSubscription: Subscription;
+
  constructor(
    private store: Store<any>,
    private formBuilder: FormBuilder,
@ -217,6 +224,15 @@ export class MessageBoxComponent
    if (!!this.tabs) {
      this.tabs.realignInkBar();
    }
+
+    this.setMessageTypeData();
+    this.langChangeSubscription = merge(
+      this.translateService.onLangChange,
+      this.translateService.onDefaultLangChange,
+      this.translateService.onTranslationChange
+    ).subscribe(() => {
+      this.setMessageTypeData();
+    });
  }

  ngAfterViewChecked(): void {
@ -230,6 +246,9 @@ export class MessageBoxComponent
    if (!!this.messageDetailInfo) {
      this.messageDetailInfo.unsubscribe();
    }
+    if (!!this.langChangeSubscription) {
+      this.langChangeSubscription.unsubscribe();
+    }
  }

  onSelectedIndexTab(value: number) {
@ -275,6 +294,10 @@ export class MessageBoxComponent
    event.preventDefault();
    event.stopPropagation();

+    if (!search || search.trim().length === 0) {
+      return;
+    }
+
    this.getSearchMessage(
      MessageType.All,
      MessageSearchType.Name,
@ -343,4 +366,32 @@ export class MessageBoxComponent
      })
    );
  }
+
+  private setMessageTypeData() {
+    const messageTypeData = this.translateService.instant('message.type');
+
+    const messageTypeList: MessageTypeData[] = [];
+    for (const key in messageTypeData) {
+      if (messageTypeData.hasOwnProperty(key)) {
+        let name = 'A';
+        switch (key) {
+          case 'messageTypeAll':
+            name = MessageType.All;
+            break;
+          case 'messageTypeReceiving':
+            name = MessageType.Receive;
+            break;
+          case 'messageTypeOutgoing':
+            name = MessageType.Send;
+            break;
+          case 'messageTypeReservation':
+            name = MessageType.Reservation;
+            break;
+        }
+        messageTypeList.push({ displayName: messageTypeData[key], name });
+      }
+    }
+
+    this.messageTypeList = messageTypeList;
+  }
 }
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@ -265,6 +265,20 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
      .subscribe(roomInfo => {
        this.clearView();
        this.roomInfoSubject.next(roomInfo);
+
+        if (!!this.roomInfoSubject.value && !!this.interval) {
+          clearInterval(this.interval);
+          this.interval = undefined;
+        }
+
+        if (
+          !!this.roomInfoSubject.value &&
+          !!this.roomInfoSubject.value.isTimeRoom
+        ) {
+          this.interval = setInterval(() => {
+            this.store.dispatch(EventStore.infoIntervalClear({}));
+          }, 1000);
+        }
      });

    this.userInfoListSubscription = this.store
@ -393,15 +407,6 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
          }
        }
      });
-
-    if (
-      !!this.roomInfoSubject.value &&
-      !!this.roomInfoSubject.value.isTimeRoom
-    ) {
-      this.interval = setInterval(() => {
-        this.store.dispatch(EventStore.infoIntervalClear({}));
-      }, 1000);
-    }
  }

  ngOnDestroy(): void {
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
@ -3,13 +3,13 @@
    <mat-card-title>
      <ng-container [ngSwitch]="messageInfo.type">
        <span *ngSwitchCase="MessageType.Receive">{{
-          'message.messageTypeReceiving' | translate
+          'message.type.messageTypeReceiving' | translate
        }}</span>
        <span *ngSwitchCase="MessageType.Send">{{
-          'message.messageTypeOutgoing' | translate
+          'message.type.messageTypeOutgoing' | translate
        }}</span>
        <span *ngSwitchCase="MessageType.Reservation">{{
-          'message.messageTypeReservation' | translate
+          'message.type.messageTypeReservation' | translate
        }}</span>
      </ng-container>
    </mat-card-title>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.html
@ -20,7 +20,7 @@
      [totalCount]="totalCount"
      [pageCurrent]="pageCurrent"
      [pageListCount]="pageListCount"
-      (search)="onSearch($event)"
+      (search)="onReSearch($event)"
      (changePage)="onChangePage($event)"
      (openProfile)="onClickOpenProfile($event)"
    >
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/search/integrated-search.dialog.component.ts
@ -92,6 +92,12 @@ export class IntegratedSearchDialogComponent implements OnInit, OnDestroy {
    );
  }

+  onReSearch(searchWord: string) {
+    this.pageCurrent = 1;
+
+    this.onSearch(searchWord);
+  }
+
  onSearch(searchWord: string) {
    this.currentSearchWord = this.data.keyword;

--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@ -10,7 +10,7 @@
    </ucap-integrated-search-form>
    <div
      *ngIf="!!loginRes && !!weblink"
-      class="app-layout-native-title-bar-link"
+      class="app-layout-native-title-bar-link weblink"
    >
      <ng-container *ngFor="let link of weblink" [ngSwitch]="link.key">
        <button
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
@ -48,11 +48,13 @@
        -webkit-box-align: center;
        align-items: center;
        position: relative;
-        display: inline-block;
+        display: inline-flex;
        min-width: 0;
        width: auto;
        overflow: hidden;
        white-space: nowrap;
+        align-items: center;
+        height:100%;
        .button {
          -webkit-app-region: no-drag;
          outline: 0;
@ -69,8 +71,7 @@
          text-align: center;
          font-size: 10px;
          vertical-align: middle;
-          margin-left: 10px;
-          transform: translateY(-2px);
+          margin-right: 12px;
          .weblink {
            display: inline-flex;
            line-height: 24px;
@ -121,7 +122,7 @@
        width: 10px;
        height: 20px;
        border-right: 1px solid rgba(255, 255, 255, 0.3);
-        margin: 0 10px 0 10px;
+        margin: 0 10px 0 0;
        display: inline-block;
      }
      .myprofile-item {
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.ts
@ -562,6 +562,10 @@ export class TopBarComponent implements OnInit, OnDestroy {
  }

  onIntegratedSearch(keyword: string) {
+    if (!keyword || keyword.trim().length === 0) {
+      return;
+    }
+
    this.dialogService.open<
      IntegratedSearchDialogComponent,
      IntegratedSearchDialogData,
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/status/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/status/effects.ts
@ -120,6 +120,16 @@ export class Effects {
    )
  );

+  myStatusCheck$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(AuthStore.loginSuccess),
+      map(action => action.loginRes),
+      map(loginRes => {
+        return bulkInfo({ divCd: 'bulk', userSeqs: [loginRes.userSeq] });
+      })
+    )
+  );
+
  constructor(
    private actions$: Actions,
    private store: Store<any>,
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/status/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/status/reducers.ts
@ -9,6 +9,7 @@ import {

 import * as AuthenticationStore from '@app/store/account/authentication';
 import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
+import { StatusCode } from '@ucap-webmessenger/core';

 export const reducer = createReducer(
  initialState,
@ -68,6 +69,22 @@ export const reducer = createReducer(
    } as State;
  }),

+  on(AuthenticationStore.loginSuccess, (state, action) => {
+    return {
+      ...state,
+      myStatus: {
+        userSeq: action.loginRes.userSeq,
+        pcStatus: StatusCode.OnLine,
+        phoneStatus: StatusCode.Offline,
+        mobileStatus: StatusCode.Offline,
+        conferenceStatus: StatusCode.Offline,
+        statusMessage: '',
+        mobileConferenceStatus: StatusCode.Offline,
+        imessengerStatus: StatusCode.Offline
+      }
+    };
+  }),
+
  on(changeMyIdleCheckTime, (state, action) => {
    return {
      ...state,
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/en.json
@ -293,10 +293,6 @@
    "sendTo": "Send message",
    "sendReservation": "Send reservation",
    "placeholderForSearch": "search for name, title, content",
-    "messageTypeAll": "All",
-    "messageTypeReceiving": "Receiving",
-    "messageTypeOutgoing": "Outgoing",
-    "messageTypeReservation": "Reservation",
    "searchTypeName": "Name",
    "searchTypeTitle": "Title",
    "searchTypeContent": "Content",
@ -318,6 +314,12 @@
    "andOthers": "and {{count}}others",
    "addReceiver": "Add Reciever",
    "countOfReceiver": "{{count}} total recipients",
+    "type": {
+      "messageTypeAll": "All",
+      "messageTypeReceiving": "Receiving",
+      "messageTypeOutgoing": "Outgoing",
+      "messageTypeReservation": "Reservation"
+    },
    "results": {
      "successForSending": "Your message has been sent.",
      "successForReservation": "You have scheduled a message transfer.",
@ -372,7 +374,8 @@
    "searchWord": "Search word",
    "searchResult": "Search result",
    "noSearchResult": "There is no search result",
-    "useOnlyForSpecialCharacter": "Can only use Special characters: {{v}}",
+    "noResult": "There is no result",
+    "useOnlyForSpecialCharacter": "Can only use Special characters: {{specialCharacter}}",
    "units": {
      "date": "Date",
      "time": "Time",
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
@ -293,10 +293,6 @@
    "sendTo": "쪽지 보내기",
    "sendReservation": "쪽지 예약 보내기",
    "placeholderForSearch": "이름, 제목, 내용 검색",
-    "messageTypeAll": "전체",
-    "messageTypeReceiving": "수신",
-    "messageTypeOutgoing": "발신",
-    "messageTypeReservation": "예약",
    "searchTypeName": "이름",
    "searchTypeTitle": "제목",
    "searchTypeContent": "내용",
@ -318,6 +314,12 @@
    "andOthers": "외 {{count}}명",
    "addReceiver": "수신자 추가",
    "countOfReceiver": "총 수신자 {{count}}명",
+    "type": {
+      "messageTypeAll": "전체",
+      "messageTypeReceiving": "수신",
+      "messageTypeOutgoing": "발신",
+      "messageTypeReservation": "예약"
+    },
    "results": {
      "successForSending": "쪽지를 전송하였습니다.",
      "successForReservation": "쪽지 전송을 예약 하였습니다.",
@ -372,6 +374,7 @@
    "searchWord": "검색어",
    "searchResult": "검색 결과",
    "noSearchResult": "검색 결과가 없습니다.",
+    "noResult": "조회된 내용이 없습니다.",
    "useOnlyForSpecialCharacter": "특수문자는 {{specialCharacter}}만 사용할 수 있습니다.",
    "units": {
      "date": "날짜",
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
@ -52,21 +52,22 @@ ol {
  list-style: none;
 }
 $lg-red: (
-  50: #fff9fc,
-  100: #f8bbd0,
-  200: #f48fb1,
+  50: #ffffff,
+  100: #fff9fc,
+  200: #f1e1e5,
  /*300: #f06292,*/ 300: #ef4c73,
  400: #ec407a,
  500: #ed097e,
  600: #d81b60,
  700: #c2185b,
  800: #ad1457,
-  900: #880e4f,
+  /*900: #880e4f,*/ 900: #5f2a41,
  A100: #ff80ab,
  A200: #ff4081,
  A400: #ff3399,
  A700: #c51162,
  B100: #4f4f4f,
+  B200: #67545b,
  G100: #ef4c73,
  G900: #352a37,
  contrast: (
@ -92,14 +93,12 @@ $lg-red: (

 $aquaBlue-daesang: (
  50: #f9feff,
-  //#e0f7fa,
-    /* 100: #b2ebf2,*/ 100: #ebfdff,
-  /*200: #65e4f5,*/ 200: #a7f3fd,
-  //#80deea,
-    300: #4dd0e1,
+  100: #ebfdff,
+  200: #a7f3fd,
+  300: #4dd0e1,
  400: #26c6da,
  500: #00bcd4,
-  /*600: #00acc1,*/ 600: #00b6d5,
+  600: #00b6d5,
  700: #1ea7b9,
  800: #0367a6,
  900: #024873,
@ -108,6 +107,7 @@ $aquaBlue-daesang: (
  A400: #00e5ff,
  A700: #06a6c1,
  B100: #2d3a4a,
+  B200: #00b6d5,
  //,#47667fbackgroundcolor
    G100: #0367a6,
  /*G900: #192a2c,*/ G900: #6dd5ed,
@ -200,11 +200,11 @@ $daesang-grey: (
    color: mat-color($primary, default-contrast);
  }
  .bg-accent-dark {
-    background: mat-color($accent, 600);
+    background: mat-color($accent, B200);
    color: mat-color($primary, default-contrast);
  }
  .bg-accent-light {
-    background: mat-color($accent, 300) !important;
+    background: mat-color($accent, 300);
    color: mat-color($primary, default-contrast);
  }
  .bg-accent-bright {
@ -278,7 +278,8 @@ $daesang-grey: (
  .policy {
    background-color: mat-color($accent, B100);
  }
-  .mat-badge-accent .mat-badge-content {
+  .mat-badge-accent .mat-badge-content,
+  .weblink .mat-badge-content {
    background-color: mat-color($warn, 400);
  }

@ -430,4 +431,12 @@ $daesang-grey: (
  .translation-preview {
    background-color: mat-color($accent, 900, 0.8);
  }
+  .tree-has-child {
+    li {
+      .tree-node-body {
+        background-color: mat-color($accent, 100);
+        border: 1px solid mat-color($accent, 200);
+      }
+    }
+  }
 }
--- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts
@ -558,11 +558,15 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit {
    const selection: Selection = document.getSelection();
    const range: Range = selection.getRangeAt(0);

+    let inEditor = false;
    if (removeSelected) {
+      // onPaste
      selection.empty();
+      inEditor = true;
+    } else {
+      inEditor = this.inEditor(selection.anchorNode);
    }

-    const inEditor = this.inEditor(selection.anchorNode);
    if (inEditor) {
      range.insertNode(node);
    } else {
--- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
+++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.scss
@ -3,8 +3,6 @@

  .tree-node-closer-container {
    position: relative;
-    // border: 1px dotted grey;
-    // border-width: 0 0 1px 1px;

    .tree-node-closer-top {
      width: 15px;
@ -13,7 +11,6 @@
      border: 1px dotted #cccccc;
      border-width: 0 0 1px 1px;
      top: -40px;
-      // left: 20px;
    }
    .tree-node-closer-bottom {
      width: 15px;
@ -22,7 +19,6 @@
      border: 1px dotted #cccccc;
      border-width: 0 0 1px 1px;
      top: 0px;
-      // left: 20px;
    }

    .tree-node-closer-top[sub-node] {
@ -52,11 +48,6 @@
    list-style-type: none;
  }

-  // li:last-child {
-  //   border-left: 1px solid white;
-  //   margin-left: -41px;
-  // }
-
  .tree-has-child {
    height: 50px;
    min-height: 50px;
@ -71,10 +62,7 @@
      .tree-node-body {
        width: 100%;
        height: 40px;
-        background-color: #eef9fd;
-        border: 1px solid #cee1e8;
        border-radius: 4px;
-        //padding-bottom: 10px;
        button {
          line-height: normal;
          .mat-button-wrapper {
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.html
@ -1,5 +1,5 @@
 <div class="search-container">
-  <span class="icon-img">
+  <span class="icon-img" (click)="onKeyDownEnter(searchWordInput.value)">
    <i class="mid mdi-magnify"></i>
  </span>
  <!--<mat-form-field appearance="outline">-->
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.html
@ -196,6 +196,13 @@
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </perfect-scrollbar>
+    <div
+      class="no-search-result"
+      fxFlexFill
+      *ngIf="!searchUserInfos || 0 === searchUserInfos.length"
+    >
+      {{ 'common.noSearchResult' | translate }}
+    </div>
  </div>
  <div class="footer-fix search-result-footer">
    <mat-paginator
--- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss
@ -25,6 +25,9 @@
 .search-scrollbar {
  height: 550px;
 }
+::ng-deep .ps__rail-y {
+  z-index: 102;
+}

 ::ng-deep .search-area {
  .search-container {