bug of perfect scrollbar is fixed

This commit is contained in:
병준 박 2019-11-19 11:30:43 +09:00
parent 289f52be70
commit 2f52cfe5ef
7 changed files with 65 additions and 48 deletions

View File

@ -25,27 +25,25 @@
class="search-result"
style="overflow: auto;"
>
<perfect-scrollbar>
<ucap-group-expansion-panel
#groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async"
[favoritBuddyList]="favoritBuddyList$ | async"
[myProfileInfo]="loginRes.userInfo"
(more)="onMoreGroup($event)"
<ucap-group-expansion-panel
#groupExpansionPanel
[groupBuddyList]="groupBuddyList$ | async"
[favoritBuddyList]="favoritBuddyList$ | async"
[myProfileInfo]="loginRes.userInfo"
(more)="onMoreGroup($event)"
>
<ucap-profile-user-list-item
*ucapGroupExpansionPanelItem="let userInfo"
[userInfo]="userInfo"
[presence]="getStatusBulkInfo(userInfo) | async"
[sessionVerinfo]="sessionVerinfo"
(click)="onSelectBuddy(userInfo)"
(openProfile)="onClickOpenProfile($event)"
(contextmenu)="onContextMenuProfile($event, userInfo)"
class="list-item-frame"
>
<ucap-profile-user-list-item
*ucapGroupExpansionPanelItem="let userInfo"
[userInfo]="userInfo"
[presence]="getStatusBulkInfo(userInfo) | async"
[sessionVerinfo]="sessionVerinfo"
(click)="onSelectBuddy(userInfo)"
(openProfile)="onClickOpenProfile($event)"
(contextmenu)="onContextMenuProfile($event, userInfo)"
class="list-item-frame"
>
</ucap-profile-user-list-item>
</ucap-group-expansion-panel>
</perfect-scrollbar>
</ucap-profile-user-list-item>
</ucap-group-expansion-panel>
</div>
<div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result">
<div *ngIf="searchProcessing">

View File

@ -12,14 +12,12 @@
</div>
<div class="oraganization-tab">
<div class="oraganization-tab-tree">
<perfect-scrollbar>
<ucap-organization-tree
[oraganizationList]="departmentInfoList$ | async"
[loginRes]="loginRes"
(selected)="onSelectedOrganization($event)"
class="tab-tree-frame"
></ucap-organization-tree>
</perfect-scrollbar>
<ucap-organization-tree
[oraganizationList]="departmentInfoList$ | async"
[loginRes]="loginRes"
(selected)="onSelectedOrganization($event)"
class="tab-tree-frame"
></ucap-organization-tree>
</div>
<div class="select-list">
<dl class="select-dept text-accent-color">
@ -47,21 +45,19 @@
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<div *ngIf="!isShowSearch" class="search-list">
<perfect-scrollbar>
<cdk-virtual-scroll-viewport itemSize="20" fxFlexFill>
<ucap-profile-user-list-item
*cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
[userInfo]="userInfo"
[checkable]="true"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
(checkUser)="onCheckUser($event)"
>
Loading...
</ucap-profile-user-list-item>
</cdk-virtual-scroll-viewport>
</perfect-scrollbar>
<cdk-virtual-scroll-viewport itemSize="20" perfectScrollbar fxFlexFill>
<ucap-profile-user-list-item
*cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
[userInfo]="userInfo"
[checkable]="true"
[sessionVerinfo]="sessionVerinfo"
[selectedUserList]="selectedUserList"
[isChecked]="getCheckedUser(userInfo)"
(checkUser)="onCheckUser($event)"
>
Loading...
</ucap-profile-user-list-item>
</cdk-virtual-scroll-viewport>
<!-- <ucap-profile-user-list-item
*ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
[userInfo]="userInfo"
@ -74,7 +70,11 @@
</ucap-profile-user-list-item> -->
</div>
<div *ngIf="isShowSearch" class="search-result">
<cdk-virtual-scroll-viewport itemSize="20" style="height: 100%;">
<cdk-virtual-scroll-viewport
itemSize="20"
perfectScrollbar
style="height: 100%;"
>
<ucap-profile-user-list-item
*cdkVirtualFor="let userInfo of searchUserInfos"
[userInfo]="userInfo"

View File

@ -1,3 +1,5 @@
@import '~perfect-scrollbar/css/perfect-scrollbar.css';
@import '~@ucap-webmessenger-scss/ui/ucap-ui';
@import 'assets/scss/ucap';

View File

@ -1,4 +1,9 @@
<cdk-virtual-scroll-viewport #cvsvGroup itemSize="80" fxFlexFill>
<cdk-virtual-scroll-viewport
#cvsvGroup
itemSize="80"
perfectScrollbar
fxFlexFill
>
<ng-container
*cdkVirtualFor="let node of dataSource.expandedData$"
></ng-container>

View File

@ -12,6 +12,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatTreeModule } from '@angular/material/tree';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { ExpansionPanelComponent } from './components/expansion-panel.component';
import { ExpansionPanelItemDirective } from './directives/expansion-panel-item.directive';
@ -34,7 +35,9 @@ const SERVICES = [];
MatIconModule,
MatTreeModule,
MatCheckboxModule,
MatRippleModule
MatRippleModule,
PerfectScrollbarModule
],
exports: [...COMPONENTS, ...DIRECTIVES],
declarations: [...COMPONENTS, ...DIRECTIVES],

View File

@ -1,4 +1,9 @@
<cdk-virtual-scroll-viewport #cvsvOrganization itemSize="40" fxFlexFill>
<cdk-virtual-scroll-viewport
#cvsvOrganization
itemSize="40"
perfectScrollbar
fxFlexFill
>
<ng-container
*cdkVirtualFor="let node of dataSource.expandedData$"
></ng-container>

View File

@ -14,6 +14,8 @@ import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatTreeModule } from '@angular/material/tree';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { TenantSearchComponent } from './components/tenant-search.component';
import { TreeComponent } from './components/tree.component';
@ -33,7 +35,9 @@ const SERVICES = [];
MatIconModule,
MatInputModule,
MatSelectModule,
MatTreeModule
MatTreeModule,
PerfectScrollbarModule
],
exports: [...COMPONENTS],
declarations: [...COMPONENTS]