From ec9a395bf1a33465463a4e38b4383184ee64da63 Mon Sep 17 00:00:00 2001 From: qianmoQ Date: Thu, 11 Nov 2021 00:38:09 +0800 Subject: [PATCH] [Component] Add component for scrollbar --- package.json | 1 + src/renderer/app/layout/layout.routing.ts | 4 + .../navigation/navigation.component.html | 3 + .../scrollbar/scrollbar.component.html | 102 ++++++++++++++++++ .../scrollbar/scrollbar.component.scss | 25 +++++ .../scrollbar/scrollbar.component.ts | 65 +++++++++++ .../component/scrollbar/scrollbar.module.ts | 40 +++++++ .../services/component/scrollbar.service.ts | 12 +++ yarn.lock | 19 ++++ 9 files changed, 271 insertions(+) create mode 100644 src/renderer/app/pages/component/scrollbar/scrollbar.component.html create mode 100644 src/renderer/app/pages/component/scrollbar/scrollbar.component.scss create mode 100644 src/renderer/app/pages/component/scrollbar/scrollbar.component.ts create mode 100644 src/renderer/app/pages/component/scrollbar/scrollbar.module.ts create mode 100644 src/renderer/services/component/scrollbar.service.ts diff --git a/package.json b/package.json index a3c8a8e..32a3a0f 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "moment": "^2.29.1", "ngx-bootstrap": "^7.1.0", "ngx-clipboard": "^14.0.1", + "ngx-perfect-scrollbar": "^10.1.1", "rxjs": "~6.6.0", "tslib": "^2.1.0", "zone.js": "~0.11.4" diff --git a/src/renderer/app/layout/layout.routing.ts b/src/renderer/app/layout/layout.routing.ts index 6659ee4..ddf06f4 100644 --- a/src/renderer/app/layout/layout.routing.ts +++ b/src/renderer/app/layout/layout.routing.ts @@ -36,6 +36,10 @@ const LAYOUT_ROUTES: Routes = [ { path: 'tooltips', loadChildren: () => import('../pages/component/tooltips/tooltips.module').then(m => m.TooltipsComponentModule) + }, + { + path: 'scrollbar', + loadChildren: () => import('../pages/component/scrollbar/scrollbar.module').then(m => m.ScrollbarModule) } ] }, diff --git a/src/renderer/app/layout/navigation/navigation.component.html b/src/renderer/app/layout/navigation/navigation.component.html index ed5ddcb..9e58e8a 100644 --- a/src/renderer/app/layout/navigation/navigation.component.html +++ b/src/renderer/app/layout/navigation/navigation.component.html @@ -22,6 +22,9 @@
  • Tooltips
    • +
  • + Scrollbar +
  • diff --git a/src/renderer/app/pages/component/scrollbar/scrollbar.component.html b/src/renderer/app/pages/component/scrollbar/scrollbar.component.html new file mode 100644 index 0000000..fe77472 --- /dev/null +++ b/src/renderer/app/pages/component/scrollbar/scrollbar.component.html @@ -0,0 +1,102 @@ +
    +
    +

    Scrollbar

    + This template is built using ngx-perfect-scrollbar and provides some usage examples +
    +
    +
    +
    +

    Returns the top

    +
    + +
    +
    +
    +
    +

    + I,m {{index}} +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Returns the bottom

    +
    + +
    +
    +
    +
    +

    + I,m {{index}} +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    At position

    +
    + +
    +
    +
    +
    +

    + I,m {{index}} +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Go to Left

    +
    + +
    +
    +
    +
    + + I,m {{index}} + +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Go to Right

    +
    + +
    +
    +
    +
    + + I,m {{index}} + +
    +
    +
    +
    +
    +
    + +
    diff --git a/src/renderer/app/pages/component/scrollbar/scrollbar.component.scss b/src/renderer/app/pages/component/scrollbar/scrollbar.component.scss new file mode 100644 index 0000000..353c313 --- /dev/null +++ b/src/renderer/app/pages/component/scrollbar/scrollbar.component.scss @@ -0,0 +1,25 @@ +.content-container { + position: relative; + overflow: auto; + margin: 5px; + border-radius: 4px; + background-color: #fff; + position: relative; + min-height: 0; + padding: 8px; + border: 1px solid #ccc; +} + +.scroll-container { + position: relative; +} + +.scrollable-content { + padding: 2px; + height: 100px; + margin: 0; +} + +.no-space { + white-space: nowrap; +} diff --git a/src/renderer/app/pages/component/scrollbar/scrollbar.component.ts b/src/renderer/app/pages/component/scrollbar/scrollbar.component.ts new file mode 100644 index 0000000..ee21fa2 --- /dev/null +++ b/src/renderer/app/pages/component/scrollbar/scrollbar.component.ts @@ -0,0 +1,65 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { PerfectScrollbarConfigInterface, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar'; +import { ScrollbarService } from '@renderer/services/component/scrollbar.service'; + +@Component({ + selector: 'app-component-scrollbar', + templateUrl: './scrollbar.component.html', + styleUrls: ['./scrollbar.component.scss'] +}) +export class ScrollbarComponent implements OnInit { + public scrollbarType = '1'; + public config: PerfectScrollbarConfigInterface = {}; + public data: [number]; + + public constructor(private scrollbarService: ScrollbarService) { + this.data = this.scrollbarService.data; + } + + public toggleType() { + this.scrollbarType = (this.scrollbarType === '1') ? '2' : '1'; + } + + // Top + @ViewChild('goToTopScroll') + goToTopScroll: PerfectScrollbarDirective; + + public goToTop() { + this.goToTopScroll.scrollToTop(); + } + + // Bottom + @ViewChild('goToBottomScroll') + goToBottomScroll: PerfectScrollbarDirective; + + public goToBottom() { + this.goToBottomScroll.scrollToBottom(); + } + + // Go To Scrollbar + @ViewChild('goToXYScroll') + goToXYScroll: PerfectScrollbarDirective; + + public goToXY(x: number, y: number) { + this.goToXYScroll.scrollTo(x, y, 500); + } + + // Left + @ViewChild('goToLeftScroll') + goToLeftScroll: PerfectScrollbarDirective; + + public goToLeft() { + this.goToLeftScroll.scrollToLeft(); + } + + // Top + @ViewChild('goToRightScroll') + goToRightScroll: PerfectScrollbarDirective; + + public goToRight() { + this.goToRightScroll.scrollToRight(); + } + + ngOnInit() { + } +} diff --git a/src/renderer/app/pages/component/scrollbar/scrollbar.module.ts b/src/renderer/app/pages/component/scrollbar/scrollbar.module.ts new file mode 100644 index 0000000..ab2e0d4 --- /dev/null +++ b/src/renderer/app/pages/component/scrollbar/scrollbar.module.ts @@ -0,0 +1,40 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { FormsModule } from '@angular/forms'; +import { + PERFECT_SCROLLBAR_CONFIG, + PerfectScrollbarConfigInterface, + PerfectScrollbarModule +} from 'ngx-perfect-scrollbar'; +import { ScrollbarComponent } from './scrollbar.component'; +import { ScrollbarService } from '@renderer/services/component/scrollbar.service'; + +const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { + suppressScrollX: true, + wheelPropagation: false +}; +const SCROLLBARS_ROUTES = [ + {path: '', component: ScrollbarComponent} +]; + +@NgModule({ + declarations: [ + ScrollbarComponent + ], + imports: [ + CommonModule, + FormsModule, + PerfectScrollbarModule, + RouterModule.forChild(SCROLLBARS_ROUTES) + ], + providers: [ + { + provide: PERFECT_SCROLLBAR_CONFIG, + useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG + }, + ScrollbarService + ] +}) +export class ScrollbarModule { +} diff --git a/src/renderer/services/component/scrollbar.service.ts b/src/renderer/services/component/scrollbar.service.ts new file mode 100644 index 0000000..328f4a1 --- /dev/null +++ b/src/renderer/services/component/scrollbar.service.ts @@ -0,0 +1,12 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class ScrollbarService { + data: any = []; + + constructor() { + for (let i = 0; i <= 100; i++) { + this.data.push(i); + } + } +} diff --git a/yarn.lock b/yarn.lock index b1f81e7..0110797 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6855,6 +6855,15 @@ ngx-clipboard@^14.0.1: ngx-window-token ">=4.0.0" tslib "^2.0.0" +ngx-perfect-scrollbar@^10.1.1: + version "10.1.1" + resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-10.1.1.tgz#f89832b9109e89bb59d516184638accd028e9735" + integrity sha512-f9IaDJGlBzSxnJ3Ki76n2JdzfQngUFyCf0E+CuVLaR5jL0IJDcTu7vOs8wexXunRMTd8xvIv0+sdIxf8hXAGWg== + dependencies: + perfect-scrollbar "1.5.0" + resize-observer-polyfill "^1.5.0" + tslib "^2.0.0" + ngx-window-token@>=4.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/ngx-window-token/-/ngx-window-token-5.0.0.tgz#ca63a25038c9fdd73159857276ff67ec7f5b730b" @@ -7457,6 +7466,11 @@ pend@~1.2.0: resolved "https://registry.npm.taobao.org/pend/download/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50" integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA= +perfect-scrollbar@1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz#821d224ed8ff61990c23f26db63048cdc75b6b83" + integrity sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA== + performance-now@^2.1.0: version "2.1.0" resolved "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" @@ -8517,6 +8531,11 @@ requires-port@^1.0.0: resolved "https://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= +resize-observer-polyfill@^1.5.0: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.npm.taobao.org/resolve-cwd/download/resolve-cwd-2.0.0.tgz?cache=0&sync_timestamp=1615984440417&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve-cwd%2Fdownload%2Fresolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"