Skip to content

Commit c9fa496

Browse files
authored
fix: handle scrolling correctly (#168)
Closes #161
1 parent 2e85d3d commit c9fa496

File tree

25 files changed

+247
-64
lines changed

25 files changed

+247
-64
lines changed

angular.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
],
3333
"styles": [
3434
"projects/angular-showcase/src/styles.scss",
35-
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
3635
"node_modules/highlight.js/styles/github.css"
3736
],
3837
"scripts": [],
Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
1-
<nav class="menu" [class.menu-open]="showMenu" perfectScrollbar>
2-
<ul>
3-
<li>
4-
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
5-
>Introduction</a
6-
>
7-
</li>
8-
<li class="title">Libraries</li>
9-
<li>
10-
<a routerLink="/public" routerLinkActive="active">@sbb-esta/angular-public</a>
11-
</li>
12-
<li>
13-
<a routerLink="/business" routerLinkActive="active">@sbb-esta/angular-business</a>
14-
</li>
15-
<li>
16-
<a routerLink="/core" routerLinkActive="active">@sbb-esta/angular-core</a>
17-
</li>
18-
<li>
19-
<a routerLink="/icons" routerLinkActive="active">@sbb-esta/angular-icons</a>
20-
</li>
21-
<li>
22-
<a routerLink="/keycloak" routerLinkActive="active">@sbb-esta/angular-keycloak</a>
23-
</li>
24-
<li class="title">About</li>
25-
<li>
26-
<a href="https://angular.io/">Angular {{ angularVersion }}</a>
27-
</li>
28-
<li>
29-
<a routerLink="/">Showcase {{ showcaseVersion }}</a>
30-
</li>
31-
</ul>
1+
<nav class="menu" [class.menu-open]="showMenu">
2+
<perfect-scrollbar>
3+
<ul>
4+
<li>
5+
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
6+
>Introduction</a
7+
>
8+
</li>
9+
<li class="title">Libraries</li>
10+
<li>
11+
<a routerLink="/public" routerLinkActive="active">@sbb-esta/angular-public</a>
12+
</li>
13+
<li>
14+
<a routerLink="/business" routerLinkActive="active">@sbb-esta/angular-business</a>
15+
</li>
16+
<li>
17+
<a routerLink="/core" routerLinkActive="active">@sbb-esta/angular-core</a>
18+
</li>
19+
<li>
20+
<a routerLink="/icons" routerLinkActive="active">@sbb-esta/angular-icons</a>
21+
</li>
22+
<li>
23+
<a routerLink="/keycloak" routerLinkActive="active">@sbb-esta/angular-keycloak</a>
24+
</li>
25+
<li class="title">About</li>
26+
<li>
27+
<a href="https://angular.io/">Angular {{ angularVersion }}</a>
28+
</li>
29+
<li>
30+
<a routerLink="/">Showcase {{ showcaseVersion }}</a>
31+
</li>
32+
</ul>
33+
</perfect-scrollbar>
3234
</nav>
3335

3436
<div class="container">
@@ -52,7 +54,7 @@
5254
</svg>
5355
</a>
5456
</div>
55-
<div class="content" perfectScrollbar>
57+
<perfect-scrollbar class="content">
5658
<router-outlet></router-outlet>
57-
</div>
59+
</perfect-scrollbar>
5860
</div>

projects/angular-showcase/src/app/app.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
33
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import { BrowserModule } from '@angular/platform-browser';
55
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
6+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
67
import { ICON_COMPONENT_LIST, IconCollectionModule } from '@sbb-esta/angular-icons';
78
import { MonacoEditorModule } from 'ngx-monaco-editor';
8-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
99

1010
import { AppRoutingModule } from './app-routing.module';
1111
import { AppComponent } from './app.component';
@@ -24,7 +24,7 @@ import { PublicModule } from './public/public.module';
2424
MonacoEditorModule.forRoot({ baseUrl: './assets' }),
2525
IconCollectionModule,
2626
ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
27-
PerfectScrollbarModule,
27+
ScrollingModule,
2828
HttpClientModule,
2929
BrowserAnimationsModule,
3030
PublicModule,

projects/angular-showcase/src/app/business/business.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
4+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
45
import { TabsModule } from '@sbb-esta/angular-public/tabs';
5-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
66

77
import { SharedModule } from '../shared/shared.module';
88

@@ -15,7 +15,7 @@ import { ComponentViewerComponent } from './component-viewer/component-viewer.co
1515
declarations: [BusinessComponent, ComponentViewerComponent],
1616
imports: [
1717
CommonModule,
18-
PerfectScrollbarModule,
18+
ScrollingModule,
1919
PortalModule,
2020
BusinessExamplesModule,
2121
SharedModule,

projects/angular-showcase/src/app/core/core.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
4+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
45
import { TabsModule } from '@sbb-esta/angular-public/tabs';
5-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
66

77
import { SharedModule } from '../shared/shared.module';
88

@@ -15,7 +15,7 @@ import { ExamplesModule } from './examples/examples.module';
1515
declarations: [CoreComponent, ComponentViewerComponent],
1616
imports: [
1717
CommonModule,
18-
PerfectScrollbarModule,
18+
ScrollingModule,
1919
PortalModule,
2020
ExamplesModule,
2121
SharedModule,

projects/angular-showcase/src/app/core/core/core.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import { ExampleProvider } from '../../shared/example-provider';
1212
export class CoreComponent implements ExampleProvider {
1313
modules = {
1414
breakpoints: 'Breakpoints',
15-
datetime: 'Datetime'
15+
datetime: 'Datetime',
16+
scrolling: 'Scrolling'
1617
};
1718
private _examples: { [component: string]: { [name: string]: ComponentPortal<any> } } = {};
1819

projects/angular-showcase/src/app/icons/icons.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
44
import { ReactiveFormsModule } from '@angular/forms';
5+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
56
import { ICON_COMPONENT_LIST } from '@sbb-esta/angular-icons';
67
import { SearchModule } from '@sbb-esta/angular-public/search';
7-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
88

99
import { SharedModule } from '../shared/shared.module';
1010

@@ -21,7 +21,7 @@ import { IconsComponent } from './icons/icons.component';
2121
CommonModule,
2222
ReactiveFormsModule,
2323
PortalModule,
24-
PerfectScrollbarModule,
24+
ScrollingModule,
2525
SearchModule,
2626
SharedModule,
2727
IconsRoutingModule

projects/angular-showcase/src/app/public/public.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
4+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
45
import { TabsModule } from '@sbb-esta/angular-public/tabs';
5-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
66

77
import { SharedModule } from '../shared/shared.module';
88

@@ -15,8 +15,8 @@ import { PublicComponent } from './public/public.component';
1515
declarations: [PublicComponent, ComponentViewerComponent],
1616
imports: [
1717
CommonModule,
18-
PerfectScrollbarModule,
1918
PortalModule,
19+
ScrollingModule,
2020
PublicExamplesModule,
2121
SharedModule,
2222
TabsModule,

projects/angular-showcase/src/app/shared/shared.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
4+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
45
import { TabsModule } from '@sbb-esta/angular-public/tabs';
5-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
66

77
import { ApiViewerComponent } from './api-viewer/api-viewer.component';
88
import { ExampleViewerComponent } from './example-viewer/example-viewer.component';
@@ -16,7 +16,7 @@ import { SubmenuComponent } from './submenu/submenu.component';
1616
ExampleViewerComponent,
1717
ApiViewerComponent
1818
],
19-
imports: [CommonModule, PerfectScrollbarModule, PortalModule, TabsModule],
19+
imports: [CommonModule, ScrollingModule, PortalModule, TabsModule],
2020
exports: [SubmenuComponent, MarkdownViewerComponent, ExampleViewerComponent, ApiViewerComponent]
2121
})
2222
export class SharedModule {}

projects/sbb-esta/angular-core/ng-package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
33
"dest": "../../../dist/sbb-esta/angular-core",
4+
"whitelistedNonPeerDependencies": ["tslib", "ngx-perfect-scrollbar"],
45
"lib": {
56
"entryFile": "public-api.ts"
67
}

0 commit comments

Comments
 (0)