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

Merge branch 'master' of https://github.com/withinpixels/fuse2

Browse Source 
+ fuse-hljs replaced with fuse-highlight
This commit is contained in:
Sercan Yemen 2018-01-08 15:29:04 +03:00
parent 5a40116c7b
commit 2288905cbd
37 changed files with 529 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -358,6 +358,11 @@
"integrity": "sha512-d1Twx1NM49dQ7jbNZfaHTQWuYL9cFVrGxYpbc3BvMf4626lOJOZnp2aJQNB9vP/WX3UOe1TrTUMABrGRu6FZhg==",
"dev": true
},
"@types/prismjs": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.9.0.tgz",
"integrity": "sha512-zeh+xd2pcCvWm1XtWLR4v5pzZMybKeq6X8Q4cIZMMx8GmyKDUfJaOtw+JaONHUQt5ncKFXezl8QGIDQsSF5YfA=="
},
"@types/q": {
"version": "0.0.32",
"resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",

2
package.json
View File

@ -40,6 +40,7 @@
"@swimlane/ngx-charts": "7.0.1",
"@swimlane/ngx-datatable": "11.1.7",
"@swimlane/ngx-dnd": "3.1.0",
"@types/prismjs": "1.9.0",
"angular-calendar": "0.23.0",
"angular-in-memory-web-api": "0.5.2",
"angular2-markdown": "1.6.0",
@ -54,6 +55,7 @@
"ngx-color-picker": "5.3.0",
"ngx-cookie-service": "1.0.9",
"perfect-scrollbar": "1.3.0",
"prismjs": "1.9.0",
"rxjs": "5.5.6",
"web-animations-js": "2.3.1",
"zone.js": "0.8.18"

5
src/app/core/components/highlight/highlight.component.scss
View File

@ -1,3 +1,6 @@
:host {
display: block;
padding: 8px;
background: #263238;
cursor: text;
}

40
src/app/core/components/highlight/highlight.component.ts
View File

@ -1,15 +1,14 @@
import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
import * as hljs from 'highlight.js';
import * as Prism from 'prismjs/prism';
import './prism-languages';
@Component({
selector : 'fuse-hljs',
selector : 'fuse-highlight',
template : ' ',
styleUrls: ['./hljs.component.scss']
styleUrls: ['./highlight.component.scss']
})
export class FuseHljsComponent implements OnInit
export class FuseHighlightComponent implements OnInit
{
hljs: any;
@ContentChild('source') source: ElementRef;
@Input('lang') lang: string;
@ -17,7 +16,7 @@ export class FuseHljsComponent implements OnInit
private elementRef: ElementRef
)
{
this.hljs = hljs;
}
ngOnInit()
@ -32,6 +31,20 @@ export class FuseHljsComponent implements OnInit
// Split the source into lines
const sourceLines = originalSource.split('\n');
// Remove the first and the last line of the source
// code if they are blank lines. This way, the html
// can be formatted properly while using fuse-highlight
// component
if ( !sourceLines[0].trim() )
{
sourceLines.shift();
}
if ( !sourceLines[sourceLines.length - 1].trim() )
{
sourceLines.pop();
}
// Find the first non-whitespace char index in
// the first line of the source code
const indexOfFirstChar = sourceLines[0].search(/\S|$/);
@ -39,20 +52,27 @@ export class FuseHljsComponent implements OnInit
// Generate the trimmed source
let source = '';
// Iterate through all the lines and trim the
// beginning white space depending on the index
// Iterate through all the lines
sourceLines.forEach((line, index) => {
// Trim the beginning white space depending on the index
// and concat the source code
source = source + line.substr(indexOfFirstChar, line.length);
// If it's not the last line...
if ( index !== sourceLines.length - 1 )
{
// Add a line break at the end
source = source + '\n';
}
});
// Generate the highlighted code
const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
// Replace the innerHTML of the component with the highlighted code
this.elementRef.nativeElement.innerHTML =
`<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
'<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
}
}

16
src/app/core/components/highlight/prism-languages.ts
View File

@ -0,0 +1,16 @@
import 'prismjs/prism';
import 'prismjs/components/prism-c';
import 'prismjs/components/prism-cpp';
import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-perl';
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-sass';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-typescript';

6
src/app/core/modules/shared.module.ts
View File

@ -15,7 +15,7 @@ import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm
import { FuseCountdownComponent } from '../components/countdown/countdown.component';
import { FuseMatchMedia } from '../services/match-media.service';
import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
import { FuseHljsComponent } from '../components/hljs/hljs.component';
import { FuseHighlightComponent } from '../components/highlight/highlight.component';
import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
@ -30,7 +30,7 @@ import { TranslateModule } from '@ngx-translate/core';
FuseMatSidenavTogglerDirective,
FuseConfirmDialogComponent,
FuseCountdownComponent,
FuseHljsComponent,
FuseHighlightComponent,
FuseIfOnDomDirective,
FusePerfectScrollbarDirective,
FuseMaterialColorPickerComponent
@ -56,7 +56,7 @@ import { TranslateModule } from '@ngx-translate/core';
FuseMatSidenavTogglerDirective,
FusePipesModule,
FuseCountdownComponent,
FuseHljsComponent,
FuseHighlightComponent,
FusePerfectScrollbarDirective,
ReactiveFormsModule,
ColorPickerModule,

1
src/app/core/scss/partials/plugins/_plugins.scss
View File

@ -1,4 +1,3 @@
@import "highlight";
@import "prism";
@import "perfect-scrollbar";
@import "ngx-datatable";

2
src/app/core/scss/partials/plugins/_prism.scss
View File

@ -2,7 +2,7 @@
$base00: #263238;
$base01: #2C393F;
$base02: #37474F;
$base02: #4A5A62;
$base03: #707880;
$base04: #C9CCD3;
$base05: #CDD3DE;

6
src/app/main/content/components-third-party/google-maps/google-maps.component.html vendored
View File

@ -38,13 +38,13 @@
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<fuse-highlight lang="html">
<textarea #source>
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>

347
src/app/main/content/components/cards/cards.component.html
View File

@ -52,9 +52,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<img src="assets/images/cards/card1.jpg">
@ -66,13 +68,14 @@
<div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and
their
content and quantity can vary greatly.
their content and quantity can vary greatly.
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -110,9 +113,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<img src="assets/images/cards/card1.jpg">
@ -124,8 +129,7 @@
<div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and
their
content and quantity can vary greatly.
their content and quantity can vary greatly.
</div>
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@ -134,8 +138,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -166,9 +172,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16">
@ -178,13 +186,14 @@
<div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and
their
content and quantity can vary greatly.
their content and quantity can vary greatly.
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -221,9 +230,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card mat-indigo-bg">
<div class="p-16">
@ -233,10 +244,9 @@
<div class="p-16 pt-0 line-height-1.75">
All cards can be mixed with Fuse Color Classes to have different colors. This
greatly
increases the unique variations of all cards. Cards provide context and an entry
point to
more robust information and views, and their content and quantity can vary greatly.
greatly increases the unique variations of all cards. Cards provide context and an
entry point to more robust information and views, and their content and quantity can
vary greatly.
</div>
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@ -245,8 +255,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -274,9 +286,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<img src="assets/images/cards/card1.jpg">
@ -287,8 +301,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -316,9 +332,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<img src="assets/images/cards/card1.jpg">
@ -329,8 +347,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -371,9 +391,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="position-relative">
@ -397,8 +419,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -442,9 +466,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -462,8 +488,7 @@
<div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and
their
content and quantity can vary greatly.
their content and quantity can vary greatly.
</div>
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@ -472,8 +497,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -527,9 +554,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<img src="assets/images/cards/card3.jpg">
@ -561,16 +590,17 @@
<div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]>
<div class="card-expanded-content">
Card content that exceeds the maximum card height is truncated and does not
scroll, but
the card can be expanded. Once expanded, the card may exceed the maximum height
of the
view. In this case, the card will scroll with the card collection.
scroll, but the card can be expanded. Once expanded, the card may exceed the
maximum height of the view. In this case, the card will scroll with the card
collection.
</div>
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -619,9 +649,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<img src="assets/images/cards/card2.jpg">
@ -647,16 +679,17 @@
<div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]>
<div class="card-expanded-content">
Card content that exceeds the maximum card height is truncated and does not
scroll, but
the card can be expanded. Once expanded, the card may exceed the maximum height
of the
view. In this case, the card will scroll with the card collection.
scroll, but the card can be expanded. Once expanded, the card may exceed the
maximum height of the view. In this case, the card will scroll with the card
collection.
</div>
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -698,9 +731,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="start center">
@ -721,13 +756,14 @@
<div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and
their
content and quantity can vary greatly.
their content and quantity can vary greatly.
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -764,9 +800,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<img src="assets/images/cards/card2.jpg">
@ -786,8 +824,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -829,9 +869,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card variable-width">
<div class="position-relative">
@ -856,8 +898,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -896,9 +940,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -920,8 +966,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -960,9 +1008,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
@ -984,8 +1034,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -1024,9 +1076,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
@ -1048,8 +1102,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -1116,9 +1172,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<img src="assets/images/cards/card2.jpg">
@ -1169,8 +1227,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -1282,9 +1342,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16">
@ -1379,8 +1441,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -1485,9 +1549,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="mat-light-blue-600-bg">
@ -1575,8 +1641,10 @@
</mat-tab-group>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -1665,9 +1733,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -1739,8 +1809,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -1814,9 +1886,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -1886,8 +1960,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -1993,9 +2069,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -2084,8 +2162,9 @@
</mat-tab-group>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -2123,9 +2202,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16 pb-0">
@ -2146,8 +2227,10 @@
</mat-selection-list>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -2240,9 +2323,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16">
@ -2318,8 +2403,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -2357,9 +2444,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16">
@ -2380,8 +2469,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->
@ -2420,9 +2511,11 @@
<!-- / PREVIEW -->
<!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<div class="card-source" fxHide fxShow.gt-sm>
<fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card">
<div class="p-16">
@ -2444,8 +2537,10 @@
</div>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
<!-- / SOURCE -->

1
src/app/main/content/components/cards/cards.component.scss
View File

@ -38,6 +38,7 @@
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
.card-source {
background: #263238;
display: flex !important;
flex: 1;
max-height: 400px;

10
src/app/main/content/components/components.module.ts
View File

@ -3,7 +3,7 @@ import { SharedModule } from '../../../core/modules/shared.module';
import { RouterModule } from '@angular/router';
import { FuseCardsDocsComponent } from './cards/cards.component';
import { FuseCountdownDocsComponent } from './countdown/countdown.component';
import { FuseHljsDocsComponent } from './hljs/hljs.component';
import { FuseHighlightDocsComponent } from './highlight/highlight.component';
import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
import { FuseNavigationDocsComponent } from './navigation/navigation.component';
@ -24,8 +24,8 @@ const routes = [
component: FuseCountdownDocsComponent
},
{
path : 'highlightjs',
component: FuseHljsDocsComponent
path : 'highlight',
component: FuseHighlightDocsComponent
},
{
path : 'material-color-picker',
@ -64,7 +64,7 @@ const routes = [
declarations: [
FuseCardsDocsComponent,
FuseCountdownDocsComponent,
FuseHljsDocsComponent,
FuseHighlightDocsComponent,
FuseMaterialColorPickerDocsComponent,
FuseMultiLanguageDocsComponent,
FuseNavigationDocsComponent,
@ -73,6 +73,6 @@ const routes = [
FuseWidgetDocsComponent
]
})
export class ComponentsModule
export class FuseComponentsModule
{
}

8
src/app/main/content/components/countdown/countdown.component.html
View File

@ -29,12 +29,12 @@
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<fuse-countdown eventDate="2019-07-28"></fuse-countdown>
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>

30
src/app/main/content/components/highlight/highlight.component.html
View File

@ -1,4 +1,4 @@
<div id="hljs" class="page-layout simple fullwidth" fusePerfectScrollbar>
<div id="highlight" class="page-layout simple fullwidth" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -8,7 +8,7 @@
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span>
</div>
<div class="h2 mt-16">highlight.js</div>
<div class="h2 mt-16">Highlight</div>
</div>
</div>
<!-- / HEADER -->
@ -17,36 +17,42 @@
<div class="content p-24">
<p>
<code>fuse-hljs</code> is a custom built Fuse component allows to show syntax highlighted codes.
<code>fuse-highlight</code> is a custom built Fuse component allows to show syntax highlighted codes.
</p>
<div class="my-48">
<h2>Sample</h2>
<p fxLayout="row" fxLayoutAlign="start start">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<fuse-highlight lang="html">
<textarea #source>
<div class="title">
<span>Example Title</span>
</div>
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
&lt;fuse-hljs lang="html" class="source-code"&gt;
&lt;textarea #source hidden="hidden"&gt;
<fuse-highlight lang="html">
<textarea #source>
&lt;fuse-highlight lang="html"&gt;
&lt;textarea #source&gt;
&lt;div class="title"&gt;
&lt;span&gt;Example Title&lt;/span&gt;
&lt;/div&gt;
&lt;/textarea&gt;
&lt;/fuse-hljs&gt;
&lt;/fuse-highlight&gt;
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>

8
src/app/main/content/components/highlight/highlight.component.ts
View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-hljs-docs',
templateUrl: './hljs.component.html',
styleUrls : ['./hljs.component.scss']
selector : 'fuse-highlight-docs',
templateUrl: './highlight.component.html',
styleUrls : ['./highlight.component.scss']
})
export class FuseHljsDocsComponent
export class FuseHighlightDocsComponent
{
constructor()
{

8
src/app/main/content/components/material-color-picker/material-color-picker.component.html
View File

@ -30,14 +30,14 @@
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<fuse-material-color-picker [(selectedClass)]="colorClass"
(onValueChange)="onSettingsChange()">
</fuse-material-color-picker>
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>

24
src/app/main/content/components/multi-language/multi-language.component.html
View File

@ -41,9 +41,9 @@
translation data:
</p>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
// i18n/en.ts
export const locale = {
lang: 'en',
@ -64,7 +64,7 @@
}
};
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>
@ -75,9 +75,9 @@
<code>mail.component.ts</code> file:
</p>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
// Your imports
import { ... } from '..';
@ -100,7 +100,7 @@
...
}
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>
@ -110,9 +110,9 @@
Changing the current language can happen instantly. Simply call the <code>use</code> method from the
translate service:
</p>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
import { TranslateService } from '@ngx-translate/core';
constructor(private translate: TranslateService) {}
@ -123,7 +123,7 @@
this.translate.use('tr');
}
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
<p>
More detailed usage of the translation service can be found in the <code>toolbar.component.ts</code>

56
src/app/main/content/components/navigation/navigation.component.html
View File

@ -23,12 +23,12 @@
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<fuse-navigation></fuse-navigation>
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>
@ -49,9 +49,9 @@
<div class="my-48">
<h3>Grouping</h3>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="json" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="json">
<textarea #source>
{
'title' : 'COMPONENTS',
'translate': 'NAV.COMPONENTS',
@ -65,15 +65,15 @@
]
},
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h3>Collapsable</h3>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="json" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="json">
<textarea #source>
{
'title' : 'Datatables',
'translate': 'NAV.DATATABLES',
@ -88,15 +88,15 @@
]
},
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h3>Item</h3>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="json" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="json">
<textarea #source>
{
'title' : 'Countdown',
'translate': 'NAV.COUNTDOWN',
@ -105,7 +105,7 @@
'url' : '/components/countdown'
},
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>
@ -132,9 +132,9 @@
<h4>Update navigation item on-the-fly</h4>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
updateMailBadge()
{
// Get the mail nav item
@ -144,7 +144,7 @@
mailNavItem.badge.title = 35;
}
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
<div class="mt-24 mb-64">
@ -157,9 +157,9 @@
<h4>Add a subitem to the Calendar nav item</h4>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
addSubitemToCalendar()
{
// Prepare the new nav item
@ -174,7 +174,7 @@
this.navigationService.addNavigationItem('applications.calendar', newNavItem);
}
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
<div class="mt-24 mb-64">
@ -187,9 +187,9 @@
<h4>Add a nav item with custom function</h4>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
addNavItemWithCustomFunction()
{
// Prepare the new nav item
@ -209,7 +209,7 @@
applicationsNavItem.children.unshift(newNavItem);
}
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
<div class="mt-24">

8
src/app/main/content/components/search-bar/search-bar.component.html
View File

@ -23,12 +23,12 @@
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>

8
src/app/main/content/components/shortcuts/shortcuts.component.html
View File

@ -23,12 +23,12 @@
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<fuse-shortcuts></fuse-shortcuts>
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>

12
src/app/main/content/components/widget/widget.component.html
View File

@ -62,9 +62,11 @@
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden">
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front -->
@ -97,8 +99,10 @@
<!-- / Back -->
</fuse-widget>
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>

10
src/app/main/content/services/config/config.component.html
View File

@ -24,8 +24,10 @@
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
<fuse-highlight lang="typescript">
<textarea #source>
export class SomeComponent
{
settings: any;
@ -61,8 +63,10 @@
});
}
}
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>

1
src/app/main/content/services/services.module.ts
View File

@ -25,6 +25,7 @@ const routes = [
FuseSplashScreenServiceDocsComponent
]
})
export class FuseServicesModule
{
}

10
src/app/main/content/services/splash-screen/splash-screen.component.html
View File

@ -25,8 +25,10 @@
<div class="my-48">
<h2>Usage</h2>
<p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden">
<fuse-highlight lang="typescript">
<textarea #source>
export class SomeComponent
{
constructor(private fuseSplashScreen: FuseSplashScreenService) {}
@ -36,8 +38,10 @@
this.fuseSplashScreen.hide();
}
}
</textarea>
</fuse-hljs>
</fuse-highlight>
</p>
</div>

40
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html
View File

@ -10,12 +10,12 @@
<span>p-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="p-0">No padding</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -26,12 +26,12 @@
<span>p-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="p-4">4px padding</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -42,12 +42,12 @@
<span>p-12</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="p-12">12px padding</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -69,7 +69,7 @@
<span>py-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="pt-0">0 padding from top</span>
@ -79,7 +79,7 @@
<span class="px-0">0 padding from left and right</span>
<span class="py-0">0 padding from top and bottom</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -95,7 +95,7 @@
<span>py-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="pt-4">4px padding from top</span>
@ -105,7 +105,7 @@
<span class="px-4">4px padding from left and right</span>
<span class="py-4">4px padding from top and bottom</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -121,12 +121,12 @@
<span>m-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="m-0">No margin</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -137,12 +137,12 @@
<span>m-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="m-4">4px margin</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -153,12 +153,12 @@
<span>m-12</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="m-12">12px margin</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -180,7 +180,7 @@
<span>my-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mt-0">0 margin from top</span>
@ -190,7 +190,7 @@
<span class="mx-0">0 margin from left and right</span>
<span class="my-0">0 margin from top and bottom</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -206,7 +206,7 @@
<span>my-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mt-4">4px margin from top</span>
@ -216,7 +216,7 @@
<span class="mx-4">4px margin from left and right</span>
<span class="my-4">4px margin from top and bottom</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>

1
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss
View File

@ -4,7 +4,6 @@
.source-code {
position: relative;
background: #F3F4F6;
margin-bottom: 24px;
min-height: 180px;

32
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html
View File

@ -10,12 +10,12 @@
<span>w-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-0">0px width</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -26,12 +26,12 @@
<span>w-100</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-100">100px width</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -42,12 +42,12 @@
<span>w-25-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-25-p">25% width</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -58,12 +58,12 @@
<span>w-100-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-100-p">100% width</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -79,12 +79,12 @@
<span>h-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-0">0px height</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -95,12 +95,12 @@
<span>h-100</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-100">100px height</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -111,12 +111,12 @@
<span>h-25-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-25-p">25% height</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -127,12 +127,12 @@
<span>h-100-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-100-p">100% height</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>

1
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss
View File

@ -4,7 +4,6 @@
.source-code {
position: relative;
background: #F3F4F6;
margin-bottom: 24px;
min-height: 180px;

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

@ -14,7 +14,7 @@
</blockquote>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<blockquote>
@ -23,7 +23,7 @@
</p>
</blockquote>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -40,7 +40,7 @@
</blockquote>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<blockquote>
@ -52,7 +52,7 @@
</footer>
</blockquote>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -69,7 +69,7 @@
</blockquote>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<blockquote class="reverse">
@ -81,7 +81,7 @@
</footer>
</blockquote>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -108,7 +108,7 @@
</ol>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<ol>
@ -124,7 +124,7 @@
<li>Ordered list item</li>
</ol>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -145,7 +145,7 @@
</ul>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<ul>
@ -161,7 +161,7 @@
<li>Unordered list item</li>
</ul>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -183,7 +183,7 @@
</dl>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<dl>
@ -194,7 +194,7 @@
<dd>This is also another definition description</dd>
</dl>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>

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

@ -4,7 +4,6 @@
.source-code {
position: relative;
background: #F3F4F6;
margin-bottom: 24px;
min-height: 180px;

68
src/app/main/content/ui/typography/tabs/headings/headings.component.html
View File

@ -11,12 +11,12 @@
<span class="mat-display-4">Display 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -27,12 +27,12 @@
<span class="mat-display-3">Display 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -43,12 +43,12 @@
<span class="mat-display-2">Display 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
@ -58,12 +58,12 @@
<span class="mat-display-1">Display 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -74,12 +74,12 @@
<span class="mat-headline">Headline</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-headline">Headline</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -90,12 +90,12 @@
<span class="mat-title">Title</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-title">Title</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -106,12 +106,12 @@
<span class="mat-subheading-2">Subheading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -122,12 +122,12 @@
<span class="mat-subheading-1">Subheading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -138,12 +138,12 @@
<span class="mat-body-1">Body 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -154,12 +154,12 @@
<span class="mat-body-2">Body 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -170,12 +170,12 @@
<span class="mat-caption">Caption</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-caption">Caption</span>
</textarea>
</fuse-hljs>
</fuse-highlight>
</div>
@ -192,13 +192,13 @@
<span class="h1">Heading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -209,13 +209,13 @@
<span class="h2">Heading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -226,13 +226,13 @@
<span class="h3">Heading 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -243,13 +243,13 @@
<span class="h4">Heading 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -260,13 +260,13 @@
<span class="h5">Heading 5</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -277,13 +277,13 @@
<span class="h6">Heading 6</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>

1
src/app/main/content/ui/typography/tabs/headings/headings.component.scss
View File

@ -4,7 +4,6 @@
.source-code {
position: relative;
background: #F3F4F6;
margin-bottom: 24px;
min-height: 180px;

52
src/app/main/content/ui/typography/tabs/helpers/helpers.component.html
View File

@ -13,14 +13,14 @@
<span class="font-weight-900">font-weight: 900</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -37,12 +37,12 @@
<span class="font-size-20">font-size: 20</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -61,14 +61,14 @@
<span>line-height: 120</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -84,12 +84,12 @@
<div class="text-left">Left aligned text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -99,12 +99,12 @@
<div class="text-center">Center aligned text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -114,12 +114,12 @@
<div class="text-right">Right aligned text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -131,14 +131,14 @@
</p>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -150,14 +150,14 @@
</p>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -169,14 +169,14 @@
</p>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -186,12 +186,12 @@
<div class="text-italic">Italic text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -201,12 +201,12 @@
<div class="text-semibold">Semi-bold text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -216,12 +216,12 @@
<div class="text-bold">Bold text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -233,14 +233,14 @@
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>

1
src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss
View File

@ -4,7 +4,6 @@
.source-code {
position: relative;
background: #F3F4F6;
margin-bottom: 24px;
min-height: 180px;

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

@ -8,12 +8,12 @@
<span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -23,12 +23,12 @@
<span>This is a <mark>marked</mark> text.</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -40,12 +40,12 @@
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -55,12 +55,12 @@
<span><s>This is a strike-through text.</s></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -70,12 +70,12 @@
<span><u>This is an underlined text.</u></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -87,12 +87,12 @@
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -102,12 +102,12 @@
<span><strong>This is a strong text.</strong></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -117,12 +117,12 @@
<span><em>This is an italic text.</em></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -135,14 +135,14 @@
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -156,14 +156,14 @@
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -176,14 +176,14 @@
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -196,14 +196,14 @@
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>
@ -216,14 +216,14 @@
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
<fuse-highlight 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>
</fuse-highlight>
</div>

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

@ -4,7 +4,6 @@
.source-code {
position: relative;
background: #F3F4F6;
margin-bottom: 24px;
min-height: 180px;

6
src/app/navigation/navigation.model.ts
View File

@ -823,11 +823,11 @@ export class FuseNavigationModel implements FuseNavigationModelInterface
'url' : '/components/countdown'
},
{
'id' : 'highlightjs',
'title': 'Highlight.js',
'id' : 'highlight',
'title': 'Highlight',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/highlightjs'
'url' : '/components/highlight'
},
{
'id' : 'material-color-picker',