purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into scrumboard-app

Browse Source 
# Conflicts:
#	package.json
#	src/app/core/modules/shared.module.ts
This commit is contained in:
mustafahlvc 2017-08-30 14:19:45 +03:00
commit a0da9bd81e
60 changed files with 1225 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "fuse2", "name": "fuse2",
"version": "1.0.1", "version": "1.0.2",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -16,17 +16,17 @@
} }
}, },
"@angular/animations": { "@angular/animations": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.3.6.tgz",
"integrity": "sha1-hapFTIh8x8zhFjfqX26a+tiEkOE=", "integrity": "sha1-v5KD7HyMmLMvVp2E3NoQiQ/cAmI=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/cdk": { "@angular/cdk": {
"version": "2.0.0-beta.8", "version": "2.0.0-beta.10",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.8.tgz", "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.10.tgz",
"integrity": "sha512-OOtK+AA14cmRG9AbUgvoKC9Tooz0N37GTaRSV+xziC8GxXHgwvTu4PFSFHlBnHPipOYC/tB2oP39j3KuurEMPA==", "integrity": "sha512-G0RvzxItfPy8JEdnyV/10GryE3zHehm3bUJ7U9dwYKhAzhye+MX0P6rs8VEmbClJb5SuZDr0ZZ53vbHhHsUh6A==",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
@ -103,41 +103,32 @@
} }
}, },
"@angular/common": { "@angular/common": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.3.6.tgz",
"integrity": "sha1-X2sRNH6uHfw0YjzP1MBsj0xIji0=", "integrity": "sha1-7TfpMHx1Bt2DR5fBps9nXlK1tu4=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/compiler": { "@angular/compiler": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.3.6.tgz",
"integrity": "sha1-UNPJhmV77/H+9Pbdmj+ljiSr1Ug=", "integrity": "sha1-vhcN8Ji3HoNczt8WjV+3sj5QRbg=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/compiler-cli": { "@angular/compiler-cli": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.3.6.tgz",
"integrity": "sha1-JOmbNsCQk2P/gke/MxqLiert/mM=", "integrity": "sha1-avpq72jdaB5hs5i+TWJw5choCxI=",
"dev": true, "dev": true,
"requires": { "requires": {
"@angular/tsc-wrapped": "4.3.5", "@angular/tsc-wrapped": "4.3.6",
"minimist": "1.2.0", "minimist": "1.2.0",
"reflect-metadata": "0.1.10" "reflect-metadata": "0.1.10"
}, },
"dependencies": { "dependencies": {
"@angular/tsc-wrapped": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.3.5.tgz",
"integrity": "sha1-lf2qgTz8VyYvx+9f6nJtYorvq6w=",
"dev": true,
"requires": {
"tsickle": "0.21.6"
}
},
"minimist": { "minimist": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
@ -147,9 +138,9 @@
} }
}, },
"@angular/core": { "@angular/core": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.3.6.tgz",
"integrity": "sha1-vR79vx68+5wnojjiqkxIFZsIlbs=", "integrity": "sha1-u6xj1o0Pe8s4nRKzQghlK+MofpY=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
@ -163,59 +154,68 @@
} }
}, },
"@angular/forms": { "@angular/forms": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.3.6.tgz",
"integrity": "sha1-UZqtCtgqG4cBmTf6k/wUdzRzd4c=", "integrity": "sha1-DyDEWXwWoVJ0XXzZVVmFWgpcZoc=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/http": { "@angular/http": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.3.6.tgz",
"integrity": "sha1-gdSwdhyO8DXLC3NjAMI382KG8fA=", "integrity": "sha1-Vjgn0afV6J47fYa3f7vTZ7LAhZE=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/language-service": { "@angular/language-service": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.3.6.tgz",
"integrity": "sha1-ttiC6kDRjVE/w6A1p5h1Ap/jjwE=", "integrity": "sha1-cc8tu0ZhVo89EqnA5LngQ++TvTo=",
"dev": true "dev": true
}, },
"@angular/material": { "@angular/material": {
"version": "2.0.0-beta.8", "version": "2.0.0-beta.10",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.8.tgz", "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.10.tgz",
"integrity": "sha512-4+OecvjU15i+l/vXBP2qEHdlsU9taK6kBhsWKsxNLK3+TAVoV5qjc2rjOucHtTwI/oOjyBXnLJP6pl4tuLEUQw==", "integrity": "sha512-KAQ2t9wenI55oXkjjT6E4VGUSVu7AZmR+ytnaP96VBFk18wxcGnVaTbQmCvVm/vkbcdeoSF09D6ic94DHAE+1A==",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.3.6.tgz",
"integrity": "sha1-wNA0CUmcwp+BZ3qrYjyQhnYNhO8=", "integrity": "sha1-YVKx87eNAkb8XhUOL3ue1DN+O6Y=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/platform-browser-dynamic": { "@angular/platform-browser-dynamic": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.6.tgz",
"integrity": "sha1-Sml7OwrsgFsziE/UqbNHMGW6seA=", "integrity": "sha1-nqv4JvEZyY+Fwqlu3LGKsAtO+xw=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/router": { "@angular/router": {
"version": "4.3.5", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.3.5.tgz", "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.3.6.tgz",
"integrity": "sha1-GICCdHvJtpdPnUs/VVe0NGRdI80=", "integrity": "sha1-ZAM+20/NoIoyPnUztKGCDA8o0TA=",
"requires": { "requires": {
"tslib": "1.7.1" "tslib": "1.7.1"
} }
}, },
"@angular/tsc-wrapped": {
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.3.6.tgz",
"integrity": "sha1-GqZuCrLEeZpK0UtnXhOVOqX81DY=",
"dev": true,
"requires": {
"tsickle": "0.21.6"
}
},
"@ngtools/json-schema": { "@ngtools/json-schema": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.1.0.tgz",
@ -258,9 +258,9 @@
"dev": true "dev": true
}, },
"@types/jasminewd2": { "@types/jasminewd2": {
"version": "2.0.2", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.3.tgz",
"integrity": "sha1-X2jh5pe/ELxv2Mvy4Aaj1nEsW2Q=", "integrity": "sha512-hYDVmQZT5VA2kigd4H4bv7vl/OhlympwREUemqBdOqtrYTo5Ytm12a5W5/nGgGYdanGVxj0x/VhZ7J3hOg/YKg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/jasmine": "2.5.54" "@types/jasmine": "2.5.54"
@ -6202,6 +6202,11 @@
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-4.3.1.tgz", "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-4.3.1.tgz",
"integrity": "sha512-/Gn3XvOgaAK/ZnXA0ej9ivYm6uIvHwvZaSzx04ZUtG1Vw5RCKzw84dK0Ru9Ylnnq1xJU4WmdA63REkJb8cvYXg==" "integrity": "sha512-/Gn3XvOgaAK/ZnXA0ej9ivYm6uIvHwvZaSzx04ZUtG1Vw5RCKzw84dK0Ru9Ylnnq1xJU4WmdA63REkJb8cvYXg=="
}, },
"ngx-cookie-service": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-1.0.7.tgz",
"integrity": "sha1-NdQzt3WloqgIxUl19Pr1AKzFL2g="
},
"ngx-perfect-scrollbar": { "ngx-perfect-scrollbar": {
"version": "4.5.6", "version": "4.5.6",
"resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-4.5.6.tgz", "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-4.5.6.tgz",

66
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "fuse2", "name": "fuse2",
"version": "1.0.1", "version": "1.0.2",
"license": "MIT", "license": "",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
@ -12,41 +12,41 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "4.3.5", "@angular/animations": "4.3.6",
"@angular/cdk": "^2.0.0-beta.8", "@angular/cdk": "2.0.0-beta.10",
"@angular/common": "4.3.5", "@angular/common": "4.3.6",
"@angular/compiler": "4.3.5", "@angular/compiler": "4.3.6",
"@angular/core": "4.3.5", "@angular/core": "4.3.6",
"@angular/flex-layout": "2.0.0-beta.9", "@angular/flex-layout": "2.0.0-beta.9",
"@angular/forms": "4.3.5", "@angular/forms": "4.3.6",
"@angular/http": "4.3.5", "@angular/http": "4.3.6",
"@angular/material": "^2.0.0-beta.8", "@angular/material": "2.0.0-beta.10",
"@angular/platform-browser": "4.3.5", "@angular/platform-browser": "4.3.6",
"@angular/platform-browser-dynamic": "4.3.5", "@angular/platform-browser-dynamic": "4.3.6",
"@angular/router": "4.3.5", "@angular/router": "4.3.6",
"@swimlane/ngx-charts": "^6.0.2", "@swimlane/ngx-charts": "6.0.2",
"@swimlane/ngx-datatable": "^9.3.1", "@swimlane/ngx-datatable": "9.3.1",
"@swimlane/ngx-dnd": "^3.0.0", "@swimlane/ngx-dnd": "3.0.0",
"angular-calendar": "^0.19.0", "angular-calendar": "0.19.0",
"angular-in-memory-web-api": "^0.3.2", "angular-in-memory-web-api": "0.3.2",
"classlist.js": "^1.1.20150312", "classlist.js": "1.1.20150312",
"core-js": "^2.5.0", "core-js": "2.5.0",
"d3": "^4.10.0", "d3": "4.10.0",
"hammerjs": "^2.0.8", "hammerjs": "2.0.8",
"highlight.js": "^9.12.0", "highlight.js": "9.12.0",
"intl": "^1.2.5", "intl": "1.2.5",
"md2": "0.0.28", "moment": "2.18.1",
"moment": "^2.18.1", "ngx-color-picker": "4.3.1",
"ngx-color-picker": "^4.3.1", "ngx-cookie-service": "1.0.7",
"ngx-perfect-scrollbar": "^4.5.6", "ngx-perfect-scrollbar": "4.5.6",
"rxjs": "^5.4.3", "rxjs": "5.4.3",
"web-animations-js": "^2.3.1", "web-animations-js": "2.3.1",
"zone.js": "^0.8.17" "zone.js": "0.8.17"
}, },
"devDependencies": { "devDependencies": {
"@angular/cli": "^1.3.2", "@angular/cli": "^1.3.2",
"@angular/compiler-cli": "4.3.5", "@angular/compiler-cli": "4.3.6",
"@angular/language-service": "4.3.5", "@angular/language-service": "4.3.6",
"@ngtools/webpack": "^1.6.2", "@ngtools/webpack": "^1.6.2",
"@types/jasmine": "^2.5.54", "@types/jasmine": "^2.5.54",
"@types/jasminewd2": "^2.0.2", "@types/jasminewd2": "^2.0.2",

6
src/app/app.module.ts
View File

@ -17,6 +17,8 @@ import { UIModule } from './main/content/ui/ui.module';
import { ComponentsModule } from './main/content/components/components.module'; import { ComponentsModule } from './main/content/components/components.module';
import { FuseSplashScreenService } from './core/services/splash-screen.service'; import { FuseSplashScreenService } from './core/services/splash-screen.service';
import { FuseConfigService } from './core/services/config.service'; import { FuseConfigService } from './core/services/config.service';
import { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module';
import { ServicesModule } from './main/content/services/services.module';
const appRoutes: Routes = [ const appRoutes: Routes = [
{ {
@ -75,7 +77,9 @@ const appRoutes: Routes = [
PagesModule, PagesModule,
UIModule, UIModule,
ComponentsModule ServicesModule,
ComponentsModule,
ComponentsThirdPartyModule
], ],
providers : [ providers : [
FuseSplashScreenService, FuseSplashScreenService,

1
src/app/core/components/countdown/countdown.component.scss
View File

@ -9,6 +9,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center;
.time { .time {
display: flex; display: flex;

21
src/app/core/components/shortcuts/shortcuts.component.ts
View File

@ -4,6 +4,7 @@ import { Subscription } from 'rxjs/Subscription';
import { ObservableMedia } from '@angular/flex-layout'; import { ObservableMedia } from '@angular/flex-layout';
import { FuseMatchMedia } from '../../services/match-media.service'; import { FuseMatchMedia } from '../../services/match-media.service';
import { FuseConfigService } from '../../services/config.service'; import { FuseConfigService } from '../../services/config.service';
import { CookieService } from 'ngx-cookie-service';
@Component({ @Component({
selector : 'fuse-shortcuts', selector : 'fuse-shortcuts',
@ -29,7 +30,8 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
private observableMedia: ObservableMedia, private observableMedia: ObservableMedia,
private fuseMatchMedia: FuseMatchMedia, private fuseMatchMedia: FuseMatchMedia,
private fuseNavigationService: FuseNavigationService, private fuseNavigationService: FuseNavigationService,
private fuseConfig: FuseConfigService private fuseConfig: FuseConfigService,
private cookieService: CookieService
) )
{ {
this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(); this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
@ -44,6 +46,14 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
} }
ngOnInit() ngOnInit()
{
const cookieExists = this.cookieService.check('FUSE2.shortcuts');
if ( cookieExists )
{
this.shortcutItems = JSON.parse(this.cookieService.get('FUSE2.shortcuts'));
}
else
{ {
// User's shortcut items // User's shortcut items
this.shortcutItems = [ this.shortcutItems = [
@ -72,6 +82,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
'url' : '/apps/todo' 'url' : '/apps/todo'
} }
]; ];
}
this.matchMediaSubscription = this.matchMediaSubscription =
this.fuseMatchMedia.onMediaChange.subscribe(() => { this.fuseMatchMedia.onMediaChange.subscribe(() => {
@ -115,12 +126,18 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
if ( this.shortcutItems[i].url === itemToToggle.url ) if ( this.shortcutItems[i].url === itemToToggle.url )
{ {
this.shortcutItems.splice(i, 1); this.shortcutItems.splice(i, 1);
// Save to the cookies
this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
return; return;
} }
} }
this.shortcutItems.push(itemToToggle); this.shortcutItems.push(itemToToggle);
// Save to the cookies
this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
} }
isInShortcuts(navigationItem) isInShortcuts(navigationItem)

4
src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
View File

@ -35,13 +35,17 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
{ {
this.isLockedOpen = true; this.isLockedOpen = true;
this.mdSidenav.mode = 'side'; this.mdSidenav.mode = 'side';
setTimeout(() => {
this.mdSidenav.open(); this.mdSidenav.open();
});
} }
else else
{ {
this.isLockedOpen = false; this.isLockedOpen = false;
this.mdSidenav.mode = 'over'; this.mdSidenav.mode = 'over';
setTimeout(() => {
this.mdSidenav.close(); this.mdSidenav.close();
});
} }
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => { this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {

2
src/app/core/modules/material.module.ts
View File

@ -32,7 +32,7 @@ import {
MdTableModule, MdTableModule,
MdTabsModule MdTabsModule
} from '@angular/material'; } from '@angular/material';
import { CdkTableModule } from '@angular/cdk'; import { CdkTableModule } from '@angular/cdk/table';
@NgModule({ @NgModule({
imports: [ imports: [

2
src/app/core/modules/shared.module.ts
View File

@ -21,6 +21,7 @@ import { FuseHljsComponent } from '../components/hljs/hljs.component';
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.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 { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
import { Md2Module } from 'md2'; import { Md2Module } from 'md2';
import { CookieService } from 'ngx-cookie-service';
@NgModule({ @NgModule({
declarations : [ declarations : [
@ -68,6 +69,7 @@ import { Md2Module } from 'md2';
FuseConfirmDialogComponent FuseConfirmDialogComponent
], ],
providers : [ providers : [
CookieService,
FuseNavigationService, FuseNavigationService,
FuseMatchMedia, FuseMatchMedia,
FuseNavbarService, FuseNavbarService,

1
src/app/core/scss/core.scss
View File

@ -28,6 +28,7 @@
@import "partials/navigation"; @import "partials/navigation";
@import "partials/forms"; @import "partials/forms";
@import "partials/toolbar"; @import "partials/toolbar";
@import "partials/print";
// Plugins // Plugins
@import "partials/plugins/plugins"; @import "partials/plugins/plugins";

30
src/app/core/scss/partials/_page-layouts.scss
View File

@ -144,7 +144,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.md-stop-transition { &.md-stop-transition {
~ .mat-sidenav-content { ~ .mat-sidenav-content,
~ .mat-drawer-content {
transition: none; transition: none;
} }
} }
@ -161,7 +162,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
} }
} }
> .mat-sidenav-content { > .mat-sidenav-content,
> .mat-drawer-content {
display: flex; display: flex;
flex: 1; flex: 1;
height: auto; height: auto;
@ -229,7 +231,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.md-is-locked-open { &.md-is-locked-open {
~ .mat-sidenav-content { ~ .mat-sidenav-content,
~ .mat-drawer-content {
margin-left: 0 !important; margin-left: 0 !important;
.center { .center {
@ -252,7 +255,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.md-is-locked-open { &.md-is-locked-open {
~ .mat-sidenav-content { ~ .mat-sidenav-content,
~ .mat-drawer-content {
margin-right: 0 !important; margin-right: 0 !important;
.center { .center {
@ -301,7 +305,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> md-sidenav-container { > md-sidenav-container {
flex: 1 0 auto; flex: 1 0 auto;
> .mat-sidenav-content { > .mat-sidenav-content,
> .mat-drawer-content {
flex: 1 0 auto; flex: 1 0 auto;
max-height: none; max-height: none;
@ -325,7 +330,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
} }
} }
> .mat-sidenav-content { > .mat-sidenav-content,
> .mat-drawer-content {
display: flex; display: flex;
height: auto; height: auto;
@ -368,7 +374,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.md-stop-transition { &.md-stop-transition {
~ .mat-sidenav-content { ~ .mat-sidenav-content,
~ .mat-drawer-content {
transition: none; transition: none;
} }
} }
@ -378,7 +385,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
} }
} }
> .mat-sidenav-content { > .mat-sidenav-content,
> .mat-drawer-content {
display: flex; display: flex;
flex: 1; flex: 1;
height: auto; height: auto;
@ -472,7 +480,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> md-sidenav-container { > md-sidenav-container {
flex: 1 0 auto !important; flex: 1 0 auto !important;
> .mat-sidenav-content { > .mat-sidenav-content,
> .mat-drawer-content {
flex: 1 0 auto; flex: 1 0 auto;
> .center { > .center {
@ -499,7 +508,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> md-sidenav-container { > md-sidenav-container {
> .mat-sidenav-content { > .mat-sidenav-content,
> .mat-drawer-content {
.center { .center {
margin: 0 16px; margin: 0 16px;

51
src/app/core/scss/partials/_print.scss Normal file
View File

@ -0,0 +1,51 @@
/*----------------------------------------------------------------*/
/* Print
/*----------------------------------------------------------------*/
@media all {
/* Never show page break in normal view */
.page-break {
display: none;
}
}
@media print {
/* Page Styles */
@page {
//margin: 0.5cm;
}
/* Page break */
.page-break {
display: block;
break-after: always;
page-break-after: always;
}
/* General styles */
fuse-root {
fuse-navbar,
fuse-toolbar,
fuse-footer,
fuse-quick-panel,
fuse-theme-options,
.ps > .ps__scrollbar-x-rail,
.ps > .ps__scrollbar-y-rail {
display: none !important;
}
.ps {
overflow: visible !important;
}
}
/* Printable page specific styles */
.printable {
overflow: visible !important;
height: auto !important;
}
}

3
src/app/core/services/config.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { NavigationStart, Router } from '@angular/router'; import { NavigationStart, Router } from '@angular/router';
import { Platform } from '@angular/cdk'; import { Platform } from '@angular/cdk/platform';
@Injectable() @Injectable()
export class FuseConfigService export class FuseConfigService
@ -12,6 +12,7 @@ export class FuseConfigService
/** /**
* @param router * @param router
* @param platform
*/ */
constructor( constructor(
private router: Router, private router: Router,

26
src/app/main/content/apps/calendar/event-form/event-form.component.html
View File

@ -58,29 +58,23 @@
<div fxFlex="1 0 auto" fxLayout="row"> <div fxFlex="1 0 auto" fxLayout="row">
<md-input-container class="mr-24"> <md-form-field class="mr-24">
<input mdInput <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
name="start" <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
formControlName="start" <md-datepicker #startDatePicker></md-datepicker>
[mdDatepicker]="startDatePicker" </md-form-field>
placeholder="Start Date">
<button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
</md-input-container>
<md-datepicker #startDatePicker></md-datepicker> <md-datepicker #startDatePicker></md-datepicker>
</div> </div>
<div fxFlex="1 0 auto" fxLayout="row"> <div fxFlex="1 0 auto" fxLayout="row">
<md-input-container class="mr-24"> <md-form-field class="mr-24">
<input mdInput <input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
name="end" <md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
formControlName="end"
[mdDatepicker]="endDatePicker"
placeholder="End Date">
<button mdSuffix [mdDatepickerToggle]="endDatePicker"></button>
</md-input-container>
<md-datepicker #endDatePicker></md-datepicker> <md-datepicker #endDatePicker></md-datepicker>
</md-form-field>
<md-input-container class="no-errors-spacer" flex md-no-float> <md-input-container class="no-errors-spacer" flex md-no-float>
<input mdInput ng-model="calendarEvent.endTime" placeholder="End Time"> <input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">

3
src/app/main/content/apps/chat/chat.component.scss
View File

@ -19,7 +19,8 @@
width: 100%; width: 100%;
background: transparent; background: transparent;
.mat-sidenav-content { > .mat-sidenav-content,
> .mat-drawer-content {
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
min-height: 100%; min-height: 100%;

11
src/app/main/content/apps/contacts/contact-form/contact-form.component.html
View File

@ -69,14 +69,11 @@
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-input-container fxFlex class="mr-24"> <md-form-field class="mr-24" fxFlex>
<button mdSuffix [mdDatepickerToggle]="birthdayDatePicker"></button> <input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday">
<input mdInput <md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle>
name="birthday" formControlName="birthday"
[mdDatepicker]="birthdayDatePicker"
placeholder="Birthday">
</md-input-container>
<md-datepicker #birthdayDatePicker></md-datepicker> <md-datepicker #birthdayDatePicker></md-datepicker>
</md-form-field>
</div> </div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start"> <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">

2
src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
View File

@ -1,11 +1,11 @@
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ContactsService } from '../contacts.service'; import { ContactsService } from '../contacts.service';
import { DataSource } from '@angular/cdk';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component'; import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
import { MdDialog, MdDialogRef } from '@angular/material'; import { MdDialog, MdDialogRef } from '@angular/material';
import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component'; import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { DataSource } from '@angular/cdk/collections';
@Component({ @Component({
selector : 'fuse-contacts-contact-list', selector : 'fuse-contacts-contact-list',

2
src/app/main/content/apps/dashboards/project/project.component.ts
View File

@ -3,7 +3,7 @@ import { ProjectsDashboardService } from './projects.service';
import * as shape from 'd3-shape'; import * as shape from 'd3-shape';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk'; import { DataSource } from '@angular/cdk/collections';
@Component({ @Component({
selector : 'fuse-project', selector : 'fuse-project',

2
src/app/main/content/apps/file-manager/file-list/file-list.component.ts
View File

@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FileManagerService } from '../file-manager.service'; import { FileManagerService } from '../file-manager.service';
import { DataSource } from '@angular/cdk';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
@Component({ @Component({
selector : 'fuse-file-list', selector : 'fuse-file-list',

5
src/app/main/content/apps/file-manager/file-manager.component.scss
View File

@ -19,7 +19,8 @@
} }
} }
.mat-sidenav-content { > .mat-sidenav-content,
> .mat-drawer-content {
z-index: 1; z-index: 1;
.center { .center {
@ -30,7 +31,7 @@
min-height: 160px; min-height: 160px;
max-height: 160px; max-height: 160px;
@include media-breakpoint-down('sm'){ @include media-breakpoint-down('sm') {
height: 120px; height: 120px;
min-height: 120px; min-height: 120px;
max-height: 120px; max-height: 120px;

3
src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html Normal file
View File

@ -0,0 +1,3 @@
<p>
board-color-selector works!
</p>

0
src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.scss Normal file
View File

15
src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-board-color-selector',
templateUrl: './board-color-selector.component.html',
styleUrls: ['./board-color-selector.component.scss']
})
export class BoardColorSelectorComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

25
src/app/main/content/apps/todo/todo-details/todo-details.component.html
View File

@ -70,25 +70,18 @@
<div fxFlexFill fxLayout="row"> <div fxFlexFill fxLayout="row">
<md-input-container fxFlex class="mr-16"> <md-form-field class="mr-24" fxFlex>
<input mdInput <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
name="start" <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
formControlName="startDate"
[mdDatepicker]="startDatePicker"
placeholder="Start Date">
<button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
</md-input-container>
<md-datepicker #startDatePicker></md-datepicker> <md-datepicker #startDatePicker></md-datepicker>
</md-form-field>
<md-input-container fxFlex> <md-form-field fxFlex>
<input mdInput <input mdInput [mdDatepicker]="dueDatePicker" placeholder="Due Date">
name="dueDate" <md-datepicker-toggle mdSuffix [for]="dueDatePicker"></md-datepicker-toggle>
formControlName="dueDate"
[mdDatepicker]="dueDatePicker"
placeholder="Due Date">
<button mdSuffix [mdDatepickerToggle]="dueDatePicker"></button>
</md-input-container>
<md-datepicker #dueDatePicker></md-datepicker> <md-datepicker #dueDatePicker></md-datepicker>
</md-form-field>
</div> </div>
<md-input-container class="" fxFill> <md-input-container class="" fxFill>

24
src/app/main/content/components-third-party/components-third-party.module.ts vendored Normal file
View File

@ -0,0 +1,24 @@
import { NgModule } from '@angular/core';
import { SharedModule } from '../../../core/modules/shared.module';
import { RouterModule } from '@angular/router';
import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.component';
const routes = [
{
path : 'components-third-party/datatables/ngx-datatable',
component: FuseNgxDatatableComponent
}
];
@NgModule({
imports : [
SharedModule,
RouterModule.forChild(routes)
],
declarations: [
FuseNgxDatatableComponent
]
})
export class ComponentsThirdPartyModule
{
}

0
src/app/main/content/components/datatable/ngx-datatable.component.html → src/app/main/content/components-third-party/datatable/ngx-datatable.component.html vendored
View File

0
src/app/main/content/components/datatable/ngx-datatable.component.scss → src/app/main/content/components-third-party/datatable/ngx-datatable.component.scss vendored
View File

0
src/app/main/content/components/datatable/ngx-datatable.component.ts → src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts vendored
View File

50
src/app/main/content/components/components.module.ts
View File

@ -1,28 +1,66 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { SharedModule } from '../../../core/modules/shared.module'; import { SharedModule } from '../../../core/modules/shared.module';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.component';
import { FusePriceTablesComponent } from './price-tables/price-tables.component'; import { FusePriceTablesComponent } from './price-tables/price-tables.component';
import { FuseCountdownDocsComponent } from './countdown/countdown.component';
import { FuseHljsDocsComponent } from './hljs/hljs.component';
import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
import { FuseNavigationDocsComponent } from './navigation/navigation.component';
import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component';
import { FuseSearchBarDocsComponent } from 'app/main/content/components/search-bar/search-bar.component';
import { FuseWidgetDocsComponent } from './widget/widget.component';
import { FuseWidgetModule } from '../../../core/components/widget/widget.module';
const routes = [ const routes = [
{ {
path : 'components/datatables/ngx-datatable', path : 'components/countdown',
component: FuseNgxDatatableComponent component: FuseCountdownDocsComponent
},
{
path : 'components/highlightjs',
component: FuseHljsDocsComponent
},
{
path : 'components/material-color-picker',
component: FuseMaterialColorPickerDocsComponent
},
{
path : 'components/navigation',
component: FuseNavigationDocsComponent
}, },
{ {
path : 'components/price-tables', path : 'components/price-tables',
component: FusePriceTablesComponent component: FusePriceTablesComponent
},
{
path : 'components/search-bar',
component: FuseSearchBarDocsComponent
},
{
path : 'components/shortcuts',
component: FuseShortcutsDocsComponent
},
{
path : 'components/widget',
component: FuseWidgetDocsComponent
} }
]; ];
@NgModule({ @NgModule({
imports : [ imports : [
SharedModule, SharedModule,
RouterModule.forChild(routes) RouterModule.forChild(routes),
FuseWidgetModule
], ],
declarations: [ declarations: [
FuseNgxDatatableComponent, FuseCountdownDocsComponent,
FusePriceTablesComponent FuseHljsDocsComponent,
FuseMaterialColorPickerDocsComponent,
FuseNavigationDocsComponent,
FusePriceTablesComponent,
FuseSearchBarDocsComponent,
FuseShortcutsDocsComponent,
FuseWidgetDocsComponent
] ]
}) })
export class ComponentsModule export class ComponentsModule

55
src/app/main/content/components/countdown/countdown.component.html Normal file
View File

@ -0,0 +1,55 @@
<div id="countdown" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Countdown</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fuse-countdown</code> is a custom built Fuse component allows you to create a countdowns.
</p>
<div class="my-48">
<h2>Sample</h2>
<p fxLayout="row" fxLayoutAlign="start start">
<fuse-countdown eventDate="2019-07-28"></fuse-countdown>
</p>
</div>
<div class="my-48">
<h2>Usage</h2>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<fuse-countdown eventDate="2019-07-28"></fuse-countdown>
</textarea>
</fuse-hljs>
</p>
</div>
<div class="my-48">
<h2>Inputs</h2>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">eventDate</code>
<span>
The date of the event. Since fuse-countdown uses moment.js to parse the dates, any moment.js
compatible date string can be used.
</span>
</p>
</div>
</div>
</div>

3
src/app/main/content/components/countdown/countdown.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/components/countdown/countdown.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-countdown-docs',
templateUrl: './countdown.component.html',
styleUrls : ['./countdown.component.scss']
})
export class FuseCountdownDocsComponent
{
constructor()
{
}
}

66
src/app/main/content/components/hljs/hljs.component.html Normal file
View File

@ -0,0 +1,66 @@
<div id="hljs" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">highlight.js</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fuse-hljs</code> is a custom built Fuse component allows to show syntax highlighted codes.
</p>
<div class="my-48">
<h2>Sample</h2>
<p fxLayout="row" fxLayoutAlign="start start">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="title">
<span>Example Title</span>
</div>
</textarea>
</fuse-hljs>
</p>
</div>
<div class="my-48">
<h2>Usage</h2>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
&lt;fuse-hljs lang="html" class="source-code"&gt;
&lt;textarea #source hidden="hidden"&gt;
&lt;div class="title"&gt;
&lt;span&gt;Example Title&lt;/span&gt;
&lt;/div&gt;
&lt;/textarea&gt;
&lt;/fuse-hljs&gt;
</textarea>
</fuse-hljs>
</p>
</div>
<div class="my-48">
<h2>Inputs</h2>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">lang</code>
<span>
Language of the code to be highlighted. All highlight.js languages can be used.
</span>
</p>
</div>
</div>
</div>

3
src/app/main/content/components/hljs/hljs.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/components/hljs/hljs.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-hljs-docs',
templateUrl: './hljs.component.html',
styleUrls : ['./hljs.component.scss']
})
export class FuseHljsDocsComponent
{
constructor()
{
}
}

75
src/app/main/content/components/material-color-picker/material-color-picker.component.html Normal file
View File

@ -0,0 +1,75 @@
<div id="material-color-picker" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Material Color Picker</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fuse-material-color-picker</code> is a custom built Fuse component allows you to add a color picker
that allows to choose one of the many Material spec. colors.
</p>
<div class="my-48">
<h2>Sample</h2>
<p fxLayout="row" fxLayoutAlign="start start">
<fuse-material-color-picker></fuse-material-color-picker>
</p>
</div>
<div class="my-48">
<h2>Usage</h2>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<fuse-material-color-picker [(selectedClass)]="colorClass"
(onValueChange)="onSettingsChange()">
</fuse-material-color-picker>
</textarea>
</fuse-hljs>
</p>
</div>
<div class="my-48">
<h2>Two-way bindings</h2>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">selectedClass</code>
<span>
The name of the Fuse color class to select, e.g. <code>md-red-500-bg</code>
</span>
</p>
<p class="py-8 pt-4" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">selectedBg</code>
<span>
The hex code of the color to be selected. It will be only selected if the hex code of the color
matches one of the material colors.
</span>
</p>
</div>
<div class="my-48">
<h2>Outputs</h2>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">onValueChange</code>
<span>
Event that triggered when a color selected. Returns an object that holds palette, hue, class name,
background and foreground colors.
</span>
</p>
</div>
</div>
</div>

3
src/app/main/content/components/material-color-picker/material-color-picker.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/components/material-color-picker/material-color-picker.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-material-color-picker-docs',
templateUrl: './material-color-picker.component.html',
styleUrls : ['./material-color-picker.component.scss']
})
export class FuseMaterialColorPickerDocsComponent
{
constructor()
{
}
}

107
src/app/main/content/components/navigation/navigation.component.html Normal file
View File

@ -0,0 +1,107 @@
<div id="navigation" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Navigation</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fuse-navigation</code> is a custom built Fuse component allows you to create a multi-level collapsable
navigation.
</p>
<!--<div class="my-48">
<h2>Sample</h2>
<p fxLayout="row" fxLayoutAlign="start start">
<fuse-navigation></fuse-navigation>
</p>
</div>-->
<div class="my-48">
<h2>Usage</h2>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<fuse-navigation></fuse-navigation>
</textarea>
</fuse-hljs>
</p>
</div>
<div class="my-48">
<h2>Model</h2>
<p class="py-8">
<code>&lt;fuse-navigation&gt;&lt;/fuse-navigation&gt;</code> uses a service and a model file to populate
the entire navigation. It supports three different navigation items; <b>Subheader</b>,
<b>Collapsable</b> and <b>Item</b>. These items can be mixed and matched to create unique and complex
navigation layouts.
</p>
</div>
<div class="my-48">
<h3>Header</h3>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="json" class="source-code">
<textarea #source hidden="hidden">
{
'title': 'COMPONENTS',
'type' : 'subheader'
},
</textarea>
</fuse-hljs>
</p>
</div>
<div class="my-48">
<h3>Collapsable</h3>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="json" class="source-code">
<textarea #source hidden="hidden">
{
'title' : 'Datatables',
'type' : 'nav-collapse',
'icon' : 'border_all',
'children': [
{
'title': 'ngx-datatable',
'type' : 'nav-item',
'url' : '/components/datatables/ngx-datatable'
}
]
},
</textarea>
</fuse-hljs>
</p>
</div>
<div class="my-48">
<h3>Item</h3>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="json" class="source-code">
<textarea #source hidden="hidden">
{
'title': 'Countdown',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/countdown'
},
</textarea>
</fuse-hljs>
</p>
</div>
</div>
</div>

3
src/app/main/content/components/navigation/navigation.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/components/navigation/navigation.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-navigation-docs',
templateUrl: './navigation.component.html',
styleUrls : ['./navigation.component.scss']
})
export class FuseNavigationDocsComponent
{
constructor()
{
}
}

2
src/app/main/content/components/price-tables/price-tables.component.html
View File

@ -6,7 +6,7 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center"> <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon> <md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon> <md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Tables</span> <span class="secondary-text">Components</span>
</div> </div>
<div class="h2 mt-16">Price Tables</div> <div class="h2 mt-16">Price Tables</div>
</div> </div>

47
src/app/main/content/components/search-bar/search-bar.component.html Normal file
View File

@ -0,0 +1,47 @@
<div id="search-bar" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Search Bar</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fuse-search-bar</code> is a custom built Fuse component allows you to have a search bar that activates
on click.
</p>
<div class="my-48">
<h2>Usage</h2>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
</textarea>
</fuse-hljs>
</p>
</div>
<div class="my-48">
<h2>Outputs</h2>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-8">onInput</code>
<span>Triggers every time an input occurs within the search bar. Can be used to trigger the actual
search mechanism. The $event is the value from the search input.</span>
</p>
</div>
</div>
</div>

3
src/app/main/content/components/search-bar/search-bar.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/components/search-bar/search-bar.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-search-bar-docs',
templateUrl: './search-bar.component.html',
styleUrls : ['./search-bar.component.scss']
})
export class FuseSearchBarDocsComponent
{
constructor()
{
}
}

47
src/app/main/content/components/shortcuts/shortcuts.component.html Normal file
View File

@ -0,0 +1,47 @@
<div id="shortcuts" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Shortcuts</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fuse-shortcuts</code> is a custom built Fuse component allows you to create and save shortcuts from
the navigation model.
</p>
<div class="my-48">
<h2>Usage</h2>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<fuse-shortcuts></fuse-shortcuts>
</textarea>
</fuse-hljs>
</p>
</div>
<div class="my-48">
<h2>Model</h2>
<p class="py-8">
<code>&lt;fuse-shortcuts&gt;&lt;/fuse-shortcuts&gt;</code> uses the same service with navigation
component to populate the shortcuts. It can search the navigation items as well as pin and unpin them as
shortcuts. It uses browser cookies to store the shortcuts.
</p>
</div>
</div>
</div>

3
src/app/main/content/components/shortcuts/shortcuts.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/components/shortcuts/shortcuts.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-shortcuts-docs',
templateUrl: './shortcuts.component.html',
styleUrls : ['./shortcuts.component.scss']
})
export class FuseShortcutsDocsComponent
{
constructor()
{
}
}

108
src/app/main/content/components/widget/widget.component.html Normal file
View File

@ -0,0 +1,108 @@
<div id="widget" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Widget</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fuse-widget</code> is a custom built Fuse component allows to create flippable widget boxes.
</p>
<div class="my-48">
<h2>Sample</h2>
<div>
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<div>Widget title</div>
<button md-icon-button fuseWidgetToggle aria-label="more">
<md-icon>more_vert</md-icon>
</button>
</div>
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
Widget Content
</div>
</div>
<!-- / Front -->
<!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
ng-click="flipWidget()" aria-label="Flip widget">
<md-icon class="s-16">close</md-icon>
</button>
<div>
More widget info
</div>
</div>
<!-- / Back -->
</fuse-widget>
</div>
</div>
<div class="my-48">
<h2>Usage</h2>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front -->
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<div>Widget title</div>
<button md-icon-button fuseWidgetToggle aria-label="more">
<md-icon>more_vert</md-icon>
</button>
</div>
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
Widget Content
</div>
</div>
<!-- / Front -->
<!-- Back -->
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
ng-click="flipWidget()" aria-label="Flip widget">
<md-icon class="s-16">close</md-icon>
</button>
<div>
More widget info
</div>
</div>
<!-- / Back -->
</fuse-widget>
</textarea>
</fuse-hljs>
</p>
</div>
</div>
</div>

3
src/app/main/content/components/widget/widget.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/components/widget/widget.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-widget-docs',
templateUrl: './widget.component.html',
styleUrls : ['./widget.component.scss']
})
export class FuseWidgetDocsComponent
{
constructor()
{
}
}

2
src/app/main/content/pages/search/tabs/table/table.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { SearchService } from '../../search.service'; import { SearchService } from '../../search.service';
import { DataSource } from '@angular/cdk'; import { DataSource } from '@angular/cdk/collections';
@Component({ @Component({
selector : 'fuse-search-table', selector : 'fuse-search-table',

70
src/app/main/content/services/config/config.component.html Normal file
View File

@ -0,0 +1,70 @@
<div id="config" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Services</span>
</div>
<div class="h2 mt-16">Config</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>Config</code> is a custom built Fuse service allows to have a granule control over the Fuse. It can be
used for changing theme options (layout, color etc.) by component basis.
</p>
<div class="my-48">
<h2>Usage</h2>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
export class SomeComponent
{
settings: any;
constructor(private fuseConfig: FuseConfigService)
{
// Subscribe to settings changed event
this.fuseConfig.onSettingsChanged.subscribe(
(newSettings) => {
this.settings = newSettings;
}
);
}
onInit(){
// Fully customizable surroundings for this particular component
this.fuseConfig.setSettings({
layout : {
navigation: 'left', // 'right', 'left', 'top', none
toolbar : 'below', // 'above', 'below', none
footer : 'none' // 'above', 'below', none
},
colorClasses : {
toolbar: 'md-white-500-bg',
navbar : 'md-fuse-dark-500-bg',
footer : 'md-fuse-dark-800-bg'
},
customScrollbars: true,
routerAnimation : 'fadeIn'
});
}
}
</textarea>
</fuse-hljs>
</p>
</div>
</div>
</div>

3
src/app/main/content/services/config/config.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/services/config/config.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-config-service-docs',
templateUrl: './config.component.html',
styleUrls : ['./config.component.scss']
})
export class FuseConfigServiceDocsComponent
{
constructor()
{
}
}

30
src/app/main/content/services/services.module.ts Normal file
View File

@ -0,0 +1,30 @@
import { NgModule } from '@angular/core';
import { SharedModule } from '../../../core/modules/shared.module';
import { RouterModule } from '@angular/router';
import { FuseConfigServiceDocsComponent } from './config/config.component';
import { FuseSplashScreenServiceDocsComponent } from './splash-screen/splash-screen.component';
const routes = [
{
path : 'services/config',
component: FuseConfigServiceDocsComponent
},
{
path : 'services/splash-screen',
component: FuseSplashScreenServiceDocsComponent
}
];
@NgModule({
imports : [
SharedModule,
RouterModule.forChild(routes)
],
declarations: [
FuseConfigServiceDocsComponent,
FuseSplashScreenServiceDocsComponent
]
})
export class ServicesModule
{
}

47
src/app/main/content/services/splash-screen/splash-screen.component.html Normal file
View File

@ -0,0 +1,47 @@
<div id="splash-screen" class="page-layout simple fullwidth" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Services</span>
</div>
<div class="h2 mt-16">Splash Screen</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>Splash screen</code> is a custom built Fuse service allows to have a fully controllable splash
screen. It also has built state for application loading so it will always be available while the app
loads.
</p>
<div class="my-48">
<h2>Usage</h2>
<p class="md-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
export class SomeComponent
{
constructor(private fuseSplashScreen: FuseSplashScreenService) {}
onInit(){
this.fuseSplashScreen.show();
this.fuseSplashScreen.hide();
}
}
</textarea>
</fuse-hljs>
</p>
</div>
</div>
</div>

3
src/app/main/content/services/splash-screen/splash-screen.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/services/splash-screen/splash-screen.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-splash-screen-service-docs',
templateUrl: './splash-screen.component.html',
styleUrls : ['./splash-screen.component.scss']
})
export class FuseSplashScreenServiceDocsComponent
{
constructor()
{
}
}

3
src/app/main/main.component.scss
View File

@ -23,7 +23,8 @@ fuse-main {
display: flex; display: flex;
flex: 1; flex: 1;
> .mat-sidenav-content { > .mat-sidenav-content,
> .mat-drawer-content {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;

76
src/app/navigation.model.ts
View File

@ -310,10 +310,78 @@ export class FuseNavigation
'icon' : 'color_lens', 'icon' : 'color_lens',
'url' : '/ui/colors' 'url' : '/ui/colors'
}, },
{
'title': 'SERVICES',
'type' : 'subheader'
},
{
'title': 'Config',
'type' : 'nav-item',
'icon' : 'settings',
'url' : '/services/config'
},
{
'title': 'Splash Screen',
'type' : 'nav-item',
'icon' : 'settings',
'url' : '/services/splash-screen'
},
{ {
'title': 'COMPONENTS', 'title': 'COMPONENTS',
'type' : 'subheader' 'type' : 'subheader'
}, },
{
'title': 'Countdown',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/countdown'
},
{
'title': 'Highlight.js',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/highlightjs'
},
{
'title': 'Material Color Picker',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/material-color-picker'
},
{
'title': 'Navigation',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/navigation'
},
{
'title': 'Price Tables',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/price-tables'
},
{
'title': 'Search Bar',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/search-bar'
},
{
'title': 'Shortcuts',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/shortcuts'
},
{
'title': 'Widget',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/widget'
},
{
'title': '3RD PARTY COMPONENTS',
'type' : 'subheader'
},
{ {
'title' : 'Datatables', 'title' : 'Datatables',
'type' : 'nav-collapse', 'type' : 'nav-collapse',
@ -322,16 +390,10 @@ export class FuseNavigation
{ {
'title': 'ngx-datatable', 'title': 'ngx-datatable',
'type' : 'nav-item', 'type' : 'nav-item',
'url' : '/components/datatables/ngx-datatable' 'url' : '/components-third-party/datatables/ngx-datatable'
} }
] ]
}, },
{
'title': 'Price Tables',
'type' : 'nav-item',
'icon' : 'view_carousel',
'url' : '/components/price-tables'
}
]; ];
} }
} }