mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 20:15:07 +00:00
Angular 5 compatibility (wip)
+ Fuse2 version: 1.2.0
This commit is contained in:
parent
9fbcc20623
commit
f013b2b667
18
package-lock.json
generated
18
package-lock.json
generated
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fuse2",
|
||||
"version": "1.1.2",
|
||||
"version": "1.2.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
@ -272,14 +272,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-10.4.0.tgz",
|
||||
"integrity": "sha512-wTV/64vEGPFlcpE+ezTN18baOsNXyfLLvdmhEoaDQt2OJtTKtNxJkze24w71utoJxutQRrfHJUVSkAF4CLNckA=="
|
||||
},
|
||||
"@swimlane/ngx-dnd": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@swimlane/ngx-dnd/-/ngx-dnd-3.0.0.tgz",
|
||||
"integrity": "sha512-LH/Nc6/2tyX7U9SHa5hNvC2Sk/svj/PMrJu34V/BF/H811fik5AGzTjORdGQo7cl2m951MEkl9yijMKywRw37w==",
|
||||
"requires": {
|
||||
"dragula": "3.7.2"
|
||||
}
|
||||
},
|
||||
"@types/jasmine": {
|
||||
"version": "2.5.54",
|
||||
"resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.54.tgz",
|
||||
|
@ -313,6 +305,14 @@
|
|||
"integrity": "sha1-dMt3+2BS7a/yqJhN2v2I1BnyXKw=",
|
||||
"dev": true
|
||||
},
|
||||
"@withinpixels/ngx-dnd": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@withinpixels/ngx-dnd/-/ngx-dnd-3.1.0.tgz",
|
||||
"integrity": "sha512-xdKp0T/JuETNVRWgRxbcx+pD6THX8OBw50wpsfi7AeK/wmvXEI1U28quh1a30T298QA7i5sofbTByUGm/XIfLg==",
|
||||
"requires": {
|
||||
"dragula": "3.7.2"
|
||||
}
|
||||
},
|
||||
"abbrev": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fuse2",
|
||||
"version": "1.1.2",
|
||||
"version": "1.2.0",
|
||||
"license": "",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
|
@ -31,7 +31,7 @@
|
|||
"@ngx-translate/core": "8.0.0",
|
||||
"@swimlane/ngx-charts": "6.1.0",
|
||||
"@swimlane/ngx-datatable": "10.4.0",
|
||||
"@swimlane/ngx-dnd": "3.0.0",
|
||||
"@withinpixels/ngx-dnd": "3.1.0",
|
||||
"angular-calendar": "0.21.3",
|
||||
"angular-in-memory-web-api": "0.5.1",
|
||||
"angular2-markdown": "1.6.0",
|
||||
|
|
|
@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
|
|||
import { MaterialModule } from './material.module';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import { ColorPickerModule } from 'ngx-color-picker';
|
||||
import { NgxDnDModule } from '@swimlane/ngx-dnd';
|
||||
import { NgxDnDModule } from '@withinpixels/ngx-dnd';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
|
||||
import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';
|
||||
|
|
|
@ -566,7 +566,7 @@
|
|||
<tbody>
|
||||
<tr *ngFor="let row of widgets.widget10.table.rows">
|
||||
<td *ngFor="let cell of row">
|
||||
<span class="p-4" [class]="cell.classes">
|
||||
<span class="p-4" [ngClass]="cell.classes">
|
||||
{{cell.value}}
|
||||
</span>
|
||||
<mat-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</mat-icon>
|
||||
|
|
|
@ -359,13 +359,13 @@
|
|||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{product.price | currency:'USD':true}}
|
||||
{{product.price | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{product.quantity}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{product.total | currency:'USD':true}}
|
||||
{{product.total | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
@ -375,19 +375,19 @@
|
|||
<tbody>
|
||||
<tr class="subtotal">
|
||||
<td>SUBTOTAL</td>
|
||||
<td>{{order.subtotal | currency:'USD':true}}</td>
|
||||
<td>{{order.subtotal | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
<tr class="tax">
|
||||
<td>TAX</td>
|
||||
<td>{{order.tax | currency:'USD':true}}</td>
|
||||
<td>{{order.tax | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
<tr class="discount">
|
||||
<td>DISCOUNT</td>
|
||||
<td>-{{order.discount | currency:'USD':true}}</td>
|
||||
<td>-{{order.discount | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<td>TOTAL</td>
|
||||
<td>{{order.total | currency:'USD':true}}</td>
|
||||
<td>{{order.total | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
@ -75,7 +75,7 @@
|
|||
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
|
||||
<mat-cell *cdkCellDef="let order" fxHide fxShow.gt-md>
|
||||
<p class="total-price text-truncate">
|
||||
{{order.total | currency:'USD':true}}
|
||||
{{order.total | currency:'USD':'symbol'}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
|
|
@ -92,7 +92,7 @@
|
|||
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
|
||||
<mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs>
|
||||
<p class="price text-truncate">
|
||||
{{product.priceTaxIncl | currency:'USD':true}}
|
||||
{{product.priceTaxIncl | currency:'USD':'symbol'}}
|
||||
</p>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<ng-container cdkColumnDef="icon">
|
||||
<mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell>
|
||||
<mat-cell *cdkCellDef="let row" fxFlex="64px">
|
||||
<mat-icon class="type-icon" [class]="row.type"></mat-icon>
|
||||
<mat-icon class="type-icon" [ngClass]="row.type"></mat-icon>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
|
||||
|
||||
<div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
|
||||
<mat-icon class="type-icon s-48" [class]="selected.type"></mat-icon>
|
||||
<mat-icon class="type-icon s-48" [ngClass]="selected.type"></mat-icon>
|
||||
</div>
|
||||
|
||||
<div class="offline-switch">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<!-- SIDENAV HEADER -->
|
||||
<div fxLayout="column" fxLayoutAlign="space-between start"
|
||||
class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
|
||||
class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
||||
|
||||
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
|
||||
|
|
|
@ -3,14 +3,14 @@
|
|||
<div id="board">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header mat-accent-bg p-16 p-mat-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="column">
|
||||
<div class="header mat-accent-bg p-16 p-mat-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="column">
|
||||
|
||||
<div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
|
||||
|
||||
<!-- BOARD SELECTION BUTTON -->
|
||||
<div fxLayout="row" fxLayoutAlign="center center" fxFlexOrder="2" fxFlexOrder.gt-xs="1">
|
||||
<button mat-raised-button class="mat-accent header-boards-button"
|
||||
[class]="'mat-'+board.settings.color+'-700-bg'"
|
||||
[ngClass]="'mat-'+board.settings.color+'-700-bg'"
|
||||
routerLink="/apps/scrumboard/boards"
|
||||
aria-label="boards button">
|
||||
<mat-icon>assessment</mat-icon>
|
||||
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<div fxFlex class="board-content-wrapper p-16 p-mat-24" [class]="board.settings.color+'-100-bg'">
|
||||
<div fxFlex class="board-content-wrapper p-16 p-mat-24" [ngClass]="board.settings.color+'-100-bg'">
|
||||
|
||||
<!-- BOARD -->
|
||||
<div class="board-content ngx-dnd-container p-16 p-mat-24" fxLayout="row"
|
||||
|
|
|
@ -194,7 +194,7 @@
|
|||
<mat-chip-list class="label-chips">
|
||||
<mat-chip class="label-chip mb-4"
|
||||
*ngFor="let labelId of card.idLabels"
|
||||
[class]="board.labels | getById:labelId:'color'"
|
||||
[ngClass]="board.labels | getById:labelId:'color'"
|
||||
fxLayout="row" fxLayoutAlign="start center">
|
||||
<span>{{board.labels|getById:labelId:'name'}}</span>
|
||||
<mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</mat-icon>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<div fxFlex fxLayout="column" fusePerfectScrollbar>
|
||||
|
||||
<div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
|
||||
[class]="label.color">
|
||||
[ngClass]="label.color">
|
||||
|
||||
<mat-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1"
|
||||
(change)="toggleInArray(label.id, card.idLabels);cardLabelsChanged()">
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header mat-accent-bg px-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
|
||||
<div class="header mat-accent-bg px-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
|
||||
<div>Settings</div>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
|
@ -58,7 +58,7 @@
|
|||
<div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header mat-accent-bg px-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div class="header mat-accent-bg px-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div>Background Color</div>
|
||||
<button mat-icon-button (click)="view ='main'">
|
||||
<mat-icon class="s-16">arrow_back</mat-icon>
|
||||
|
|
|
@ -67,13 +67,13 @@
|
|||
{{service.unit}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{service.unitPrice | currency:'USD':true}}
|
||||
{{service.unitPrice | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{service.quantity}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{service.total | currency:'USD':true}}
|
||||
{{service.total | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Double the invoice data for demo purposes -->
|
||||
|
@ -87,13 +87,13 @@
|
|||
{{service.unit}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{service.unitPrice | currency:'USD':true}}
|
||||
{{service.unitPrice | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{service.quantity}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{service.total | currency:'USD':true}}
|
||||
{{service.total | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
@ -103,19 +103,19 @@
|
|||
<tbody>
|
||||
<tr class="subtotal">
|
||||
<td>SUBTOTAL</td>
|
||||
<td>{{invoice.subtotal | currency:'USD':true}}</td>
|
||||
<td>{{invoice.subtotal | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
<tr class="tax">
|
||||
<td>TAX</td>
|
||||
<td>{{invoice.tax | currency:'USD':true}}</td>
|
||||
<td>{{invoice.tax | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
<tr class="discount">
|
||||
<td>DISCOUNT</td>
|
||||
<td>-{{invoice.discount | currency:'USD':true}}</td>
|
||||
<td>-{{invoice.discount | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<td>TOTAL</td>
|
||||
<td>{{invoice.total | currency:'USD':true}}</td>
|
||||
<td>{{invoice.total | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
@ -83,7 +83,7 @@
|
|||
|
||||
<tr>
|
||||
<td class="label">TOTAL DUE</td>
|
||||
<td class="value">{{invoice.total | currency:'USD':true}}</td>
|
||||
<td class="value">{{invoice.total | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
@ -109,13 +109,13 @@
|
|||
{{service.unit}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{service.unitPrice | currency:'USD':true}}
|
||||
{{service.unitPrice | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{service.quantity}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{service.total | currency:'USD':true}}
|
||||
{{service.total | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
@ -125,19 +125,19 @@
|
|||
<tbody>
|
||||
<tr class="subtotal">
|
||||
<td>SUBTOTAL</td>
|
||||
<td>{{invoice.subtotal | currency:'USD':true}}</td>
|
||||
<td>{{invoice.subtotal | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
<tr class="tax">
|
||||
<td>TAX</td>
|
||||
<td>{{invoice.tax | currency:'USD':true}}</td>
|
||||
<td>{{invoice.tax | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
<tr class="discount">
|
||||
<td>DISCOUNT</td>
|
||||
<td>-{{invoice.discount | currency:'USD':true}}</td>
|
||||
<td>-{{invoice.discount | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
<tr class="total">
|
||||
<td>TOTAL</td>
|
||||
<td>{{invoice.total | currency:'USD':true}}</td>
|
||||
<td>{{invoice.total | currency:'USD':'symbol'}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
<!-- Color Column -->
|
||||
<ng-container cdkColumnDef="salary">
|
||||
<mat-header-cell *cdkHeaderCellDef>Salary</mat-header-cell>
|
||||
<mat-cell *cdkCellDef="let row"> {{row.salary | currency:'USD':true}}</mat-cell>
|
||||
<mat-cell *cdkCellDef="let row"> {{row.salary | currency:'USD':'symbol'}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
|
|
|
@ -45,15 +45,16 @@
|
|||
// Fully customizable surroundings for this particular component
|
||||
this.fuseConfig.setSettings({
|
||||
layout : {
|
||||
navigation: 'left', // 'right', 'left', 'top', none
|
||||
toolbar : 'below', // 'above', 'below', none
|
||||
footer : 'none' // 'above', 'below', none
|
||||
mode : 'fullwidth' // 'boxed', 'fullwidth'
|
||||
navigation : 'left', // 'right', 'left', 'top', none
|
||||
navigationFolded: false, // true, false
|
||||
toolbar : 'below', // 'above', 'below', none
|
||||
footer : 'none' // 'above', 'below', none
|
||||
mode : 'fullwidth' // 'boxed', 'fullwidth'
|
||||
},
|
||||
colorClasses : {
|
||||
toolbar: 'mat-white-500-bg',
|
||||
navbar : 'mat-fuse-dark-500-bg',
|
||||
footer : 'mat-fuse-dark-700-bg'
|
||||
navbar : 'mat-fuse-dark-700-bg',
|
||||
footer : 'mat-fuse-dark-900-bg'
|
||||
},
|
||||
customScrollbars: true,
|
||||
routerAnimation : 'fadeIn'
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
||||
<h2>Sidenav header</h2>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
||||
<h2>Sidenav header</h2>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
||||
<h2>Sidenav header</h2>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
||||
<h2>Sidenav header</h2>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
|
|
|
@ -130,7 +130,7 @@
|
|||
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
||||
<h2>Sidenav header</h2>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
|
|
|
@ -49,7 +49,7 @@
|
|||
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
||||
<h2>Sidenav header</h2>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
|
|
|
@ -130,7 +130,7 @@
|
|||
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
||||
<h2>Sidenav header</h2>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
|
|
|
@ -49,7 +49,7 @@
|
|||
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
|
||||
|
||||
<!-- SIDENAV HEADER -->
|
||||
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
||||
<h2>Sidenav header</h2>
|
||||
</div>
|
||||
<!-- / SIDENAV HEADER -->
|
||||
|
|
|
@ -4,13 +4,13 @@
|
|||
|
||||
<!-- TOOLBAR: Above -->
|
||||
<ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
|
||||
<fuse-toolbar class="above" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
|
||||
<fuse-toolbar class="above" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
|
||||
</ng-container>
|
||||
<!-- / TOOLBAR: Above -->
|
||||
|
||||
<!-- NAVBAR: Top -->
|
||||
<fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
|
||||
[class]="fuseSettings.colorClasses.navbar"
|
||||
[ngClass]="fuseSettings.colorClasses.navbar"
|
||||
*ngIf="fuseSettings.layout.navigation === 'top'">
|
||||
</fuse-navbar-horizontal>
|
||||
<!-- / NAVBAR: Top -->
|
||||
|
@ -20,7 +20,7 @@
|
|||
<!-- NAVBAR: Left -->
|
||||
<fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
|
||||
class="left-navbar"
|
||||
[class]="fuseSettings.colorClasses.navbar"
|
||||
[ngClass]="fuseSettings.colorClasses.navbar"
|
||||
*ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
|
||||
</fuse-navbar-vertical>
|
||||
<!-- / NAVBAR: Left -->
|
||||
|
@ -29,7 +29,7 @@
|
|||
|
||||
<!-- TOOLBAR: Below -->
|
||||
<ng-container *ngIf="fuseSettings.layout.toolbar === 'below'">
|
||||
<fuse-toolbar class="below" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
|
||||
<fuse-toolbar class="below" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
|
||||
</ng-container>
|
||||
<!-- / TOOLBAR: Below -->
|
||||
|
||||
|
@ -37,7 +37,7 @@
|
|||
|
||||
<!-- FOOTER: Below -->
|
||||
<ng-container *ngIf="fuseSettings.layout.footer === 'below'">
|
||||
<fuse-footer class="below" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
|
||||
<fuse-footer class="below" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
|
||||
</ng-container>
|
||||
<!-- / FOOTER: Below -->
|
||||
|
||||
|
@ -46,7 +46,7 @@
|
|||
<!-- NAVBAR: Right -->
|
||||
<fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
|
||||
class="right-navbar"
|
||||
[class]="fuseSettings.colorClasses.navbar"
|
||||
[ngClass]="fuseSettings.colorClasses.navbar"
|
||||
*ngIf="fuseSettings.layout.navigation === 'right'">
|
||||
</fuse-navbar-vertical>
|
||||
<!-- / NAVBAR: Right -->
|
||||
|
@ -55,7 +55,7 @@
|
|||
|
||||
<!-- FOOTER: Above -->
|
||||
<ng-container *ngIf="fuseSettings.layout.footer === 'above'">
|
||||
<fuse-footer class="above" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
|
||||
<fuse-footer class="above" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
|
||||
</ng-container>
|
||||
<!-- FOOTER: Above -->
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user