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

Added docs styles

Browse Source 
Improved the documentation and moved it into the Demo app
This commit is contained in:
Sercan Yemen 2018-06-15 13:23:12 +03:00
parent 95759be710
commit 5459579d04
61 changed files with 2217 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/@fuse/scss/core.scss
View File

@ -30,6 +30,7 @@
@import "partials/material";
@import "partials/angular-material-fix";
@import "partials/typography";
@import "partials/docs";
@import "partials/page-layouts";
@import "partials/cards";
@import "partials/navigation";

42
src/@fuse/scss/partials/_docs.scss Normal file
View File

@ -0,0 +1,42 @@
.docs {
font-size: 16px;
> .content {
max-width: 980px;
> .main-title {
&:first-child {
margin-top: 0;
}
}
}
.main-title {
display: flex;
margin-top: 72px;
font-size: 24px;
}
.section-title {
display: inline-flex;
font-size: 18px;
margin-top: 24px;
border-bottom: 1px solid #F44336;
color: #F44336;
}
ol,
ul {
padding-left: 24px;
li {
margin-bottom: 12px;
line-height: 1.7;
}
}
p {
line-height: 1.7;
}
}

6
src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html vendored
View File

@ -1,4 +1,4 @@
<div id="ngx-datatable" class="page-layout simple fullwidth">
<div id="ngx-datatable" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
@ -7,7 +7,9 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Tables</span>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Datatables</span>
</div>
<div class="h2 mt-16">ngx-datatable</div>
</div>

18
src/app/main/documentation/components-third-party/google-maps/google-maps.component.html vendored
View File

@ -1,4 +1,4 @@
<div id="countdown" class="page-layout simple fullwidth">
<div id="countdown" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
@ -7,7 +7,9 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Google Maps</span>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">3rd Party Components</span>
</div>
<div class="h2 mt-16">Google Maps</div>
</div>
@ -27,17 +29,14 @@
<code>agm-map</code> is a angular component library for Google Maps.
</p>
<div class="my-48">
<h2>Sample</h2>
<div class="sectiont-title">Sample</div>
<p fxLayout="row" fxLayoutAlign="start start">
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</p>
</div>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="mat-grey-200-bg py-8">
<fuse-highlight lang="html">
<textarea #source>
@ -47,13 +46,10 @@
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Inputs</h2>
<div class="sectiont-title">Inputs</div>
Checkout the component api docs for detail:
<a href="https://angular-maps.com/api-docs/agm-core/components/AgmMap.html" target="_blank">AgmMap Api</a>
</div>
</div>

16
src/app/main/documentation/components/countdown/countdown.component.html
View File

@ -1,4 +1,4 @@
<div id="countdown" class="page-layout simple fullwidth">
<div id="countdown" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Countdown</div>
@ -20,15 +22,12 @@
<code>fuse-countdown</code> is a custom built Fuse component allows you to create a countdowns.
</p>
<div class="my-48">
<h2>Sample</h2>
<div class="section-title">Sample</div>
<p fxLayout="row" fxLayoutAlign="start start">
<fuse-countdown eventDate="2019-07-28"></fuse-countdown>
</p>
</div>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
@ -36,10 +35,8 @@
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Inputs</h2>
<div class="section-title">Inputs</div>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">eventDate</code>
<span>
@ -47,7 +44,6 @@
compatible date string can be used.
</span>
</p>
</div>
</div>

16
src/app/main/documentation/components/highlight/highlight.component.html
View File

@ -1,4 +1,4 @@
<div id="highlight" class="page-layout simple fullwidth">
<div id="highlight" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Highlight</div>
@ -20,8 +22,7 @@
<code>fuse-highlight</code> is a custom built Fuse component allows to show syntax highlighted codes.
</p>
<div class="my-48">
<h2>Sample</h2>
<div class="section-title">Sample</div>
<p fxLayout="row" fxLayoutAlign="start start">
<fuse-highlight lang="html">
@ -35,10 +36,8 @@
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="mat-grey-200-bg py-8">
<fuse-highlight lang="html">
<textarea #source>
@ -54,17 +53,14 @@
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Inputs</h2>
<div class="section-title">Inputs</div>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">lang</code>
<span>
Language of the code to be highlighted.
</span>
</p>
</div>
</div>

20
src/app/main/documentation/components/material-color-picker/material-color-picker.component.html
View File

@ -1,4 +1,4 @@
<div id="material-color-picker" class="page-layout simple fullwidth">
<div id="material-color-picker" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Material Color Picker</div>
@ -21,15 +23,12 @@
that allows to choose one of the many Material spec. colors.
</p>
<div class="my-48">
<h2>Sample</h2>
<div class="section-title">Sample</div>
<p fxLayout="row" fxLayoutAlign="start start">
<fuse-material-color-picker></fuse-material-color-picker>
</p>
</div>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
@ -39,10 +38,8 @@
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Two-way bindings</h2>
<div class="section-title">Two-way bindings</div>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">selectedClass</code>
<span>
@ -56,10 +53,8 @@
matches one of the material colors.
</span>
</p>
</div>
<div class="my-48">
<h2>Outputs</h2>
<div class="section-title">Outputs</div>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">onValueChange</code>
<span>
@ -67,7 +62,6 @@
background and foreground colors.
</span>
</p>
</div>
</div>

138
src/app/main/documentation/components/multi-language/multi-language.component.html
View File

@ -1,138 +0,0 @@
<div id="multi-language" class="page-layout simple fullwidth">
<!-- HEADER -->
<div class="header mat-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">
<mat-icon class="secondary-text s-16">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Multi Language</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
Fuse uses <a class="link" href="https://github.com/ngx-translate/core" target="_blank">ngx-translate</a>
module and supports multiple languages and translations.
</p>
<p class="warning-box">
Since not everybody need multi-language setup for their apps, we decided NOT to put translations everywhere.
If you want to see the translations in action, visit <a class="link" [routerLink]="'/apps/mail'">
Mail</a> app and then change the language from the <b>Toolbar.</b>
<br><br>
Mail app is the only app that has translations for demonstration purposes. You can look at its source code
to see the usage.
</p>
<div class="my-48">
<h2>Usage</h2>
<p>In order to use the translations, create your translation file within the module you want to use
the translations. For example, for the Mail app, create <code>i18n/en.ts</code> file inside the
<code>apps/mail</code> folder.
</p>
<p>
The structure of the translation file is important and it must define the language id along with the
translation data:
</p>
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
// i18n/en.ts
export const locale = {
lang: 'en',
data: {
'MAIL': {
'COMPOSE': 'COMPOSE'
}
}
};
// i18n/tr.ts
export const locale = {
lang: 'tr',
data: {
'MAIL': {
'COMPOSE': 'YENİ E-POSTA'
}
}
};
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<p>
After you create your translation files, open the <code>*.component.ts</code> file for the module you
want to have translations, and register your translation file. For this example, we will use the
<code>mail.component.ts</code> file:
</p>
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
// Your imports
import { ... } from '..';
// Import the locale files
import { locale as english } from './i18n/en';
import { locale as turkish } from './i18n/tr';
@Component({
selector : 'mail',
templateUrl: './mail.component.html',
styleUrls : ['./mail.component.scss']
})
export class MailComponent
{
constructor(private translationLoader: FuseTranslationLoaderService)
{
this.translationLoader.loadTranslations(english, turkish);
}
...
}
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Changing the language</h2>
<p class="py-8">
Changing the current language can happen instantly. Simply call the <code>use</code> method from the
translate service:
</p>
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
import { TranslateService } from '@ngx-translate/core';
constructor(private translate: TranslateService) {}
setLanguage()
{
// Use the selected language for translations
this.translate.use('tr');
}
</textarea>
</fuse-highlight>
</p>
<p>
More detailed usage of the translation service can be found in the <code>toolbar.component.ts</code>
file.
</p>
</div>
</div>
</div>

13
src/app/main/documentation/components/multi-language/multi-language.component.scss
View File

@ -1,13 +0,0 @@
:host {
.content{
max-width: 1100px;
.warning-box{
background: #FFFDE7;
border: 1px solid #FFC107;
padding: 16px;
}
}
}

250
src/app/main/documentation/components/navigation/navigation.component.html
View File

@ -1,4 +1,4 @@
<div id="navigation" class="page-layout simple fullwidth">
<div id="navigation" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Navigation</div>
@ -21,8 +23,7 @@
navigation. It has built-in support for translations using <b>ngx-translate</b> module.
</p>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
@ -30,7 +31,6 @@
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>[navigation]</h2>
@ -55,49 +55,78 @@
</p>
</div>
<div class="my-48">
<h2>Updating the navigation</h2>
<div class="section-title">Alternative usage (preferred)</div>
<p class="py-8">
Direct modifications on the navigation data will be reflected to the component. So you can modify the
json data, or even create it from scratch using your backend and the changes will reflected to the
component immediately.
An alternative usage to the above one is to using the <b>Navigation Service</b>. Simply, you get your
navigation array, register that as a navigation using the service and then set it as the current
navigation. This allows for easier updating and swapping of the navigation:
</p>
</div>
<div class="my-48">
<h3>Grouping</h3>
<p class="py-8">
<fuse-highlight lang="ts">
<textarea #source>
// Get your navigation array from database or file
this.navigation = [...]
// Register the navigation to the service
this._fuseNavigationService.register('main', this.navigation);
// Set the main navigation as our current navigation
this._fuseNavigationService.setCurrentNavigation('main');
</textarea>
</fuse-highlight>
</p>
<p class="py-8">
Once you register your navigation like this, you no longer need to provide the <b>[navigation]</b> input
while using the <code>fuse-navigation</code>:
</p>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<fuse-navigation [layout]="'vertical'"></fuse-navigation>
</textarea>
</fuse-highlight>
</p>
<div class="main-title">Navigation item types</div>
<div class="section-title">Grouping</div>
<p class="py-8">
<fuse-highlight lang="json">
<textarea #source>
{
'id' : 'components',
'title' : 'COMPONENTS',
'translate': 'NAV.COMPONENTS',
'type' : 'group',
'children' : [
{
'id' : 'ngx-datatable',
'title': 'ngx-datatable',
'type' : 'item',
'url' : '/components/datatables/ngx-datatable'
}
]
},
}
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h3>Collapsable</h3>
<div class="section-title">Collapsable</div>
<p class="py-8">
<fuse-highlight lang="json">
<textarea #source>
{
'id' : 'datatables',
'title' : 'Datatables',
'translate': 'NAV.DATATABLES',
'type' : 'collapse',
'type' : 'collapsable',
'icon' : 'border_all',
'children' : [
{
'id' : 'ngx-datatable',
'title': 'ngx-datatable',
'type' : 'item',
'url' : '/components/datatables/ngx-datatable'
@ -107,14 +136,13 @@
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h3>Item</h3>
<div class="section-title">Item</div>
<p class="py-8">
<fuse-highlight lang="json">
<textarea #source>
{
'id' : 'countdown',
'title' : 'Countdown',
'translate': 'NAV.COUNTDOWN',
'type' : 'item',
@ -124,40 +152,43 @@
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Vertical Navigation Default Folded Status</h2>
<div class="main-title">Vertical Navigation Default Folded Status</div>
<p>
It's possible to change the default folded status of the navigation.
</p>
<p>
Edit the <code>main.component.html</code> file and look for the <code>[folded]</code> attribute on
<code>fuse-sidebar</code> components.
Find the layout that you want to edit from <b>app/layout/vertical/</b> directory. Edit the layout's html
file and look for the <code>[folded]</code> attribute on <code>fuse-sidebar</code> components.
</p>
<p>
Assigning <code>true</code> to that attribute will make the vertical navigation folded by default.
</p>
<div class="main-title">Updating the navigation</div>
<p class="message-box warning">
In order to make the runtime modifications easier, it's strongly recommended that to give a unique id
to all of your navigation items.
</p>
<div class="section-title">Show / Hide certain navigation items</div>
<div class="my-24">
<button mat-button mat-raised-button color="accent" (click)="showHideCalendarMenuItem()">
Show / Hide calendar menu item
</button>
</div>
<div class="my-48">
<h2>Examples</h2>
<h4>Show / Hide certain navigation items</h4>
<p class="py-8">
<p class="py-8 mb-48">
<fuse-highlight lang="typescript">
<textarea #source>
hidden = false;
showHideCalendarMenuItem()
showHideCalendarMenuItem(): void
{
// Get the calendar item from the navigation
const calendarNavItem = this.navigation[0].children[1];
const calendarNavItem = this._fuseNavigationService.getNavigationItem('calendar');
// Toggle the visibility
this.hidden = !this.hidden;
@ -167,23 +198,21 @@
</fuse-highlight>
</p>
<div class="mt-24 mb-64">
<div class="section-title">Update navigation item on-the-fly</div>
<button mat-button mat-raised-button color="accent" (click)="showHideCalendarMenuItem()">
Show / Hide calendar menu item
<div class="my-24">
<button mat-button mat-raised-button color="accent" (click)="updateMailBadge()">
Update Mail app badge
</button>
</div>
<h4>Update navigation item on-the-fly</h4>
<p class="py-8">
<p class="py-8 mb-48">
<fuse-highlight lang="typescript">
<textarea #source>
updateMailBadge()
{
// Get the mail nav item
const mailNavItem = this.navigation[0].children[4];
const mailNavItem = this._fuseNavigationService.getNavigationItem('mail');
// Update the badge title
mailNavItem.badge.title = 35;
@ -192,17 +221,15 @@
</fuse-highlight>
</p>
<div class="mt-24 mb-64">
<div class="section-title">Add a subitem to the Calendar nav item</div>
<button mat-button mat-raised-button color="accent" (click)="updateMailBadge()">
Update Mail app badge
<div class="my-24">
<button mat-button mat-raised-button color="accent" (click)="addSubitemToCalendar()">
Add a subitem to the Calendar nav item
</button>
</div>
<h4>Add a subitem to the Calendar nav item</h4>
<p class="py-8">
<p class="py-8 mb-48">
<fuse-highlight lang="typescript">
<textarea #source>
addSubitemToCalendar()
@ -216,32 +243,27 @@
};
// Get the calendar item from the navigation
const calendarNavItem = this.navigation[0].children[1];
const calendarNavItem = this._fuseNavigationService.getNavigationItem('calendar');
// Make the calendar navigation item collapsable
calendarNavItem.type = 'collapse';
// Create an empty children array
calendarNavItem.children = [];
// Push the new children
calendarNavItem.children.push(newNavItem);
// Add the navigation item
this._fuseNavigationService.addNavigationItem(newNavItem, 'calendar');
}
</textarea>
</fuse-highlight>
</p>
<div class="mt-24 mb-64">
<div class="section-title">Add a nav item with custom function</div>
<button mat-button mat-raised-button color="accent" (click)="addSubitemToCalendar()">
Add a subitem to the Calendar nav item
<div class="my-24">
<button mat-button mat-raised-button color="accent" (click)="addNavItemWithCustomFunction()">
Add a nav item with custom function
</button>
</div>
<h4>Add a nav item with custom function</h4>
<p class="py-8">
<p class="py-8 mb-48">
<fuse-highlight lang="typescript">
<textarea #source>
addNavItemWithCustomFunction()
@ -256,28 +278,104 @@
}
};
// Get the applications nav item
const applicationsNavItem = this.navigation[0];
// Add the new nav item at the beginning of the applications
applicationsNavItem.children.unshift(newNavItem);
// Add the new nav item at the beginning of the navigation
this._fuseNavigationService.addNavigationItem(newNavItem, 'start');
}
</textarea>
</fuse-highlight>
</p>
<div class="mt-24">
<div class="section-title">Remove the Dashboards menu item</div>
<button mat-button mat-raised-button color="accent" (click)="addNavItemWithCustomFunction()">
Add a nav item with custom function
<div class="my-24">
<button mat-button mat-raised-button color="accent" (click)="removeDashboards()">
Remove Dashboards menu item
</button>
</div>
<p class="py-8 mb-48">
<fuse-highlight lang="typescript">
<textarea #source>
removeDashboards(): void
{
this._fuseNavigationService.removeNavigationItem('dashboards');
}
</textarea>
</fuse-highlight>
</p>
<div class="section-title">Register a new navigation and toggle to it</div>
<div class="my-24">
<button mat-button mat-raised-button color="accent" (click)="registerNewNavigationAndToggle()">
Register a new navigation and toggle to it
</button>
</div>
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
registerNewNavigationAndToggle(): void
{
const adminNav = [
{
id : 'admin',
title : 'Admin',
type : 'group',
icon : 'apps',
children: [
{
id : 'users',
title: 'Users',
type : 'item',
icon : 'person',
url : '/apps/dashboards/analytics'
},
{
id : 'payments',
title: 'Payments',
type : 'item',
icon : 'attach_money',
url : '/apps/academy'
}
]
},
{
id : 'control-panel',
title : 'Control Panel',
type : 'group',
icon : 'apps',
children: [
{
id : 'cron-jobs',
title: 'Cron Jobs',
type : 'item',
icon : 'settings',
url : '/apps/file-manager'
},
{
id : 'maintenance-mode',
title: 'Maintenance Mode',
type : 'item',
icon : 'build',
url : '/apps/todo'
}
]
}
];
// Register the new navigation
this._fuseNavigationService.register('admin-nav', adminNav);
// Set the current navigation
this._fuseNavigationService.setCurrentNavigation('admin-nav');
}
</textarea>
</fuse-highlight>
</p>
</div>
</div>
</div>
</div>

94
src/app/main/documentation/components/navigation/navigation.component.ts
View File

@ -1,6 +1,6 @@
import { Component } from '@angular/core';
import { navigation } from 'app/navigation/navigation';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@Component({
selector : 'docs-components-navigation',
@ -15,10 +15,11 @@ export class DocsComponentsNavigationComponent
/**
* Constructor
*/
constructor()
constructor(
private _fuseNavigationService: FuseNavigationService
)
{
// Set the defaults
this.navigation = navigation;
this.hidden = false;
}
@ -32,7 +33,7 @@ export class DocsComponentsNavigationComponent
showHideCalendarMenuItem(): void
{
// Get the calendar item from the navigation
const calendarNavItem = this.navigation[0].children[1];
const calendarNavItem = this._fuseNavigationService.getNavigationItem('calendar');
// Toggle the visibility
this.hidden = !this.hidden;
@ -45,7 +46,7 @@ export class DocsComponentsNavigationComponent
updateMailBadge(): void
{
// Get the mail nav item
const mailNavItem = this.navigation[0].children[4];
const mailNavItem = this._fuseNavigationService.getNavigationItem('mail');
// Update the badge title
mailNavItem.badge.title = 35;
@ -65,16 +66,13 @@ export class DocsComponentsNavigationComponent
};
// Get the calendar item from the navigation
const calendarNavItem = this.navigation[0].children[1];
const calendarNavItem = this._fuseNavigationService.getNavigationItem('calendar');
// Make the calendar navigation item collapsable
calendarNavItem.type = 'collapse';
calendarNavItem.type = 'collapsable';
// Create an empty children array
calendarNavItem.children = [];
// Push the new children
calendarNavItem.children.push(newNavItem);
// Add the navigation item
this._fuseNavigationService.addNavigationItem(newNavItem, 'calendar');
}
/**
@ -92,10 +90,74 @@ export class DocsComponentsNavigationComponent
}
};
// Get the applications nav item
const applicationsNavItem = this.navigation[0];
// Add the new nav item at the beginning of the navigation
this._fuseNavigationService.addNavigationItem(newNavItem, 'start');
}
// Add the new nav item at the beginning of the applications
applicationsNavItem.children.unshift(newNavItem);
/**
* Remove the dashboard menu item
*/
removeDashboards(): void
{
this._fuseNavigationService.removeNavigationItem('dashboards');
}
/**
* Register a new navigation and toggle to it
*/
registerNewNavigationAndToggle(): void
{
const adminNav = [
{
id : 'admin',
title : 'Admin',
type : 'group',
icon : 'apps',
children: [
{
id : 'users',
title: 'Users',
type : 'item',
icon : 'person',
url : '/apps/dashboards/analytics'
},
{
id : 'payments',
title: 'Payments',
type : 'item',
icon : 'attach_money',
url : '/apps/academy'
}
]
},
{
id : 'control-panel',
title : 'Control Panel',
type : 'group',
icon : 'apps',
children: [
{
id : 'cron-jobs',
title: 'Cron Jobs',
type : 'item',
icon : 'settings',
url : '/apps/file-manager'
},
{
id : 'maintenance-mode',
title: 'Maintenance Mode',
type : 'item',
icon : 'build',
url : '/apps/todo'
}
]
}
];
// Register the new navigation
this._fuseNavigationService.register('admin-nav', adminNav);
// Set the current navigation
this._fuseNavigationService.setCurrentNavigation('admin-nav');
}
}

12
src/app/main/documentation/components/search-bar/search-bar.component.html
View File

@ -1,4 +1,4 @@
<div id="search-bar" class="page-layout simple fullwidth">
<div id="search-bar" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Search Bar</div>
@ -21,8 +23,7 @@
on click.
</p>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
@ -30,17 +31,14 @@
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Outputs</h2>
<div class="section-title">Outputs</div>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-8">input</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>

12
src/app/main/documentation/components/shortcuts/shortcuts.component.html
View File

@ -1,4 +1,4 @@
<div id="shortcuts" class="page-layout simple fullwidth">
<div id="shortcuts" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Shortcuts</div>
@ -21,8 +23,7 @@
the navigation model.
</p>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
@ -30,16 +31,13 @@
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Model</h2>
<div class="section-title">Model</div>
<p class="py-8">
<code>&lt;fuse-shortcuts&gt;&lt;/fuse-shortcuts&gt;</code> uses the same service with navigation
component to populate the shortcuts. It can search the navigation items as well as pin and unpin them as
shortcuts. It uses browser cookies to store the shortcuts.
</p>
</div>
</div>

35
src/app/main/documentation/components/sidebar/sidebar.component.html
View File

@ -1,4 +1,4 @@
<div id="sidebar" class="page-layout simple fullwidth">
<div id="sidebar" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Sidebar</div>
@ -21,16 +23,14 @@
only used as the main navigation sidebar but in the future it will allow multiple usages.
</p>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<fuse-sidebar [name]="'navbar'" [folded]="someSettings.isFolded" [lockedOpen]="'gt-md'"></fuse-sidebar>
<fuse-sidebar [name]="'navbar'" [folded]="someSetting.isFolded" [lockedOpen]="'gt-md'"></fuse-sidebar>
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>[name]</h2>
@ -47,6 +47,15 @@
</p>
</div>
<div class="my-48">
<h2>[position]</h2>
<p class="py-8">
Controls the position of the sidebar when it's hidden. This doesn't affect on the locked-open placement
of the sidebar, it only controls which side the sidebar is going to slide in when it's completely
hidden.
</p>
</div>
<div class="my-48">
<h2>[lockedOpen]</h2>
<p class="py-8">
@ -55,6 +64,22 @@
</p>
</div>
<div class="section-title">Sidebar Service</div>
<p class="py-8">
The sidebar service allows you to control the Sidebar's states from anywhere. To access the sidebar,
you need to use the name attribute:
</p>
<p class="py-8">
<fuse-highlight lang="ts">
<textarea #source>
toggleSidebar(): void
{
this._fuseSidebarService.getSidebar('my-left-sidebar').toggleOpen();
}
</textarea>
</fuse-highlight>
</p>
</div>
</div>

14
src/app/main/documentation/components/widget/widget.component.html
View File

@ -1,4 +1,4 @@
<div id="widget" class="page-layout simple fullwidth">
<div id="widget" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Widget</div>
@ -20,9 +22,7 @@
<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 class="section-title">Sample</div>
<div>
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
@ -57,11 +57,8 @@
</fuse-widget>
</div>
</div>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
@ -104,7 +101,6 @@
</fuse-highlight>
</p>
</div>
</div>

51
src/app/main/documentation/directives/directives.module.ts Normal file
View File

@ -0,0 +1,51 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatButtonModule, MatIconModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseHighlightModule } from '@fuse/components';
import { DocsDirectivesFuseIfOnDomComponent } from 'app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component';
import { DocsDirectivesFuseInnerScrollComponent } from 'app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component';
import { DocsDirectivesFuseMatSidenavComponent } from 'app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component';
import { DocsDirectivesFusePerfectScrollbarComponent } from 'app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component';
const routes = [
{
path : 'fuse-if-on-dom',
component: DocsDirectivesFuseIfOnDomComponent
},
{
path : 'fuse-inner-scroll',
component: DocsDirectivesFuseInnerScrollComponent
},
{
path : 'fuse-mat-sidenav',
component: DocsDirectivesFuseMatSidenavComponent
},
{
path : 'fuse-perfect-scrollbar',
component: DocsDirectivesFusePerfectScrollbarComponent
}
];
@NgModule({
declarations: [
DocsDirectivesFuseIfOnDomComponent,
DocsDirectivesFuseInnerScrollComponent,
DocsDirectivesFuseMatSidenavComponent,
DocsDirectivesFusePerfectScrollbarComponent
],
imports : [
RouterModule.forChild(routes),
MatButtonModule,
MatIconModule,
FuseSharedModule,
FuseHighlightModule
]
})
export class DirectivesModule
{
}

40
src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.html Normal file
View File

@ -0,0 +1,40 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Directives</span>
</div>
<div class="h2 mt-16">fuseIfOnDom</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>*fuseIfOnDom</code> is a helper directive that detaches and re-attaches the given element if it's
currently in the DOM. This will help in various cases such as charts that don't resize properly or
animations that don't wait to route to be loaded completely.
</p>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<div *fuseIfOnDom></div>
</textarea>
</fuse-highlight>
</p>
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.ts Normal file
View File

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector : 'docs-directives-fuse-if-on-dom',
templateUrl: './fuse-if-on-dom.component.html',
styleUrls : ['./fuse-if-on-dom.component.scss']
})
export class DocsDirectivesFuseIfOnDomComponent
{
constructor()
{
}
}

43
src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.html Normal file
View File

@ -0,0 +1,43 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Directives</span>
</div>
<div class="h2 mt-16">fuseInnerScroll</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fuseInnerScroll</code> is a class directive that can be used in page layouts. It will lock the
container's scroll allowing for individual scroll such as sidebar and the content itself.
</p>
<p class="message-box warning">
This directive will only work with Fuse's pre-built page layouts and it's a class directive.
</p>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<div class="page-layout carded left-sidebar inner-scroll">
</textarea>
</fuse-highlight>
</p>
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.ts Normal file
View File

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

72
src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.html Normal file
View File

@ -0,0 +1,72 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Directives</span>
</div>
<div class="h2 mt-16">fuseMatSidenav</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fuseMatSidenav</code> is a helper directive that enhances the Angular Material's sidenav. It modifies
the sidenav so it will function like the Angular Material 1.x sidenav. It also has a service which you can
register a sidenav in order to access and control its status from anywhere.
</p>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<mat-sidenav position="start" opened="true" mode="side"
fuseMatSidenavHelper="chat-left-sidenav" mat-is-locked-open="gt-md">
</textarea>
</fuse-highlight>
</p>
<div class="section-title">Inputs</div>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">fuseMatSidenavHelper</code>
<span>
A unique name for the sidenav.
</span>
</p>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">mat-is-locked-open</code>
<span>
Adds a locked open functionality just like Angular Material 1.x sidenav. Works with the media step
aliases of the FlexLayout library.
</span>
</p>
<div class="section-title">Accessing to the sidebav methods from anywhere</div>
<p class="py-8">
<fuse-highlight lang="ts">
<textarea #source>
constructor(
private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
) {}
toggleSidenav()
{
this._fuseMatSidenavHelperService.getSidenav('chat-left-sidenav').toggle();
}
</textarea>
</fuse-highlight>
</p>
</div>
<!-- / CONTENT -->
</div>

8
src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.scss Normal file
View File

@ -0,0 +1,8 @@
@import "src/@fuse/scss/fuse";
:host {
code {
white-space: nowrap;
}
}

13
src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.ts Normal file
View File

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

65
src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.html Normal file
View File

@ -0,0 +1,65 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Directives</span>
</div>
<div class="h2 mt-16">fusePerfectScrollbar</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
<code>fusePerfectScrollbar</code> is an Angular directive for the <a
href="https://github.com/utatti/perfect-scrollbar" target="_blank">Perfect Scrollbar</a> library.
</p>
<div class="section-title">Usage</div>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<div fusePerfectScrollbar>
</textarea>
</fuse-highlight>
</p>
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<div [fusePerfectScrollbar]="false" [fusePerfectScrollbarOptions]="{'updateOnRouteChange': true}">
</textarea>
</fuse-highlight>
</p>
<div class="section-title">Inputs</div>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">fusePerfectScrollbar</code>
<span>
Accepts an optional boolean which you can control the Perfect Scrollbar. If provided false, Perfect
Scrollbar will be destroyed or won't be initialized.
</span>
</p>
<p class="py-8" fxLayout="row" fxLayoutAlign="start center">
<code class="mr-16">fusePerfectScrollbarOptions</code>
<span>
Accepts the <a href="https://github.com/utatti/perfect-scrollbar#options" target="_blank">Perfect
Scrollbar options</a>. In addition to those options, there is also a custom <b>updateOnRouteChange</b>
option which updates the scrollbar on route changes. That's useful if your scrollbar wraps a
<b>router-outlet</b>.
</span>
</p>
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.ts Normal file
View File

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

12
src/app/main/documentation/documentation.module.ts
View File

@ -12,6 +12,14 @@ const routes: Routes = [
path : 'changelog',
component: DocsChangelogComponent
},
{
path : 'getting-started',
loadChildren: './getting-started/getting-started.module#GettingStartedModule'
},
{
path : 'working-with-fuse',
loadChildren: './working-with-fuse/working-with-fuse.module#WorkingWithFuseModule'
},
{
path : 'components',
loadChildren: './components/components.module#ComponentsModule'
@ -20,6 +28,10 @@ const routes: Routes = [
path : 'components-third-party',
loadChildren: './components-third-party/components-third-party.module#ComponentsThirdPartyModule'
},
{
path : 'directives',
loadChildren: './directives/directives.module#DirectivesModule'
},
{
path : 'services',
loadChildren: './services/services.module#ServicesModule'

38
src/app/main/documentation/getting-started/getting-started.module.ts Normal file
View File

@ -0,0 +1,38 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatIconModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseHighlightModule } from '@fuse/components';
import { DocsGettingStartedIntroductionComponent } from 'app/main/documentation/getting-started/introduction/introduction.component';
import { DocsGettingStartedInstallationComponent } from 'app/main/documentation/getting-started/installation/installation.component';
const routes = [
{
path : 'introduction',
component: DocsGettingStartedIntroductionComponent
},
{
path : 'installation',
component: DocsGettingStartedInstallationComponent
}
];
@NgModule({
declarations: [
DocsGettingStartedIntroductionComponent,
DocsGettingStartedInstallationComponent
],
imports : [
RouterModule.forChild(routes),
MatIconModule,
FuseSharedModule,
FuseHighlightModule
]
})
export class GettingStartedModule
{
}

150
src/app/main/documentation/getting-started/installation/installation.component.html Normal file
View File

@ -0,0 +1,150 @@
<div id="installation" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Getting Started</span>
</div>
<div class="h2 mt-16">Installation</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<div class="main-title">Prerequisites</div>
<p class="message-box info">
This section will give you some information about what tools you will need. You can skip to the
<b>Installation</b> section to start installing the template. We already mentioned all the prerequisites and
how to install them in the <b>Installation</b> section.
</p>
<!-- ANGULAR CLI -->
<div class="section-title">Angular CLI</div>
<p>
Fuse uses <a href="https://github.com/angular/angular-cli" target="_blank">Angular CLI</a> for quickly
bootstrapping the application. You can check out the link for
more detailed information.
</p>
<p>
Simply, <em><b>Angular CLI</b></em> is a tool to initialize, develop, scaffold and maintain Angular
applications
</p>
<!-- / ANGULAR CLI -->
<!-- NODE.JS -->
<div class="section-title">Node.js</div>
<p>
To install and use Fuse, you will need <a href="https://nodejs.org/en/" target="_blank">Node.js</a>
installed to your computer. We won't get into too much detail about Node.js as it's out of the scope
of this documentation. Also you won't need to actually use Node.js, it's only required for the
development process.
</p>
<!-- / NODE.JS -->
<!-- GIT -->
<div class="section-title">Git</div>
<p>
To be able to install and use Fuse, you will also need
<a href="https://git-scm.com/" target="_blank">Git</a> installed to your computer. Git is required for
<b>npm</b> to work correctly.
</p>
<!-- / GIT -->
<!-- NPM -->
<div class="section-title">Npm - Package Manager</div>
<p>
Fuse uses <a href="https://www.npmjs.com/" target="_blank">npm</a> package manager to install and manage 3rd
party components and libraries.
</p>
<!-- / NPM -->
<div class="main-title">Installation</div>
<!-- INSTALLING PREREQUISITES -->
<div class="section-title">A. Installing Prerequisites</div>
<ol class="step-by-step">
<li>
Download and install the latest <a href="https://nodejs.org/en/" target="_blank">Node.js</a> from
its web site.
</li>
<li>
Download and install the latest <a href="https://git-scm.com/" target="_blank">Git</a> from its web
site.
</li>
<li>
To install the Angular CLI:
Open your favorite console application (Terminal, Command Prompt etc.), run the following command
and wait for it to finish:
<div class="mt-24">
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
npm install -g @angular/cli
</textarea>
</fuse-highlight>
</div>
</li>
</ol>
<p class="mt-24">
Now you are ready to install the Fuse.
</p>
<!-- / PREREQUISITES -->
<!-- / INSTALLING FUSE-->
<div class="section-title">B. Installing Fuse</div>
<ol class="step-by-step">
<li>
Unzip the zip file that you have downloaded from Themeforest. Inside the zip file, you will find the
Skeleton Project <b>(Fuse-x.x.x-skeleton.zip)</b> along with the Demo Project <b>(Fuse-x.x.x-demo.zip)</b>,
PSD designs and a readme file.
</li>
<li>
For this documentation, we will be using the Skeleton Project which is the exact same template minus
the demo content so you don't have to clean up the demo content.
</li>
<li>
Extract the contents of the zip file <b>(Fuse-x.x.x-skeleton.zip)</b> into a folder that you will
work within. For this documentation, we will refer that as "<em>your work folder</em>".
</li>
<li>
Open your favorite console application (Terminal, Command Prompt etc.), navigate into your work
folder, run the following command and wait for it to finish:
<div class="mt-24">
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
npm install
</textarea>
</fuse-highlight>
</div>
<p>
This command will install all the required Node.js modules into the <b>node_modules</b>
directory inside your work folder.
</p>
</li>
<p>
And now, you are ready to run the Fuse for the first time. Please continue to the
<a routerLink="/documentation/working-with-fuse/server">Working with Fuse</a> section.
</p>
</ol>
<!-- / INSTALLING FUSE-->
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/getting-started/installation/installation.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/getting-started/installation/installation.component.ts Normal file
View File

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

71
src/app/main/documentation/getting-started/introduction/introduction.component.html Normal file
View File

@ -0,0 +1,71 @@
<div id="introduction" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Getting Started</span>
</div>
<div class="h2 mt-16">Introduction</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
This version of Fuse is <em>NOT</em> a traditional admin template, it's an Angular app written entirely
with Typescript and has no jQuery dependency.
</p>
<p>
While Fuse is a great tool and source for learning Angular, it also requires at least an entry level of
Angular knowledge so you can find your way within the source code.
</p>
<p>
Here you can find a list of core libraries, design specifications and coding standards that we use in Fuse:
</p>
<!-- GOOGLE MATERIAL DESIGN -->
<div class="section-title">Google's Material Design</div>
<p>
All libraries and custom made components are following <a
href="https://www.google.com/design/spec/material-design/introduction.html"
target="_blank">Google's Material Design Specifications</a>.
</p>
<!-- / GOOGLE MATERIAL DESIGN -->
<!-- ANGULAR -->
<div class="section-title">Angular</div>
<p>
<a href="https://angular.io/" target="_blank">Angular</a> is the core of Fuse.
</p>
<!-- / ANGULAR -->
<!-- ANGULAR MATERIAL 2 -->
<div class="section-title">Angular Material</div>
<p>
<a href="https://material.angular.io/" target="_blank">Angular Material</a> is the primary UI
library of the Fuse. It's a set of Angular components, directives and services that implements Material
Design Specifications and it's in active development by Google.
</p>
<!-- / ANGULAR MATERIAL 2 -->
<!-- ANGULAR CLI -->
<div class="section-title">CLI tool for Angular</div>
<p>
The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications.
You can find more information about at:
<a href="https://github.com/angular/angular-cli" target="_blank">angular-cli</a>
</p>
<!-- / ANGULAR CLI -->
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/getting-started/introduction/introduction.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/getting-started/introduction/introduction.component.ts Normal file
View File

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

65
src/app/main/documentation/services/config/config.component.html
View File

@ -1,4 +1,4 @@
<div id="config" class="page-layout simple fullwidth">
<div id="config" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Services</span>
</div>
<div class="h2 mt-16">Config</div>
@ -17,12 +19,11 @@
<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.
<code>Config</code> is a custom built Fuse service allows to have a granular 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>
<div class="section-title">Usage</div>
<p class="mat-grey-200-bg py-8">
<fuse-highlight lang="typescript">
@ -32,34 +33,43 @@
{
config: any;
constructor(private fuseConfig: FuseConfigService)
constructor(
private _fuseConfigService: FuseConfigService
)
{
// Subscribe to settings changed event
this.fuseConfig.onConfigChanged.subscribe(
(newConfig) => {
this.config = newConfig;
}
);
}
onInit(){
// Fully customizable surroundings for this particular component
this.fuseConfig.setConfig({
this._fuseConfigService.config = {
layout : {
navigation : 'left', // 'right', 'left', 'top', none
navigationFolded: false, // true, false
toolbar : 'below', // 'above', 'below', none
footer : 'none' // 'above', 'below', none
mode : 'fullwidth' // 'boxed', 'fullwidth'
style : 'vertical-layout-1',
width : 'fullwidth',
navbar : {
hidden : false,
position : 'left',
folded : false,
background: 'mat-fuse-dark-700-bg'
},
colorClasses : {
toolbar: 'mat-white-500-bg',
navbar : 'mat-fuse-dark-700-bg',
footer : 'mat-fuse-dark-900-bg'
toolbar : {
hidden : false,
position : 'below-static',
background: 'mat-white-500-bg'
},
footer : {
hidden : false,
position : 'below-static',
background: 'mat-fuse-dark-900-bg'
}
},
customScrollbars: true,
routerAnimation : 'fadeIn'
routerAnimation : 'none'
});
}
onInit()
{
// Subscribe to config change
this._fuseConfigService.config
.subscribe((config) => {
this.config = config;
});
}
}
@ -68,7 +78,6 @@
</fuse-highlight>
</p>
</div>
</div>

26
src/app/main/documentation/services/splash-screen/splash-screen.component.html
View File

@ -1,4 +1,4 @@
<div id="splash-screen" class="page-layout simple fullwidth">
<div id="splash-screen" class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -6,6 +6,8 @@
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Services</span>
</div>
<div class="h2 mt-16">Splash Screen</div>
@ -17,13 +19,10 @@
<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.
<code>Splash screen</code> is a custom Fuse service that allows to have a control on the splash screen.
</p>
<div class="my-48">
<h2>Usage</h2>
<div class="section-title">Usage</div>
<p class="mat-grey-200-bg py-8">
<fuse-highlight lang="typescript">
@ -31,11 +30,17 @@
export class SomeComponent
{
constructor(private fuseSplashScreen: FuseSplashScreenService) {}
constructor(
private _fuseSplashScreenService: FuseSplashScreenService
) {}
onInit(){
this.fuseSplashScreen.show();
this.fuseSplashScreen.hide();
onInit()
{
this._fuseSplashScreenService.show();
setTimeout(() => {
this._fuseSplashScreenService.hide();
}, 3000);
}
}
@ -43,7 +48,6 @@
</fuse-highlight>
</p>
</div>
</div>

76
src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.html Normal file
View File

@ -0,0 +1,76 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Working with Fuse</span>
</div>
<div class="h2 mt-16">Directory Structure</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
Fuse has a fairly simple directory structure. All source code that you will need stays inside the
<b>/src</b> folder.
</p>
<p>
Once you build your app, a <b>/dist</b> folder will appear at the root which will contain the built app. You
can simply upload the contents of it to your server to start running your app.
</p>
<div class="main-title">Source directory (/src)</div>
<p>
The source folder has the general Angular CLI project structure along with an additional folder called
<b>/@fuse</b> which contains the core elements of the Fuse.
</p>
<p class="message-box warning">
We recommend you not to touch <b>/@fuse</b> directory to easily update Fuse in the future.
</p>
<div class="section-title">/app</div>
<p>
This folder contains the <b>AppComponent</b> along with the following directories. Everything that being
contained inside these folders are belong to your app and you can edit them however you like while
building your app:
</p>
<ul>
<li>
<b>/fake-db</b>: The fake database data files for Fuse apps.
</li>
<li>
<b>/fuse-config</b>: The main config file for configuring the Fuse template.
</li>
<li>
<b>/layout</b>: Contains the template layout components.
</li>
<li>
<b>/main</b>: Example Fuse apps and ready to use pages and page layouts.
</li>
<li>
<b>/navigation</b>: The main navigation data.
</li>
<li>
<b>/store</b>: Ngrx-Mail app related store files.
</li>
</ul>
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.ts Normal file
View File

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector : 'docs-working-with-fuse-directory-structure',
templateUrl: './directory-structure.component.html',
styleUrls : ['./directory-structure.component.scss']
})
export class DocsWorkingWithFuseDirectoryStructureComponent
{
constructor()
{
}
}

129
src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.html Normal file
View File

@ -0,0 +1,129 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-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">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">Multi Language</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
Fuse uses <a class="link" href="https://github.com/ngx-translate/core" target="_blank">ngx-translate</a>
module and supports multiple languages and translations.
</p>
<p class="message-box warning">
Since not everybody need multi-language setup for their apps, we decided NOT to put translations everywhere.
If you want to see the translations in action, visit <a class="link" [routerLink]="'/apps/mail'">
Mail</a> app and then change the language from the <b>Toolbar.</b>
<br><br>
Mail app is the only app that has translations for demonstration purposes. You can look at its source code
to see the usage.
</p>
<div class="section-title">Usage</div>
<p>In order to use the translations, create your translation file within the module you want to use
the translations. For example, for the Mail app, create <code>i18n/en.ts</code> file inside the
<code>apps/mail</code> folder.
</p>
<p>
The structure of the translation file is important and it must define the language id along with the
translation data:
</p>
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
// i18n/en.ts
export const locale = {
lang: 'en',
data: {
'MAIL': {
'COMPOSE': 'COMPOSE'
}
}
};
// i18n/tr.ts
export const locale = {
lang: 'tr',
data: {
'MAIL': {
'COMPOSE': 'YENİ E-POSTA'
}
}
};
</textarea>
</fuse-highlight>
</p>
<p>
After you create your translation files, open the <code>*.component.ts</code> file for the module you
want to have translations, and register your translation file. For this example, we will use the
<code>mail.component.ts</code> file:
</p>
<fuse-highlight lang="typescript">
<textarea #source>
// Your imports
import { ... } from '..';
// Import the locale files
import { locale as english } from './i18n/en';
import { locale as turkish } from './i18n/tr';
@Component({
selector : 'mail',
templateUrl: './mail.component.html',
styleUrls : ['./mail.component.scss']
})
export class MailComponent
{
constructor(private translationLoader: FuseTranslationLoaderService)
{
this.translationLoader.loadTranslations(english, turkish);
}
...
}
</textarea>
</fuse-highlight>
<div class="section-title">Changing the language</div>
<p>
Changing the current language can happen instantly. Simply call the <code>use</code> method from the
translate service:
</p>
<fuse-highlight lang="typescript">
<textarea #source>
import { TranslateService } from '@ngx-translate/core';
constructor(private translate: TranslateService) {}
setLanguage()
{
// Use the selected language for translations
this.translate.use('tr');
}
</textarea>
</fuse-highlight>
<p>
More detailed usage of the translation service can be found in the <code>toolbar.component.ts</code>
file.
</p>
</div>
</div>

3
src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.scss Normal file
View File

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

4
src/app/main/documentation/components/multi-language/multi-language.component.ts → src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.ts
View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector : 'multi-language-docs',
selector : 'docs-working-with-fuse-multi-language',
templateUrl: './multi-language.component.html',
styleUrls : ['./multi-language.component.scss']
})
export class MultiLanguageDocsComponent
export class DocsWorkingWithFuseMultiLanguageComponent
{
/**
* Constructor

62
src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.html Normal file
View File

@ -0,0 +1,62 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Working with Fuse</span>
</div>
<div class="h2 mt-16">Page Layouts</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
One of the strong sides of the Fuse is its Page layouts. Every single app, pre-built page and even this
documentation pages uses the Fuse's page layouts.
</p>
<p>
Simply, page layouts are pre-built layouts with a demo content which you can simply copy/paste and start
building your own page or app based on it. Because page layouts, it's very easy to replicate any page style
that you can find in Fuse, without needing to remove all the demo functionality from them.
</p>
<div class="section-title">Identifying a Page Layout</div>
<p>
You can easily identify the layout that particular page or app using by simply looking at its main html
file. The very top wrapper div will tell you everything you need to know:
</p>
<fuse-highlight lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="page-layout carded left-sidebar">
...
</div>
</textarea>
</fuse-highlight>
<p>
The above example is using the <b>carded</b> style page with a <b>left sidebar</b> setup which can be found
in <b>/ui/page-layouts/carded/left-sidebar-1</b> directory.
</p>
<p class="message-box info">
The numbers in the folder names represents the scrolling style of that particular page layout. For example,
<b>left-sidebar-1</b> has the exact same layout with <b>left-sidebar-2</b> but the former one uses
a single scrollbar while the latter one uses separate scrollbars for its content and its sidebar.
</p>
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.ts Normal file
View File

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector : 'docs-working-with-fuse-page-layouts',
templateUrl: './page-layouts.component.html',
styleUrls : ['./page-layouts.component.scss']
})
export class DocsWorkingWithFusePageLayoutsComponent
{
constructor()
{
}
}

143
src/app/main/documentation/working-with-fuse/production/production.component.html Normal file
View File

@ -0,0 +1,143 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Working with Fuse</span>
</div>
<div class="h2 mt-16">Production</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<!-- BUILD -->
<div class="section-title">Build</div>
<p>
The following command builds the application into an output directory
</p>
<div>
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
ng build
</textarea>
</fuse-highlight>
</div>
<p>
The build artifacts will be stored in the <b>/dist</b> directory. All commands that build or serve your
project, will delete the output directory.
</p>
<div class="section-title">Bundling & Tree-Shaking (AoT)</div>
<p>
To build your app with AoT (Ahead of Time) compiler, use the following command:
</p>
<div>
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
ng build --prod
</textarea>
</fuse-highlight>
</div>
<p>
or if you want to serve with AoT, use the following:
</p>
<div>
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
ng serve --prod
</textarea>
</fuse-highlight>
</div>
<p>
This will make use of <b>uglifying</b> and <b>tree-shaking</b> functionality while serving the app from
the memory.
</p>
<div class="section-title">Alternative AoT compiler</div>
<p>
If you happen to stumble upon an error while running the
</p>
<div>
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
ng build --prod
</textarea>
</fuse-highlight>
</div>
<p>
command, there is an alternative one that you can use. The following command will run the <b>ng build
--prod</b> command with an increased memory size so your app can be built:
</p>
<div>
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
npm run build-prod
</textarea>
</fuse-highlight>
</div>
<!-- / BUILD -->
<!-- TESTS -->
<div class="section-title">Running unit tests</div>
<div class="mt-24">
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
ng test
</textarea>
</fuse-highlight>
</div>
<p>
Tests will execute after a build is executed via
<a href="http://karma-runner.github.io/0.13/index.html" target="_blank">Karma</a>, and it will automatically
watch your files for changes.
</p>
<p>
You can run tests a single time via
<span class="text-boxed">--watch=false</span>
or
<span class="text-boxed">--single-run</span>
</p>
<!-- / TESTS -->
<!-- E2E TESTS -->
<div class="section-title">Running end-to-end tests</div>
<div class="mt-24">
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
ng e2e
</textarea>
</fuse-highlight>
</div>
<p>
Before running the tests make sure you are serving the app via
<span class="text-boxed">ng serve.</span>
End-to-end tests are run via <a href="https://angular.github.io/protractor/"
target="_blank">Protractor.</a>
</p>
<!-- / E2E TESTS -->
<p class="mt-32">
For more information about angular-cli commands, check the <a href="https://github.com/angular/angular-cli"
target="_blank">angular-cli</a>.
</p>
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/working-with-fuse/production/production.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/working-with-fuse/production/production.component.ts Normal file
View File

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

79
src/app/main/documentation/working-with-fuse/server/server.component.html Normal file
View File

@ -0,0 +1,79 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Working with Fuse</span>
</div>
<div class="h2 mt-16">Server</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<!-- SERVER -->
<div class="section-title">Server</div>
<p>
While still in your work folder, run the following command in the console application:
</p>
<div>
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
ng serve
</textarea>
</fuse-highlight>
</div>
<p>
And that's it. Angular CLI will take care everything and start the Fuse.
</p>
<p>
You can check out your console application to get further information about the server. By default, it
will run on <b>http://localhost:4200</b> but it might change depending on your setup.
</p>
<p>
Also, there are other commands available in Fuse which may help you in your development. To see the complete
list of available npm commands, check the
<span class="text-boxed">package.json</span>
file.
</p>
<!-- / SERVER -->
<!-- RELOADING THE SERVER -->
<div class="section-title">Reloading the Server</div>
<p>
The
<span class="text-boxed">ng serve</span>
command will watch your files and reload the page for you as you make changes.
But for some reason, if you need to manually restart the server, you can do it by pressing <b>Ctrl +
C</b> on your keyboard while in the console application and then run the following command once again:
</p>
<div>
<fuse-highlight lang="bash" class="source-code" fxFlex="100%">
<textarea #source hidden="hidden">
ng serve
</textarea>
</fuse-highlight>
</div>
<!-- / RELOADING THE SERVER -->
<p>
For more information about angular-cli commands, check the
<a href="https://github.com/angular/angular-cli" target="_blank">angular-cli</a>.
</p>
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/working-with-fuse/server/server.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/working-with-fuse/server/server.component.ts Normal file
View File

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

72
src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.html Normal file
View File

@ -0,0 +1,72 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Working with Fuse</span>
</div>
<div class="h2 mt-16">Theme Layouts</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
Fuse comes with variety of different Theme Layouts which you can see and try them from the configuration
sidebar (Click on the animated, spinning cog button from the right side of your screen). These layouts are
accessible from <b>/src/app/layouts</b> directory and you can modify them however you like.
</p>
<p>
Each layout has its own options. Those options allow you to configure the layout elements such as Toolbar,
Footer and Navbar.
</p>
<div class="section-title">Directory Structure</div>
<p>
Inside the <b>/layouts</b> directory, you will find the following structure:
</p>
<ul>
<li>
<b>/components</b>: Contains the layout elements such as Toolbar, Footer and Navbar.
</li>
<li>
<b>/vertical</b>: Contains the layout styles with vertical navigation option.
</li>
<li>
<b>/horizontal</b>: Contains the layout styles with horizontal navigation option.
</li>
</ul>
<p class="message-box info">
Each layout loads the layout elements from <b>/components</b> directory. That means, any modifications
you will make to those elements, will be avilable acrosss the layouts.
</p>
<div class="section-title">Configuring the Layout</div>
<p>
Fuse has a powerful layout system which allows you to configure and use a different layout per route. Each
route can have its own layout configuration meaning that it's very easy to have pages like login page where
there isn't any toolbar or navbar showing, without leaving the Fuse.
</p>
<p>
You can get more information about the <b>Fuse Config Service</b> and its usage from
<a routerLink="/documentation/services/config">Config</a> documantation page.
</p>
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.ts Normal file
View File

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector : 'docs-working-with-fuse-theme-layouts',
templateUrl: './theme-layouts.component.html',
styleUrls : ['./theme-layouts.component.scss']
})
export class DocsWorkingWithFuseThemeLayoutsComponent
{
constructor()
{
}
}

52
src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.html Normal file
View File

@ -0,0 +1,52 @@
<div class="page-layout simple fullwidth docs">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Documentation</span>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Working with Fuse</span>
</div>
<div class="h2 mt-16">Updating Fuse</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p>
Due to the nature of apps, we cannot give any set instructions for updating Fuse. It heavily depends on your
project and it's up to you to update your code. However, there are couple points that we want to put forward
which might help you to keep Fuse updated.
</p>
<ul>
<li>
The most important one is not to touch the <b>/@fuse</b> directory but sometimes that is going to be
inevitable and in those cases, try to keep the modifications minimal.
</li>
<li>
Usually Angular and Angular Material libraries do some breaking changes and force our hands to change
things. In those cases, it's always good to check their official Changelogs to see what they did.
Usually they provide clear instructions and even helper tools to update your code.
</li>
<li>
Before starting your new project, <a href="http://www.withinpixels.com/themes/fuse-github"
target="_blank">join our Github repo</a>, fork it and build your
app on top of that fork. This way, in the future, you can easily merge the changes from the main repo
onto your fork. This will require merging a lot of changes manually, but it's the best way to keep the
Fuse updated.
</li>
</ul>
</div>
<!-- / CONTENT -->
</div>

5
src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.scss Normal file
View File

@ -0,0 +1,5 @@
@import "src/@fuse/scss/fuse";
:host {
}

13
src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.ts Normal file
View File

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

69
src/app/main/documentation/working-with-fuse/working-with-fuse.module.ts Normal file
View File

@ -0,0 +1,69 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatButtonModule, MatIconModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseHighlightModule } from '@fuse/components';
import { DocsWorkingWithFuseServerComponent } from 'app/main/documentation/working-with-fuse/server/server.component';
import { DocsWorkingWithFuseProductionComponent } from 'app/main/documentation/working-with-fuse/production/production.component';
import { DocsWorkingWithFuseDirectoryStructureComponent } from 'app/main/documentation/working-with-fuse/directory-structure/directory-structure.component';
import { DocsWorkingWithFuseUpdatingFuseComponent } from 'app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component';
import { DocsWorkingWithFuseMultiLanguageComponent } from 'app/main/documentation/working-with-fuse/multi-language/multi-language.component';
import { DocsWorkingWithFuseThemeLayoutsComponent } from 'app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component';
import { DocsWorkingWithFusePageLayoutsComponent } from 'app/main/documentation/working-with-fuse/page-layouts/page-layouts.component';
const routes = [
{
path : 'server',
component: DocsWorkingWithFuseServerComponent
},
{
path : 'production',
component: DocsWorkingWithFuseProductionComponent
},
{
path : 'directory-structure',
component: DocsWorkingWithFuseDirectoryStructureComponent
},
{
path : 'updating-fuse',
component: DocsWorkingWithFuseUpdatingFuseComponent
},
{
path : 'multi-language',
component: DocsWorkingWithFuseMultiLanguageComponent
},
{
path : 'theme-layouts',
component: DocsWorkingWithFuseThemeLayoutsComponent
},
{
path : 'page-layouts',
component: DocsWorkingWithFusePageLayoutsComponent
}
];
@NgModule({
declarations: [
DocsWorkingWithFuseServerComponent,
DocsWorkingWithFuseProductionComponent,
DocsWorkingWithFuseDirectoryStructureComponent,
DocsWorkingWithFuseUpdatingFuseComponent,
DocsWorkingWithFuseMultiLanguageComponent,
DocsWorkingWithFuseThemeLayoutsComponent,
DocsWorkingWithFusePageLayoutsComponent
],
imports : [
RouterModule.forChild(routes),
MatButtonModule,
MatIconModule,
FuseSharedModule,
FuseHighlightModule
]
})
export class WorkingWithFuseModule
{
}

14
src/app/navigation/navigation.ts
View File

@ -902,7 +902,13 @@ export const navigation: FuseNavigation[] = [
id : 'updating-fuse',
title: 'Updating Fuse',
type : 'item',
url : '/documentation/working-with-fuse/directory-structure'
url : '/documentation/working-with-fuse/updating-fuse'
},
{
id : 'multi-language',
title: 'Multi Language',
type : 'item',
url : '/documentation/working-with-fuse/multi-language'
},
{
id : 'theme-layouts',
@ -948,12 +954,6 @@ export const navigation: FuseNavigation[] = [
type : 'item',
url : '/documentation/components/material-color-picker'
},
{
id : 'multi-language',
title: 'Multi Language',
type : 'item',
url : '/documentation/components/multi-language'
},
{
id : 'navigation',
title: 'Navigation',