From 5459579d04e1cdee266a8a8cee227938536d4b19 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Fri, 15 Jun 2018 13:23:12 +0300 Subject: [PATCH] Added docs styles Improved the documentation and moved it into the Demo app --- src/@fuse/scss/core.scss | 1 + src/@fuse/scss/partials/_docs.scss | 42 ++ .../datatable/ngx-datatable.component.html | 6 +- .../google-maps/google-maps.component.html | 50 +- .../countdown/countdown.component.html | 50 +- .../highlight/highlight.component.html | 58 +- .../material-color-picker.component.html | 84 ++- .../multi-language.component.html | 138 ----- .../multi-language.component.scss | 13 - .../navigation/navigation.component.html | 528 +++++++++++------- .../navigation/navigation.component.ts | 94 +++- .../search-bar/search-bar.component.html | 38 +- .../shortcuts/shortcuts.component.html | 36 +- .../components/sidebar/sidebar.component.html | 47 +- .../components/widget/widget.component.html | 136 +++-- .../directives/directives.module.ts | 51 ++ .../fuseIfOnDom/fuse-if-on-dom.component.html | 40 ++ .../fuseIfOnDom/fuse-if-on-dom.component.scss | 5 + .../fuseIfOnDom/fuse-if-on-dom.component.ts | 13 + .../fuse-inner-scroll.component.html | 43 ++ .../fuse-inner-scroll.component.scss | 5 + .../fuse-inner-scroll.component.ts | 13 + .../fuse-mat-sidenav.component.html | 72 +++ .../fuse-mat-sidenav.component.scss | 8 + .../fuse-mat-sidenav.component.ts | 13 + .../fuse-perfect-scrollbar.component.html | 65 +++ .../fuse-perfect-scrollbar.component.scss | 5 + .../fuse-perfect-scrollbar.component.ts | 13 + .../documentation/documentation.module.ts | 12 + .../getting-started/getting-started.module.ts | 38 ++ .../installation/installation.component.html | 150 +++++ .../installation/installation.component.scss | 5 + .../installation/installation.component.ts | 13 + .../introduction/introduction.component.html | 71 +++ .../introduction/introduction.component.scss | 5 + .../introduction/introduction.component.ts | 13 + .../services/config/config.component.html | 95 ++-- .../splash-screen.component.html | 42 +- .../directory-structure.component.html | 76 +++ .../directory-structure.component.scss | 5 + .../directory-structure.component.ts | 13 + .../multi-language.component.html | 129 +++++ .../multi-language.component.scss | 3 + .../multi-language.component.ts | 4 +- .../page-layouts/page-layouts.component.html | 62 ++ .../page-layouts/page-layouts.component.scss | 5 + .../page-layouts/page-layouts.component.ts | 13 + .../production/production.component.html | 143 +++++ .../production/production.component.scss | 5 + .../production/production.component.ts | 13 + .../server/server.component.html | 79 +++ .../server/server.component.scss | 5 + .../server/server.component.ts | 13 + .../theme-layouts.component.html | 72 +++ .../theme-layouts.component.scss | 5 + .../theme-layouts/theme-layouts.component.ts | 13 + .../updating-fuse.component.html | 52 ++ .../updating-fuse.component.scss | 5 + .../updating-fuse/updating-fuse.component.ts | 13 + .../working-with-fuse.module.ts | 69 +++ src/app/navigation/navigation.ts | 14 +- 61 files changed, 2217 insertions(+), 705 deletions(-) create mode 100644 src/@fuse/scss/partials/_docs.scss delete mode 100644 src/app/main/documentation/components/multi-language/multi-language.component.html delete mode 100644 src/app/main/documentation/components/multi-language/multi-language.component.scss create mode 100644 src/app/main/documentation/directives/directives.module.ts create mode 100644 src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.html create mode 100644 src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.scss create mode 100644 src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.ts create mode 100644 src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.html create mode 100644 src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.scss create mode 100644 src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.ts create mode 100644 src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.html create mode 100644 src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.scss create mode 100644 src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.ts create mode 100644 src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.html create mode 100644 src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.scss create mode 100644 src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.ts create mode 100644 src/app/main/documentation/getting-started/getting-started.module.ts create mode 100644 src/app/main/documentation/getting-started/installation/installation.component.html create mode 100644 src/app/main/documentation/getting-started/installation/installation.component.scss create mode 100644 src/app/main/documentation/getting-started/installation/installation.component.ts create mode 100644 src/app/main/documentation/getting-started/introduction/introduction.component.html create mode 100644 src/app/main/documentation/getting-started/introduction/introduction.component.scss create mode 100644 src/app/main/documentation/getting-started/introduction/introduction.component.ts create mode 100644 src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.html create mode 100644 src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.scss create mode 100644 src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.ts create mode 100644 src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.html create mode 100644 src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.scss rename src/app/main/documentation/{components => working-with-fuse}/multi-language/multi-language.component.ts (67%) create mode 100644 src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.html create mode 100644 src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.scss create mode 100644 src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.ts create mode 100644 src/app/main/documentation/working-with-fuse/production/production.component.html create mode 100644 src/app/main/documentation/working-with-fuse/production/production.component.scss create mode 100644 src/app/main/documentation/working-with-fuse/production/production.component.ts create mode 100644 src/app/main/documentation/working-with-fuse/server/server.component.html create mode 100644 src/app/main/documentation/working-with-fuse/server/server.component.scss create mode 100644 src/app/main/documentation/working-with-fuse/server/server.component.ts create mode 100644 src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.html create mode 100644 src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.scss create mode 100644 src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.ts create mode 100644 src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.html create mode 100644 src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.scss create mode 100644 src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.ts create mode 100644 src/app/main/documentation/working-with-fuse/working-with-fuse.module.ts diff --git a/src/@fuse/scss/core.scss b/src/@fuse/scss/core.scss index 56402cf3..885df826 100644 --- a/src/@fuse/scss/core.scss +++ b/src/@fuse/scss/core.scss @@ -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"; diff --git a/src/@fuse/scss/partials/_docs.scss b/src/@fuse/scss/partials/_docs.scss new file mode 100644 index 00000000..e6d0f956 --- /dev/null +++ b/src/@fuse/scss/partials/_docs.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html b/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html index 28eb9aa4..7b0fd076 100644 --- a/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html +++ b/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html @@ -1,4 +1,4 @@ -
+
home chevron_right - Tables + Documentation + chevron_right + Datatables
ngx-datatable
diff --git a/src/app/main/documentation/components-third-party/google-maps/google-maps.component.html b/src/app/main/documentation/components-third-party/google-maps/google-maps.component.html index 5489ef53..5818799f 100644 --- a/src/app/main/documentation/components-third-party/google-maps/google-maps.component.html +++ b/src/app/main/documentation/components-third-party/google-maps/google-maps.component.html @@ -1,4 +1,4 @@ -
+
home chevron_right - Google Maps + Documentation + chevron_right + 3rd Party Components
Google Maps
@@ -27,33 +29,27 @@ agm-map is a angular component library for Google Maps.

-
-

Sample

-

- - - -

-
+
Sample
+

+ + + +

-
-

Usage

-

- - - -

-
+
Usage
+

+ + + +

-
-

Inputs

- Checkout the component api docs for detail: - AgmMap Api -
+
Inputs
+ Checkout the component api docs for detail: + AgmMap Api
diff --git a/src/app/main/documentation/components/countdown/countdown.component.html b/src/app/main/documentation/components/countdown/countdown.component.html index 5f4d9c38..c39da508 100644 --- a/src/app/main/documentation/components/countdown/countdown.component.html +++ b/src/app/main/documentation/components/countdown/countdown.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Components
Countdown
@@ -20,34 +22,28 @@ fuse-countdown is a custom built Fuse component allows you to create a countdowns.

-
-

Sample

-

- -

-
+
Sample
+

+ +

-
-

Usage

-

- - - -

-
+
Usage
+

+ + + +

-
-

Inputs

-

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

-
+
Inputs
+

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

diff --git a/src/app/main/documentation/components/highlight/highlight.component.html b/src/app/main/documentation/components/highlight/highlight.component.html index daa980bd..db234e78 100644 --- a/src/app/main/documentation/components/highlight/highlight.component.html +++ b/src/app/main/documentation/components/highlight/highlight.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Components
Highlight
@@ -20,28 +22,25 @@ fuse-highlight is a custom built Fuse component allows to show syntax highlighted codes.

-
-

Sample

-

+

Sample
+

- - - + + -

-
+

-
-

Usage

-

- - - -

-
+ + +

-
-

Inputs

-

- lang - - Language of the code to be highlighted. - -

-
+
Inputs
+

+ lang + + Language of the code to be highlighted. + +

diff --git a/src/app/main/documentation/components/material-color-picker/material-color-picker.component.html b/src/app/main/documentation/components/material-color-picker/material-color-picker.component.html index fc7517b3..bd4633fa 100644 --- a/src/app/main/documentation/components/material-color-picker/material-color-picker.component.html +++ b/src/app/main/documentation/components/material-color-picker/material-color-picker.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Components
Material Color Picker
@@ -21,53 +23,45 @@ that allows to choose one of the many Material spec. colors.

-
-

Sample

-

- -

-
+
Sample
+

+ +

-
-

Usage

-

- - - -

-
+
Usage
+

+ + + +

-
-

Two-way bindings

-

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

-

- selectedBg - - The hex code of the color to be selected. It will be only selected if the hex code of the color - matches one of the material colors. - -

-
+
Two-way bindings
+

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

+

+ selectedBg + + The hex code of the color to be selected. It will be only selected if the hex code of the color + matches one of the material colors. + +

-
-

Outputs

-

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

-
+
Outputs
+

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

diff --git a/src/app/main/documentation/components/multi-language/multi-language.component.html b/src/app/main/documentation/components/multi-language/multi-language.component.html deleted file mode 100644 index 4308d6d9..00000000 --- a/src/app/main/documentation/components/multi-language/multi-language.component.html +++ /dev/null @@ -1,138 +0,0 @@ -
- - -
-
-
- home - chevron_right - Components -
-
Multi Language
-
-
- - - -
- -

- Fuse uses ngx-translate - module and supports multiple languages and translations. -

- -

- 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 - Mail app and then change the language from the Toolbar. -

- Mail app is the only app that has translations for demonstration purposes. You can look at its source code - to see the usage. -

- -
-

Usage

-

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 i18n/en.ts file inside the - apps/mail folder. -

-

- The structure of the translation file is important and it must define the language id along with the - translation data: -

- -

- - - -

-
- -
-

- After you create your translation files, open the *.component.ts file for the module you - want to have translations, and register your translation file. For this example, we will use the - mail.component.ts file: -

- -

- - - -

-
- -
-

Changing the language

-

- Changing the current language can happen instantly. Simply call the use method from the - translate service: -

-

- - - -

-

- More detailed usage of the translation service can be found in the toolbar.component.ts - file. -

-
- - -
- -
- diff --git a/src/app/main/documentation/components/multi-language/multi-language.component.scss b/src/app/main/documentation/components/multi-language/multi-language.component.scss deleted file mode 100644 index 48d549ab..00000000 --- a/src/app/main/documentation/components/multi-language/multi-language.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -:host { - - .content{ - max-width: 1100px; - - .warning-box{ - background: #FFFDE7; - border: 1px solid #FFC107; - padding: 16px; - } - } - -} diff --git a/src/app/main/documentation/components/navigation/navigation.component.html b/src/app/main/documentation/components/navigation/navigation.component.html index 01d24bec..76d6f1a9 100644 --- a/src/app/main/documentation/components/navigation/navigation.component.html +++ b/src/app/main/documentation/components/navigation/navigation.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Components
Navigation
@@ -21,16 +23,14 @@ navigation. It has built-in support for translations using ngx-translate module.

-
-

Usage

-

- - - -

-
+
Usage
+

+ + + +

[navigation]

@@ -55,229 +55,327 @@

-
-

Updating the navigation

-

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

+
Alternative usage (preferred)
+

+ An alternative usage to the above one is to using the Navigation Service. 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: +

+ +

+ + + +

+ +

+ Once you register your navigation like this, you no longer need to provide the [navigation] input + while using the fuse-navigation: +

+ +

+ + + +

+ +
Navigation item types
+ +
Grouping
+

+ + + +

+ +
Collapsable
+

+ + + +

+ +
Item
+

+ + + +

+ +
Vertical Navigation Default Folded Status
+

+ It's possible to change the default folded status of the navigation. +

+

+ Find the layout that you want to edit from app/layout/vertical/ directory. Edit the layout's html + file and look for the [folded] attribute on fuse-sidebar components. +

+

+ Assigning true to that attribute will make the vertical navigation folded by default. +

+ +
Updating the navigation
+ +

+ In order to make the runtime modifications easier, it's strongly recommended that to give a unique id + to all of your navigation items. +

+ +
Show / Hide certain navigation items
+ +
+
-
-

Grouping

-

- - - -

+

+ + + +

+ +
Update navigation item on-the-fly
+ +
+
-
-

Collapsable

-

- - - -

+

+ + + +

+ +
Add a subitem to the Calendar nav item
+ +
+
-
-

Item

-

- - - -

+

+ + + +

+ +
Add a nav item with custom function
+ +
+
-
+

+ + + +

-

- It's possible to change the default folded status of the navigation. -

-

- Edit the main.component.html file and look for the [folded] attribute on - fuse-sidebar components. -

-

- Assigning true to that attribute will make the vertical navigation folded by default. -

+
Remove the Dashboards menu item
+
+
-
+

+ + + +

-

Examples

- -

Show / Hide certain navigation items

- -

- - - -

- -
- - - -
- -

Update navigation item on-the-fly

- -

- - - -

- -
- - - -
- -

Add a subitem to the Calendar nav item

- -

- - - -

- -
- - - -
- -

Add a nav item with custom function

- -

- - - -

- -
- - - -
+
Register a new navigation and toggle to it
+
+
+

+ + + +

+
diff --git a/src/app/main/documentation/components/navigation/navigation.component.ts b/src/app/main/documentation/components/navigation/navigation.component.ts index d09ce72b..8b58a1ea 100644 --- a/src/app/main/documentation/components/navigation/navigation.component.ts +++ b/src/app/main/documentation/components/navigation/navigation.component.ts @@ -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'); } } diff --git a/src/app/main/documentation/components/search-bar/search-bar.component.html b/src/app/main/documentation/components/search-bar/search-bar.component.html index 5e8c93a9..84de7f24 100644 --- a/src/app/main/documentation/components/search-bar/search-bar.component.html +++ b/src/app/main/documentation/components/search-bar/search-bar.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Components
Search Bar
@@ -21,26 +23,22 @@ on click.

-
-

Usage

-

- - - -

-
+
Usage
+

+ + + +

-
-

Outputs

-

- input - 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. - -

-
+
Outputs
+

+ input + Triggers every time an input occurs within the search bar. Can be used to trigger the actual + search mechanism. The $event is the value from the search input. + +

diff --git a/src/app/main/documentation/components/shortcuts/shortcuts.component.html b/src/app/main/documentation/components/shortcuts/shortcuts.component.html index 397cb3d1..8efc4f01 100644 --- a/src/app/main/documentation/components/shortcuts/shortcuts.component.html +++ b/src/app/main/documentation/components/shortcuts/shortcuts.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Components
Shortcuts
@@ -21,25 +23,21 @@ the navigation model.

-
-

Usage

-

- - - -

-
+
Usage
+

+ + + +

-
-

Model

-

- <fuse-shortcuts></fuse-shortcuts> uses the same service with navigation - component to populate the shortcuts. It can search the navigation items as well as pin and unpin them as - shortcuts. It uses browser cookies to store the shortcuts. -

-
+
Model
+

+ <fuse-shortcuts></fuse-shortcuts> uses the same service with navigation + component to populate the shortcuts. It can search the navigation items as well as pin and unpin them as + shortcuts. It uses browser cookies to store the shortcuts. +

diff --git a/src/app/main/documentation/components/sidebar/sidebar.component.html b/src/app/main/documentation/components/sidebar/sidebar.component.html index fd9555cf..73863e9b 100644 --- a/src/app/main/documentation/components/sidebar/sidebar.component.html +++ b/src/app/main/documentation/components/sidebar/sidebar.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Components
Sidebar
@@ -21,16 +23,14 @@ only used as the main navigation sidebar but in the future it will allow multiple usages.

-
-

Usage

-

- - - -

-
+
Usage
+

+ + + +

[name]

@@ -47,6 +47,15 @@

+
+

[position]

+

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

+
+

[lockedOpen]

@@ -55,6 +64,22 @@

+
Sidebar Service
+

+ The sidebar service allows you to control the Sidebar's states from anywhere. To access the sidebar, + you need to use the name attribute: +

+

+ + + +

+
diff --git a/src/app/main/documentation/components/widget/widget.component.html b/src/app/main/documentation/components/widget/widget.component.html index dea19925..6d684372 100644 --- a/src/app/main/documentation/components/widget/widget.component.html +++ b/src/app/main/documentation/components/widget/widget.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Components
Widget
@@ -20,91 +22,85 @@ fuse-widget is a custom built Fuse component allows to create flippable widget boxes.

-
-

Sample

+
Sample
+
+ -
- + +
+
+
Widget title
- -
-
-
Widget title
- - -
- -
- Widget Content -
-
- - - -
- - -
- More widget info -
- - -
+
+ Widget Content +
+
+ + + +
+ + +
+ More widget info +
+
+ + +
+
Usage
+

-

-

Usage

-

+ + - + +

+ -

-
+
+ More widget info +
+
+ + + + + + + +

diff --git a/src/app/main/documentation/directives/directives.module.ts b/src/app/main/documentation/directives/directives.module.ts new file mode 100644 index 00000000..77946060 --- /dev/null +++ b/src/app/main/documentation/directives/directives.module.ts @@ -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 +{ +} diff --git a/src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.html b/src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.html new file mode 100644 index 00000000..73ab0ebf --- /dev/null +++ b/src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.html @@ -0,0 +1,40 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Directives +
+ +
fuseIfOnDom
+ +
+ + + +
+ +

+ *fuseIfOnDom 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. +

+ +
Usage
+

+ + + +

+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.scss b/src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.ts b/src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.ts new file mode 100644 index 00000000..387cd5e5 --- /dev/null +++ b/src/app/main/documentation/directives/fuseIfOnDom/fuse-if-on-dom.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.html b/src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.html new file mode 100644 index 00000000..f9256d22 --- /dev/null +++ b/src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.html @@ -0,0 +1,43 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Directives +
+ +
fuseInnerScroll
+ +
+ + + +
+ +

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

+ +

+ This directive will only work with Fuse's pre-built page layouts and it's a class directive. +

+ +
Usage
+

+ + + +

+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.scss b/src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.ts b/src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.ts new file mode 100644 index 00000000..8bef2049 --- /dev/null +++ b/src/app/main/documentation/directives/fuseInnerScroll/fuse-inner-scroll.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.html b/src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.html new file mode 100644 index 00000000..272b5513 --- /dev/null +++ b/src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.html @@ -0,0 +1,72 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Directives +
+ +
fuseMatSidenav
+ +
+ + + +
+ +

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

+ +
Usage
+

+ + + +

+ +
Inputs
+

+ fuseMatSidenavHelper + + A unique name for the sidenav. + +

+

+ mat-is-locked-open + + Adds a locked open functionality just like Angular Material 1.x sidenav. Works with the media step + aliases of the FlexLayout library. + +

+ +
Accessing to the sidebav methods from anywhere
+

+ + + +

+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.scss b/src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.scss new file mode 100644 index 00000000..a6486575 --- /dev/null +++ b/src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.scss @@ -0,0 +1,8 @@ +@import "src/@fuse/scss/fuse"; + +:host { + + code { + white-space: nowrap; + } +} diff --git a/src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.ts b/src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.ts new file mode 100644 index 00000000..05b13b9e --- /dev/null +++ b/src/app/main/documentation/directives/fuseMatSidenav/fuse-mat-sidenav.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.html b/src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.html new file mode 100644 index 00000000..900fd2a4 --- /dev/null +++ b/src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.html @@ -0,0 +1,65 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Directives +
+ +
fusePerfectScrollbar
+ +
+ + + +
+ +

+ fusePerfectScrollbar is an Angular directive for the Perfect Scrollbar library. +

+ +
Usage
+

+ + + +

+ +

+ + + +

+ +
Inputs
+

+ fusePerfectScrollbar + + Accepts an optional boolean which you can control the Perfect Scrollbar. If provided false, Perfect + Scrollbar will be destroyed or won't be initialized. + +

+

+ fusePerfectScrollbarOptions + + Accepts the Perfect + Scrollbar options. In addition to those options, there is also a custom updateOnRouteChange + option which updates the scrollbar on route changes. That's useful if your scrollbar wraps a + router-outlet. + +

+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.scss b/src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.ts b/src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.ts new file mode 100644 index 00000000..66cc507e --- /dev/null +++ b/src/app/main/documentation/directives/fusePerfectScrollbar/fuse-perfect-scrollbar.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/documentation.module.ts b/src/app/main/documentation/documentation.module.ts index 0f308944..8175f6c0 100644 --- a/src/app/main/documentation/documentation.module.ts +++ b/src/app/main/documentation/documentation.module.ts @@ -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' diff --git a/src/app/main/documentation/getting-started/getting-started.module.ts b/src/app/main/documentation/getting-started/getting-started.module.ts new file mode 100644 index 00000000..468df5f7 --- /dev/null +++ b/src/app/main/documentation/getting-started/getting-started.module.ts @@ -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 +{ +} diff --git a/src/app/main/documentation/getting-started/installation/installation.component.html b/src/app/main/documentation/getting-started/installation/installation.component.html new file mode 100644 index 00000000..af428a68 --- /dev/null +++ b/src/app/main/documentation/getting-started/installation/installation.component.html @@ -0,0 +1,150 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Getting Started +
+ +
Installation
+ +
+ + + +
+ +
Prerequisites
+ +

+ This section will give you some information about what tools you will need. You can skip to the + Installation section to start installing the template. We already mentioned all the prerequisites and + how to install them in the Installation section. +

+ + +
Angular CLI
+

+ Fuse uses Angular CLI for quickly + bootstrapping the application. You can check out the link for + more detailed information. +

+ +

+ Simply, Angular CLI is a tool to initialize, develop, scaffold and maintain Angular + applications +

+ + + +
Node.js
+

+ To install and use Fuse, you will need Node.js + 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. +

+ + + +
Git
+

+ To be able to install and use Fuse, you will also need + Git installed to your computer. Git is required for + npm to work correctly. +

+ + + +
Npm - Package Manager
+

+ Fuse uses npm package manager to install and manage 3rd + party components and libraries. +

+ + +
Installation
+ + +
A. Installing Prerequisites
+
    +
  1. + Download and install the latest Node.js from + its web site. +
    2. + +
  2. + Download and install the latest Git from its web + site. +
    3. + +
  3. + To install the Angular CLI: + + Open your favorite console application (Terminal, Command Prompt etc.), run the following command + and wait for it to finish: + +
    + + + +
    +
    4. +
+

+ Now you are ready to install the Fuse. +

+ + + +
B. Installing Fuse
+
    +
  1. + Unzip the zip file that you have downloaded from Themeforest. Inside the zip file, you will find the + Skeleton Project (Fuse-x.x.x-skeleton.zip) along with the Demo Project (Fuse-x.x.x-demo.zip), + PSD designs and a readme file. +
    2. +
  2. + 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. +
    3. +
  3. + Extract the contents of the zip file (Fuse-x.x.x-skeleton.zip) into a folder that you will + work within. For this documentation, we will refer that as "your work folder". +
    4. +
  4. + Open your favorite console application (Terminal, Command Prompt etc.), navigate into your work + folder, run the following command and wait for it to finish: + +
    + + + +
    + +

    + This command will install all the required Node.js modules into the node_modules + directory inside your work folder. +

    +
    5. + +

    + And now, you are ready to run the Fuse for the first time. Please continue to the + Working with Fuse section. +

    +
+ + +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/getting-started/installation/installation.component.scss b/src/app/main/documentation/getting-started/installation/installation.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/getting-started/installation/installation.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/getting-started/installation/installation.component.ts b/src/app/main/documentation/getting-started/installation/installation.component.ts new file mode 100644 index 00000000..198c03d4 --- /dev/null +++ b/src/app/main/documentation/getting-started/installation/installation.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/getting-started/introduction/introduction.component.html b/src/app/main/documentation/getting-started/introduction/introduction.component.html new file mode 100644 index 00000000..79244474 --- /dev/null +++ b/src/app/main/documentation/getting-started/introduction/introduction.component.html @@ -0,0 +1,71 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Getting Started +
+ +
Introduction
+ +
+ + + +
+ +

+ This version of Fuse is NOT a traditional admin template, it's an Angular app written entirely + with Typescript and has no jQuery dependency. +

+

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

+

+ Here you can find a list of core libraries, design specifications and coding standards that we use in Fuse: +

+ + +
Google's Material Design
+

+ All libraries and custom made components are following Google's Material Design Specifications. +

+ + + +
Angular
+

+ Angular is the core of Fuse. +

+ + + +
Angular Material
+

+ Angular Material 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. +

+ + + +
CLI tool for Angular
+

+ The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications. + You can find more information about at: + angular-cli +

+ + +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/getting-started/introduction/introduction.component.scss b/src/app/main/documentation/getting-started/introduction/introduction.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/getting-started/introduction/introduction.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/getting-started/introduction/introduction.component.ts b/src/app/main/documentation/getting-started/introduction/introduction.component.ts new file mode 100644 index 00000000..c23d2cc3 --- /dev/null +++ b/src/app/main/documentation/getting-started/introduction/introduction.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/services/config/config.component.html b/src/app/main/documentation/services/config/config.component.html index daef5bdd..0cf9153b 100644 --- a/src/app/main/documentation/services/config/config.component.html +++ b/src/app/main/documentation/services/config/config.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Services
Config
@@ -17,58 +19,65 @@

- Config is a custom built Fuse service allows to have a granule control over the Fuse. It can be - used for changing theme options (layout, color etc.) by component basis. + Config 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.

-
-

Usage

+
Usage

- - - + onInit() + { + // Subscribe to config change + this._fuseConfigService.config + .subscribe((config) => { + this.config = config; + }); + } + } -

-
+ + + +

diff --git a/src/app/main/documentation/services/splash-screen/splash-screen.component.html b/src/app/main/documentation/services/splash-screen/splash-screen.component.html index 87f7444b..f35a2e70 100644 --- a/src/app/main/documentation/services/splash-screen/splash-screen.component.html +++ b/src/app/main/documentation/services/splash-screen/splash-screen.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,6 +6,8 @@
home chevron_right + Documentation + chevron_right Services
Splash Screen
@@ -17,33 +19,35 @@

- Splash screen is a custom built Fuse service allows to have a fully controllable splash - screen. It also has built state for application loading so it will always be available while the app - loads. + Splash screen is a custom Fuse service that allows to have a control on the splash screen.

-
-

Usage

-

+

Usage
+

- - - + + -

-
+

diff --git a/src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.html b/src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.html new file mode 100644 index 00000000..13e43310 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.html @@ -0,0 +1,76 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Working with Fuse +
+ +
Directory Structure
+ +
+ + + +
+ +

+ Fuse has a fairly simple directory structure. All source code that you will need stays inside the + /src folder. +

+ +

+ Once you build your app, a /dist 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. +

+ +
Source directory (/src)
+ +

+ The source folder has the general Angular CLI project structure along with an additional folder called + /@fuse which contains the core elements of the Fuse. +

+ +

+ We recommend you not to touch /@fuse directory to easily update Fuse in the future. +

+ +
/app
+ +

+ This folder contains the AppComponent 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: +

+ +
    +
  • + /fake-db: The fake database data files for Fuse apps. +
    • +
  • + /fuse-config: The main config file for configuring the Fuse template. +
    • +
  • + /layout: Contains the template layout components. +
    • +
  • + /main: Example Fuse apps and ready to use pages and page layouts. +
    • +
  • + /navigation: The main navigation data. +
    • +
  • + /store: Ngrx-Mail app related store files. +
    • + +
+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.scss b/src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.ts b/src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.ts new file mode 100644 index 00000000..2c9bc53b --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/directory-structure/directory-structure.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.html b/src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.html new file mode 100644 index 00000000..85e34985 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.html @@ -0,0 +1,129 @@ +
+ + +
+
+
+ home + chevron_right + Components +
+
Multi Language
+
+
+ + + +
+ +

+ Fuse uses ngx-translate + module and supports multiple languages and translations. +

+ +

+ 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 + Mail app and then change the language from the Toolbar. +

+ Mail app is the only app that has translations for demonstration purposes. You can look at its source code + to see the usage. +

+ +
Usage
+

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 i18n/en.ts file inside the + apps/mail folder. +

+

+ The structure of the translation file is important and it must define the language id along with the + translation data: +

+ +

+ + + +

+ +

+ After you create your translation files, open the *.component.ts file for the module you + want to have translations, and register your translation file. For this example, we will use the + mail.component.ts file: +

+ + + + + +
Changing the language
+ +

+ Changing the current language can happen instantly. Simply call the use method from the + translate service: +

+ + + + + +

+ More detailed usage of the translation service can be found in the toolbar.component.ts + file. +

+ +
+ +
diff --git a/src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.scss b/src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.scss new file mode 100644 index 00000000..32c65c8c --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.scss @@ -0,0 +1,3 @@ +:host { + +} diff --git a/src/app/main/documentation/components/multi-language/multi-language.component.ts b/src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.ts similarity index 67% rename from src/app/main/documentation/components/multi-language/multi-language.component.ts rename to src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.ts index f12c82e7..d7bf7534 100644 --- a/src/app/main/documentation/components/multi-language/multi-language.component.ts +++ b/src/app/main/documentation/working-with-fuse/multi-language/multi-language.component.ts @@ -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 diff --git a/src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.html b/src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.html new file mode 100644 index 00000000..0a1197ac --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.html @@ -0,0 +1,62 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Working with Fuse +
+ +
Page Layouts
+ +
+ + + +
+ +

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

+ +

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

+ +
Identifying a Page Layout
+ +

+ 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: +

+ + + + + +

+ The above example is using the carded style page with a left sidebar setup which can be found + in /ui/page-layouts/carded/left-sidebar-1 directory. +

+ +

+ The numbers in the folder names represents the scrolling style of that particular page layout. For example, + left-sidebar-1 has the exact same layout with left-sidebar-2 but the former one uses + a single scrollbar while the latter one uses separate scrollbars for its content and its sidebar. +

+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.scss b/src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.ts b/src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.ts new file mode 100644 index 00000000..070eb224 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/page-layouts/page-layouts.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/working-with-fuse/production/production.component.html b/src/app/main/documentation/working-with-fuse/production/production.component.html new file mode 100644 index 00000000..bca476a4 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/production/production.component.html @@ -0,0 +1,143 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Working with Fuse +
+ +
Production
+ +
+ + + +
+ + +
Build
+ +

+ The following command builds the application into an output directory +

+ +
+ + + +
+ +

+ The build artifacts will be stored in the /dist directory. All commands that build or serve your + project, will delete the output directory. +

+ +
Bundling & Tree-Shaking (AoT)
+ +

+ To build your app with AoT (Ahead of Time) compiler, use the following command: +

+
+ + + +
+

+ or if you want to serve with AoT, use the following: +

+
+ + + +
+

+ This will make use of uglifying and tree-shaking functionality while serving the app from + the memory. +

+ +
Alternative AoT compiler
+ +

+ If you happen to stumble upon an error while running the +

+
+ + + +
+

+ command, there is an alternative one that you can use. The following command will run the ng build + --prod command with an increased memory size so your app can be built: +

+
+ + + +
+ + + +
Running unit tests
+ +
+ + + +
+

+ Tests will execute after a build is executed via + Karma, and it will automatically + watch your files for changes. +

+

+ You can run tests a single time via + --watch=false + or + --single-run +

+ + + +
Running end-to-end tests
+
+ + + +
+

+ Before running the tests make sure you are serving the app via + ng serve. + + End-to-end tests are run via Protractor. +

+ + +

+ For more information about angular-cli commands, check the angular-cli. +

+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/working-with-fuse/production/production.component.scss b/src/app/main/documentation/working-with-fuse/production/production.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/production/production.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/working-with-fuse/production/production.component.ts b/src/app/main/documentation/working-with-fuse/production/production.component.ts new file mode 100644 index 00000000..26254ab8 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/production/production.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/working-with-fuse/server/server.component.html b/src/app/main/documentation/working-with-fuse/server/server.component.html new file mode 100644 index 00000000..081ee2c4 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/server/server.component.html @@ -0,0 +1,79 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Working with Fuse +
+ +
Server
+ +
+ + + +
+ + +
Server
+

+ While still in your work folder, run the following command in the console application: +

+ +
+ + + +
+ +

+ And that's it. Angular CLI will take care everything and start the Fuse. +

+ +

+ You can check out your console application to get further information about the server. By default, it + will run on http://localhost:4200 but it might change depending on your setup. +

+ +

+ 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 + package.json + file. +

+ + + +
Reloading the Server
+

+ The + ng serve + 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 Ctrl + + C on your keyboard while in the console application and then run the following command once again: +

+
+ + + +
+ + +

+ For more information about angular-cli commands, check the + angular-cli. +

+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/working-with-fuse/server/server.component.scss b/src/app/main/documentation/working-with-fuse/server/server.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/server/server.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/working-with-fuse/server/server.component.ts b/src/app/main/documentation/working-with-fuse/server/server.component.ts new file mode 100644 index 00000000..494254a0 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/server/server.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.html b/src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.html new file mode 100644 index 00000000..ddc128f0 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.html @@ -0,0 +1,72 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Working with Fuse +
+ +
Theme Layouts
+ +
+ + + +
+ +

+ 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 /src/app/layouts directory and you can modify them however you like. +

+ +

+ Each layout has its own options. Those options allow you to configure the layout elements such as Toolbar, + Footer and Navbar. +

+ +
Directory Structure
+ +

+ Inside the /layouts directory, you will find the following structure: +

+ +
    +
  • + /components: Contains the layout elements such as Toolbar, Footer and Navbar. +
    • +
  • + /vertical: Contains the layout styles with vertical navigation option. +
    • +
  • + /horizontal: Contains the layout styles with horizontal navigation option. +
    • +
+ +

+ Each layout loads the layout elements from /components directory. That means, any modifications + you will make to those elements, will be avilable acrosss the layouts. +

+ +
Configuring the Layout
+ +

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

+ +

+ You can get more information about the Fuse Config Service and its usage from + Config documantation page. +

+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.scss b/src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.ts b/src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.ts new file mode 100644 index 00000000..d71fc742 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.html b/src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.html new file mode 100644 index 00000000..2fa9c61c --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.html @@ -0,0 +1,52 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Working with Fuse +
+ +
Updating Fuse
+ +
+ + + +
+ +

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

+ +
    +
  • + The most important one is not to touch the /@fuse directory but sometimes that is going to be + inevitable and in those cases, try to keep the modifications minimal. +
    • + +
  • + 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. +
    • + +
  • + Before starting your new project, join our Github repo, 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. +
    • +
+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.scss b/src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.ts b/src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.ts new file mode 100644 index 00000000..7afffa00 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component.ts @@ -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() + { + } +} diff --git a/src/app/main/documentation/working-with-fuse/working-with-fuse.module.ts b/src/app/main/documentation/working-with-fuse/working-with-fuse.module.ts new file mode 100644 index 00000000..394a3563 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/working-with-fuse.module.ts @@ -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 +{ +} diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index e963c685..ef1c8c09 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -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',