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

hljs component now works with multiline stuff

Browse Source 
+ typography page done...
This commit is contained in:
Sercan Yemen 2017-08-03 12:37:50 +03:00
parent 5c27445d19
commit 2024a0d645
16 changed files with 1204 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/core/components/hljs/hljs.component.ts
View File

@ -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 =
`<pre><code class="highlight">` + this.hljs.highlight(this.lang, this.source).value + `</code></pre>`;
`<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
}
}

203
src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html Normal file
View File

@ -0,0 +1,203 @@
<div id="typography-blockquotes-lists" class="p-24">
<div class="mat-title">Blockquotes</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<blockquote>
<p>
You can do anything, but not everything.
</p>
</blockquote>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<blockquote>
<p>
You can do anything, but not everything.
</p>
</blockquote>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<blockquote>
<p>
You can do anything, but not everything.
</p>
<footer>
David Allen
</footer>
</blockquote>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<blockquote>
<p>
You can do anything, but not everything.
</p>
<footer>
David Allen
</footer>
</blockquote>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<blockquote class="reverse">
<p>
You can do anything, but not everything.
</p>
<footer>
David Allen
</footer>
</blockquote>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<blockquote class="reverse">
<p>
You can do anything, but not everything.
</p>
<footer>
David Allen
</footer>
</blockquote>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Lists</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<ol>
<li>Ordered list item</li>
<li>
Ordered list item
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<ol>
<li>Ordered list item</li>
<li>
Ordered list item
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<ul>
<li>Unordered list item</li>
<li>
Unordered list item
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<ul>
<li>Unordered list item</li>
<li>
Unordered list item
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Definition Lists</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<dl>
<dt>Definition term</dt>
<dd>This is the definition description</dd>
<dt>Another definition term</dt>
<dd>This is also another definition description</dd>
</dl>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<dl>
<dt>Definition term</dt>
<dd>This is the definition description</dd>
<dt>Another definition term</dt>
<dd>This is also another definition description</dd>
</dl>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts Normal file
View File

@ -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()
{
}
}

292
src/app/main/content/ui/typography/tabs/headings/headings.component.html Normal file
View File

@ -0,0 +1,292 @@
<div id="typography-headings" class="p-24">
<div class="mat-title">Material design typography classes</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">112px</div>
<span class="mat-display-4">Display 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-display-4">Display 4</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">56px</div>
<span class="mat-display-3">Display 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-display-3">Display 3</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">45px</div>
<span class="mat-display-2">Display 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-display-2">Display 2</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">34px</div>
<span class="mat-display-1">Display 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-display-1">Display 1</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">24px</div>
<span class="mat-headline">Headline</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-headline">Headline</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">20px</div>
<span class="mat-title">Title</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-title">Title</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">16px</div>
<span class="mat-subheading-2">Subheading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-subheading-2">Subheading 2</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">15px</div>
<span class="mat-subheading-1">Subheading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-subheading-1">Subheading 1</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">14px</div>
<span class="mat-body-1">Body 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-body-1">Body 1</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">14px</div>
<span class="mat-body-2">Body 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-body-2">Body 2</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">12px</div>
<span class="mat-caption">Caption</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-caption">Caption</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Standard Headings</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">24px</div>
<span class="h1">Heading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h1>Heading 1</h1>
<span class="h1">Heading 1</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">20px</div>
<span class="h2">Heading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h2>Heading 2</h2>
<span class="h2">Heading 2</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">16px</div>
<span class="h3">Heading 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h3>Heading 3</h3>
<span class="h3">Heading 3</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">15px</div>
<span class="h4">Heading 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h4>Heading 4</h4>
<span class="h4">Heading 4</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">13px</div>
<span class="h5">Heading 5</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h5>Heading 5</h5>
<span class="h5">Heading 5</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">12px</div>
<span class="h6">Heading 6</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h6>Heading 6</h6>
<span class="h6">Heading 6</span>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/typography/tabs/headings/headings.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/typography/tabs/headings/headings.component.ts Normal file
View File

@ -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()
{
}
}

249
src/app/main/content/ui/typography/tabs/helpers/helpers.component.html Normal file
View File

@ -0,0 +1,249 @@
<div id="typography-helpers" class="p-24">
<div class="mat-title">Font Weight</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="md-caption mb-16">From 100 to 900</div>
<span class="font-weight-100">font-weight: 100</span>
<span>...</span>
<span class="font-weight-900">font-weight: 900</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="font-weight-100">100 font weight</span>
...
<span class="font-weight-900">900 font weight</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Font Size</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="md-caption mb-16">Multiplies of 2, max: 120</div>
<span class="font-size-20">font-size: 20</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="font-size-20">font-size: 20</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Line Height</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="md-caption mb-16">Multiplies of 2, max: 120</div>
<span>line-height: 2</span>
<span>...</span>
<span>line-height: 120</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="line-height-2">2px line height</span>
...
<span class="line-height-120">120px line height</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Other helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-left">Left aligned text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-left">Left aligned text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-center">Center aligned text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-center">Center aligned text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-right">Right aligned text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-right">Right aligned text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<p>
<span class="text-boxed">Boxed text</span>
</p>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<p>
<span class="text-boxed">Boxed text</span>
</p>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview md-grey-700-bg" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<p>
<span class="text-boxed-light">Boxed text light</span>
</p>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<p>
<span class="text-boxed-light">Boxed text light</span>
</p>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<p>
<span class="text-strike">Strike-through text</span>
</p>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<p>
<span class="text-strike">Strike-through text</span>
</p>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-italic">Italic text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-italic">Italic text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-semibold">Semi-bold text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-semibold">Semi-bold text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-bold">Bold text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-bold">Bold text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span class="text-truncate">This is a truncated text. It will be truncated if it's too long. Vivamus
convallis dui porta massa.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="text-truncate">
This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta massa.
</span>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts Normal file
View File

@ -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()
{
}
}

232
src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html Normal file
View File

@ -0,0 +1,232 @@
<div id="typography-inline-text-elements" class="p-24">
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<abbr title="Cascaded Style Sheet">CSS</abbr>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is a <mark>marked</mark> text.</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a <mark>marked</mark> text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>
<del>This is a deleted text.</del>
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<del>This is a deleted text.</del>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><s>This is a strike-through text.</s></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<s>This is a strike-through text.</s>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><u>This is an underlined text.</u></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<u>This is an underlined text.</u>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>
<small>This is a small text.</small>
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<small>This is a small text.</small>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><strong>This is a strong text.</strong></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<strong>This is a strong text.</strong>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><em>This is an italic text.</em></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<em>This is an italic text.</em>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is a
<span class="text-super">super</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a
<span class="text-super">super</span>
text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>
This is a
<span class="text-sub">sub</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a
<span class="text-sub">sub</span>
text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is a
<span class="text-capitalize">capitalized</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a
<span class="text-capitalized">capitalized</span>
text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is an
<span class="text-uppercase">uppercase</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is an
<span class="text-uppercase">uppercase</span>
text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is a
<span class="text-lowercase">LOWERCASE</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a
<span class="text-lowercase">LOWERCASE</span>
text.
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts Normal file
View File

@ -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()
{
}
}

249
src/app/main/content/ui/typography/typography.component.html
View File

@ -20,266 +20,25 @@
<md-tab label="Headings">
<div class="p-24">
<div class="mat-title">Material design typography classes</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">112px</div>
<span class="mat-display-4">Display 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-display-4">Display 4</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">56px</div>
<span class="mat-display-3">Display 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-display-3">Display 3</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">45px</div>
<span class="mat-display-2">Display 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-display-2">Display 2</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">34px</div>
<span class="mat-display-1">Display 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-display-1">Display 1</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">24px</div>
<span class="mat-headline">Headline</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="md-headline">Headline</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">20px</div>
<span class="mat-title">Title</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="md-title">Title</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">16px</div>
<span class="mat-subheading-2">Subheading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-subheading-2">Subheading 2</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">15px</div>
<span class="mat-subheading-1">Subheading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-subheading-1">Subheading 1</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">14px</div>
<span class="mat-body-1">Body 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-body-1">Body 1</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">14px</div>
<span class="mat-body-2">Body 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-body-2">Body 2</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">12px</div>
<span class="mat-caption">Caption</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-caption">Caption</span>'>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Standard Headings</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">24px</div>
<span class="h1">Heading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h1>Heading 1</h1><span class="h1">Heading 1</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">20px</div>
<span class="h2">Heading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h2>Heading 2</h2><span class="h2">Heading 2</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">16px</div>
<span class="h3">Heading 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h3>Heading 3</h3><span class="h3">Heading 3</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">15px</div>
<span class="h4">Heading 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h4>Heading 4</h4><span class="h4">Heading 4</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">13px</div>
<span class="h5">Heading 5</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h5>Heading 5</h5><span class="h5">Heading 5</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">12px</div>
<span class="h6">Heading 6</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h6>Heading 6</h6><span class="h6">Heading 6</span>'>
</fuse-hljs>
</div>
</div>
</div>
<fuse-typography-headings></fuse-typography-headings>
</md-tab>
<md-tab label="Inline Text Elements">
<fuse-typography-inline-text-elements></fuse-typography-inline-text-elements>
</md-tab>
<md-tab label="Blockquotes & Lists">
<fuse-typography-blockquotes-lists></fuse-typography-blockquotes-lists>
</md-tab>
<md-tab label="Helpers">
<fuse-typography-helpers></fuse-typography-helpers>
</md-tab>

31
src/app/main/content/ui/typography/typography.component.scss
View File

@ -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;
}
}
}
}
}

13
src/app/main/content/ui/typography/typography.module.ts
View File

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