diff --git a/package-lock.json b/package-lock.json index a4ba78d7..9236e029 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1183,7 +1183,6 @@ "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=", "dev": true, - "optional": true, "requires": { "align-text": "0.1.4", "lazy-cache": "1.0.4" @@ -1193,8 +1192,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", - "dev": true, - "optional": true + "dev": true } } }, @@ -6197,6 +6195,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", @@ -7939,7 +7942,6 @@ "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=", "dev": true, - "optional": true, "requires": { "align-text": "0.1.4" } @@ -9191,28 +9193,48 @@ "camelcase": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", - "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=" + "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", + "dev": true }, "cliui": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", - "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=" + "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", + "dev": true, + "requires": { + "center-align": "0.1.3", + "right-align": "0.1.3", + "wordwrap": "0.0.2" + } }, "uglify-js": { "version": "2.8.29", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=", - "dev": true + "dev": true, + "requires": { + "source-map": "0.5.6", + "uglify-to-browserify": "1.0.2", + "yargs": "3.10.0" + } }, "wordwrap": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", - "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=" + "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=", + "dev": true }, "yargs": { "version": "3.10.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", - "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=" + "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=", + "dev": true, + "requires": { + "camelcase": "1.2.1", + "cliui": "2.1.0", + "decamelize": "1.2.0", + "window-size": "0.1.0" + } } } }, @@ -9925,8 +9947,7 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=", - "dev": true, - "optional": true + "dev": true }, "wordwrap": { "version": "0.0.3", diff --git a/package.json b/package.json index 5a93b00e..fa2258f0 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a7621b15..4550dd78 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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 = [ { @@ -71,9 +73,11 @@ const appRoutes: Routes = [ PagesModule, UIModule, - ComponentsModule + ServicesModule, + ComponentsModule, + ComponentsThirdPartyModule ], - providers: [ + providers : [ FuseSplashScreenService, FuseConfigService ], diff --git a/src/app/core/components/countdown/countdown.component.scss b/src/app/core/components/countdown/countdown.component.scss index b09ceb86..96c1e072 100644 --- a/src/app/core/components/countdown/countdown.component.scss +++ b/src/app/core/components/countdown/countdown.component.scss @@ -9,6 +9,7 @@ flex-direction: row; align-items: center; justify-content: center; + text-align: center; .time { display: flex; diff --git a/src/app/core/components/shortcuts/shortcuts.component.ts b/src/app/core/components/shortcuts/shortcuts.component.ts index e44c49ff..fd6f9652 100644 --- a/src/app/core/components/shortcuts/shortcuts.component.ts +++ b/src/app/core/components/shortcuts/shortcuts.component.ts @@ -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) diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index f9c6acea..da733728 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -20,6 +20,7 @@ import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-s 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 { CookieService } from 'ngx-cookie-service'; @NgModule({ declarations : [ @@ -65,6 +66,7 @@ import { FuseMaterialColorPickerComponent } from '../components/material-color-p FuseConfirmDialogComponent ], providers : [ + CookieService, FuseNavigationService, FuseMatchMedia, FuseNavbarService, diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts index 795b31dd..7c49fa93 100644 --- a/src/app/core/services/config.service.ts +++ b/src/app/core/services/config.service.ts @@ -12,6 +12,7 @@ export class FuseConfigService /** * @param router + * @param platform */ constructor( private router: Router, diff --git a/src/app/main/content/components-third-party/components-third-party.module.ts b/src/app/main/content/components-third-party/components-third-party.module.ts new file mode 100644 index 00000000..38e20c37 --- /dev/null +++ b/src/app/main/content/components-third-party/components-third-party.module.ts @@ -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 +{ +} diff --git a/src/app/main/content/components/datatable/ngx-datatable.component.html b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html similarity index 100% rename from src/app/main/content/components/datatable/ngx-datatable.component.html rename to src/app/main/content/components-third-party/datatable/ngx-datatable.component.html diff --git a/src/app/main/content/components/datatable/ngx-datatable.component.scss b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.scss similarity index 100% rename from src/app/main/content/components/datatable/ngx-datatable.component.scss rename to src/app/main/content/components-third-party/datatable/ngx-datatable.component.scss diff --git a/src/app/main/content/components/datatable/ngx-datatable.component.ts b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts similarity index 100% rename from src/app/main/content/components/datatable/ngx-datatable.component.ts rename to src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts index 49d9026b..6b1160fb 100644 --- a/src/app/main/content/components/components.module.ts +++ b/src/app/main/content/components/components.module.ts @@ -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 diff --git a/src/app/main/content/components/countdown/countdown.component.html b/src/app/main/content/components/countdown/countdown.component.html new file mode 100644 index 00000000..e5bbe156 --- /dev/null +++ b/src/app/main/content/components/countdown/countdown.component.html @@ -0,0 +1,55 @@ +
+ + +
+
+
+ home + chevron_right + Components +
+
Countdown
+
+
+ + + +
+ +

+ fuse-countdown is a custom built Fuse component allows you to create a countdowns. +

+ +
+

Sample

+

+ +

+
+ +
+

Usage

+

+ + + +

+
+ +
+

Inputs

+

+ eventDate + + The date of the event. Since fuse-countdown uses moment.js to parse the dates, any moment.js + compatible date string can be used. + +

+
+ +
+ +
+ diff --git a/src/app/main/content/components/countdown/countdown.component.scss b/src/app/main/content/components/countdown/countdown.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/components/countdown/countdown.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/components/countdown/countdown.component.ts b/src/app/main/content/components/countdown/countdown.component.ts new file mode 100644 index 00000000..94378858 --- /dev/null +++ b/src/app/main/content/components/countdown/countdown.component.ts @@ -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() + { + + } +} diff --git a/src/app/main/content/components/hljs/hljs.component.html b/src/app/main/content/components/hljs/hljs.component.html new file mode 100644 index 00000000..86c42a92 --- /dev/null +++ b/src/app/main/content/components/hljs/hljs.component.html @@ -0,0 +1,66 @@ +
+ + +
+
+
+ home + chevron_right + Components +
+
highlight.js
+
+
+ + + +
+ +

+ fuse-hljs is a custom built Fuse component allows to show syntax highlighted codes. +

+ +
+

Sample

+

+ + + +

+
+ +
+

Usage

+

+ + + +

+
+ +
+

Inputs

+

+ lang + + Language of the code to be highlighted. All highlight.js languages can be used. + +

+
+ +
+ +
+ diff --git a/src/app/main/content/components/hljs/hljs.component.scss b/src/app/main/content/components/hljs/hljs.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/components/hljs/hljs.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/components/hljs/hljs.component.ts b/src/app/main/content/components/hljs/hljs.component.ts new file mode 100644 index 00000000..142ab034 --- /dev/null +++ b/src/app/main/content/components/hljs/hljs.component.ts @@ -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() + { + + } +} diff --git a/src/app/main/content/components/material-color-picker/material-color-picker.component.html b/src/app/main/content/components/material-color-picker/material-color-picker.component.html new file mode 100644 index 00000000..e88a8fa4 --- /dev/null +++ b/src/app/main/content/components/material-color-picker/material-color-picker.component.html @@ -0,0 +1,75 @@ +
+ + +
+
+
+ home + chevron_right + Components +
+
Material Color Picker
+
+
+ + + +
+ +

+ fuse-material-color-picker is a custom built Fuse component allows you to add a color picker + that allows to choose one of the many Material spec. colors. +

+ +
+

Sample

+

+ +

+
+ +
+

Usage

+

+ + + +

+
+ +
+

Two-way bindings

+

+ selectedClass + + The name of the Fuse color class to select, e.g. md-red-500-bg + +

+

+ selectedBg + + 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. + +

+
+ +
+

Outputs

+

+ onValueChange + + Event that triggered when a color selected. Returns an object that holds palette, hue, class name, + background and foreground colors. + +

+
+ +
+ +
+ diff --git a/src/app/main/content/components/material-color-picker/material-color-picker.component.scss b/src/app/main/content/components/material-color-picker/material-color-picker.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/components/material-color-picker/material-color-picker.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/components/material-color-picker/material-color-picker.component.ts b/src/app/main/content/components/material-color-picker/material-color-picker.component.ts new file mode 100644 index 00000000..cdfdfe5a --- /dev/null +++ b/src/app/main/content/components/material-color-picker/material-color-picker.component.ts @@ -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() + { + + } +} diff --git a/src/app/main/content/components/navigation/navigation.component.html b/src/app/main/content/components/navigation/navigation.component.html new file mode 100644 index 00000000..5db515ee --- /dev/null +++ b/src/app/main/content/components/navigation/navigation.component.html @@ -0,0 +1,107 @@ +
+ + +
+
+
+ home + chevron_right + Components +
+
Navigation
+
+
+ + + +
+ +

+ fuse-navigation is a custom built Fuse component allows you to create a multi-level collapsable + navigation. +

+ + + +
+

Usage

+

+ + + +

+
+ +
+

Model

+

+ <fuse-navigation></fuse-navigation> uses a service and a model file to populate + the entire navigation. It supports three different navigation items; Subheader, + Collapsable and Item. These items can be mixed and matched to create unique and complex + navigation layouts. +

+
+ +
+

Header

+

+ + + +

+
+ +
+

Collapsable

+

+ + + +

+
+ +
+

Item

+

+ + + +

+
+ +
+ +
+ diff --git a/src/app/main/content/components/navigation/navigation.component.scss b/src/app/main/content/components/navigation/navigation.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/components/navigation/navigation.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/components/navigation/navigation.component.ts b/src/app/main/content/components/navigation/navigation.component.ts new file mode 100644 index 00000000..d84d70d5 --- /dev/null +++ b/src/app/main/content/components/navigation/navigation.component.ts @@ -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() + { + + } +} diff --git a/src/app/main/content/components/price-tables/price-tables.component.html b/src/app/main/content/components/price-tables/price-tables.component.html index e636ab8a..81d2b20a 100644 --- a/src/app/main/content/components/price-tables/price-tables.component.html +++ b/src/app/main/content/components/price-tables/price-tables.component.html @@ -6,7 +6,7 @@
home chevron_right - Tables + Components
Price Tables
diff --git a/src/app/main/content/components/search-bar/search-bar.component.html b/src/app/main/content/components/search-bar/search-bar.component.html new file mode 100644 index 00000000..ac112ac1 --- /dev/null +++ b/src/app/main/content/components/search-bar/search-bar.component.html @@ -0,0 +1,47 @@ +
+ + +
+
+
+ home + chevron_right + Components +
+
Search Bar
+
+
+ + + +
+ +

+ fuse-search-bar is a custom built Fuse component allows you to have a search bar that activates + on click. +

+ +
+

Usage

+

+ + + +

+
+ +
+

Outputs

+

+ onInput + 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. +

+
+ +
+ +
+ diff --git a/src/app/main/content/components/search-bar/search-bar.component.scss b/src/app/main/content/components/search-bar/search-bar.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/components/search-bar/search-bar.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/components/search-bar/search-bar.component.ts b/src/app/main/content/components/search-bar/search-bar.component.ts new file mode 100644 index 00000000..f9856b2e --- /dev/null +++ b/src/app/main/content/components/search-bar/search-bar.component.ts @@ -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() + { + + } +} diff --git a/src/app/main/content/components/shortcuts/shortcuts.component.html b/src/app/main/content/components/shortcuts/shortcuts.component.html new file mode 100644 index 00000000..4726c795 --- /dev/null +++ b/src/app/main/content/components/shortcuts/shortcuts.component.html @@ -0,0 +1,47 @@ +
+ + +
+
+
+ home + chevron_right + Components +
+
Shortcuts
+
+
+ + + +
+ +

+ fuse-shortcuts is a custom built Fuse component allows you to create and save shortcuts from + the navigation model. +

+ +
+

Usage

+

+ + + +

+
+ +
+

Model

+

+ <fuse-shortcuts></fuse-shortcuts> 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. +

+
+ +
+ +
+ diff --git a/src/app/main/content/components/shortcuts/shortcuts.component.scss b/src/app/main/content/components/shortcuts/shortcuts.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/components/shortcuts/shortcuts.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/components/shortcuts/shortcuts.component.ts b/src/app/main/content/components/shortcuts/shortcuts.component.ts new file mode 100644 index 00000000..69cc9890 --- /dev/null +++ b/src/app/main/content/components/shortcuts/shortcuts.component.ts @@ -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() + { + + } +} diff --git a/src/app/main/content/components/widget/widget.component.html b/src/app/main/content/components/widget/widget.component.html new file mode 100644 index 00000000..d00b16a6 --- /dev/null +++ b/src/app/main/content/components/widget/widget.component.html @@ -0,0 +1,108 @@ +
+ + +
+
+
+ home + chevron_right + Components +
+
Widget
+
+
+ + + +
+ +

+ fuse-widget is a custom built Fuse component allows to create flippable widget boxes. +

+ +
+

Sample

+ +
+ + + +
+
+
Widget title
+ + +
+ +
+ Widget Content +
+
+ + + +
+ + +
+ More widget info +
+
+ + + +
+
+ + +
+

Usage

+

+ + + +

+
+ +
+ +
+ diff --git a/src/app/main/content/components/widget/widget.component.scss b/src/app/main/content/components/widget/widget.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/components/widget/widget.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/components/widget/widget.component.ts b/src/app/main/content/components/widget/widget.component.ts new file mode 100644 index 00000000..3fbb3bd2 --- /dev/null +++ b/src/app/main/content/components/widget/widget.component.ts @@ -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() + { + + } +} diff --git a/src/app/main/content/services/config/config.component.html b/src/app/main/content/services/config/config.component.html new file mode 100644 index 00000000..7614f403 --- /dev/null +++ b/src/app/main/content/services/config/config.component.html @@ -0,0 +1,70 @@ +
+ + +
+
+
+ home + chevron_right + Services +
+
Config
+
+
+ + + +
+ +

+ Config 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.) on component basis. +

+ +
+

Usage

+

+ + + +

+
+ +
+ +
+ diff --git a/src/app/main/content/services/config/config.component.scss b/src/app/main/content/services/config/config.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/services/config/config.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/services/config/config.component.ts b/src/app/main/content/services/config/config.component.ts new file mode 100644 index 00000000..8eea59a5 --- /dev/null +++ b/src/app/main/content/services/config/config.component.ts @@ -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() + { + + } +} diff --git a/src/app/main/content/services/services.module.ts b/src/app/main/content/services/services.module.ts new file mode 100644 index 00000000..4d52ac3a --- /dev/null +++ b/src/app/main/content/services/services.module.ts @@ -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 +{ +} diff --git a/src/app/main/content/services/splash-screen/splash-screen.component.html b/src/app/main/content/services/splash-screen/splash-screen.component.html new file mode 100644 index 00000000..2004cc1f --- /dev/null +++ b/src/app/main/content/services/splash-screen/splash-screen.component.html @@ -0,0 +1,47 @@ +
+ + +
+
+
+ home + chevron_right + Services +
+
Splash Screen
+
+
+ + + +
+ +

+ Splash screen 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. +

+ +
+

Usage

+

+ + + +

+
+ +
+ +
+ diff --git a/src/app/main/content/services/splash-screen/splash-screen.component.scss b/src/app/main/content/services/splash-screen/splash-screen.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/services/splash-screen/splash-screen.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/services/splash-screen/splash-screen.component.ts b/src/app/main/content/services/splash-screen/splash-screen.component.ts new file mode 100644 index 00000000..d28b2d01 --- /dev/null +++ b/src/app/main/content/services/splash-screen/splash-screen.component.ts @@ -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() + { + + } +} diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts index 5aa081be..51ff9521 100644 --- a/src/app/navigation.model.ts +++ b/src/app/navigation.model.ts @@ -304,10 +304,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', @@ -316,16 +384,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' - } ]; } }