diff --git a/package-lock.json b/package-lock.json
index 2cd49d08..9010ae8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
"requires": {
"loader-utils": "1.1.0",
"source-map": "0.5.6",
- "typescript": "2.3.4",
+ "typescript": "2.3.3",
"webpack-sources": "1.0.1"
}
},
@@ -113,7 +113,7 @@
"style-loader": "0.13.2",
"stylus": "0.54.5",
"stylus-loader": "3.0.1",
- "typescript": "2.3.4",
+ "typescript": "2.3.3",
"url-loader": "0.5.9",
"webpack": "3.5.6",
"webpack-concat-plugin": "1.4.0",
@@ -286,9 +286,9 @@
"dev": true
},
"@types/jasminewd2": {
- "version": "2.0.3",
- "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.3.tgz",
- "integrity": "sha512-hYDVmQZT5VA2kigd4H4bv7vl/OhlympwREUemqBdOqtrYTo5Ytm12a5W5/nGgGYdanGVxj0x/VhZ7J3hOg/YKg==",
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.2.tgz",
+ "integrity": "sha1-X2jh5pe/ELxv2Mvy4Aaj1nEsW2Q=",
"dev": true,
"requires": {
"@types/jasmine": "2.6.0"
@@ -5181,22 +5181,45 @@
"dev": true
},
"istanbul-api": {
- "version": "1.1.11",
- "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.1.11.tgz",
- "integrity": "sha1-/MC0YeKzvaceMFFVE4I4doJX2d4=",
+ "version": "1.1.14",
+ "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.1.14.tgz",
+ "integrity": "sha1-JbxXAffGgMD//5E95G42GaOm5oA=",
"dev": true,
"requires": {
"async": "2.5.0",
"fileset": "2.0.3",
"istanbul-lib-coverage": "1.1.1",
"istanbul-lib-hook": "1.0.7",
- "istanbul-lib-instrument": "1.7.4",
+ "istanbul-lib-instrument": "1.8.0",
"istanbul-lib-report": "1.1.1",
"istanbul-lib-source-maps": "1.2.1",
- "istanbul-reports": "1.1.1",
+ "istanbul-reports": "1.1.2",
"js-yaml": "3.7.0",
"mkdirp": "0.5.1",
"once": "1.4.0"
+ },
+ "dependencies": {
+ "babylon": {
+ "version": "6.18.0",
+ "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+ "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+ "dev": true
+ },
+ "istanbul-lib-instrument": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.8.0.tgz",
+ "integrity": "sha1-ZvbJQhzJ7EcE928tsIS6kHiitTI=",
+ "dev": true,
+ "requires": {
+ "babel-generator": "6.25.0",
+ "babel-template": "6.25.0",
+ "babel-traverse": "6.25.0",
+ "babel-types": "6.25.0",
+ "babylon": "6.18.0",
+ "istanbul-lib-coverage": "1.1.1",
+ "semver": "5.4.1"
+ }
+ }
}
},
"istanbul-instrumenter-loader": {
@@ -5281,9 +5304,9 @@
}
},
"istanbul-reports": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.1.1.tgz",
- "integrity": "sha512-P8G873A0kW24XRlxHVGhMJBhQ8gWAec+dae7ZxOBzxT4w+a9ATSPvRVK3LB1RAJ9S8bg2tOyWHAGW40Zd2dKfw==",
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.1.2.tgz",
+ "integrity": "sha1-D7Lj9qqZIr085F0F2KtNXo4HvU8=",
"dev": true,
"requires": {
"handlebars": "4.0.10"
@@ -5361,15 +5384,15 @@
"dev": true,
"optional": true,
"requires": {
- "source-map": "0.5.6",
+ "source-map": "0.5.7",
"uglify-to-browserify": "1.0.2",
"yargs": "3.10.0"
},
"dependencies": {
"source-map": {
- "version": "0.5.6",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
- "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
+ "version": "0.5.7",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+ "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"dev": true,
"optional": true
}
@@ -5398,19 +5421,19 @@
"requires": {
"exit": "0.1.2",
"glob": "7.1.2",
- "jasmine-core": "2.6.4"
+ "jasmine-core": "2.6.2"
}
},
"jasmine-core": {
- "version": "2.6.4",
- "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.6.4.tgz",
- "integrity": "sha1-3skmzQqfoof7bbXHVfpIfnTOysU=",
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.6.2.tgz",
+ "integrity": "sha1-dOoffPQoaRryARB9YxI0AnoJ2qs=",
"dev": true
},
"jasmine-spec-reporter": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/jasmine-spec-reporter/-/jasmine-spec-reporter-4.1.1.tgz",
- "integrity": "sha1-Wm1Yq11hvqcwn7wnkjlRF1axtYg=",
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/jasmine-spec-reporter/-/jasmine-spec-reporter-4.1.0.tgz",
+ "integrity": "sha1-uKp1hN9Y5Nq2Gs2++3bQlqo4Zj8=",
"dev": true,
"requires": {
"colors": "1.1.2"
@@ -5610,13 +5633,12 @@
}
},
"karma-coverage-istanbul-reporter": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.3.0.tgz",
- "integrity": "sha1-0ULNnFVzHJ42Pvc3To7xoxvr+ts=",
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.2.1.tgz",
+ "integrity": "sha1-XjynuaFT2xy63/70xG2XjTilMVQ=",
"dev": true,
"requires": {
- "istanbul-api": "1.1.11",
- "minimatch": "3.0.4"
+ "istanbul-api": "1.1.14"
}
},
"karma-jasmine": {
@@ -6805,6 +6827,11 @@
"sha.js": "2.4.8"
}
},
+ "perfect-scrollbar": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-0.8.1.tgz",
+ "integrity": "sha512-RNC5tX/JMRYR+qVdJTEAWnRxw0Yf9lvbO8lTuAOvgDODkiA8lveTSkvrNMhmaGKEyimJpJl+myb/syVS9YyPuw=="
+ },
"performance-now": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
@@ -8974,9 +9001,9 @@
"dev": true
},
"ts-node": {
- "version": "3.0.6",
- "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-3.0.6.tgz",
- "integrity": "sha1-VRJ/95DH7r9rpowebd6UsJqqIeA=",
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-3.0.4.tgz",
+ "integrity": "sha1-oUdevyT9Ti7i+6ixqhYFuXe95QY=",
"dev": true,
"requires": {
"arrify": "1.0.1",
@@ -8988,7 +9015,7 @@
"source-map-support": "0.4.15",
"tsconfig": "6.0.0",
"v8flags": "2.1.1",
- "yn": "2.0.0"
+ "yn": "1.3.0"
},
"dependencies": {
"chalk": {
@@ -9132,9 +9159,9 @@
}
},
"typescript": {
- "version": "2.3.4",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.3.4.tgz",
- "integrity": "sha1-PTgyGCgjHkNPKHUUlZw3qCtin0I=",
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.3.3.tgz",
+ "integrity": "sha1-ljnzw7QBSOjKl/4IpR3RiRu2viI=",
"dev": true
},
"uglify-js": {
@@ -10168,10 +10195,13 @@
"dev": true
},
"yn": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",
- "integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=",
- "dev": true
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/yn/-/yn-1.3.0.tgz",
+ "integrity": "sha1-GwgSq7jYBdSJZvjfOF3J2syaGdg=",
+ "dev": true,
+ "requires": {
+ "object-assign": "4.1.1"
+ }
},
"zone.js": {
"version": "0.8.17",
diff --git a/package.json b/package.json
index 2c22464b..4ad2ef2c 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
"ngx-color-picker": "4.3.1",
"ngx-cookie-service": "1.0.7",
"ngx-perfect-scrollbar": "4.6.2",
+ "perfect-scrollbar": "0.8.1",
"rxjs": "5.4.3",
"web-animations-js": "2.3.1",
"zone.js": "0.8.17"
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 45056275..30f8f928 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,7 +9,6 @@ import 'hammerjs';
import { SharedModule } from './core/modules/shared.module';
import { AppComponent } from './app.component';
import { ProjectModule } from './main/content/apps/dashboards/project/project.module';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
import { FuseMainModule } from './main/main.module';
import { PagesModule } from './main/content/pages/pages.module';
@@ -69,8 +68,6 @@ const appRoutes: Routes = [
InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}),
- PerfectScrollbarModule.forRoot(),
-
FuseMainModule,
ProjectModule,
diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.html b/src/app/core/components/material-color-picker/material-color-picker.component.html
index 0e22118b..e305b812 100644
--- a/src/app/core/components/material-color-picker/material-color-picker.component.html
+++ b/src/app/core/components/material-color-picker/material-color-picker.component.html
@@ -45,7 +45,7 @@
+ class="colors" fusePerfectScrollbar>
+ class="colors" fusePerfectScrollbar>
-
+
@@ -68,7 +68,7 @@
-
+
diff --git a/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts b/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
new file mode 100644
index 00000000..d3b734be
--- /dev/null
+++ b/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
@@ -0,0 +1,173 @@
+import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
+import * as Ps from 'perfect-scrollbar';
+import { FuseConfigService } from '../../services/config.service';
+import { Subscription } from 'rxjs/Subscription';
+import { Platform } from '@angular/cdk/platform';
+
+@Directive({
+ selector: '[fusePerfectScrollbar]'
+})
+export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
+{
+ onSettingsChanged: Subscription;
+ isDisableCustomScrollbars = false;
+ isMobile = false;
+ isInitialized = true;
+
+ constructor(
+ private element: ElementRef,
+ private zone: NgZone,
+ private fuseConfig: FuseConfigService,
+ private platform: Platform
+ )
+ {
+ this.onSettingsChanged =
+ this.fuseConfig.onSettingsChanged
+ .subscribe(
+ (settings) => {
+ this.isDisableCustomScrollbars = !settings.customScrollbars;
+ }
+ );
+
+ if ( this.platform.ANDROID || this.platform.IOS )
+ {
+ this.isMobile = true;
+ }
+ }
+
+ ngOnInit(): void
+ {
+
+ }
+
+ ngAfterViewInit(): void
+ {
+ if ( this.isMobile || this.isDisableCustomScrollbars )
+ {
+ this.isInitialized = false;
+ return;
+ }
+
+ this.zone.runOutsideAngular(() => {
+
+ // Initialize the perfect-scrollbar
+ Ps.initialize(this.element.nativeElement);
+ });
+ }
+
+ ngOnDestroy(): void
+ {
+ if ( !this.isInitialized )
+ {
+ return;
+ }
+
+ this.onSettingsChanged.unsubscribe();
+
+ // Destroy the perfect-scrollbar
+ Ps.destroy(this.element.nativeElement);
+ }
+
+ update()
+ {
+ if ( !this.isInitialized )
+ {
+ return;
+ }
+
+ // Update the perfect-scrollbar
+ Ps.update(this.element.nativeElement);
+ }
+
+ destroy()
+ {
+ this.ngOnDestroy();
+ }
+
+ scrollToX(x: number, speed?: number)
+ {
+ this.animateScrolling('scrollLeft', x, speed);
+ }
+
+ scrollToY(y: number, speed?: number)
+ {
+ this.animateScrolling('scrollTop', y, speed);
+ }
+
+ scrollToTop(offset?: number, speed?: number)
+ {
+ this.animateScrolling('scrollTop', (offset || 0), speed);
+ }
+
+ scrollToLeft(offset?: number, speed?: number)
+ {
+ this.animateScrolling('scrollLeft', (offset || 0), speed);
+ }
+
+ scrollToRight(offset?: number, speed?: number)
+ {
+ const width = this.element.nativeElement.scrollWidth;
+
+ this.animateScrolling('scrollLeft', width - (offset || 0), speed);
+ }
+
+ scrollToBottom(offset?: number, speed?: number)
+ {
+ const height = this.element.nativeElement.scrollHeight;
+
+ this.animateScrolling('scrollTop', height - (offset || 0), speed);
+ }
+
+ animateScrolling(target: string, value: number, speed?: number)
+ {
+ if ( !speed )
+ {
+ this.element.nativeElement[target] = value;
+
+ // PS has weird event sending order, this is a workaround for that
+ this.update();
+
+ this.update();
+ }
+ else if ( value !== this.element.nativeElement[target] )
+ {
+ let newValue = 0;
+ let scrollCount = 0;
+
+ let oldTimestamp = performance.now();
+ let oldValue = this.element.nativeElement[target];
+
+ const cosParameter = (oldValue - value) / 2;
+
+ const step = (newTimestamp) => {
+ scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
+
+ newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
+
+ // Only continue animation if scroll position has not changed
+ if ( this.element.nativeElement[target] === oldValue )
+ {
+ if ( scrollCount >= Math.PI )
+ {
+ this.element.nativeElement[target] = value;
+
+ // PS has weird event sending order, this is a workaround for that
+ this.update();
+
+ this.update();
+ }
+ else
+ {
+ this.element.nativeElement[target] = oldValue = newValue;
+
+ oldTimestamp = newTimestamp;
+
+ window.requestAnimationFrame(step);
+ }
+ }
+ };
+
+ window.requestAnimationFrame(step);
+ }
+ }
+}
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index e2c5e7d6..93885da7 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { ColorPickerModule } from 'ngx-color-picker';
import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@@ -18,6 +17,7 @@ import { FuseMatchMedia } from '../services/match-media.service';
import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
import { FuseHljsComponent } from '../components/hljs/hljs.component';
+import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
import { Md2Module } from 'md2';
@@ -31,6 +31,7 @@ import { CookieService } from 'ngx-cookie-service';
FuseCountdownComponent,
FuseHljsComponent,
FuseIfOnDomDirective,
+ FusePerfectScrollbarDirective,
FuseMaterialColorPickerComponent
],
imports : [
@@ -39,7 +40,6 @@ import { CookieService } from 'ngx-cookie-service';
CommonModule,
FormsModule,
FusePipesModule,
- PerfectScrollbarModule,
ReactiveFormsModule,
ColorPickerModule,
NgxDnDModule,
@@ -56,7 +56,7 @@ import { CookieService } from 'ngx-cookie-service';
FusePipesModule,
FuseCountdownComponent,
FuseHljsComponent,
- PerfectScrollbarModule,
+ FusePerfectScrollbarDirective,
ReactiveFormsModule,
ColorPickerModule,
NgxDnDModule,
diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss
index 6e7a37f2..ec657acc 100644
--- a/src/app/core/scss/core.scss
+++ b/src/app/core/scss/core.scss
@@ -2,8 +2,8 @@
@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';
-// Perfect Scrollbar
-@import "~ngx-perfect-scrollbar/dist/lib/perfect-scrollbar.component.css";
+// Perfect scrollbar
+@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css';
// Fuse
@import "fuse";
diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss
index 87322fce..81f815e5 100644
--- a/src/app/core/scss/partials/_page-layouts.scss
+++ b/src/app/core/scss/partials/_page-layouts.scss
@@ -309,10 +309,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> .mat-drawer-content {
flex: 1 0 auto;
max-height: none;
-
- > .center {
- overflow: hidden;
- }
}
}
}
@@ -483,10 +479,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> .mat-sidenav-content,
> .mat-drawer-content {
flex: 1 0 auto;
-
- > .center {
- overflow: hidden;
- }
}
}
}
diff --git a/src/app/core/scss/partials/_scrollbars.scss b/src/app/core/scss/partials/_scrollbars.scss
index 285b5df4..8c7b785c 100644
--- a/src/app/core/scss/partials/_scrollbars.scss
+++ b/src/app/core/scss/partials/_scrollbars.scss
@@ -1,20 +1,23 @@
-::-webkit-scrollbar {
- width: 12px;
- height: 12px;
- background-color: rgba(0, 0, 0, 0);
-}
+body:not(.is-mobile) {
-::-webkit-scrollbar:hover {
- background-color: rgba(0, 0, 0, 0.12);
-}
+ ::-webkit-scrollbar {
+ width: 12px;
+ height: 12px;
+ background-color: rgba(0, 0, 0, 0);
+ }
-::-webkit-scrollbar-thumb {
- border: 2px solid transparent;
- box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
- border-radius: 24px;
-}
+ ::-webkit-scrollbar:hover {
+ background-color: rgba(0, 0, 0, 0.12);
+ }
-::-webkit-scrollbar-thumb:active {
- box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
- border-radius: 24px;
+ ::-webkit-scrollbar-thumb {
+ border: 2px solid transparent;
+ box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
+ border-radius: 24px;
+ }
+
+ ::-webkit-scrollbar-thumb:active {
+ box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
+ border-radius: 24px;
+ }
}
\ No newline at end of file
diff --git a/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss b/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
index 7e93827e..917597a0 100644
--- a/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
+++ b/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
@@ -1,4 +1,5 @@
.ps {
+ position: relative;
> .ps__scrollbar-y-rail {
z-index: 99999;
diff --git a/src/app/main/content/apps/calendar/calendar.component.html b/src/app/main/content/apps/calendar/calendar.component.html
index 783c76ab..47b1545b 100644
--- a/src/app/main/content/apps/calendar/calendar.component.html
+++ b/src/app/main/content/apps/calendar/calendar.component.html
@@ -1,4 +1,4 @@
-