Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: adds links to headers #1260

Merged
merged 6 commits into from
Sep 17, 2019
Merged

docs: adds links to headers #1260

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
11f39f6
#1182: adds links to headers
stefanoScalzo Sep 12, 2019
ddd8aee
changed to docs-section-title and removed from other components
stefanoScalzo Sep 13, 2019
dcd5a27
removed the 29 edits
stefanoScalzo Sep 13, 2019
56a5a58
resolve conflict
stefanoScalzo Sep 16, 2019
3b9578f
removed excess code and resolved conflicts
stefanoScalzo Sep 16, 2019
f875f9c
fixed spacing in between h2 and separator
stefanoScalzo Sep 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions apps/docs/src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,7 @@ import typescript from 'highlight.js/lib/languages/typescript';
import xml from 'highlight.js/lib/languages/xml';

export function hljsLanguages() {
return [
{name: 'typescript', func: typescript},
{name: 'scss', func: scss},
{name: 'html', func: xml},
];
return [{ name: 'typescript', func: typescript }, { name: 'scss', func: scss }, { name: 'html', func: xml }];
}

const routes: Routes = [
Expand All @@ -27,7 +23,10 @@ const routes: Routes = [
declarations: [AppComponent],
imports: [
BrowserAnimationsModule,
RouterModule.forRoot(routes),
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled'
}),
HttpClientModule,
MarkdownModule.forRoot({ loader: HttpClient }),
HighlightModule.forRoot({ languages: hljsLanguages })
Expand Down
60 changes: 30 additions & 30 deletions apps/docs/src/app/documentation/component-docs/action-bar/action-bar-docs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,62 @@
<h2>Action bar with back button, description and action buttons</h2>
<fd-docs-section-title [id]="'actionbar-standard'" [componentName]="'action-bar'">
Action bar with back button, description and action buttons
</fd-docs-section-title>
<description>
Standard action bar which will likely fit most use cases.
Standard action bar which will likely fit most use cases.
</description>
<component-example [name]="'ex1'">
<fd-action-bar-back-example></fd-action-bar-back-example>
<fd-action-bar-back-example></fd-action-bar-back-example>
</component-example>
<code-example [exampleFiles]="backButtonExample"></code-example>

<separator></separator>



<h2>Action bar with long page title</h2>
<fd-docs-section-title [id]="'actionBar-longPageTitle'" [componentName]="'action-bar'">
Action bar with long page title
</fd-docs-section-title>
<description>
Display a page title. If the page title is a long string, it must truncate and display ellipsis after it crosses the
width of the title bar.
Display a page title. If the page title is a long string, it must truncate and display ellipsis after it crosses the
width of the title bar.
</description>
<component-example [name]="'ex2'">
<fd-action-bar-long-string-title-truncation-example></fd-action-bar-long-string-title-truncation-example>
<fd-action-bar-long-string-title-truncation-example></fd-action-bar-long-string-title-truncation-example>
</component-example>
<code-example [exampleFiles]="titleTruncationExample"></code-example>

<separator></separator>




<h2>Action bar with main actions and no Back button</h2>
<fd-docs-section-title [id]="'actionBar-MA_noBack'" [componentName]="'action-bar'">
Action bar with main actions and no Back button
</fd-docs-section-title>
<description>
Display main actions within the Action bar. This allows for users to find important page actions in a
consistent area no matter what page they are on within the application.
Display main actions within the Action bar. This allows for users to find important page actions in a consistent
area no matter what page they are on within the application.
</description>
<component-example [name]="'ex3'">
<fd-action-bar-no-back-example></fd-action-bar-no-back-example>
<fd-action-bar-no-back-example></fd-action-bar-no-back-example>
</component-example>
<code-example [exampleFiles]="noBackButtonExample"></code-example>

<separator></separator>

<h2>Several Main Actions in a Contextual Menu</h2>
<fd-docs-section-title [id]="'actionBar-MA'" [componentName]="'action-bar'">
Several Main Actions in a Contextual Menu
</fd-docs-section-title>
<description>
When there are several main actions for a page, consider displaying them under a contextual menu.
This allows the user to look in the same position they are used to but avoids cluttering the action bar with more than
3-4 actions.
This also works well for a responsive/adaptive application.
When there are several main actions for a page, consider displaying them under a contextual menu. This allows the
user to look in the same position they are used to but avoids cluttering the action bar with more than 3-4 actions.
This also works well for a responsive/adaptive application.
</description>
<component-example [name]="'ex4'">
<fd-action-bar-contextual-menu-example></fd-action-bar-contextual-menu-example>
<fd-action-bar-contextual-menu-example></fd-action-bar-contextual-menu-example>
</component-example>
<code-example [exampleFiles]="actionsContextualMenuHtml"></code-example>

<separator></separator>

<h2>Action bar mobile view</h2>
<fd-docs-section-title [id]="'actionBar-Mobile'" [componentName]="'action-bar'">
Action bar mobile view
</fd-docs-section-title>
<description>
The action bar has an alternate way of displaying which is much more appropriate for mobile users.
The action bar has an alternate way of displaying which is much more appropriate for mobile users.
</description>
<component-example [name]="'ex5'">
<fd-action-bar-mobile-example></fd-action-bar-mobile-example>
<fd-action-bar-mobile-example></fd-action-bar-mobile-example>
</component-example>
<code-example [exampleFiles]="mobileViewHtml"></code-example>
<code-example [exampleFiles]="mobileViewHtml"></code-example>
73 changes: 46 additions & 27 deletions apps/docs/src/app/documentation/component-docs/action-bar/action-bar-docs.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,60 @@
import { Component } from '@angular/core';
import { Component, ViewChildren, ElementRef, QueryList, OnInit, AfterViewInit } from '@angular/core';

import * as backButtonExample from '!raw-loader!./examples/action-bar-back-example.component.html';
import * as titleTruncationExample from '!raw-loader!./examples/action-bar-long-string-title-truncation-example.component.html';
import * as contextualMenuExample from '!raw-loader!./examples/action-bar-contextual-menu-example.component.html';
import * as mobileExample from '!raw-loader!./examples/action-bar-mobile-example.component.html';
import * as noBackButtonExample from '!raw-loader!./examples/action-bar-no-back-example.component.html';
import { ExampleFile } from '../../core-helpers/code-example/example-file';
import { DocsSectionTitleComponent } from '../../core-helpers/docs-section-title/docs-section-title.component';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-toolbar',
templateUrl: './action-bar-docs.component.html',
styleUrls: ['action-bar-docs.component.scss']
})
export class ActionBarDocsComponent {

backButtonExample: ExampleFile[] = [{
language: 'html',
code: backButtonExample
}];

titleTruncationExample: ExampleFile[] = [{
language: 'html',
code: titleTruncationExample
}]

noBackButtonExample: ExampleFile[] = [{
language: 'html',
code: noBackButtonExample
}];

actionsContextualMenuHtml: ExampleFile[] = [{
language: 'html',
code: contextualMenuExample
}];

mobileViewHtml: ExampleFile[] = [{
language: 'html',
code: mobileExample
}];
export class ActionBarDocsComponent implements OnInit {
backButtonExample: ExampleFile[] = [
{
language: 'html',
code: backButtonExample
}
];

titleTruncationExample: ExampleFile[] = [
{
language: 'html',
code: titleTruncationExample
}
];

noBackButtonExample: ExampleFile[] = [
{
language: 'html',
code: noBackButtonExample
}
];

actionsContextualMenuHtml: ExampleFile[] = [
{
language: 'html',
code: contextualMenuExample
}
];

mobileViewHtml: ExampleFile[] = [
{
language: 'html',
code: mobileExample
}
];
private fragment: any;
@ViewChildren(DocsSectionTitleComponent, { read: ElementRef }) myList: QueryList<ElementRef>;

constructor(private route: ActivatedRoute) {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @stefanoScalzo, please remove these leftovers.


ngOnInit() {}


}
61 changes: 35 additions & 26 deletions apps/docs/src/app/documentation/component-docs/alert/alert-docs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
<h2>Alert Types</h2>
<description>A number of alert types are available. They offer preset styling for different contextual situations.</description>
<fd-docs-section-title [id]="'alert-types'" [componentName]="'alert'">
Alert Types
</fd-docs-section-title>
<description
>A number of alert types are available. They offer preset styling for different contextual situations.</description
>
<component-example [name]="'ex1'">
<fd-alert-example></fd-alert-example>
<fd-alert-example></fd-alert-example>
</component-example>
<code-example [exampleFiles]="alertBasicExample"></code-example>

<separator></separator>

<h2>Alert as Overlay</h2>
<fd-docs-section-title [id]="'alert-overlay'" [componentName]="'alert'">
Alert as Overlay
</fd-docs-section-title>
<description>
The <code>AlertService</code> is available for injection and handles most of the work for this usage. It accepts a component type, a template ref or a string as the alert content.
If a component is provided as content, it should be added to the <code>entryComponents</code> of your application.
The <code>AlertService</code> is available for injection and handles most of the work for this usage. It accepts a
component type, a template ref or a string as the alert content. If a component is provided as content, it should be
added to the <code>entryComponents</code> of your application.
</description>
<component-example [name]="'ex2'">
<fd-alert-component-as-content-example></fd-alert-component-as-content-example>
Expand All @@ -19,11 +25,11 @@ <h2>Alert as Overlay</h2>

<separator></separator>

<h2>Inline Alert</h2>
<description>
To make use of inputs such as <code>mousePersist</code> and <code>duration</code> in an inline alert, a call to the alert <code>open()</code> method is required.
Otherwise, the alert will simply be shown without any complex behaviour.
<br /><br />
<fd-docs-section-title [id]="'alert-inline'" [componentName]="'alert'"> Inline Alert </fd-docs-section-title
><description>
To make use of inputs such as <code>mousePersist</code> and <code>duration</code> in an inline alert, a call to the
alert <code>open()</code> method is required. Otherwise, the alert will simply be shown without any complex
behaviour. <br /><br />
Note that inline alerts are not removed from the dom.
</description>
<component-example [name]="'ex3'">
Expand All @@ -33,33 +39,36 @@ <h2>Inline Alert</h2>

<separator></separator>

<h2>Alert with Customizable Width</h2>
<description>
Alert width can be customized by adding the <code>[width]</code> attribute on the selector.
</description>
<fd-docs-section-title [id]="'alert-customizableWidth'" [componentName]="'alert'">
Alert with Customizable Width
</fd-docs-section-title>
<description> Alert width can be customized by adding the <code>[width]</code> attribute on the selector. </description>
<component-example [name]="'ex4'">
<fd-alert-width-example></fd-alert-width-example>
</component-example>
<code-example [exampleFiles]="alertWidthExample"></code-example>

<separator></separator>

<playground [schema]="schema"
[schemaInitialValues]="data"
(onFormChanges)="onSchemaValues($event)">
<fd-alert style="transition: 0.25s all ease-in-out;"
[type]="data.modifier.type"
[dismissible]="data.properties.dismissible"
[width]="data.properties.width"
[message]="data.properties.message">
<playground [schema]="schema" [schemaInitialValues]="data" (onFormChanges)="onSchemaValues($event)">
<fd-alert
style="transition: 0.25s all ease-in-out;"
[type]="data.modifier.type"
[dismissible]="data.properties.dismissible"
[width]="data.properties.width"
[message]="data.properties.message"
>
</fd-alert>
<fd-alert #alert style="display: none; margin-top: 12px; transition: 0.25s all ease-in-out;"
<fd-alert
#alert
style="display: none; margin-top: 12px; transition: 0.25s all ease-in-out;"
[type]="data.modifier.type"
[dismissible]="data.properties.dismissible"
[width]="data.properties.width"
[message]="data.properties.message"
[duration]="data.properties.duration"
[mousePersist]="data.properties.mousePersist">
[mousePersist]="data.properties.mousePersist"
>
</fd-alert>
<button style="margin-top: 12px;" fd-button (click)="alert.open()">Open Dynamic Alert</button>
</playground>
40 changes: 25 additions & 15 deletions apps/docs/src/app/documentation/component-docs/alert/alert-docs.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Component } from '@angular/core';
import { Component, OnInit, AfterViewInit, ViewChild, QueryList, ViewChildren, ElementRef } from '@angular/core';
import { Schema } from '../../../schema/models/schema.model';
import { SchemaFactoryService } from '../../../schema/services/schema-factory/schema-factory.service';

import * as alertExampleHtml from '!raw-loader!./examples/alert-example.component.html';
import * as alertExampleTs from '!raw-loader!./examples/alert-example.component.ts';
import * as alertContent from '!raw-loader!./examples/alert-content.component.ts';
Expand All @@ -10,12 +9,14 @@ import * as alertComponentAsContentExampleH from '!raw-loader!./examples/alert-c
import * as alertInlineExampleHtml from '!raw-loader!./examples/alert-inline-example.component.html';
import * as alertWidthExampleHtml from '!raw-loader!./examples/alert-width-example.component.html';
import { ExampleFile } from '../../core-helpers/code-example/example-file';
import { ActivatedRoute } from '@angular/router';
import { DocsSectionTitleComponent } from '../../core-helpers/docs-section-title/docs-section-title.component';

@Component({
selector: 'app-alert',
templateUrl: './alert-docs.component.html'
})
export class AlertDocsComponent {
export class AlertDocsComponent implements OnInit {
static schema: any = {
properties: {
properties: {
Expand Down Expand Up @@ -51,8 +52,6 @@ export class AlertDocsComponent {
type: 'object'
};

schema: Schema;

data: any = {
properties: {
dismissible: true,
Expand Down Expand Up @@ -93,20 +92,31 @@ export class AlertDocsComponent {
}
];

alertInlineExample: ExampleFile[] = [{
language: 'html',
code: alertInlineExampleHtml
}];
alertInlineExample: ExampleFile[] = [
{
language: 'html',
code: alertInlineExampleHtml
}
];

alertWidthExample: ExampleFile[] = [{
language: 'html',
code: alertWidthExampleHtml
}];
alertWidthExample: ExampleFile[] = [
{
language: 'html',
code: alertWidthExampleHtml
}
];

constructor(private schemaFactory: SchemaFactoryService) {
this.schema = this.schemaFactory.getComponent('alert');
schema: Schema;
private fragment: any;
@ViewChildren(DocsSectionTitleComponent, { read: ElementRef }) myList: QueryList<ElementRef>;

constructor(private schemaFactory: SchemaFactoryService) { this.schema = this.schemaFactory.getComponent('alert');
}

ngOnInit() {}



onSchemaValues(data) {
this.data = data;
}
Expand Down
Loading