mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Merge branch 'master' of https://github.com/withinpixels/fuse2
This commit is contained in:
mustafahlvc
commit
49af06cdbd
43
package-lock.json
generated
43
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,7 +73,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();
|
||||
|
|
@ -44,6 +46,14 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
|||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
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 = [
|
||||
|
|
@ -72,6 +82,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
|||
'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)
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
@import "partials/navigation";
|
||||
@import "partials/forms";
|
||||
@import "partials/toolbar";
|
||||
@import "partials/print";
|
||||
|
||||
// Plugins
|
||||
@import "partials/plugins/plugins";
|
||||
|
|
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ export class FuseConfigService
|
|||
|
||||
/**
|
||||
* @param router
|
||||
* @param platform
|
||||
*/
|
||||
constructor(
|
||||
private router: Router,
|
||||
|
|
|
|||
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()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
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()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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'
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user