diff --git a/src/app/core/components/hljs/hljs.component.ts b/src/app/core/components/hljs/hljs.component.ts index fa49254c..3bf9c1fc 100644 --- a/src/app/core/components/hljs/hljs.component.ts +++ b/src/app/core/components/hljs/hljs.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, Input, OnInit } from '@angular/core'; +import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core'; import * as hljs from 'highlight.js'; @Component({ @@ -10,7 +10,7 @@ export class FuseHljsComponent implements OnInit { hljs: any; - @Input('source') source: any; + @ContentChild('source') source: ElementRef; @Input('lang') lang: string; constructor( @@ -22,12 +22,37 @@ export class FuseHljsComponent implements OnInit ngOnInit() { - if ( !this.source && this.lang ) + const originalSource = this.source.nativeElement.value; + + if ( !originalSource || !this.lang ) { return; } + // Split the source into lines + const sourceLines = originalSource.split('\n'); + + // Find the first non-whitespace char index in + // the first line of the source code + const indexOfFirstChar = sourceLines[0].search(/\S|$/); + + // Generate the trimmed source + let source = ''; + + // Iterate through all the lines and trim the + // beginning white space depending on the index + sourceLines.forEach((line, index) => { + + source = source + line.substr(indexOfFirstChar, line.length); + + if ( index !== sourceLines.length - 1 ) + { + source = source + '\n'; + } + }); + this.elementRef.nativeElement.innerHTML = - `
` + this.hljs.highlight(this.lang, this.source).value + `
`; + `
` + this.hljs.highlight(this.lang, source).value + `
`; } } + diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html new file mode 100644 index 00000000..71a9f742 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html @@ -0,0 +1,203 @@ +
+ +
Blockquotes
+ +
+ +
+ +
+
+

+ You can do anything, but not everything. +

+
+
+ + + + + +
+ +
+ +
+
+

+ You can do anything, but not everything. +

+
+ David Allen +
+
+
+ + + + + +
+ +
+ +
+
+

+ You can do anything, but not everything. +

+
+ David Allen +
+
+
+ + + + + +
+ +
+ +
Lists
+ +
+ +
+ +
+
    +
  1. Ordered list item
    2. +
  2. + Ordered list item +
      +
    1. Ordered list item
      2. +
    2. Ordered list item
      3. +
    +
    3. +
  3. Ordered list item
    4. +
  4. Ordered list item
    5. +
+
+ + + + + +
+ +
+ +
+
    +
  • Unordered list item
    • +
  • + Unordered list item +
      +
    • Unordered list item
      • +
    • Unordered list item
      • +
    +
    • +
  • Unordered list item
    • +
  • Unordered list item
    • +
+
+ + + + + +
+ +
+ +
Definition Lists
+ +
+ +
+ +
+
+
Definition term
+
This is the definition description
+ +
Another definition term
+
This is also another definition description
+
+
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss new file mode 100644 index 00000000..a4340ab6 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss @@ -0,0 +1,31 @@ +:host { + + #typography-blockquotes-lists { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts new file mode 100644 index 00000000..65f7a7b2 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-typography-blockquotes-lists', + templateUrl: './blockquotes-lists.component.html', + styleUrls : ['./blockquotes-lists.component.scss'] +}) +export class TypographyBlockquotesListsComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.html b/src/app/main/content/ui/typography/tabs/headings/headings.component.html new file mode 100644 index 00000000..1c9a2501 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.html @@ -0,0 +1,292 @@ +
+ +
Material design typography classes
+ +
+ +
+ +
+
112px
+ Display 4 +
+ + + + + +
+ +
+ +
+
56px
+ Display 3 +
+ + + + + +
+ +
+ +
+
45px
+ Display 2 +
+ + + + +
+ +
+ +
+
34px
+ Display 1 +
+ + + + + +
+ +
+ +
+
24px
+ Headline +
+ + + + + +
+ +
+ +
+
20px
+ Title +
+ + + + + +
+ +
+ +
+
16px
+ Subheading 2 +
+ + + + + +
+ +
+ +
+
15px
+ Subheading 1 +
+ + + + + +
+ +
+ +
+
14px
+ Body 1 +
+ + + + + +
+ +
+ +
+
14px
+ Body 2 +
+ + + + + +
+ +
+ +
+
12px
+ Caption +
+ + + + + +
+ +
+ +
Standard Headings
+ +
+ +
+ +
+
24px
+ Heading 1 +
+ + + + + +
+ +
+ +
+
20px
+ Heading 2 +
+ + + + + +
+ +
+ +
+
16px
+ Heading 3 +
+ + + + + +
+ +
+ +
+
15px
+ Heading 4 +
+ + + + + +
+ +
+ +
+
13px
+ Heading 5 +
+ + + + + +
+ +
+ +
+
12px
+ Heading 6 +
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.scss b/src/app/main/content/ui/typography/tabs/headings/headings.component.scss new file mode 100644 index 00000000..94d9b834 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.scss @@ -0,0 +1,31 @@ +:host { + + #typography-headings { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.ts b/src/app/main/content/ui/typography/tabs/headings/headings.component.ts new file mode 100644 index 00000000..ce4027d8 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-typography-headings', + templateUrl: './headings.component.html', + styleUrls : ['./headings.component.scss'] +}) +export class TypographyHeadingsComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html new file mode 100644 index 00000000..0269bf1e --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html @@ -0,0 +1,249 @@ +
+ +
Font Weight
+ +
+ +
+ +
+
From 100 to 900
+ font-weight: 100 + ... + font-weight: 900 +
+ + + + + +
+ +
+ +
Font Size
+ +
+ +
+ +
+
Multiplies of 2, max: 120
+ font-size: 20 +
+ + + + + +
+ +
+ +
Line Height
+ +
+ +
+ +
+
Multiplies of 2, max: 120
+ line-height: 2 + ... + line-height: 120 +
+ + + + + +
+ +
+ +
Other helpers
+ +
+ +
+ +
+
Left aligned text
+
+ + + + + +
+ +
+ +
+
Center aligned text
+
+ + + + + +
+ +
+ +
+
Right aligned text
+
+ + + + + +
+ +
+ +
+

+ Boxed text +

+
+ + + + + +
+ +
+ +
+

+ Boxed text light +

+
+ + + + + +
+ +
+ +
+

+ Strike-through text +

+
+ + + + + +
+ +
+ +
+
Italic text
+
+ + + + + +
+ +
+ +
+
Semi-bold text
+
+ + + + + +
+ +
+ +
+
Bold text
+
+ + + + + +
+ +
+ +
+ This is a truncated text. It will be truncated if it's too long. Vivamus + convallis dui porta massa. + +
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss new file mode 100644 index 00000000..48dd1da4 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss @@ -0,0 +1,31 @@ +:host { + + #typography-helpers { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts new file mode 100644 index 00000000..57120790 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-typography-helpers', + templateUrl: './helpers.component.html', + styleUrls : ['./helpers.component.scss'] +}) +export class TypographyHelpersComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html new file mode 100644 index 00000000..2d3cca52 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html @@ -0,0 +1,232 @@ +
+ +
+ +
+ +
+ CSS +
+ + + + + +
+ +
+ +
+ This is a marked text. +
+ + + + + +
+ +
+ +
+ + This is a deleted text. + +
+ + + + + +
+ +
+ +
+ This is a strike-through text. +
+ + + + + +
+ +
+ +
+ This is an underlined text. +
+ + + + + +
+ +
+ +
+ + This is a small text. + +
+ + + + + +
+ +
+ +
+ This is a strong text. +
+ + + + + +
+ +
+ +
+ This is an italic text. +
+ + + + + +
+ +
+ +
+ This is a + super + text. + +
+ + + + + +
+ +
+ +
+ + This is a + sub + text. + +
+ + + + + +
+ +
+ +
+ This is a + capitalized + text. + +
+ + + + + +
+ +
+ +
+ This is an + uppercase + text. + +
+ + + + + +
+ +
+ +
+ This is a + LOWERCASE + text. + +
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss new file mode 100644 index 00000000..0445f273 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss @@ -0,0 +1,31 @@ +:host { + + #typography-inline-text-elements { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts new file mode 100644 index 00000000..54347cc0 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-typography-inline-text-elements', + templateUrl: './inline-text-elements.component.html', + styleUrls : ['./inline-text-elements.component.scss'] +}) +export class TypographyInlineTextElementsComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/typography/typography.component.html b/src/app/main/content/ui/typography/typography.component.html index 4cc0daf4..b6f34029 100644 --- a/src/app/main/content/ui/typography/typography.component.html +++ b/src/app/main/content/ui/typography/typography.component.html @@ -20,266 +20,25 @@ -
- -
Material design typography classes
- -
- -
- -
-
112px
- Display 4 -
- - - - -
- -
- -
-
56px
- Display 3 -
- - - - -
- -
- -
-
45px
- Display 2 -
- - - -
- -
- -
-
34px
- Display 1 -
- - - - -
- -
- -
-
24px
- Headline -
- - - - -
- -
- -
-
20px
- Title -
- - - - -
- -
- -
-
16px
- Subheading 2 -
- - - - -
- -
- -
-
15px
- Subheading 1 -
- - - - -
- -
- -
-
14px
- Body 1 -
- - - - -
- -
- -
-
14px
- Body 2 -
- - - - -
- -
- -
-
12px
- Caption -
- - - - -
- -
- -
Standard Headings
- -
- -
- -
-
24px
- Heading 1 -
- - - - -
- -
- -
-
20px
- Heading 2 -
- - - - -
- -
- -
-
16px
- Heading 3 -
- - - - -
- -
- -
-
15px
- Heading 4 -
- - - - -
- -
- -
-
13px
- Heading 5 -
- - - -
- -
- -
-
12px
- Heading 6 -
- - - - -
- -
- -
+ + + + diff --git a/src/app/main/content/ui/typography/typography.component.scss b/src/app/main/content/ui/typography/typography.component.scss index 6f1e1604..8fdbe2d4 100644 --- a/src/app/main/content/ui/typography/typography.component.scss +++ b/src/app/main/content/ui/typography/typography.component.scss @@ -1,34 +1,3 @@ :host { - #typography { - - .content { - - .source-code { - position: relative; - background: #F3F4F6; - margin-bottom: 24px; - min-height: 180px; - - code { - background: none !important; - } - } - - .preview { - font-size: 16px; - padding: 16px; - margin-bottom: 24px; - min-height: 180px; - - &:last-child { - margin-bottom: 0; - } - - .mat-caption { - margin-bottom: 16px; - } - } - } - } } \ No newline at end of file diff --git a/src/app/main/content/ui/typography/typography.module.ts b/src/app/main/content/ui/typography/typography.module.ts index 12c50460..3a0134b0 100644 --- a/src/app/main/content/ui/typography/typography.module.ts +++ b/src/app/main/content/ui/typography/typography.module.ts @@ -1,7 +1,12 @@ import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; import { SharedModule } from '../../../../core/modules/shared.module'; +import { RouterModule, Routes } from '@angular/router'; + import { TypographyComponent } from './typography.component'; +import { TypographyHeadingsComponent } from './tabs/headings/headings.component'; +import { TypographyInlineTextElementsComponent } from './tabs/inline-text-elements/inline-text-elements.component'; +import { TypographyBlockquotesListsComponent } from './tabs/blockquotes-lists/blockquotes-lists.component'; +import { TypographyHelpersComponent } from './tabs/helpers/helpers.component'; const routes: Routes = [ { @@ -16,7 +21,11 @@ const routes: Routes = [ RouterModule.forChild(routes) ], declarations: [ - TypographyComponent + TypographyComponent, + TypographyHeadingsComponent, + TypographyInlineTextElementsComponent, + TypographyBlockquotesListsComponent, + TypographyHelpersComponent ] }) export class UITypographyModule