mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Merge branch 'master' into scrumboard-app
# Conflicts: # package.json # src/app/core/modules/shared.module.ts
This commit is contained in:
mustafahlvc
commit
a0da9bd81e
111
package-lock.json
generated
111
package-lock.json
generated
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fuse2",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
@ -16,17 +16,17 @@
|
|||
}
|
||||
},
|
||||
"@angular/animations": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.3.5.tgz",
|
||||
"integrity": "sha1-hapFTIh8x8zhFjfqX26a+tiEkOE=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.3.6.tgz",
|
||||
"integrity": "sha1-v5KD7HyMmLMvVp2E3NoQiQ/cAmI=",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/cdk": {
|
||||
"version": "2.0.0-beta.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.8.tgz",
|
||||
"integrity": "sha512-OOtK+AA14cmRG9AbUgvoKC9Tooz0N37GTaRSV+xziC8GxXHgwvTu4PFSFHlBnHPipOYC/tB2oP39j3KuurEMPA==",
|
||||
"version": "2.0.0-beta.10",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.10.tgz",
|
||||
"integrity": "sha512-G0RvzxItfPy8JEdnyV/10GryE3zHehm3bUJ7U9dwYKhAzhye+MX0P6rs8VEmbClJb5SuZDr0ZZ53vbHhHsUh6A==",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
|
|
@ -103,41 +103,32 @@
|
|||
}
|
||||
},
|
||||
"@angular/common": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-4.3.5.tgz",
|
||||
"integrity": "sha1-X2sRNH6uHfw0YjzP1MBsj0xIji0=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-4.3.6.tgz",
|
||||
"integrity": "sha1-7TfpMHx1Bt2DR5fBps9nXlK1tu4=",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/compiler": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.3.5.tgz",
|
||||
"integrity": "sha1-UNPJhmV77/H+9Pbdmj+ljiSr1Ug=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.3.6.tgz",
|
||||
"integrity": "sha1-vhcN8Ji3HoNczt8WjV+3sj5QRbg=",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/compiler-cli": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.3.5.tgz",
|
||||
"integrity": "sha1-JOmbNsCQk2P/gke/MxqLiert/mM=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.3.6.tgz",
|
||||
"integrity": "sha1-avpq72jdaB5hs5i+TWJw5choCxI=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@angular/tsc-wrapped": "4.3.5",
|
||||
"@angular/tsc-wrapped": "4.3.6",
|
||||
"minimist": "1.2.0",
|
||||
"reflect-metadata": "0.1.10"
|
||||
},
|
||||
"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": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
|
|
@ -147,9 +138,9 @@
|
|||
}
|
||||
},
|
||||
"@angular/core": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-4.3.5.tgz",
|
||||
"integrity": "sha1-vR79vx68+5wnojjiqkxIFZsIlbs=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-4.3.6.tgz",
|
||||
"integrity": "sha1-u6xj1o0Pe8s4nRKzQghlK+MofpY=",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
|
|
@ -163,59 +154,68 @@
|
|||
}
|
||||
},
|
||||
"@angular/forms": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.3.5.tgz",
|
||||
"integrity": "sha1-UZqtCtgqG4cBmTf6k/wUdzRzd4c=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.3.6.tgz",
|
||||
"integrity": "sha1-DyDEWXwWoVJ0XXzZVVmFWgpcZoc=",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/http": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-4.3.5.tgz",
|
||||
"integrity": "sha1-gdSwdhyO8DXLC3NjAMI382KG8fA=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-4.3.6.tgz",
|
||||
"integrity": "sha1-Vjgn0afV6J47fYa3f7vTZ7LAhZE=",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/language-service": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.3.5.tgz",
|
||||
"integrity": "sha1-ttiC6kDRjVE/w6A1p5h1Ap/jjwE=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.3.6.tgz",
|
||||
"integrity": "sha1-cc8tu0ZhVo89EqnA5LngQ++TvTo=",
|
||||
"dev": true
|
||||
},
|
||||
"@angular/material": {
|
||||
"version": "2.0.0-beta.8",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.8.tgz",
|
||||
"integrity": "sha512-4+OecvjU15i+l/vXBP2qEHdlsU9taK6kBhsWKsxNLK3+TAVoV5qjc2rjOucHtTwI/oOjyBXnLJP6pl4tuLEUQw==",
|
||||
"version": "2.0.0-beta.10",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.10.tgz",
|
||||
"integrity": "sha512-KAQ2t9wenI55oXkjjT6E4VGUSVu7AZmR+ytnaP96VBFk18wxcGnVaTbQmCvVm/vkbcdeoSF09D6ic94DHAE+1A==",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.3.5.tgz",
|
||||
"integrity": "sha1-wNA0CUmcwp+BZ3qrYjyQhnYNhO8=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.3.6.tgz",
|
||||
"integrity": "sha1-YVKx87eNAkb8XhUOL3ue1DN+O6Y=",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser-dynamic": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.5.tgz",
|
||||
"integrity": "sha1-Sml7OwrsgFsziE/UqbNHMGW6seA=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.6.tgz",
|
||||
"integrity": "sha1-nqv4JvEZyY+Fwqlu3LGKsAtO+xw=",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/router": {
|
||||
"version": "4.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.3.5.tgz",
|
||||
"integrity": "sha1-GICCdHvJtpdPnUs/VVe0NGRdI80=",
|
||||
"version": "4.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.3.6.tgz",
|
||||
"integrity": "sha1-ZAM+20/NoIoyPnUztKGCDA8o0TA=",
|
||||
"requires": {
|
||||
"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": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.1.0.tgz",
|
||||
|
|
@ -258,9 +258,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"@types/jasminewd2": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.2.tgz",
|
||||
"integrity": "sha1-X2jh5pe/ELxv2Mvy4Aaj1nEsW2Q=",
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.3.tgz",
|
||||
"integrity": "sha512-hYDVmQZT5VA2kigd4H4bv7vl/OhlympwREUemqBdOqtrYTo5Ytm12a5W5/nGgGYdanGVxj0x/VhZ7J3hOg/YKg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/jasmine": "2.5.54"
|
||||
|
|
@ -6202,6 +6202,11 @@
|
|||
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-4.3.1.tgz",
|
||||
"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": {
|
||||
"version": "4.5.6",
|
||||
"resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-4.5.6.tgz",
|
||||
|
|
|
|||
66
package.json
66
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "fuse2",
|
||||
"version": "1.0.1",
|
||||
"license": "MIT",
|
||||
"version": "1.0.2",
|
||||
"license": "",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
|
|
@ -12,41 +12,41 @@
|
|||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.3.5",
|
||||
"@angular/cdk": "^2.0.0-beta.8",
|
||||
"@angular/common": "4.3.5",
|
||||
"@angular/compiler": "4.3.5",
|
||||
"@angular/core": "4.3.5",
|
||||
"@angular/animations": "4.3.6",
|
||||
"@angular/cdk": "2.0.0-beta.10",
|
||||
"@angular/common": "4.3.6",
|
||||
"@angular/compiler": "4.3.6",
|
||||
"@angular/core": "4.3.6",
|
||||
"@angular/flex-layout": "2.0.0-beta.9",
|
||||
"@angular/forms": "4.3.5",
|
||||
"@angular/http": "4.3.5",
|
||||
"@angular/material": "^2.0.0-beta.8",
|
||||
"@angular/platform-browser": "4.3.5",
|
||||
"@angular/platform-browser-dynamic": "4.3.5",
|
||||
"@angular/router": "4.3.5",
|
||||
"@swimlane/ngx-charts": "^6.0.2",
|
||||
"@swimlane/ngx-datatable": "^9.3.1",
|
||||
"@swimlane/ngx-dnd": "^3.0.0",
|
||||
"angular-calendar": "^0.19.0",
|
||||
"angular-in-memory-web-api": "^0.3.2",
|
||||
"classlist.js": "^1.1.20150312",
|
||||
"core-js": "^2.5.0",
|
||||
"d3": "^4.10.0",
|
||||
"hammerjs": "^2.0.8",
|
||||
"highlight.js": "^9.12.0",
|
||||
"intl": "^1.2.5",
|
||||
"md2": "0.0.28",
|
||||
"moment": "^2.18.1",
|
||||
"ngx-color-picker": "^4.3.1",
|
||||
"ngx-perfect-scrollbar": "^4.5.6",
|
||||
"rxjs": "^5.4.3",
|
||||
"web-animations-js": "^2.3.1",
|
||||
"zone.js": "^0.8.17"
|
||||
"@angular/forms": "4.3.6",
|
||||
"@angular/http": "4.3.6",
|
||||
"@angular/material": "2.0.0-beta.10",
|
||||
"@angular/platform-browser": "4.3.6",
|
||||
"@angular/platform-browser-dynamic": "4.3.6",
|
||||
"@angular/router": "4.3.6",
|
||||
"@swimlane/ngx-charts": "6.0.2",
|
||||
"@swimlane/ngx-datatable": "9.3.1",
|
||||
"@swimlane/ngx-dnd": "3.0.0",
|
||||
"angular-calendar": "0.19.0",
|
||||
"angular-in-memory-web-api": "0.3.2",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"core-js": "2.5.0",
|
||||
"d3": "4.10.0",
|
||||
"hammerjs": "2.0.8",
|
||||
"highlight.js": "9.12.0",
|
||||
"intl": "1.2.5",
|
||||
"moment": "2.18.1",
|
||||
"ngx-color-picker": "4.3.1",
|
||||
"ngx-cookie-service": "1.0.7",
|
||||
"ngx-perfect-scrollbar": "4.5.6",
|
||||
"rxjs": "5.4.3",
|
||||
"web-animations-js": "2.3.1",
|
||||
"zone.js": "0.8.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "^1.3.2",
|
||||
"@angular/compiler-cli": "4.3.5",
|
||||
"@angular/language-service": "4.3.5",
|
||||
"@angular/compiler-cli": "4.3.6",
|
||||
"@angular/language-service": "4.3.6",
|
||||
"@ngtools/webpack": "^1.6.2",
|
||||
"@types/jasmine": "^2.5.54",
|
||||
"@types/jasminewd2": "^2.0.2",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ import { UIModule } from './main/content/ui/ui.module';
|
|||
import { ComponentsModule } from './main/content/components/components.module';
|
||||
import { FuseSplashScreenService } from './core/services/splash-screen.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 = [
|
||||
{
|
||||
|
|
@ -75,7 +77,9 @@ const appRoutes: Routes = [
|
|||
|
||||
PagesModule,
|
||||
UIModule,
|
||||
ComponentsModule
|
||||
ServicesModule,
|
||||
ComponentsModule,
|
||||
ComponentsThirdPartyModule
|
||||
],
|
||||
providers : [
|
||||
FuseSplashScreenService,
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Subscription } from 'rxjs/Subscription';
|
|||
import { ObservableMedia } from '@angular/flex-layout';
|
||||
import { FuseMatchMedia } from '../../services/match-media.service';
|
||||
import { FuseConfigService } from '../../services/config.service';
|
||||
import { CookieService } from 'ngx-cookie-service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-shortcuts',
|
||||
|
|
@ -29,7 +30,8 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
|||
private observableMedia: ObservableMedia,
|
||||
private fuseMatchMedia: FuseMatchMedia,
|
||||
private fuseNavigationService: FuseNavigationService,
|
||||
private fuseConfig: FuseConfigService
|
||||
private fuseConfig: FuseConfigService,
|
||||
private cookieService: CookieService
|
||||
)
|
||||
{
|
||||
this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
|
||||
|
|
@ -45,33 +47,42 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
|||
|
||||
ngOnInit()
|
||||
{
|
||||
// User's shortcut items
|
||||
this.shortcutItems = [
|
||||
{
|
||||
'title': 'Calendar',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'today',
|
||||
'url' : '/apps/calendar'
|
||||
},
|
||||
{
|
||||
'title': 'Mail',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'email',
|
||||
'url' : '/apps/mail'
|
||||
},
|
||||
{
|
||||
'title': 'Contacts',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'account_box',
|
||||
'url' : '/apps/contacts'
|
||||
},
|
||||
{
|
||||
'title': 'To-Do',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'check_box',
|
||||
'url' : '/apps/todo'
|
||||
}
|
||||
];
|
||||
const cookieExists = this.cookieService.check('FUSE2.shortcuts');
|
||||
|
||||
if ( cookieExists )
|
||||
{
|
||||
this.shortcutItems = JSON.parse(this.cookieService.get('FUSE2.shortcuts'));
|
||||
}
|
||||
else
|
||||
{
|
||||
// User's shortcut items
|
||||
this.shortcutItems = [
|
||||
{
|
||||
'title': 'Calendar',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'today',
|
||||
'url' : '/apps/calendar'
|
||||
},
|
||||
{
|
||||
'title': 'Mail',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'email',
|
||||
'url' : '/apps/mail'
|
||||
},
|
||||
{
|
||||
'title': 'Contacts',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'account_box',
|
||||
'url' : '/apps/contacts'
|
||||
},
|
||||
{
|
||||
'title': 'To-Do',
|
||||
'type' : 'nav-item',
|
||||
'icon' : 'check_box',
|
||||
'url' : '/apps/todo'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
this.matchMediaSubscription =
|
||||
this.fuseMatchMedia.onMediaChange.subscribe(() => {
|
||||
|
|
@ -115,12 +126,18 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
|||
if ( this.shortcutItems[i].url === itemToToggle.url )
|
||||
{
|
||||
this.shortcutItems.splice(i, 1);
|
||||
|
||||
// Save to the cookies
|
||||
this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.shortcutItems.push(itemToToggle);
|
||||
|
||||
// Save to the cookies
|
||||
this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
|
||||
}
|
||||
|
||||
isInShortcuts(navigationItem)
|
||||
|
|
|
|||
|
|
@ -35,13 +35,17 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
|
|||
{
|
||||
this.isLockedOpen = true;
|
||||
this.mdSidenav.mode = 'side';
|
||||
this.mdSidenav.open();
|
||||
setTimeout(() => {
|
||||
this.mdSidenav.open();
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
this.isLockedOpen = false;
|
||||
this.mdSidenav.mode = 'over';
|
||||
this.mdSidenav.close();
|
||||
setTimeout(() => {
|
||||
this.mdSidenav.close();
|
||||
});
|
||||
}
|
||||
|
||||
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ import {
|
|||
MdTableModule,
|
||||
MdTabsModule
|
||||
} from '@angular/material';
|
||||
import { CdkTableModule } from '@angular/cdk';
|
||||
import { CdkTableModule } from '@angular/cdk/table';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
|
|||
|
|
@ -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 { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
|
||||
import { Md2Module } from 'md2';
|
||||
import { CookieService } from 'ngx-cookie-service';
|
||||
|
||||
@NgModule({
|
||||
declarations : [
|
||||
|
|
@ -68,6 +69,7 @@ import { Md2Module } from 'md2';
|
|||
FuseConfirmDialogComponent
|
||||
],
|
||||
providers : [
|
||||
CookieService,
|
||||
FuseNavigationService,
|
||||
FuseMatchMedia,
|
||||
FuseNavbarService,
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
@import "partials/navigation";
|
||||
@import "partials/forms";
|
||||
@import "partials/toolbar";
|
||||
@import "partials/print";
|
||||
|
||||
// Plugins
|
||||
@import "partials/plugins/plugins";
|
||||
|
|
|
|||
|
|
@ -144,7 +144,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
|
||||
&.md-stop-transition {
|
||||
|
||||
~ .mat-sidenav-content {
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
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;
|
||||
flex: 1;
|
||||
height: auto;
|
||||
|
|
@ -229,7 +231,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
|
||||
&.md-is-locked-open {
|
||||
|
||||
~ .mat-sidenav-content {
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
margin-left: 0 !important;
|
||||
|
||||
.center {
|
||||
|
|
@ -252,7 +255,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
|
||||
&.md-is-locked-open {
|
||||
|
||||
~ .mat-sidenav-content {
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
margin-right: 0 !important;
|
||||
|
||||
.center {
|
||||
|
|
@ -301,7 +305,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
> md-sidenav-container {
|
||||
flex: 1 0 auto;
|
||||
|
||||
> .mat-sidenav-content {
|
||||
> .mat-sidenav-content,
|
||||
> .mat-drawer-content {
|
||||
flex: 1 0 auto;
|
||||
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;
|
||||
height: auto;
|
||||
|
||||
|
|
@ -368,7 +374,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
|
||||
&.md-stop-transition {
|
||||
|
||||
~ .mat-sidenav-content {
|
||||
~ .mat-sidenav-content,
|
||||
~ .mat-drawer-content {
|
||||
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;
|
||||
flex: 1;
|
||||
height: auto;
|
||||
|
|
@ -472,7 +480,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
> md-sidenav-container {
|
||||
flex: 1 0 auto !important;
|
||||
|
||||
> .mat-sidenav-content {
|
||||
> .mat-sidenav-content,
|
||||
> .mat-drawer-content {
|
||||
flex: 1 0 auto;
|
||||
|
||||
> .center {
|
||||
|
|
@ -499,7 +508,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
|
|||
|
||||
> md-sidenav-container {
|
||||
|
||||
> .mat-sidenav-content {
|
||||
> .mat-sidenav-content,
|
||||
> .mat-drawer-content {
|
||||
|
||||
.center {
|
||||
margin: 0 16px;
|
||||
|
|
|
|||
51
src/app/core/scss/partials/_print.scss
Normal file
51
src/app/core/scss/partials/_print.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { NavigationStart, Router } from '@angular/router';
|
||||
import { Platform } from '@angular/cdk';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
|
||||
@Injectable()
|
||||
export class FuseConfigService
|
||||
|
|
@ -12,6 +12,7 @@ export class FuseConfigService
|
|||
|
||||
/**
|
||||
* @param router
|
||||
* @param platform
|
||||
*/
|
||||
constructor(
|
||||
private router: Router,
|
||||
|
|
|
|||
|
|
@ -58,29 +58,23 @@
|
|||
|
||||
<div fxFlex="1 0 auto" fxLayout="row">
|
||||
|
||||
<md-input-container class="mr-24">
|
||||
<input mdInput
|
||||
name="start"
|
||||
formControlName="start"
|
||||
[mdDatepicker]="startDatePicker"
|
||||
placeholder="Start Date">
|
||||
<button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
|
||||
</md-input-container>
|
||||
<md-form-field class="mr-24">
|
||||
<input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
|
||||
<md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
|
||||
<md-datepicker #startDatePicker></md-datepicker>
|
||||
</md-form-field>
|
||||
|
||||
<md-datepicker #startDatePicker></md-datepicker>
|
||||
|
||||
</div>
|
||||
|
||||
<div fxFlex="1 0 auto" fxLayout="row">
|
||||
|
||||
<md-input-container class="mr-24">
|
||||
<input mdInput
|
||||
name="end"
|
||||
formControlName="end"
|
||||
[mdDatepicker]="endDatePicker"
|
||||
placeholder="End Date">
|
||||
<button mdSuffix [mdDatepickerToggle]="endDatePicker"></button>
|
||||
</md-input-container>
|
||||
<md-datepicker #endDatePicker></md-datepicker>
|
||||
<md-form-field class="mr-24">
|
||||
<input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
|
||||
<md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
|
||||
<md-datepicker #endDatePicker></md-datepicker>
|
||||
</md-form-field>
|
||||
|
||||
<md-input-container class="no-errors-spacer" flex md-no-float>
|
||||
<input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
width: 100%;
|
||||
background: transparent;
|
||||
|
||||
.mat-sidenav-content {
|
||||
> .mat-sidenav-content,
|
||||
> .mat-drawer-content {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
min-height: 100%;
|
||||
|
|
|
|||
|
|
@ -69,14 +69,11 @@
|
|||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
<md-input-container fxFlex class="mr-24">
|
||||
<button mdSuffix [mdDatepickerToggle]="birthdayDatePicker"></button>
|
||||
<input mdInput
|
||||
name="birthday" formControlName="birthday"
|
||||
[mdDatepicker]="birthdayDatePicker"
|
||||
placeholder="Birthday">
|
||||
</md-input-container>
|
||||
<md-datepicker #birthdayDatePicker></md-datepicker>
|
||||
<md-form-field class="mr-24" fxFlex>
|
||||
<input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday">
|
||||
<md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle>
|
||||
<md-datepicker #birthdayDatePicker></md-datepicker>
|
||||
</md-form-field>
|
||||
</div>
|
||||
|
||||
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
|
||||
import { ContactsService } from '../contacts.service';
|
||||
import { DataSource } from '@angular/cdk';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
|
||||
import { MdDialog, MdDialogRef } from '@angular/material';
|
||||
import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-contacts-contact-list',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { ProjectsDashboardService } from './projects.service';
|
|||
import * as shape from 'd3-shape';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { DataSource } from '@angular/cdk';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-project',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { FileManagerService } from '../file-manager.service';
|
||||
import { DataSource } from '@angular/cdk';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-file-list',
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mat-sidenav-content {
|
||||
> .mat-sidenav-content,
|
||||
> .mat-drawer-content {
|
||||
z-index: 1;
|
||||
|
||||
.center {
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
min-height: 160px;
|
||||
max-height: 160px;
|
||||
|
||||
@include media-breakpoint-down('sm'){
|
||||
@include media-breakpoint-down('sm') {
|
||||
height: 120px;
|
||||
min-height: 120px;
|
||||
max-height: 120px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<p>
|
||||
board-color-selector works!
|
||||
</p>
|
||||
|
|
@ -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() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -70,25 +70,18 @@
|
|||
|
||||
<div fxFlexFill fxLayout="row">
|
||||
|
||||
<md-input-container fxFlex class="mr-16">
|
||||
<input mdInput
|
||||
name="start"
|
||||
formControlName="startDate"
|
||||
[mdDatepicker]="startDatePicker"
|
||||
placeholder="Start Date">
|
||||
<button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
|
||||
</md-input-container>
|
||||
<md-datepicker #startDatePicker></md-datepicker>
|
||||
<md-form-field class="mr-24" fxFlex>
|
||||
<input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
|
||||
<md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
|
||||
<md-datepicker #startDatePicker></md-datepicker>
|
||||
</md-form-field>
|
||||
|
||||
<md-form-field fxFlex>
|
||||
<input mdInput [mdDatepicker]="dueDatePicker" placeholder="Due Date">
|
||||
<md-datepicker-toggle mdSuffix [for]="dueDatePicker"></md-datepicker-toggle>
|
||||
<md-datepicker #dueDatePicker></md-datepicker>
|
||||
</md-form-field>
|
||||
|
||||
<md-input-container fxFlex>
|
||||
<input mdInput
|
||||
name="dueDate"
|
||||
formControlName="dueDate"
|
||||
[mdDatepicker]="dueDatePicker"
|
||||
placeholder="Due Date">
|
||||
<button mdSuffix [mdDatepickerToggle]="dueDatePicker"></button>
|
||||
</md-input-container>
|
||||
<md-datepicker #dueDatePicker></md-datepicker>
|
||||
</div>
|
||||
|
||||
<md-input-container class="" fxFill>
|
||||
|
|
|
|||
24
src/app/main/content/components-third-party/components-third-party.module.ts
vendored
Normal file
24
src/app/main/content/components-third-party/components-third-party.module.ts
vendored
Normal 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
|
||||
{
|
||||
}
|
||||
|
|
@ -1,28 +1,66 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { SharedModule } from '../../../core/modules/shared.module';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.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 = [
|
||||
{
|
||||
path : 'components/datatables/ngx-datatable',
|
||||
component: FuseNgxDatatableComponent
|
||||
path : 'components/countdown',
|
||||
component: FuseCountdownDocsComponent
|
||||
},
|
||||
{
|
||||
path : 'components/highlightjs',
|
||||
component: FuseHljsDocsComponent
|
||||
},
|
||||
{
|
||||
path : 'components/material-color-picker',
|
||||
component: FuseMaterialColorPickerDocsComponent
|
||||
},
|
||||
{
|
||||
path : 'components/navigation',
|
||||
component: FuseNavigationDocsComponent
|
||||
},
|
||||
{
|
||||
path : 'components/price-tables',
|
||||
component: FusePriceTablesComponent
|
||||
},
|
||||
{
|
||||
path : 'components/search-bar',
|
||||
component: FuseSearchBarDocsComponent
|
||||
},
|
||||
{
|
||||
path : 'components/shortcuts',
|
||||
component: FuseShortcutsDocsComponent
|
||||
},
|
||||
{
|
||||
path : 'components/widget',
|
||||
component: FuseWidgetDocsComponent
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
SharedModule,
|
||||
RouterModule.forChild(routes)
|
||||
RouterModule.forChild(routes),
|
||||
FuseWidgetModule
|
||||
],
|
||||
declarations: [
|
||||
FuseNgxDatatableComponent,
|
||||
FusePriceTablesComponent
|
||||
FuseCountdownDocsComponent,
|
||||
FuseHljsDocsComponent,
|
||||
FuseMaterialColorPickerDocsComponent,
|
||||
FuseNavigationDocsComponent,
|
||||
FusePriceTablesComponent,
|
||||
FuseSearchBarDocsComponent,
|
||||
FuseShortcutsDocsComponent,
|
||||
FuseWidgetDocsComponent
|
||||
]
|
||||
})
|
||||
export class ComponentsModule
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
|
|
@ -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
66
src/app/main/content/components/hljs/hljs.component.html
Normal 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">
|
||||
<fuse-hljs lang="html" class="source-code">
|
||||
<textarea #source hidden="hidden">
|
||||
<div class="title">
|
||||
<span>Example Title</span>
|
||||
</div>
|
||||
</textarea>
|
||||
</fuse-hljs>
|
||||
</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
3
src/app/main/content/components/hljs/hljs.component.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
14
src/app/main/content/components/hljs/hljs.component.ts
Normal file
14
src/app/main/content/components/hljs/hljs.component.ts
Normal 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()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
|
|
@ -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()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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><fuse-navigation></fuse-navigation></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>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
|
|
@ -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()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<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">Tables</span>
|
||||
<span class="secondary-text">Components</span>
|
||||
</div>
|
||||
<div class="h2 mt-16">Price Tables</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
|
|
@ -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()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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><fuse-shortcuts></fuse-shortcuts></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>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
|
|
@ -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
108
src/app/main/content/components/widget/widget.component.html
Normal 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>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
14
src/app/main/content/components/widget/widget.component.ts
Normal file
14
src/app/main/content/components/widget/widget.component.ts
Normal 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()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { SearchService } from '../../search.service';
|
||||
import { DataSource } from '@angular/cdk';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-search-table',
|
||||
|
|
|
|||
70
src/app/main/content/services/config/config.component.html
Normal file
70
src/app/main/content/services/config/config.component.html
Normal 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>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
14
src/app/main/content/services/config/config.component.ts
Normal file
14
src/app/main/content/services/config/config.component.ts
Normal 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
30
src/app/main/content/services/services.module.ts
Normal 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
|
||||
{
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
:host {
|
||||
|
||||
}
|
||||
|
|
@ -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()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -23,7 +23,8 @@ fuse-main {
|
|||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
> .mat-sidenav-content {
|
||||
> .mat-sidenav-content,
|
||||
> .mat-drawer-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -310,10 +310,78 @@ export class FuseNavigation
|
|||
'icon' : 'color_lens',
|
||||
'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',
|
||||
'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',
|
||||
'type' : 'nav-collapse',
|
||||
|
|
@ -322,16 +390,10 @@ export class FuseNavigation
|
|||
{
|
||||
'title': 'ngx-datatable',
|
||||
'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'
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user