Perfect Scrollbar enabled, missing attrs added

+ darken navbar bg color
This commit is contained in:
mustafahlvc 2017-08-14 18:18:01 +03:00
parent 2fc3ac0997
commit 92c8417a9a
24 changed files with 171 additions and 222 deletions

78
package-lock.json generated
View File

@ -1180,6 +1180,7 @@
"resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
"integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
"dev": true,
"optional": true,
"requires": {
"align-text": "0.1.4",
"lazy-cache": "1.0.4"
@ -1189,7 +1190,8 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
"integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
"dev": true
"dev": true,
"optional": true
}
}
},
@ -2850,26 +2852,13 @@
"integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
"dev": true,
"requires": {
"cross-spawn": "5.1.0",
"cross-spawn": "3.0.1",
"get-stream": "3.0.0",
"is-stream": "1.1.0",
"npm-run-path": "2.0.2",
"p-finally": "1.0.0",
"signal-exit": "3.0.2",
"strip-eof": "1.0.0"
},
"dependencies": {
"cross-spawn": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
"integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
"dev": true,
"requires": {
"lru-cache": "4.1.1",
"shebang-command": "1.2.0",
"which": "1.2.14"
}
}
}
},
"exit": {
@ -5931,15 +5920,7 @@
"dev": true,
"requires": {
"p-locate": "2.0.0",
"path-exists": "3.0.0"
},
"dependencies": {
"path-exists": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
"dev": true
}
"path-exists": "2.1.0"
}
},
"lodash": {
@ -8100,6 +8081,7 @@
"resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
"integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
"dev": true,
"optional": true,
"requires": {
"align-text": "0.1.4"
}
@ -8442,21 +8424,6 @@
}
}
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
"integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
"dev": true,
"requires": {
"shebang-regex": "1.0.0"
}
},
"shebang-regex": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
"dev": true
},
"signal-exit": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@ -9352,48 +9319,28 @@
"camelcase": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
"integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
"dev": true
"integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
},
"cliui": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
"integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
"dev": true,
"requires": {
"center-align": "0.1.3",
"right-align": "0.1.3",
"wordwrap": "0.0.2"
}
"integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE="
},
"uglify-js": {
"version": "2.8.29",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
"integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
"dev": true,
"requires": {
"source-map": "0.5.6",
"uglify-to-browserify": "1.0.2",
"yargs": "3.10.0"
}
"dev": true
},
"wordwrap": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
"integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
"dev": true
"integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
},
"yargs": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
"integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
"dev": true,
"requires": {
"camelcase": "1.2.1",
"cliui": "2.1.0",
"decamelize": "1.2.0",
"window-size": "0.1.0"
}
"integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E="
}
}
},
@ -10114,7 +10061,8 @@
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
"integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
"dev": true
"dev": true,
"optional": true
},
"wordwrap": {
"version": "0.0.3",

View File

@ -11,16 +11,16 @@ 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 { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface, 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';
import { UIModule } from './main/content/ui/ui.module';
import { ComponentsModule } from './main/content/components/components.module';
/*const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};*/
};
const appRoutes: Routes = [
{
@ -67,7 +67,7 @@ const appRoutes: Routes = [
InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
// PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
FuseMainModule,

View File

@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
// import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { ColorPickerModule } from 'ngx-color-picker';
import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@ -36,7 +36,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
CommonModule,
FormsModule,
FusePipesModule,
// PerfectScrollbarModule,
PerfectScrollbarModule,
ReactiveFormsModule,
ColorPickerModule,
NgxDnDModule,
@ -52,7 +52,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
FusePipesModule,
FuseCountdownComponent,
FuseHljsComponent,
// PerfectScrollbarModule,
PerfectScrollbarModule,
ReactiveFormsModule,
ColorPickerModule,
NgxDnDModule,

View File

@ -690,136 +690,138 @@
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
<!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="column" fxFlex="100">
<div class="sidenav-content" perfect-scrollbar>
<!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="column" fxFlex="100">
<!-- NOW WIDGET -->
<fuse-widget class="sidenav-widget p-0">
<!-- NOW WIDGET -->
<fuse-widget class="sidenav-widget p-0">
<!-- Front -->
<div class="fuse-widget-front">
<!-- Front -->
<div class="fuse-widget-front">
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{dateNow | date: 'EEEE'}}, {{dateNow | date: 'h'}}:{{dateNow | date: 'm'}}:{{dateNow | date: 'ss'}}</div>
<div class="h3">{{dateNow | date: 'EEEE'}}, {{dateNow | date: 'h'}}:{{dateNow | date: 'm'}}:{{dateNow | date: 'ss'}}</div>
<div>
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
<md-icon>more_vert</md-icon>
</button>
<md-menu #moreMenu="mdMenu">
<button md-menu-item aria-label="Flip widget">
Details
<div>
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
<md-icon>more_vert</md-icon>
</button>
</md-menu>
</div>
</div>
<div class="p-16 pb-24" fxLayout="column" fxLayoutAlign="center center">
<div class="h1 secondary-text">
<span>{{dateNow | date: 'MMMM'}}</span>
</div>
<div class="font-size-72 line-height-88 secondary-text font-weight-400">
{{dateNow | date: 'd'}}
</div>
<div class="h1 secondary-text">
<span>{{dateNow | date: 'y'}}</span>
</div>
</div>
<md-divider></md-divider>
</div>
<!-- / Front -->
</fuse-widget>
<!-- / NOW WIDGET -->
<!-- WEATHER WIDGET -->
<fuse-widget class="sidenav-widget p-0">
<!-- Front -->
<div class="fuse-widget-front">
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h4" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="mr-8">place</md-icon>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
</div>
<div>
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
<md-icon>more_vert</md-icon>
</button>
<md-menu #moreMenu="mdMenu">
<button md-menu-item aria-label="Flip widget">
Details
</button>
</md-menu>
</div>
</div>
<div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
<div fxLayout="row" fxLayoutAlign="center center">
<md-icon fontSet="meteocons" [fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
class="icon s-40 mr-16"></md-icon>
<span class="mat-display-2 m-0 font-weight-300 secondary-text">
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
</span>
<span class="font-size-48 font-weight-300 hint-text text-super ml-8">°</span>
<span class="mat-display-2 mb-0 font-weight-300 hint-text ng-binding">C</span>
</div>
</div>
<div class="grey-300-bg p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" fontIcon="icon-windy" class="mr-8 s-16"></md-icon>
<span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
</span>
<span class="secondary-text ml-5">{{widgets.weatherWidget.speedUnit}}</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></md-icon>
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></md-icon>
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}</span>
</div>
</div>
<div class="py-16">
<div class="py-16 px-24" fxLayout="row" fxLayoutAlign="space-between center"
*ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
<span class="h4">{{day.name}}</span>
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></md-icon>
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
<span class="h2 font-weight-300 secondary-text text-super">&deg;</span>
<span class="h2 font-weight-300 secondary-text">{{widgets.weatherWidget.tempUnit}}</span>
<md-menu #moreMenu="mdMenu">
<button md-menu-item aria-label="Flip widget">
Details
</button>
</md-menu>
</div>
</div>
<div class="p-16 pb-24" fxLayout="column" fxLayoutAlign="center center">
<div class="h1 secondary-text">
<span>{{dateNow | date: 'MMMM'}}</span>
</div>
<div class="font-size-72 line-height-88 secondary-text font-weight-400">
{{dateNow | date: 'd'}}
</div>
<div class="h1 secondary-text">
<span>{{dateNow | date: 'y'}}</span>
</div>
</div>
<md-divider></md-divider>
</div>
<!-- / Front -->
<md-divider></md-divider>
</fuse-widget>
<!-- / NOW WIDGET -->
</div>
<!-- / Front -->
</fuse-widget>
<!-- / WEATHER WIDGET -->
<!-- WEATHER WIDGET -->
<fuse-widget class="sidenav-widget p-0">
<!-- Front -->
<div class="fuse-widget-front">
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h4" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="mr-8">place</md-icon>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
</div>
<div>
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
<md-icon>more_vert</md-icon>
</button>
<md-menu #moreMenu="mdMenu">
<button md-menu-item aria-label="Flip widget">
Details
</button>
</md-menu>
</div>
</div>
<div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
<div fxLayout="row" fxLayoutAlign="center center">
<md-icon fontSet="meteocons" [fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
class="icon s-40 mr-16"></md-icon>
<span class="mat-display-2 m-0 font-weight-300 secondary-text">
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
</span>
<span class="font-size-48 font-weight-300 hint-text text-super ml-8">°</span>
<span class="mat-display-2 mb-0 font-weight-300 hint-text ng-binding">C</span>
</div>
</div>
<div class="grey-300-bg p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" fontIcon="icon-windy" class="mr-8 s-16"></md-icon>
<span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
</span>
<span class="secondary-text ml-5">{{widgets.weatherWidget.speedUnit}}</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></md-icon>
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></md-icon>
<span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}</span>
</div>
</div>
<div class="py-16">
<div class="py-16 px-24" fxLayout="row" fxLayoutAlign="space-between center"
*ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
<span class="h4">{{day.name}}</span>
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></md-icon>
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
<span class="h2 font-weight-300 secondary-text text-super">&deg;</span>
<span class="h2 font-weight-300 secondary-text">{{widgets.weatherWidget.tempUnit}}</span>
</div>
</div>
</div>
<md-divider></md-divider>
</div>
<!-- / Front -->
</fuse-widget>
<!-- / WEATHER WIDGET -->
</div>
<!-- / WIDGET GROUP -->
</div>
<!-- / WIDGET GROUP -->
</md-sidenav>
<!-- / SIDENAV -->

View File

@ -10,7 +10,7 @@
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar>
<div class="center" fxFlex>
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
@ -64,7 +64,7 @@
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content">
<div class="content" perfect-scrollbar>
<fuse-file-list></fuse-file-list>
</div>
<!-- / CONTENT -->
@ -80,5 +80,4 @@
<!-- / SIDENAV -->
</md-sidenav-container>
</div>

View File

@ -12,7 +12,7 @@
}
> .content {
flex: 1 0 auto;
flex: 1;
.file-details {

View File

@ -1,4 +1,4 @@
<div id="ngx-datatable" class="page-layout simple fullwidth">
<div id="ngx-datatable" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between">

View File

@ -1,4 +1,4 @@
<div id="price-tables" class="page-layout simple fullwidth">
<div id="price-tables" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

View File

@ -1,4 +1,4 @@
<div id="profile" class="page-layout simple tabbed">
<div id="profile" class="page-layout simple tabbed" perfect-scrollbar>
<!-- HEADER -->
<div class="header p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"

View File

@ -1,4 +1,4 @@
<div id="search" class="page-layout simple tabbed">
<div id="search" class="page-layout simple tabbed" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"

View File

@ -1,4 +1,4 @@
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column">
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">

View File

@ -1,4 +1,4 @@
<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
<div id="forms" class="page-layout simple fullwidth" fxLayout="column" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

View File

@ -1,4 +1,4 @@
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

View File

@ -1,4 +1,4 @@
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">

View File

@ -1,4 +1,4 @@
<div class="page-layout blank p-24">
<div class="page-layout blank p-24" perfect-scrollbar>
<h2>Blank Page</h2>

View File

@ -1,4 +1,4 @@
<div class="page-layout carded fullwidth single-scroll">
<div class="page-layout carded fullwidth single-scroll" perfect-scrollbar>
<!-- TOP BACKGROUND -->
<div class="top-bg md-accent-bg"></div>

View File

@ -1,4 +1,4 @@
<div class="page-layout carded left-sidenav single-scroll">
<div class="page-layout carded left-sidenav single-scroll" perfect-scrollbar>
<!-- TOP BACKGROUND -->
<div class="top-bg md-accent-bg"></div>

View File

@ -1,4 +1,4 @@
<div class="page-layout carded right-sidenav single-scroll">
<div class="page-layout carded right-sidenav single-scroll" perfect-scrollbar>
<!-- TOP BACKGROUND -->
<div class="top-bg md-accent-bg"></div>

View File

@ -1,4 +1,4 @@
<div class="page-layout simple fullwidth">
<div class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

View File

@ -1,4 +1,4 @@
<div class="page-layout simple left-sidenav single-scroll">
<div class="page-layout simple left-sidenav single-scroll" perfect-scrollbar>
<md-sidenav-container>

View File

@ -1,4 +1,4 @@
<div class="page-layout simple right-sidenav single-scroll">
<div class="page-layout simple right-sidenav single-scroll" perfect-scrollbar>
<md-sidenav-container>

View File

@ -1,4 +1,4 @@
<div class="page-layout simple tabbed">
<div class="page-layout simple tabbed" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24">

View File

@ -1,4 +1,4 @@
<div id="typography" class="page-layout simple tabbed" fxLayout="column">
<div id="typography" class="page-layout simple tabbed" fxLayout="column" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

View File

@ -10,7 +10,7 @@
<div id="wrapper">
<fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
<fuse-navbar class="md-primary-700-bg" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
<div class="content-wrapper">