mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Custom perfect-scrollbar directive for better control (replaced the ngx-perfect-scrollbar with fuse-perfect-scrollbar)
This commit is contained in:
Sercan Yemen
parent
b55bce2de4
commit
6d20c1d62d
110
package-lock.json
generated
110
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
<div fxLayout="row" fxLayoutWrap
|
||||
fxLayoutAlign="start start"
|
||||
class="colors" perfectScrollbar>
|
||||
class="colors" fusePerfectScrollbar>
|
||||
<div class="color"
|
||||
[ngClass]="'md-'+color.key+'-bg'"
|
||||
*ngFor="let color of (colors | keys)"
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
[@slideInRight]>
|
||||
<div fxLayout="row" fxLayoutWrap
|
||||
fxLayoutAlign="start start"
|
||||
class="colors" perfectScrollbar>
|
||||
class="colors" fusePerfectScrollbar>
|
||||
<div class="color"
|
||||
*ngFor="let hue of hues"
|
||||
[fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
</md-input-container>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" perfectScrollbar>
|
||||
<md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
|
||||
|
||||
<md-list-item *ngFor="let shortcutItem of shortcutItems"
|
||||
(click)="toggleShortcut($event, shortcutItem)">
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</md-list-item>
|
||||
</md-nav-list>
|
||||
|
||||
<md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" perfectScrollbar>
|
||||
<md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
|
||||
<md-list-item *ngFor="let navigationItem of filteredNavigationItems"
|
||||
(click)="toggleShortcut($event, navigationItem)">
|
||||
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
body:not(.is-mobile) {
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
|
@ -18,3 +20,4 @@
|
|||
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
.ps {
|
||||
position: relative;
|
||||
|
||||
> .ps__scrollbar-y-rail {
|
||||
z-index: 99999;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="calendar" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header" [ngClass]="viewDate | date:'MMM'">
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content" perfectScrollbar>
|
||||
<div class="content" fusePerfectScrollbar>
|
||||
<div [ngSwitch]="view">
|
||||
<mwl-calendar-month-view
|
||||
*ngSwitchCase="'month'"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<div md-dialog-content class="p-24 m-0" perfectScrollbar>
|
||||
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
|
||||
|
||||
<form name="eventForm" [formGroup]="eventForm" class="event-form" fxLayout="column" fxFlex>
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
<!-- / CHAT TOOLBAR -->
|
||||
|
||||
<!-- CHAT CONTENT -->
|
||||
<div id="chat-content" fxFlex perfectScrollbar>
|
||||
<div id="chat-content" fxFlex fusePerfectScrollbar>
|
||||
|
||||
<!-- CHAT MESSAGES -->
|
||||
<div class="chat-messages">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { AfterViewInit, Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
|
||||
import { ChatService } from '../chat.service';
|
||||
import { NgForm } from '@angular/forms';
|
||||
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { FusePerfectScrollbarDirective } from '../../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-chat-view',
|
||||
|
|
@ -16,7 +16,7 @@ export class FuseChatViewComponent implements OnInit, AfterViewInit
|
|||
contact: any;
|
||||
replyInput: any;
|
||||
selectedChat: any;
|
||||
@ViewChild(PerfectScrollbarDirective) directiveScroll: PerfectScrollbarDirective;
|
||||
@ViewChild(FusePerfectScrollbarDirective) directiveScroll: FusePerfectScrollbarDirective;
|
||||
@ViewChildren('replyInput') replyInputField;
|
||||
@ViewChild('replyForm') replyForm: NgForm;
|
||||
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="sidenav-content" perfectScrollbar fxFlex>
|
||||
<div class="sidenav-content" fusePerfectScrollbar fxFlex>
|
||||
|
||||
<!-- CHATS CONTENT -->
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="sidenav-content p-16" perfectScrollbar fxFlex>
|
||||
<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex>
|
||||
|
||||
<!-- USER MOOD -->
|
||||
<md-card>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="sidenav-content p-16" perfectScrollbar fxFlex *ngIf="contact">
|
||||
<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex *ngIf="contact">
|
||||
|
||||
<!-- CONTACT MOOD -->
|
||||
<md-card>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</md-toolbar-row>
|
||||
</md-toolbar>
|
||||
|
||||
<div md-dialog-content class="p-24 m-0" perfectScrollbar>
|
||||
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
|
||||
|
||||
<form [formGroup]="contactForm">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" perfectScrollbar>
|
||||
<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="start start"
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
<!-- / SIDENAV -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center p-24 pr-sm-92" perfectScrollbar>
|
||||
<div class="center p-24 pr-sm-92" fusePerfectScrollbar>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content md-white-bg mat-elevation-z4">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content py-16" perfectScrollbar>
|
||||
<div class="content py-16" fusePerfectScrollbar>
|
||||
|
||||
<div class="nav">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row" perfectScrollbar>
|
||||
<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row">
|
||||
|
||||
<md-sidenav-container>
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center" fxFlex perfectScrollbar>
|
||||
<div class="center" fxFlex fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between">
|
||||
|
|
@ -690,7 +690,7 @@
|
|||
<!-- SIDENAV -->
|
||||
<md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
|
||||
|
||||
<div class="sidenav-content" perfectScrollbar>
|
||||
<div class="sidenav-content" fusePerfectScrollbar>
|
||||
<!-- WIDGET GROUP -->
|
||||
<div class="widget-group" fxLayout="column" fxFlex="100">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="file-manager" class="page-layout simple right-sidenav" perfectScrollbar>
|
||||
<div id="file-manager" class="page-layout simple right-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<md-sidenav-container>
|
||||
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content md-white-bg" perfectScrollbar>
|
||||
<div class="content md-white-bg" fusePerfectScrollbar>
|
||||
<fuse-file-list></fuse-file-list>
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content p-24 md-white-bg" perfectScrollbar>
|
||||
<div class="content p-24 md-white-bg" fusePerfectScrollbar>
|
||||
|
||||
<div class="file-details">
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content py-16" perfectScrollbar>
|
||||
<div class="content py-16" fusePerfectScrollbar>
|
||||
|
||||
<div class="nav">
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<div md-dialog-content class="p-24 m-0" perfectScrollbar>
|
||||
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
|
||||
|
||||
<form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="mail" class="page-layout carded left-sidenav" perfectScrollbar>
|
||||
<div id="mail" class="page-layout carded left-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg md-accent-bg"></div>
|
||||
|
|
@ -96,9 +96,9 @@
|
|||
<!-- CONTENT -->
|
||||
<div class="content" fxLayoutAlign="row">
|
||||
|
||||
<fuse-mail-list perfectScrollbar fxFlex></fuse-mail-list>
|
||||
<fuse-mail-list fusePerfectScrollbar fxFlex></fuse-mail-list>
|
||||
|
||||
<fuse-mail-details perfectScrollbar fxFlex></fuse-mail-details>
|
||||
<fuse-mail-details fusePerfectScrollbar fxFlex></fuse-mail-details>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content" perfectScrollbar>
|
||||
<div class="content" fusePerfectScrollbar>
|
||||
|
||||
<div class="p-24">
|
||||
<button md-raised-button fxFlex
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<div *ngIf="card" md-dialog-content class="p-24 m-0" perfectScrollbar>
|
||||
<div *ngIf="card" md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
|
||||
|
||||
<div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
|
||||
fxLayout.xs="column" fxLayoutAlign="center center">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div fxFlex fxLayout="column" perfectScrollbar>
|
||||
<div fxFlex fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
|
||||
[class]="label.color">
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<div class="list-cards ngx-dnd-container"
|
||||
[model]="list.idCards" ngxDroppable="card" (out)="onDrop($event)"
|
||||
perfectScrollbar #listScroll>
|
||||
fusePerfectScrollbar #listScroll>
|
||||
<fuse-scrumboard-board-card ngxDraggable
|
||||
(click)="openCardDialog(cardId)"
|
||||
class="scrumboard-board-card mat-elevation-z2 ngx-dnd-item"
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import { FuseUtils } from '../../../../../../core/fuseUtils';
|
|||
import { ScrumboardService } from 'app/main/content/apps/scrumboard/scrumboard.service';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { MdDialog, MdDialogRef } from '@angular/material';
|
||||
import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
|
||||
import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component';
|
||||
import { Card } from '../../card.model';
|
||||
import { FusePerfectScrollbarDirective } from '../../../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-scrumboard-board-list',
|
||||
|
|
@ -21,7 +21,7 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
|
|||
dialogRef: any;
|
||||
|
||||
@Input() list;
|
||||
@ViewChild(PerfectScrollbarDirective) listScroll: PerfectScrollbarDirective;
|
||||
@ViewChild(FusePerfectScrollbarDirective) listScroll: FusePerfectScrollbarDirective;
|
||||
|
||||
onBoardChanged: Subscription;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content py-16" perfectScrollbar>
|
||||
<div class="content py-16" fusePerfectScrollbar>
|
||||
|
||||
<div class="nav">
|
||||
<div class="nav-item">
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content p-8" perfectScrollbar>
|
||||
<div class="content p-8" fusePerfectScrollbar>
|
||||
<fuse-scrumboard-board-color-selector></fuse-scrumboard-board-color-selector>
|
||||
</div>
|
||||
<!-- / SIDENAV CONTENT -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!-- BOARDS -->
|
||||
<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex perfectScrollbar>
|
||||
<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex fusePerfectScrollbar>
|
||||
|
||||
<div class="header pt-44 pt-md-88" fxFlex="0 0 auto">
|
||||
<h1>Scrumboard App</h1>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content" perfectScrollbar>
|
||||
<div class="content" fusePerfectScrollbar>
|
||||
|
||||
<div class="p-24">
|
||||
<button md-raised-button fxFlex
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="todo" class="page-layout carded left-sidenav" perfectScrollbar>
|
||||
<div id="todo" class="page-layout carded left-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg md-accent-bg"></div>
|
||||
|
|
@ -82,9 +82,9 @@
|
|||
<!-- CONTENT -->
|
||||
<div class="content" fxFlexAlign="row">
|
||||
|
||||
<fuse-todo-list perfectScrollbar fxFlex></fuse-todo-list>
|
||||
<fuse-todo-list fusePerfectScrollbar fxFlex></fuse-todo-list>
|
||||
|
||||
<fuse-todo-details perfectScrollbar fxFlex></fuse-todo-details>
|
||||
<fuse-todo-details fusePerfectScrollbar fxFlex></fuse-todo-details>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="ngx-datatable" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="ngx-datatable" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="countdown" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="countdown" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="hljs" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="hljs" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="material-color-picker" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="material-color-picker" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="navigation" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="navigation" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="price-tables" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="search-bar" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="search-bar" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="shortcuts" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="shortcuts" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="widget" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="widget" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="forgot-password" fxLayout="column" perfectScrollbar>
|
||||
<div id="forgot-password" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="lock" fxLayout="column" perfectScrollbar>
|
||||
<div id="lock" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div id="lock-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="login-form-wrapper" perfectScrollbar>
|
||||
<div id="login-form-wrapper" fusePerfectScrollbar>
|
||||
|
||||
<div id="login-form">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="login" fxLayout="column" perfectScrollbar>
|
||||
<div id="login" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="register-form-wrapper" perfectScrollbar>
|
||||
<div id="register-form-wrapper" fusePerfectScrollbar>
|
||||
|
||||
<div id="register-form">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="register" fxLayout="column" perfectScrollbar>
|
||||
<div id="register" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="reset-password" fxLayout="column" perfectScrollbar>
|
||||
<div id="reset-password" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div id="reset-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="coming-soon" fxLayout="column" perfectScrollbar>
|
||||
<div id="coming-soon" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div id="coming-soon-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="invoice" class="compact page-layout blank" fxLayout="row" perfectScrollbar>
|
||||
<div id="invoice" class="compact page-layout blank" fxLayout="row" fusePerfectScrollbar>
|
||||
|
||||
<div class="invoice-container">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="invoice" class="modern page-layout blank" fxLayout="row" perfectScrollbar>
|
||||
<div id="invoice" class="modern page-layout blank" fxLayout="row" fusePerfectScrollbar>
|
||||
|
||||
<div class="invoice-container">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="maintenance" fxLayout="column" perfectScrollbar>
|
||||
<div id="maintenance" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div id="maintenance-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="profile" class="page-layout simple tabbed" perfectScrollbar>
|
||||
<div id="profile" class="page-layout simple tabbed" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="search" class="page-layout simple tabbed" perfectScrollbar>
|
||||
<div id="search" class="page-layout simple tabbed" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="config" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="config" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="splash-screen" class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div id="splash-screen" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" perfectScrollbar>
|
||||
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="forms" class="page-layout simple fullwidth" fxLayout="column" perfectScrollbar>
|
||||
<div id="forms" class="page-layout simple fullwidth" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" perfectScrollbar>
|
||||
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" perfectScrollbar>
|
||||
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout blank p-24" perfectScrollbar>
|
||||
<div class="page-layout blank p-24" fusePerfectScrollbar>
|
||||
|
||||
<h2>Blank Page</h2>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout carded fullwidth single-scroll" perfectScrollbar>
|
||||
<div class="page-layout carded fullwidth single-scroll" fusePerfectScrollbar>
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg md-accent-bg"></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout carded fullwidth" perfectScrollbar>
|
||||
<div class="page-layout carded fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg md-accent-bg"></div>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<!-- / CONTENT TOOLBAR -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24" perfectScrollbar>
|
||||
<div class="content p-24" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-content></fuse-demo-content>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout carded left-sidenav single-scroll" perfectScrollbar>
|
||||
<div class="page-layout carded left-sidenav single-scroll" fusePerfectScrollbar>
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg md-accent-bg"></div>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content p-24" perfectScrollbar>
|
||||
<div class="content p-24" fusePerfectScrollbar>
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
</div>
|
||||
<!-- / SIDENAV CONTENT -->
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<!-- / CONTENT TOOLBAR -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24" perfectScrollbar>
|
||||
<div class="content p-24" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-content></fuse-demo-content>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout carded left-sidenav" perfectScrollbar>
|
||||
<div class="page-layout carded left-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg md-accent-bg"></div>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content p-24" perfectScrollbar>
|
||||
<div class="content p-24" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<!-- / CONTENT TOOLBAR -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24" perfectScrollbar>
|
||||
<div class="content p-24" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-content></fuse-demo-content>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout carded right-sidenav single-scroll" perfectScrollbar>
|
||||
<div class="page-layout carded right-sidenav single-scroll" fusePerfectScrollbar>
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg md-accent-bg"></div>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<!-- / CONTENT TOOLBAR -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24" perfectScrollbar>
|
||||
<div class="content p-24" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-content></fuse-demo-content>
|
||||
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content p-24" perfectScrollbar>
|
||||
<div class="content p-24" fusePerfectScrollbar>
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
</div>
|
||||
<!-- / SIDENAV CONTENT -->
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout carded right-sidenav" perfectScrollbar>
|
||||
<div class="page-layout carded right-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<!-- TOP BACKGROUND -->
|
||||
<div class="top-bg md-accent-bg"></div>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<!-- / CONTENT TOOLBAR -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24" perfectScrollbar>
|
||||
<div class="content p-24" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-content></fuse-demo-content>
|
||||
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content p-24" perfectScrollbar>
|
||||
<div class="content p-24" fusePerfectScrollbar>
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
</div>
|
||||
<!-- / SIDENAV CONTENT -->
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout simple fullwidth" perfectScrollbar>
|
||||
<div class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout simple left-sidenav single-scroll" perfectScrollbar>
|
||||
<div class="page-layout simple left-sidenav single-scroll" fusePerfectScrollbar>
|
||||
|
||||
<md-sidenav-container>
|
||||
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<!-- / SIDENAV -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center" perfectScrollbar>
|
||||
<div class="center" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout simple left-sidenav inner-sidenav" perfectScrollbar>
|
||||
<div class="page-layout simple left-sidenav inner-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
|
||||
fuseMdSidenavHelper="simple-left-sidenav-3" md-is-locked-open="gt-md">
|
||||
|
||||
<div class="sidenav-content" perfectScrollbar>
|
||||
<div class="sidenav-content" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<!-- / SIDENAV -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center p-24" perfectScrollbar>
|
||||
<div class="center p-24" fusePerfectScrollbar>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24 mat-elevation-z4 md-white-bg">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout simple left-sidenav" perfectScrollbar>
|
||||
<div class="page-layout simple left-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<md-sidenav-container>
|
||||
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
|
||||
fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
|
||||
|
||||
<div class="sidenav-content p-24" perfectScrollbar>
|
||||
<div class="sidenav-content p-24" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<!-- / SIDENAV -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center" perfectScrollbar>
|
||||
<div class="center" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="page-layout simple right-sidenav single-scroll" perfectScrollbar>
|
||||
<div class="page-layout simple right-sidenav single-scroll" fusePerfectScrollbar>
|
||||
|
||||
<md-sidenav-container>
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center" perfectScrollbar>
|
||||
<div class="center" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout simple right-sidenav inner-sidenav" perfectScrollbar>
|
||||
<div class="page-layout simple right-sidenav inner-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<md-sidenav-container>
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center p-24" perfectScrollbar>
|
||||
<div class="center p-24" fusePerfectScrollbar>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24 mat-elevation-z4 md-white-bg">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
|
||||
fuseMdSidenavHelper="simple-right-sidenav-3" md-is-locked-open="gt-md">
|
||||
|
||||
<div class="sidenav-content" perfectScrollbar>
|
||||
<div class="sidenav-content" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="page-layout simple right-sidenav" perfectScrollbar>
|
||||
<div class="page-layout simple right-sidenav" fusePerfectScrollbar>
|
||||
|
||||
<md-sidenav-container>
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center" perfectScrollbar>
|
||||
<div class="center" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
|
||||
fuseMdSidenavHelper="simple-right-sidenav" md-is-locked-open="gt-md">
|
||||
|
||||
<div class="sidenav-content p-24" perfectScrollbar>
|
||||
<div class="sidenav-content p-24" fusePerfectScrollbar>
|
||||
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="page-layout simple tabbed" perfectScrollbar>
|
||||
<div class="page-layout simple tabbed" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="typography" class="page-layout simple tabbed" fxLayout="column" perfectScrollbar>
|
||||
<div id="typography" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -12,19 +12,6 @@ fuse-main {
|
|||
@include mat-elevation(8);
|
||||
}
|
||||
|
||||
&.disable-perfect-scrollbar {
|
||||
|
||||
.ps {
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.ps__scrollbar-x-rail,
|
||||
.ps__scrollbar-y-rail {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .mat-sidenav-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
|
||||
import { Component, ElementRef, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseConfigService } from '../core/services/config.service';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-main',
|
||||
|
|
@ -12,13 +14,14 @@ export class FuseMainComponent implements OnInit, OnDestroy
|
|||
{
|
||||
onSettingsChanged: Subscription;
|
||||
fuseSettings: any;
|
||||
@HostBinding('class.disable-perfect-scrollbar') disableCustomScrollbars;
|
||||
@HostBinding('class.boxed') boxed;
|
||||
|
||||
constructor(
|
||||
private _renderer: Renderer2,
|
||||
private _elementRef: ElementRef,
|
||||
private fuseConfig: FuseConfigService
|
||||
private fuseConfig: FuseConfigService,
|
||||
private platform: Platform,
|
||||
@Inject(DOCUMENT) private document: any
|
||||
)
|
||||
{
|
||||
this.onSettingsChanged =
|
||||
|
|
@ -26,10 +29,14 @@ export class FuseMainComponent implements OnInit, OnDestroy
|
|||
.subscribe(
|
||||
(newSettings) => {
|
||||
this.fuseSettings = newSettings;
|
||||
this.disableCustomScrollbars = !this.fuseSettings.customScrollbars;
|
||||
this.boxed = this.fuseSettings.layout.mode === 'boxed';
|
||||
}
|
||||
);
|
||||
|
||||
if ( this.platform.ANDROID || this.platform.IOS )
|
||||
{
|
||||
this.document.body.className += ' is-mobile';
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content" perfectScrollbar>
|
||||
<div class="navbar-content" fusePerfectScrollbar>
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ import { FuseNavbarVerticalService } from './navbar-vertical.service';
|
|||
import { ObservableMedia } from '@angular/flex-layout';
|
||||
import { FuseMainComponent } from '../../main.component';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { FuseNavigationService } from '../../../core/components/navigation/navigation.service';
|
||||
import { FusePerfectScrollbarDirective } from '../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-navbar-vertical',
|
||||
|
|
@ -21,7 +21,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
|||
@HostBinding('class.folded-open') isFoldedOpen: boolean;
|
||||
@HostBinding('class.initialized') initialized: boolean;
|
||||
@Input('folded') foldedByDefault = false;
|
||||
@ViewChild(PerfectScrollbarDirective) perfectScrollbarDirective;
|
||||
@ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
|
||||
|
||||
matchMediaWatcher: Subscription;
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
|||
this.fuseNavigationService.onNavCollapseToggled.subscribe(() => {
|
||||
|
||||
setTimeout(() => {
|
||||
this.perfectScrollbarDirective.update();
|
||||
this.fusePerfectScrollbarDirective.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user