From f438da1695906bbb179bdcdc9282868457b07eb4 Mon Sep 17 00:00:00 2001 From: Phodal Huang Date: Fri, 3 Apr 2020 17:27:11 +0800 Subject: [PATCH] feat: add virtual scroll for render --- src/app/shared/custom-material.module.ts | 3 + .../ledge-render/ledge-render.component.html | 219 +++++++++--------- .../ledge-render/ledge-render.component.scss | 4 + .../ledge-render/ledge-render.component.ts | 2 + 4 files changed, 120 insertions(+), 108 deletions(-) diff --git a/src/app/shared/custom-material.module.ts b/src/app/shared/custom-material.module.ts index ffb82d87..138363da 100644 --- a/src/app/shared/custom-material.module.ts +++ b/src/app/shared/custom-material.module.ts @@ -10,6 +10,7 @@ import { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule, } from '@angular/material/dialog'; +import { ScrollingModule } from '@angular/cdk/scrolling'; const modules = [ MatToolbarModule, @@ -20,6 +21,8 @@ const modules = [ MatSidenavModule, MatIconModule, MatDialogModule, + + ScrollingModule, ]; @NgModule({ diff --git a/src/app/shared/ledge-render/ledge-render.component.html b/src/app/shared/ledge-render/ledge-render.component.html index 535045f1..0923daf9 100644 --- a/src/app/shared/ledge-render/ledge-render.component.html +++ b/src/app/shared/ledge-render/ledge-render.component.html @@ -1,143 +1,146 @@ -
-
-
- -
+ +
+
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- - - - - - - - - - - -
{{h}}
{{cell}}
-
+
+ + + + + + + + + + + +
{{h}}
{{cell}}
+
-
-
-
+
+
+
-
-
-
-
{{row.name}}
-
-
{{cell.name}}
+
+
+
+
{{row.name}}
+
+
{{cell.name}}
+
-
-
-
-
-
-
- {{header}} +
+
+
+
+
+ {{header}} +
-
-
-
-
-
{{cell}}
+
+
+
+
{{cell}}
+
-
-
-
-
- {{listItem.name}} - - -
-
{{item.name}}
-
- +
+
+
+ {{listItem.name}} + + +
+
{{item.name}}
+
+ +
-
- - + + +
-
-
-

-

-

-

-
-
-
+
+

+

+

+

+
+
+
-
+ 
         {{item.text}}
-
+
-
-
-
+
+
+
-
-
-
+
+
+
-
- -
  • - {{item.body.name}} -
      - -
    -
    • -     -
      - -
    -
    +
    + +
  • + {{item.body.name}} +
      + +
    +
    • +     +
      + +
    +
    -
    - {{stringify(item)}} +
    + {{stringify(item)}} +
    -
    + diff --git a/src/app/shared/ledge-render/ledge-render.component.scss b/src/app/shared/ledge-render/ledge-render.component.scss index 14259fa5..5f043af4 100644 --- a/src/app/shared/ledge-render/ledge-render.component.scss +++ b/src/app/shared/ledge-render/ledge-render.component.scss @@ -2,5 +2,9 @@ min-width: 960px; width: 100%; margin: 4em auto 0; + height: calc(100% - 64px); } +.render-item { + height: auto; +} diff --git a/src/app/shared/ledge-render/ledge-render.component.ts b/src/app/shared/ledge-render/ledge-render.component.ts index 0e5138fb..737ed156 100644 --- a/src/app/shared/ledge-render/ledge-render.component.ts +++ b/src/app/shared/ledge-render/ledge-render.component.ts @@ -1,5 +1,6 @@ import { AfterViewInit, + ChangeDetectionStrategy, Component, Input, OnChanges, @@ -14,6 +15,7 @@ import LedgeMarkdownConverter from '../components/model/ledge-markdown-converter selector: 'ledge-render', templateUrl: './ledge-render.component.html', styleUrls: ['./ledge-render.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges { constructor() {}