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

electron-projects/ucap-webmessenger-electron/src/app/AppWindow.ts

@@ -5,6 +5,8 @@ import { app, BrowserWindow, screen, ipcMain, IpcMainEvent } from 'electron';
 import windowStateKeeper from 'electron-window-state';
 import { EventEmitter } from 'events';
 
+import log from 'electron-log';
+
 import { registerWindowStateChangedEvents } from '../lib/window-state';
 import {
   ElectronAppChannel,
@@ -164,10 +166,30 @@ export class AppWindow {
       }
     );
 
-    this.window.webContents.on(ElectronWebContentsChannel.DidFailLoad, () => {
+    this.window.webContents.on(
-      this.window.webContents.openDevTools();
+      ElectronWebContentsChannel.DidFailLoad,
-      this.window.show();
+      (
-    });
+        event: Event,
+        errorCode: number,
+        errorDescription: string,
+        validatedURL: string,
+        isMainFrame: boolean
+      ) => {
+        if ('ERR_FILE_NOT_FOUND' === errorDescription) {
+          this.load();
+          return;
+        }
+        log.error(
+          ElectronWebContentsChannel.DidFailLoad,
+          event,
+          errorCode,
+          errorDescription,
+          validatedURL,
+          isMainFrame
+        );
+        this.window.webContents.openDevTools();
+      }
+    );
 
     registerWindowStateChangedEvents(this.window);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucap-webmessenger",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "author": {
     "name": "LG CNS",
     "email": "lgucap@lgcns.com"

projects/ucap-webmessenger-app/src/app/app-routing.module.ts

@@ -10,26 +10,26 @@ const routes: Routes = [
       import('./pages/messenger/messenger.page.module').then(
         m => m.AppMessengerPageModule
       ),
-    canActivate: [AppAuthGuard],
+    canActivate: [AppAuthGuard]
   },
   {
     path: 'account',
     loadChildren: () =>
       import('./pages/account/account.page.module').then(
         m => m.AppAccountPageModule
-      ),
+      )
   },
   {
     path: 'template',
     loadChildren: () =>
       import('./pages/template/template.page.module').then(
         m => m.AppTemplatePageModule
-      ),
+      )
-  },
+  }
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, { enableTracing: false })],
-  exports: [RouterModule],
+  exports: [RouterModule]
 })
 export class AppRoutingModule {}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -50,46 +50,37 @@
   </div>
 </div>
 <div *ngIf="!isSearch" class="app-layout-chat-left-sidenav-chat-list">
-  <perfect-scrollbar fxFlex="1 1 auto">
+  <virtual-scroller
-    <ucap-room-list-item
+    #chatRoomList
-      *ngFor="let room of roomList"
+    [items]="roomList"
-      [loginRes]="loginRes"
-      [isSelected]="(selectedRoomInfo$ | async)?.roomSeq === room.roomSeq"
-      [roomInfo]="room"
-      [roomUserInfo]="getRoomUserList(room)"
-      [sessionVerinfo]="sessionVerinfo"
-      (click)="onClickContextMenu('SELECT_ROOM', room)"
-      (contextmenu)="onContextMenuChat($event, room)"
-      class="ucap-clickable"
-    >
-    </ucap-room-list-item>
-  </perfect-scrollbar>
-  <!-- <cdk-virtual-scroll-viewport
-    #cvsvChatList
-    itemSize="60"
     perfectScrollbar
     fxFlexFill
   >
     <ucap-room-list-item
-      *cdkVirtualFor="let room of roomList"
+      *ngFor="let room of chatRoomList.viewPortItems"
       [loginRes]="loginRes"
+      [isSelected]="(selectedRoomInfo$ | async)?.roomSeq === room.roomSeq"
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"
       [sessionVerinfo]="sessionVerinfo"
       (click)="onClickContextMenu('SELECT_ROOM', room)"
       (contextmenu)="onContextMenuChat($event, room)"
       class="ucap-clickable"
+      style="height: 60px;"
     >
     </ucap-room-list-item>
-  </cdk-virtual-scroll-viewport> -->
+  </virtual-scroller>
 </div>
 <div *ngIf="!!isSearch" class="app-layout-chat-left-sidenav-chat-list search">
-  <perfect-scrollbar
+  <virtual-scroller
-    fxFlex="1 1 auto"
     *ngIf="!!searchRoomList && 0 < searchRoomList.length"
+    #chatRoomSearchList
+    [items]="searchRoomList"
+    perfectScrollbar
+    fxFlexFill
   >
     <ucap-room-list-item
-      *ngFor="let room of searchRoomList"
+      *ngFor="let room of chatRoomSearchList.viewPortItems"
       [loginRes]="loginRes"
       [isSelected]="(selectedRoomInfo$ | async)?.roomSeq === room.roomSeq"
       [roomInfo]="room"
@@ -99,22 +90,8 @@
       (contextmenu)="onContextMenuChat($event, room)"
     >
     </ucap-room-list-item>
-  </perfect-scrollbar>
+  </virtual-scroller>
-  <!-- <cdk-virtual-scroll-viewport
+
-    itemSize="60"
-    class="app-layout-chat-left-sidenav-chat-list-viewport"
-  >
-    <ucap-room-list-item
-      *cdkVirtualFor="let room of getRoomList()"
-      [loginRes]="loginRes"
-      [roomInfo]="room"
-      [roomUserInfo]="getRoomUserList(room)"
-      [sessionVerinfo]="sessionVerinfo"
-      (click)="onSelectedRoom(room)"
-      (contextmenu)="onContextMenuChat($event, room)"
-    >
-    </ucap-room-list-item>
-  </cdk-virtual-scroll-viewport> -->
   <div
     class="no-search-result"
     fxFlexFill

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html

@@ -15,6 +15,7 @@
     <ucap-organization-tree
       [oraganizationList]="departmentInfoList$ | async"
       [loginRes]="loginRes"
+      [activate$]="organizationTreeActivatedSubject.asObservable()"
       (selected)="onSelectedOrganization($event)"
       class="tab-tree-frame"
     ></ucap-organization-tree>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.ts

@@ -10,7 +10,13 @@ import {
   ChangeDetectorRef
 } from '@angular/core';
 import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
-import { Observable, Subscription, of } from 'rxjs';
+import {
+  Observable,
+  Subscription,
+  of,
+  BehaviorSubject,
+  combineLatest
+} from 'rxjs';
 import {
   DeptInfo,
   QueryProtocolService,
@@ -40,7 +46,8 @@ import {
   KEY_VER_INFO,
   EnvironmentsInfo,
   KEY_ENVIRONMENTS_INFO,
-  KEY_AUTH_INFO
+  KEY_AUTH_INFO,
+  MainMenu
 } from '@app/types';
 import { take, map, tap, delay, catchError } from 'rxjs/operators';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
@@ -154,6 +161,11 @@ export class OrganizationComponent
   isShowSearch = false;
   searchUserInfos: UserInfoSS[] = [];
 
+  organizationTreeActivatedSubject: BehaviorSubject<
+    boolean
+  > = new BehaviorSubject<boolean>(false);
+  organizationTreeActivatedSubscription: Subscription;
+
   /** 부서원 리스트에 virture scroll의 size 가 체킹되지 않아 강제 수행. 1번만. */
   isInitList = false;
 
@@ -256,6 +268,21 @@ export class OrganizationComponent
           this.psDirectiveRef.update();
         }
       });
+
+    this.organizationTreeActivatedSubscription = combineLatest([
+      this.store.pipe(
+        select(AppStore.MessengerSelector.SettingsSelector.gnbMenuIndex)
+      ),
+      this.store.pipe(
+        select(
+          AppStore.MessengerSelector.SettingsSelector.organizationTreeActivated
+        )
+      )
+    ]).subscribe(([menu, activate]) => {
+      this.organizationTreeActivatedSubject.next(
+        menu === MainMenu.Organization || activate
+      );
+    });
   }
 
   ngAfterViewChecked(): void {
@@ -277,6 +304,9 @@ export class OrganizationComponent
     if (!!this.myDepartmentUserInfoListSubscription) {
       this.myDepartmentUserInfoListSubscription.unsubscribe();
     }
+    if (!!this.organizationTreeActivatedSubscription) {
+      this.organizationTreeActivatedSubscription.unsubscribe();
+    }
   }
 
   /** 유저검색 */

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

@@ -154,7 +154,7 @@
       >
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
       </div>
-      <div *ngIf="isShowSearchArea" class="chat-search bg-accent-color">
+      <div *ngIf="isShowSearchArea" class="chat-search">
         <ucap-chat-search
           [totalCount]="searchTotalCount"
           [curIndex]="searchCurrentIndex"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html

@@ -77,7 +77,12 @@
           fxFlexFill
           class="guide-msg"
         >
-          {{ 'common.file.errors.cantPlay' | translate }}
+          <div>
+            <span class="icon-img">
+              <i class="mid mdi-information-outline"></i>
+            </span>
+            {{ 'common.file.errors.cantPlay' | translate }}
+          </div>
         </div>
       </div>
       <ul>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -37,10 +37,23 @@ $tablet-s-width: 768px;
     display: none;
   }
   .select-file {
+    height: 150px;
     color: #212121;
     border-bottom: 1px dotted #dddddd;
     text-align: center;
-    padding-bottom: 10px;
+    .guide-msg {
+      div {
+        display: flex;
+        flex-flow: column;
+        height: 140px;
+        justify-content: center;
+        justify-items: center;
+        color: #999999;
+        .icon-img {
+          margin-bottom: 6px;
+        }
+      }
+    }
   }
   ul {
     padding-top: 10px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.ts

@@ -25,6 +25,7 @@ import { map, tap, catchError, take } from 'rxjs/operators';
 import { Store, select } from '@ngrx/store';
 import * as AppStore from '@app/store';
 import * as StatusStore from '@app/store/messenger/status';
+import * as SettingsStore from '@app/store/messenger/settings';
 
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { Company } from '@ucap-webmessenger/api-external';
@@ -64,7 +65,6 @@ import {
 } from '@ucap-webmessenger/ui';
 import { TranslateService, TranslateParser } from '@ngx-translate/core';
 import { environment } from '../../../../../environments/environment';
-import { StringUtil } from '@ucap-webmessenger/core';
 
 export interface CreateChatDialogData {
   type?: string;
@@ -397,11 +397,17 @@ export class CreateChatDialogComponent implements OnInit, OnDestroy {
   onSelectedTabChange(tabChangeEvent: MatTabChangeEvent): void {
     this.currentTabIndex = tabChangeEvent.index;
 
-    if (tabChangeEvent.index === 2) {
+    if (2 === tabChangeEvent.index) {
       this.selectedUserList = [];
     } else {
       this.selectedRoom = null;
     }
+
+    this.store.dispatch(
+      SettingsStore.organizationTreeActivated({
+        activate: 1 === tabChangeEvent.index
+      })
+    );
   }
 
   /** 유저검색 */

projects/ucap-webmessenger-app/src/app/store/messenger/settings/actions.ts

@@ -7,3 +7,8 @@ export const selectedGnbMenuIndex = createAction(
   '[Messenger::Settings] select Gnb MenuIndex',
   props<{ menuIndex: MainMenu }>()
 );
+
+export const organizationTreeActivated = createAction(
+  '[Messenger::Settings] Organization Tree Activated',
+  props<{ activate: boolean }>()
+);

projects/ucap-webmessenger-app/src/app/store/messenger/settings/reducers.ts

@@ -1,6 +1,6 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { selectedGnbMenuIndex } from './actions';
+import { selectedGnbMenuIndex, organizationTreeActivated } from './actions';
 
 import * as AuthenticationStore from '@app/store/account/authentication';
 
@@ -12,6 +12,12 @@ export const reducer = createReducer(
       gnbMenuIndex: action.menuIndex
     };
   }),
+  on(organizationTreeActivated, (state, action) => {
+    return {
+      ...state,
+      organizationTreeActivated: action.activate
+    };
+  }),
 
   on(AuthenticationStore.logoutInitialize, (state, action) => {
     return {

projects/ucap-webmessenger-app/src/app/store/messenger/settings/state.ts

@@ -5,14 +5,23 @@ import { MainMenu } from '@app/types';
 
 export interface State {
   gnbMenuIndex: MainMenu;
+  organizationTreeActivated: boolean;
 }
 
 export const initialState: State = {
-  gnbMenuIndex: MainMenu.Group
+  gnbMenuIndex: MainMenu.Group,
+  organizationTreeActivated: false
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
   return {
-    gnbMenuIndex: createSelector(selector, (state: State) => state.gnbMenuIndex)
+    gnbMenuIndex: createSelector(
+      selector,
+      (state: State) => state.gnbMenuIndex
+    ),
+    organizationTreeActivated: createSelector(
+      selector,
+      (state: State) => state.organizationTreeActivated
+    )
   };
 }

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

@@ -420,12 +420,13 @@ $daesang-grey: (
       }
     }
   }
-  .chat-search-frame {
+  /*.대화방 검색창 bg
+  chat-search-frame {
     .chat-search {
       //background-color: mat-color($accent, 600, 0.7);
       background-color: mat-color($accent, 800, 0.8);
     }
-  }
+  }*/
   .translationForm {
     background-color: mat-color($accent, 200, 0.4);
   }
@@ -454,4 +455,12 @@ $daesang-grey: (
       background-color: mat-color($accent, 500);
     }
   }
+  .chatroom-search{
+    .search-form{
+      border: 2px solid mat-color($accent, B100);
+    }
+    .btns{
+       background-color: mat-color($accent, B100);
+    }
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html

@@ -1,61 +1,3 @@
-<!--<div fxFlex fxLayout="row" class="chatroom-search">
-  <div
-    fxLayout="row"
-    fxLayoutAlign="start center"
-    class="input input-lineless search-form"
-  >
-    <form [formGroup]="fgSearch">
-      <span class="icon-img">
-        <i class="mid mdi-magnify"></i>
-      </span>
-      <mat-form-field floatLabel="never">
-        <input
-          matInput
-          #inputSearch
-          type="text"
-          placeholder="{{ 'chat.searchEventByText' | translate }}"
-          value=""
-          formControlName="searchInput"
-          (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
-        />
-        <button
-          mat-button
-          matSuffix
-          mat-icon-button
-          aria-label="Clear"
-          *ngIf="inputSearch.value"
-          (click)="inputSearch.value = ''"
-        >
-          <mat-icon>close</mat-icon>
-        </button>
-      </mat-form-field>
-      <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
-    </form>
-  </div>
-  <span class="stroke-bar"></span>
-  <div class="btns">
-    <button
-      *ngIf="false"
-      mat-stroked-button
-      (click)="onClickSearchAndPrev()"
-      class="btn-toggle"
-    >
-      <i class="mid mdi-arrow-up"></i>
-    </button>
-    <button class="icon-button btn-search" (click)="onClickPrevSearch()">
-      <i class="mid mdi-arrow-up mdi-chevron-up"></i>
-    </button>
-    <button class="icon-button btn-search" (click)="onClickNextSearch()">
-      <i class="mid mdi-arrow-down mdi-chevron-down"></i>
-    </button>
-    <button
-      class="icon-button btn-close-searchbox bg-accent-dark"
-      (click)="inputSearch.value = ''; onClickSearchCancel()"
-    >
-      <i class="mid mdi-window-close"></i>
-    </button>
-  </div>
-</div>-->
 <div fxFlex fxLayout="row" class="chatroom-search">
   <div
     fxLayout="row"
@@ -66,7 +8,7 @@
       <span class="icon-img">
         <i class="mid mdi-magnify"></i>
       </span>
-      <mat-form-field floatLabel="never">
+      <mat-form-field floatLabel="never" class="white">
         <input
           matInput
           #inputSearch
@@ -90,7 +32,7 @@
       <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
     </form>
   </div>
-  <span class="stroke-bar"></span>
+
   <div class="btns">
     <button
       *ngIf="false"
@@ -101,16 +43,18 @@
       <i class="mid mdi-arrow-up"></i>
     </button>
     <button class="icon-button btn-search" (click)="onClickPrevSearch()">
-      <i class="mid  mdi-chevron-up"></i>
+      <i class="mid  mid-24 mdi-chevron-up"></i>
     </button>
+    <span class="stroke-bar"></span>
     <button class="icon-button btn-search" (click)="onClickNextSearch()">
-      <i class="mid mdi-chevron-down"></i>
+      <i class="mid mid-24 mdi-chevron-down"></i>
     </button>
+    <span class="stroke-bar"></span>
     <button
-      class="icon-button btn-close-searchbox bg-accent-dark"
+      class="icon-button btn-close-searchbox"
       (click)="inputSearch.value = ''; onClickSearchCancel()"
     >
-      <i class="mid mdi-window-close"></i>
+      <i class="mid  mdi-window-close"></i>
     </button>
   </div>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss

@@ -1,21 +1,22 @@
 $tablet-l-width: 1024px;
 $tablet-s-width: 768px;
-$search-item-color: #ffffff;
+$search-item-color: #444444;
 
 .chatroom-search {
   display: flex;
-  flex: 0 0 auto;
+  flex: 1 1 auto;
   justify-items: center;
   width: 100%;
   .search-form {
     flex-flow: row;
-    padding: 0 0 0 20px;
+    padding: 0 0 0 10px;
+    margin-left: 10px;
     width: calc(100% - 126px);
     position: relative;
     @media screen and (max-width: #{$tablet-s-width}),
     (max-height: 600px) {
       padding: 0 0 0 14px;
-      flex: 0 0 auto;
+      flex: 1 1 auto;
     }
     form {
       display: inline-flex;
@@ -34,6 +35,12 @@ $search-item-color: #ffffff;
         .mat-hint {
           color: rgba(0, 0, 0, 0.54);
         }
+        &.white {
+          .mat-form-field-label,
+          .mat-hint {
+            color: rgba(0, 0, 0, 0.54);
+          }
+        }
       }
     }
   }
@@ -72,17 +79,17 @@ $search-item-color: #ffffff;
   position: relative;
   .btns {
     display: flex;
-    flex: 0 0 0%;
+    flex: 1 1 auto;
     margin-left: auto;
     margin-top: 0;
     height: 100%;
     button {
       margin-left: 4px;
-      &.btn-search.icon-button {
+      &.icon-button {
         align-self: center;
         width: 30px;
         height: 30px;
-        color: $search-item-color;
+        color: #ffffff;
       }
     }
   }
@@ -94,14 +101,15 @@ $search-item-color: #ffffff;
     display: flex;
     justify-content: center;
     justify-items: center;
+    margin-right: 4px;
   }
 }
 
 .stroke-bar {
-  width: 2px;
+  width: 1px;
   height: 20px;
   background-color: rgba(255, 255, 255, 0.3);
   display: inline-flex;
   align-self: center;
-  margin: 0 6px;
+  margin: 0 4px;
 }

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.ts

@@ -20,7 +20,7 @@ import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
-import { Subscription } from 'rxjs';
+import { Subscription, Observable } from 'rxjs';
 
 interface OrganizationNode {
   deptInfo: DeptInfo;
@@ -103,6 +103,9 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
     this.dataSource.data = rootNodeList;
   }
 
+  @Input()
+  activate$: Observable<boolean>;
+
   @Output()
   selected = new EventEmitter<DeptInfo>();
 
@@ -121,6 +124,8 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
 
   treeControlExpansionChangeSubscription: Subscription;
 
+  activateSubscription: Subscription;
+
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private logger: NGXLogger
@@ -154,13 +159,24 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
         this.psDirectiveRef.update();
       }
     );
+    this.activateSubscription = this.activate$.subscribe(activate => {
+      if (activate) {
+        setTimeout(() => {
+          if (!!this.cvsvOrganization) {
+            this.cvsvOrganization.checkViewportSize();
+          }
+        }, 100);
+      }
+    });
   }
 
   ngOnDestroy(): void {
-    this.logger.debug('-----------------------TreeComponent ngOnDestroy');
     if (!!this.treeControlExpansionChangeSubscription) {
       this.treeControlExpansionChangeSubscription.unsubscribe();
     }
+    if (!!this.activateSubscription) {
+      this.activateSubscription.unsubscribe();
+    }
   }
 
   ngAfterViewInit(): void {

projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.scss

@@ -43,7 +43,7 @@ $login-max-height: 800px;
     position: relative;
     justify-content: flex-start;
     flex-flow: column;
-    width: 38%;
+    width: 40%;
     height: 100%;
     background: #64cddf;
     color: #ffffff;
@@ -163,7 +163,7 @@ $login-max-height: 800px;
   }
   .mat-card-content {
     position: relative;
-    width: 62%;
+    width: 60%;
     height: 100%;
     padding-bottom: 10px;
     margin-left: 30px;

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

@@ -21,7 +21,7 @@ textarea {
     width: 100%;
     .mat-form-field-appearance-legacy {
       .mat-form-field-wrapper {
-        color: #ffffff;
+        //color: #ffffff;
         width: 100%;
         .mat-form-field-infix {
           .mat-input-element {
@@ -42,7 +42,8 @@ textarea {
           }
         }
         .mat-form-field-label {
-          color: rgba(255, 255, 255, 0.7) !important;
+          color: currentColor;
+          opacity: 0.7;
           font-size: 1em;
         }
         .mat-form-field-underline {
@@ -73,6 +74,7 @@ textarea {
     width: 90%;
     align-items: center;
     display: flex;
+    color: #ffffff;
     .mat-form-field-wrapper {
       padding: 0;
       display: flex;
@@ -89,7 +91,8 @@ textarea {
           top: 0;
           .mat-form-field-label {
             top: 0;
-            color: rgba(255, 255, 255, 0.7) !important;
+            color: currentColor;
+            opacity: 0.7;
             font-size: 0.9em;
           }
         }
@@ -99,6 +102,9 @@ textarea {
       }
     }
     //텍스트 선명도
+    &.white {
+      color: #333333;
+    }
   }
 }
 

projects/ucap-webmessenger-ui/src/lib/directives/cdk-virtual-scroll-viewport-patch.directive.ts

@@ -1,7 +1,15 @@
-import { Directive, OnInit, OnDestroy, Self, Inject } from '@angular/core';
+import {
+  Directive,
+  OnInit,
+  OnDestroy,
+  Self,
+  Inject,
+  ChangeDetectorRef
+} from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { debounceTime, takeUntil } from 'rxjs/operators';
+import { DOCUMENT } from '@angular/common';
 
 @Directive({
   // tslint:disable-next-line: directive-selector
@@ -14,13 +22,17 @@ export class CdkVirtualScrollViewportPatchDirective
   constructor(
     @Self()
     @Inject(CdkVirtualScrollViewport)
-    private readonly viewportComponent: CdkVirtualScrollViewport
+    private readonly viewportComponent: CdkVirtualScrollViewport,
+    @Inject(DOCUMENT)
+    private readonly document: Document
   ) {}
 
   ngOnInit() {
-    fromEvent(window, 'resize')
+    fromEvent(this.document.defaultView, 'resize')
       .pipe(debounceTime(10), takeUntil(this.destroySubject))
-      .subscribe(() => this.viewportComponent.checkViewportSize());
+      .subscribe(() => {
+        this.viewportComponent.checkViewportSize();
+      });
   }
 
   ngOnDestroy() {