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

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"
@@ -40,4 +40,4 @@
</div>
<!-- / CONTENT -->
</div>
</div>

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"
@@ -29,4 +29,4 @@
</div>
<!-- / CONTENT -->
</div>
</div>

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">
@@ -35,4 +35,4 @@
</div>
<!-- / CONTENT -->
</div>
</div>

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">
@@ -54,4 +54,4 @@
</div>
<!-- / CONTENT -->
</div>
</div>

View File

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

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>
@@ -36,4 +36,4 @@
</div>
<!-- / CENTER -->
</div>
</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>
@@ -65,4 +65,4 @@
</md-sidenav-container>
</div>
</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>
@@ -65,4 +65,4 @@
</md-sidenav-container>
</div>
</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">
@@ -14,4 +14,4 @@
</div>
<!-- / CONTENT -->
</div>
</div>

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>
@@ -43,4 +43,4 @@
</md-sidenav-container>
</div>
</div>

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>
@@ -43,4 +43,4 @@
</md-sidenav-container>
</div>
</div>

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">
@@ -34,4 +34,4 @@
</div>
<!-- / CONTENT -->
</div>
</div>

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">
@@ -47,4 +47,4 @@
</div>
<!-- / CONTENT -->
</div>
</div>

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">