(docs) Updated the docs to reflect the latest changes

This commit is contained in:
sercan 2021-06-09 10:22:18 +03:00
parent 945d0a2240
commit 66096718e0
21 changed files with 273 additions and 53 deletions

View File

@ -0,0 +1,107 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Header -->
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
<div class="flex-1 min-w-0">
<!-- Breadcrumbs -->
<div class="flex flex-wrap items-center font-medium">
<div>
<a class="whitespace-nowrap text-primary-500">Documentation</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<a class="ml-1 text-primary-500">Core Features</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<span class="ml-1 text-secondary">Components</span>
</div>
</div>
<!-- Title -->
<div class="mt-2">
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
Fullscreen
</h2>
</div>
</div>
<button
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
mat-icon-button
(click)="toggleDrawer()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button>
</div>
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
<p>
<strong>fuse-fullscreen</strong> is a small component that toggles the fullscreen on and off.
</p>
<p>
<strong>Exported as: </strong><code>fuseFullscreen</code>
</p>
<h2>Module</h2>
<textarea
fuse-highlight
lang="typescript">
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
</textarea>
<h2>Usage</h2>
<p>
Here's the basic usage of the <code>fuse-fullscreen</code>:
</p>
<!-- @formatter:off -->
<textarea fuse-highlight
lang="html">
&lt;fuse-fullscreen&gt;&lt;/fuse-fullscreen&gt;
</textarea>
<!-- @formatter:on -->
<h2>Properties</h2>
<div class="bg-card py-3 px-6 rounded shadow">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-mono text-md text-secondary">
<div>@Input()</div>
<div>iconTpl: TemplateRef&lt;any&gt;</div>
</td>
<td>
Template reference for the icon.
</td>
<td>
-
</td>
</tr>
<tr>
<td class="font-mono text-md text-secondary">
<div>@Input()</div>
<div>tooltip: string</div>
</td>
<td>
Tooltip of the toggle button.
</td>
<td>
'Toggle Fullscreen'
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

View File

@ -0,0 +1,30 @@
import { Component } from '@angular/core';
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
@Component({
selector : 'fullscreen',
templateUrl: './fullscreen.component.html',
styles : ['']
})
export class FullscreenComponent
{
/**
* Constructor
*/
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle the drawer
*/
toggleDrawer(): void
{
// Toggle the drawer
this._coreFeaturesComponent.matDrawer.toggle();
}
}

View File

@ -49,7 +49,7 @@
<textarea
fuse-highlight
lang="typescript">
import { FuseHighlightModule } from '@fuse/components/drawer';
import { FuseHighlightModule } from '@fuse/components/highlight';
</textarea>
<h2>Usage</h2>

View File

@ -71,6 +71,12 @@ export class CoreFeaturesComponent implements OnInit, OnDestroy
type : 'basic',
link : '/docs/core-features/components/drawer'
},
{
id : 'core-features.components.fullscreen',
title: 'Fullscreen',
type : 'basic',
link : '/docs/core-features/components/fullscreen'
},
{
id : 'core-features.components.highlight',
title: 'Highlight',

View File

@ -20,6 +20,7 @@ import { AlertComponent } from 'app/modules/admin/docs/core-features/components/
import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component';
import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component';
import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component';
import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
@ -40,6 +41,7 @@ import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-fe
CardComponent,
DateRangeComponent,
DrawerComponent,
FullscreenComponent,
HighlightComponent,
MasonryComponent,
NavigationComponent,

View File

@ -5,6 +5,7 @@ import { AlertComponent } from 'app/modules/admin/docs/core-features/components/
import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component';
import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component';
import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component';
import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
@ -59,6 +60,10 @@ export const coreFeaturesRoutes: Route[] = [
path : 'drawer',
component: DrawerComponent
},
{
path : 'fullscreen',
component: FullscreenComponent
},
{
path : 'highlight',
component: HighlightComponent

View File

@ -0,0 +1,57 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Header -->
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
<div class="flex-1 min-w-0">
<!-- Breadcrumbs -->
<div class="flex flex-wrap items-center font-medium">
<div>
<a class="whitespace-nowrap text-primary-500">Documentation</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<a class="ml-1 text-primary-500">Other Components</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<span class="ml-1 text-secondary">Common</span>
</div>
</div>
<!-- Title -->
<div class="mt-2">
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
Languages
</h2>
</div>
</div>
<button
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
mat-icon-button
(click)="toggleDrawer()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button>
</div>
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
<p>
This component can be used for changing the language and managing the side effects of changing the active language such as updating the navigation.
</p>
<h2>Usage</h2>
<p>
Here's the basic usage of the component:
</p>
<textarea
fuse-highlight
lang="html">
<language></language>
</textarea>
</div>
</div>

View File

@ -2,11 +2,10 @@ import { Component } from '@angular/core';
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
@Component({
selector : 'user-menu',
templateUrl: './user-menu.component.html',
styles : ['']
selector : 'languages',
templateUrl: './languages.component.html'
})
export class UserMenuComponent
export class LanguagesComponent
{
/**
* Constructor

View File

@ -52,13 +52,10 @@
</ul>
<h2>Usage</h2>
<p>
The component only has one input to supply the messages:
</p>
<textarea
fuse-highlight
lang="html">
<messages [messages]="data.messages"></messages>
<messages></messages>
</textarea>
<h2>Message</h2>
@ -184,16 +181,15 @@
</div>
<div class="bg-card rounded shadow mt-4">
<div class="px-6 py-3 font-mono text-secondary border-b">
store(messages: Message[])
getAll(): Observable&lt;Message[]&gt;
</div>
<div class="p-6">
Store messages on the service. This will replace the current messages and can be used as an alternative to <em>messages</em> input of the
component.
Get all messages from the server.
</div>
</div>
<div class="bg-card rounded shadow mt-4">
<div class="px-6 py-3 font-mono text-secondary border-b">
create(message: Message): Observable&lt;Messages&gt;
create(message: Message): Observable&lt;Message&gt;
</div>
<div class="p-6">
Create a new message on the server.

View File

@ -4,7 +4,6 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component
@Component({
selector : 'messages',
templateUrl: './messages.component.html',
styles : ['']
})
export class MessagesComponent
{

View File

@ -52,13 +52,10 @@
</ul>
<h2>Usage</h2>
<p>
The component only has one input to supply the notifications:
</p>
<textarea
fuse-highlight
lang="html">
<notifications [notifications]="data.notifications"></notifications>
<notifications></notifications>
</textarea>
<h2>Notification</h2>
@ -184,16 +181,15 @@
</div>
<div class="bg-card rounded shadow mt-4">
<div class="px-6 py-3 font-mono text-secondary border-b">
store(notifications: Notification[])
getAll(): Observable&lt;Notification[]&gt;
</div>
<div class="p-6">
Store notifications on the service. This will replace the current notifications and can be used as an alternative to <em>notifications</em> input of the
component.
Get all notifications from the server.
</div>
</div>
<div class="bg-card rounded shadow mt-4">
<div class="px-6 py-3 font-mono text-secondary border-b">
create(notification: Notification): Observable&lt;Notifications&gt;
create(notification: Notification): Observable&lt;Notification&gt;
</div>
<div class="p-6">
Create a new notification on the server.

View File

@ -4,7 +4,6 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component
@Component({
selector : 'notifications',
templateUrl: './notifications.component.html',
styles : ['']
})
export class NotificationsComponent
{

View File

@ -76,7 +76,7 @@
<p>A user customizable panel to show shortcuts to internal/external pages.</p>
</li>
<li>
<p><strong>User Menu</strong></p>
<p><strong>User</strong></p>
<p>A user avatar and menu component to show user related information and actions.</p>
</li>
</ul>

View File

@ -3,8 +3,7 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component
@Component({
selector : 'search',
templateUrl: './search.component.html',
styles : ['']
templateUrl: './search.component.html'
})
export class SearchComponent
{

View File

@ -44,13 +44,10 @@
</p>
<h2>Usage</h2>
<p>
The component only has one input to supply the shortcuts:
</p>
<textarea
fuse-highlight
lang="html">
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<shortcuts></shortcuts>
</textarea>
<h2>Message</h2>
@ -149,16 +146,15 @@
</div>
<div class="bg-card rounded shadow mt-4">
<div class="px-6 py-3 font-mono text-secondary border-b">
store(shortcuts: Shortcut[])
getAll(): Observable&lt;Shortcut[]&gt;
</div>
<div class="p-6">
Store shortcuts on the service. This will replace the current shortcuts and can be used as an alternative to <em>shortcuts</em> input of the
component.
Get all shortcuts from the server.
</div>
</div>
<div class="bg-card rounded shadow mt-4">
<div class="px-6 py-3 font-mono text-secondary border-b">
create(shortcut: Shortcut): Observable&lt;Shortcuts&gt;
create(shortcut: Shortcut): Observable&lt;Shortcut&gt;
</div>
<div class="p-6">
Create a new shortcut on the server.

View File

@ -4,7 +4,6 @@ import { OtherComponentsComponent } from 'app/modules/admin/docs/other-component
@Component({
selector : 'shortcuts',
templateUrl: './shortcuts.component.html',
styles : ['']
})
export class ShortcutsComponent
{

View File

@ -24,7 +24,7 @@
<!-- Title -->
<div class="mt-2">
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
User Menu
User
</h2>
</div>
</div>
@ -49,7 +49,7 @@
<textarea
fuse-highlight
lang="html">
<user-menu [user]="data.user"></user-menu>
<user></user>
</textarea>
<h2>Properties</h2>
@ -75,18 +75,6 @@
<code class="whitespace-nowrap">true</code>
</td>
</tr>
<tr>
<td class="font-mono text-md text-secondary">
<div>@Input()</div>
<div>user: User</div>
</td>
<td>
The user data.
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>

View File

@ -0,0 +1,29 @@
import { Component } from '@angular/core';
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
@Component({
selector : 'user',
templateUrl: './user.component.html'
})
export class UserComponent
{
/**
* Constructor
*/
constructor(private _otherComponentsComponent: OtherComponentsComponent)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle the drawer
*/
toggleDrawer(): void
{
// Toggle the drawer
this._otherComponentsComponent.matDrawer.toggle();
}
}

View File

@ -41,6 +41,12 @@ export class OtherComponentsComponent implements OnInit, OnDestroy
type : 'basic',
link : '/docs/other-components/common/overview'
},
{
id : 'common.languages',
title: 'Languages',
type : 'basic',
link : '/docs/other-components/common/languages'
},
{
id : 'common.messages',
title: 'Messages',

View File

@ -10,11 +10,12 @@ import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
import { SharedModule } from 'app/shared/shared.module';
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
import { OverviewComponent } from 'app/modules/admin/docs/other-components/common/overview/overview.component';
import { LanguagesComponent } from 'app/modules/admin/docs/other-components/common/languages/languages.component';
import { MessagesComponent } from 'app/modules/admin/docs/other-components/common/messages/messages.component';
import { NotificationsComponent } from 'app/modules/admin/docs/other-components/common/notifications/notifications.component';
import { SearchComponent } from 'app/modules/admin/docs/other-components/common/search/search.component';
import { ShortcutsComponent } from 'app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component';
import { UserMenuComponent } from 'app/modules/admin/docs/other-components/common/user-menu/user-menu.component';
import { UserComponent } from 'app/modules/admin/docs/other-components/common/user/user.component';
import { ApexChartsComponent } from 'app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component';
import { FullCalendarComponent } from 'app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component';
import { NgxMarkdownComponent } from 'app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component';
@ -25,11 +26,12 @@ import { otherComponentsRoutes } from 'app/modules/admin/docs/other-components/o
declarations: [
OtherComponentsComponent,
OverviewComponent,
LanguagesComponent,
MessagesComponent,
NotificationsComponent,
SearchComponent,
ShortcutsComponent,
UserMenuComponent,
UserComponent,
ApexChartsComponent,
FullCalendarComponent,
NgxMarkdownComponent,

View File

@ -1,11 +1,12 @@
import { Route } from '@angular/router';
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
import { OverviewComponent } from 'app/modules/admin/docs/other-components/common/overview/overview.component';
import { LanguagesComponent } from 'app/modules/admin/docs/other-components/common/languages/languages.component';
import { MessagesComponent } from 'app/modules/admin/docs/other-components/common/messages/messages.component';
import { NotificationsComponent } from 'app/modules/admin/docs/other-components/common/notifications/notifications.component';
import { SearchComponent } from 'app/modules/admin/docs/other-components/common/search/search.component';
import { ShortcutsComponent } from 'app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component';
import { UserMenuComponent } from 'app/modules/admin/docs/other-components/common/user-menu/user-menu.component';
import { UserComponent } from 'app/modules/admin/docs/other-components/common/user/user.component';
import { ApexChartsComponent } from 'app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component';
import { FullCalendarComponent } from 'app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component';
import { NgxMarkdownComponent } from 'app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component';
@ -33,6 +34,10 @@ export const otherComponentsRoutes: Route[] = [
path : 'overview',
component: OverviewComponent
},
{
path : 'languages',
component: LanguagesComponent
},
{
path : 'messages',
component: MessagesComponent
@ -51,7 +56,7 @@ export const otherComponentsRoutes: Route[] = [
},
{
path : 'user',
component: UserMenuComponent
component: UserComponent
}
]
},