Skip to content

Commit eec3f3d

Browse files
qianmoQqianmoQ
authored
Merge pull request #8 from qianmoQ/1.1.0-SNAPSHOT
[Component] Add component for scrollbar
2 parents cf404bb + ec9a395 commit eec3f3d

File tree

9 files changed

+271
-0
lines changed

9 files changed

+271
-0
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"moment": "^2.29.1",
4848
"ngx-bootstrap": "^7.1.0",
4949
"ngx-clipboard": "^14.0.1",
50+
"ngx-perfect-scrollbar": "^10.1.1",
5051
"rxjs": "~6.6.0",
5152
"tslib": "^2.1.0",
5253
"zone.js": "~0.11.4"

‎src/renderer/app/layout/layout.routing.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ const LAYOUT_ROUTES: Routes = [
3636
{
3737
path: 'tooltips',
3838
loadChildren: () => import('../pages/component/tooltips/tooltips.module').then(m => m.TooltipsComponentModule)
39+
},
40+
{
41+
path: 'scrollbar',
42+
loadChildren: () => import('../pages/component/scrollbar/scrollbar.module').then(m => m.ScrollbarModule)
3943
}
4044
]
4145
},

‎src/renderer/app/layout/navigation/navigation.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@
2222
<li routerLinkActive="navigation__active">
2323
<a [routerLink]="['/component/tooltips']"><i class="fa fa-tripadvisor"></i> Tooltips</a>
2424
</li>
25+
<li routerLinkActive="navigation__active">
26+
<a [routerLink]="['/component/scrollbar']"><i class="fa fa-bars"></i> Scrollbar</a>
27+
</li>
2528
</ul>
2629
</li>
2730
<li routerLinkActive="navigation__sub--active" class="navigation__sub">

‎src/renderer/app/pages/component/scrollbar/scrollbar.component.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<section class="content--row">
2+
<header class="content__title">
3+
<h1>Scrollbar</h1>
4+
<small>This template is built using <code>ngx-perfect-scrollbar</code> and provides some usage examples</small>
5+
</header>
6+
<div class="card-demo">
7+
<div class="card">
8+
<div class="card-body">
9+
<h4 class="card-title">Returns the top</h4>
10+
<div class="btn-demo">
11+
<button class="btn btn-light" (click)='goToTop()'>Returns the top</button>
12+
</div>
13+
<div class="content-container">
14+
<div [perfectScrollbar] #goToTopScroll="ngxPerfectScrollbar" class="scroll-container">
15+
<div class="scrollable-content">
16+
<p *ngFor="let index of data">
17+
I,m {{index}}
18+
</p>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
<div class="card-demo">
26+
<div class="card">
27+
<div class="card-body">
28+
<h4 class="card-title">Returns the bottom</h4>
29+
<div class="btn-demo">
30+
<button class="btn btn-light" (click)='goToBottom()'>Returns the bottom</button>
31+
</div>
32+
<div class="content-container">
33+
<div [perfectScrollbar] #goToBottomScroll="ngxPerfectScrollbar" class="scroll-container">
34+
<div class="scrollable-content">
35+
<p *ngFor="let index of data">
36+
I,m {{index}}
37+
</p>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
<div class="card-demo">
45+
<div class="card">
46+
<div class="card-body">
47+
<h4 class="card-title">At position</h4>
48+
<div class="btn-demo">
49+
<button class="btn btn-light" (click)='goToXY(25, 50)'>At position(25,50)</button>
50+
</div>
51+
<div class="content-container">
52+
<div [perfectScrollbar] #goToXYScroll="ngxPerfectScrollbar" class="scroll-container">
53+
<div class="scrollable-content">
54+
<p *ngFor="let index of data">
55+
I,m {{index}}
56+
</p>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
<div class="card-demo">
64+
<div class="card">
65+
<div class="card-body">
66+
<h4 class="card-title">Go to Left</h4>
67+
<div class="btn-demo">
68+
<button class="btn btn-light" (click)='goToLeft()'>Go to Left</button>
69+
</div>
70+
<div class="content-container">
71+
<div [perfectScrollbar] #goToLeftScroll="ngxPerfectScrollbar" class="scroll-container">
72+
<div class="scrollable-content no-space">
73+
<span *ngFor="let index of data">
74+
I,m {{index}}
75+
</span>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
<div class="card-demo">
83+
<div class="card">
84+
<div class="card-body">
85+
<h4 class="card-title">Go to Right</h4>
86+
<div class="btn-demo">
87+
<button class="btn btn-light" (click)='goToRight()'>Go to Right</button>
88+
</div>
89+
<div class="content-container">
90+
<div [perfectScrollbar] #goToRightScroll="ngxPerfectScrollbar" class="scroll-container">
91+
<div class="scrollable-content no-space">
92+
<span *ngFor="let index of data">
93+
I,m {{index}}
94+
</span>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
<perfect-scrollbar></perfect-scrollbar>
102+
</section>

‎src/renderer/app/pages/component/scrollbar/scrollbar.component.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.content-container {
2+
position: relative;
3+
overflow: auto;
4+
margin: 5px;
5+
border-radius: 4px;
6+
background-color: #fff;
7+
position: relative;
8+
min-height: 0;
9+
padding: 8px;
10+
border: 1px solid #ccc;
11+
}
12+
13+
.scroll-container {
14+
position: relative;
15+
}
16+
17+
.scrollable-content {
18+
padding: 2px;
19+
height: 100px;
20+
margin: 0;
21+
}
22+
23+
.no-space {
24+
white-space: nowrap;
25+
}

‎src/renderer/app/pages/component/scrollbar/scrollbar.component.ts‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Component, OnInit, ViewChild } from '@angular/core';
2+
import { PerfectScrollbarConfigInterface, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
3+
import { ScrollbarService } from '@renderer/services/component/scrollbar.service';
4+
5+
@Component({
6+
selector: 'app-component-scrollbar',
7+
templateUrl: './scrollbar.component.html',
8+
styleUrls: ['./scrollbar.component.scss']
9+
})
10+
export class ScrollbarComponent implements OnInit {
11+
public scrollbarType = '1';
12+
public config: PerfectScrollbarConfigInterface = {};
13+
public data: [number];
14+
15+
public constructor(private scrollbarService: ScrollbarService) {
16+
this.data = this.scrollbarService.data;
17+
}
18+
19+
public toggleType() {
20+
this.scrollbarType = (this.scrollbarType === '1') ? '2' : '1';
21+
}
22+
23+
// Top
24+
@ViewChild('goToTopScroll')
25+
goToTopScroll: PerfectScrollbarDirective;
26+
27+
public goToTop() {
28+
this.goToTopScroll.scrollToTop();
29+
}
30+
31+
// Bottom
32+
@ViewChild('goToBottomScroll')
33+
goToBottomScroll: PerfectScrollbarDirective;
34+
35+
public goToBottom() {
36+
this.goToBottomScroll.scrollToBottom();
37+
}
38+
39+
// Go To Scrollbar
40+
@ViewChild('goToXYScroll')
41+
goToXYScroll: PerfectScrollbarDirective;
42+
43+
public goToXY(x: number, y: number) {
44+
this.goToXYScroll.scrollTo(x, y, 500);
45+
}
46+
47+
// Left
48+
@ViewChild('goToLeftScroll')
49+
goToLeftScroll: PerfectScrollbarDirective;
50+
51+
public goToLeft() {
52+
this.goToLeftScroll.scrollToLeft();
53+
}
54+
55+
// Top
56+
@ViewChild('goToRightScroll')
57+
goToRightScroll: PerfectScrollbarDirective;
58+
59+
public goToRight() {
60+
this.goToRightScroll.scrollToRight();
61+
}
62+
63+
ngOnInit() {
64+
}
65+
}

‎src/renderer/app/pages/component/scrollbar/scrollbar.module.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { RouterModule } from '@angular/router';
4+
import { FormsModule } from '@angular/forms';
5+
import {
6+
PERFECT_SCROLLBAR_CONFIG,
7+
PerfectScrollbarConfigInterface,
8+
PerfectScrollbarModule
9+
} from 'ngx-perfect-scrollbar';
10+
import { ScrollbarComponent } from './scrollbar.component';
11+
import { ScrollbarService } from '@renderer/services/component/scrollbar.service';
12+
13+
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
14+
suppressScrollX: true,
15+
wheelPropagation: false
16+
};
17+
const SCROLLBARS_ROUTES = [
18+
{path: '', component: ScrollbarComponent}
19+
];
20+
21+
@NgModule({
22+
declarations: [
23+
ScrollbarComponent
24+
],
25+
imports: [
26+
CommonModule,
27+
FormsModule,
28+
PerfectScrollbarModule,
29+
RouterModule.forChild(SCROLLBARS_ROUTES)
30+
],
31+
providers: [
32+
{
33+
provide: PERFECT_SCROLLBAR_CONFIG,
34+
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
35+
},
36+
ScrollbarService
37+
]
38+
})
39+
export class ScrollbarModule {
40+
}

‎src/renderer/services/component/scrollbar.service.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable()
4+
export class ScrollbarService {
5+
data: any = [];
6+
7+
constructor() {
8+
for (let i = 0; i <= 100; i++) {
9+
this.data.push(i);
10+
}
11+
}
12+
}

‎yarn.lock‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6855,6 +6855,15 @@ ngx-clipboard@^14.0.1:
68556855
ngx-window-token ">=4.0.0"
68566856
tslib "^2.0.0"
68576857

6858+
ngx-perfect-scrollbar@^10.1.1:
6859+
version "10.1.1"
6860+
resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-10.1.1.tgz#f89832b9109e89bb59d516184638accd028e9735"
6861+
integrity sha512-f9IaDJGlBzSxnJ3Ki76n2JdzfQngUFyCf0E+CuVLaR5jL0IJDcTu7vOs8wexXunRMTd8xvIv0+sdIxf8hXAGWg==
6862+
dependencies:
6863+
perfect-scrollbar "1.5.0"
6864+
resize-observer-polyfill "^1.5.0"
6865+
tslib "^2.0.0"
6866+
68586867
ngx-window-token@>=4.0.0:
68596868
version "5.0.0"
68606869
resolved "https://registry.yarnpkg.com/ngx-window-token/-/ngx-window-token-5.0.0.tgz#ca63a25038c9fdd73159857276ff67ec7f5b730b"
@@ -7457,6 +7466,11 @@ pend@~1.2.0:
74577466
resolved "https://registry.npm.taobao.org/pend/download/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
74587467
integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
74597468

7469+
[email protected]:
7470+
version "1.5.0"
7471+
resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz#821d224ed8ff61990c23f26db63048cdc75b6b83"
7472+
integrity sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA==
7473+
74607474
performance-now@^2.1.0:
74617475
version "2.1.0"
74627476
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:
85178531
resolved "https://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
85188532
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
85198533

8534+
resize-observer-polyfill@^1.5.0:
8535+
version "1.5.1"
8536+
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
8537+
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
8538+
85208539
resolve-cwd@^2.0.0:
85218540
version "2.0.0"
85228541
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"

0 commit comments

Comments
 (0)