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

New pricing page design

Browse Source 
+ Fixed: Some color issues
+ Fixed: Icons and Quick Nav in memory web api related data issues
This commit is contained in:
Sercan Yemen 2017-10-13 12:21:00 +03:00
parent 4f451a74e9
commit ad432ca31d
17 changed files with 895 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/core/scss/partials/_colors.scss
View File

@ -55,7 +55,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.secondary-text,
.mat-icon,
.icon {
color: rgba(0, 0, 0, 0.54);
color: rgba(0, 0, 0, 0.54) !important;
}
&.hint-text,
@ -80,7 +80,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.mat-icon,
.icon {
color: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1) !important;
}
&.secondary-text,
@ -111,6 +111,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
// If the contrast color is white...
$fuseForeground: (
base: white,
text: white,
hint-text: rgba(white, 0.5),
divider: rgba(white, 0.12),
);

2
src/app/core/scss/partials/_material.scss
View File

@ -196,7 +196,7 @@ mat-icon.status {
background-color: #FFFFFF;
width: 280px;
border-radius: 2px;
margin: 24px 24px 0 0;
margin: 12px;
overflow: hidden;
&.style-1 {

1
src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
View File

@ -1,6 +1,7 @@
<!-- 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">
<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>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>

4
src/app/main/content/pages/pages.module.ts
View File

@ -15,6 +15,7 @@ import { Error500Module } from './errors/500/error-500.module';
import { InvoiceCompactModule } from './invoices/compact/compact.module';
import { InvoiceModernModule } from './invoices/modern/modern.module';
import { MaintenanceModule } from './maintenance/maintenence.module';
import { PricingModule } from './pricing/pricing.module';
import { ProfileModule } from './profile/profile.module';
import { SearchModule } from './search/search.module';
@ -45,6 +46,9 @@ import { SearchModule } from './search/search.module';
// Maintenance
MaintenanceModule,
// Pricing
PricingModule,
// Profile
ProfileModule,

39
src/app/main/content/pages/pricing/pricing.module.ts Normal file
View File

@ -0,0 +1,39 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../../../../core/modules/shared.module';
import { FusePricingStyle1Component } from './style-1/style-1.component';
import { FusePricingStyle2Component } from './style-2/style-2.component';
import { FusePricingStyle3Component } from './style-3/style-3.component';
const routes = [
{
path : 'pages/pricing/style-1',
component: FusePricingStyle1Component
},
{
path : 'pages/pricing/style-2',
component: FusePricingStyle2Component
},
{
path : 'pages/pricing/style-3',
component: FusePricingStyle3Component
}
];
@NgModule({
declarations: [
FusePricingStyle1Component,
FusePricingStyle2Component,
FusePricingStyle3Component
],
imports : [
SharedModule,
RouterModule.forChild(routes)
]
})
export class PricingModule
{
}

175
src/app/main/content/pages/pricing/style-1/style-1.component.html Normal file
View File

@ -0,0 +1,175 @@
<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="start start">
<div class="hero-text" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<div class="h1">Simple Pricing!</div>
<div class="h3">
The most advanced customer support tools with a simple and affordable pricing. And you can always try
for 30 days, free!
</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content" fxLayout="column">
<!-- PRICE TABLES -->
<div class="price-tables" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<div class="price-table style-1 mat-elevation-z4" fxLayout="column">
<div class="package-type mat-primary-bg">
<span>BASIC</span>
</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">4</div>
<div class="period">/ month</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="terms" fxLayout="column">
<div class="term">
<span class="text-bold">10</span>
Projects
</div>
<div class="term">
<span class="text-bold">10</span>
Pages
</div>
<div class="term">
<span class="text-bold">100</span>
Mb Disk Space
</div>
</div>
<button mat-raised-button class="cta-button" color="accent">BUY NOW</button>
</div>
<div class="price-table style-1 mat-elevation-z12" fxLayout="column">
<div class="package-type mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
<span>STANDARD</span>
<span class="sale mat-accent-color mat-hue-1">Save 15%</span>
</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">8</div>
<div class="period">/ month</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="terms" fxLayout="column">
<div class="term">
<span class="text-bold">20</span>
Projects
</div>
<div class="term">
<span class="text-bold">20</span>
Pages
</div>
<div class="term">
<span class="text-bold">200</span>
Mb Disk Space
</div>
</div>
<button mat-raised-button class="cta-button" color="accent">BUY NOW</button>
</div>
<div class="price-table style-1 mat-elevation-z4" fxLayout="column">
<div class="package-type mat-primary-bg" fxLayout="row">
<span>ADVANCED</span>
</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">12</div>
<div class="period">/ month</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="terms" fxLayout="column">
<div class="term">
<span class="text-bold">40</span>
Projects
</div>
<div class="term">
<span class="text-bold">40</span>
Pages
</div>
<div class="term">
<span class="text-bold">500</span>
Mb Disk Space
</div>
</div>
<button mat-raised-button class="cta-button" color="accent">BUY NOW</button>
</div>
</div>
<!-- / PRICE TABLES -->
<div class="faq" fxLayout="row" fxLayoutWrap>
<div class="title" fxFlex="100">Frequently Asked Questions</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">How does free trial work?</div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
accumsan. In dignissim laoreet ipsum eu interdum.
</div>
</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">Can I cancel any time?</div>
<div class="answer">
Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
Donec maximus ipsum in malesuada hendrerit.
</div>
</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">What happens after my trial ended?</div>
<div class="answer">
Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
Donec maximus ipsum in malesuada hendrerit.
</div>
</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">Can I have a discount?</div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
accumsan. In dignissim laoreet ipsum eu interdum.
</div>
</div>
</div>
</div>
</div>

95
src/app/main/content/pages/pricing/style-1/style-1.component.scss Normal file
View File

@ -0,0 +1,95 @@
@import "src/app/core/scss/fuse";
:host {
#price-tables {
.header {
padding: 24px;
height: 600px;
min-height: 600px;
background: #1A237E;
background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
@include media-breakpoint-down('xs') {
height: 400px;
min-height: 400px;
}
.hero-text {
margin: 128px 24px;
@include media-breakpoint-down('xs') {
margin: 64px 24px;
}
.h1 {
color: white;
font-size: 48px;
font-weight: 300;
letter-spacing: 0.01em;
text-align: center;
@include media-breakpoint-down('xs') {
font-size: 32px;
}
}
.h3 {
color: rgba(255, 255, 255, 0.75);
max-width: 480px;
text-align: center;
margin-top: 16px;
font-weight: 300;
letter-spacing: 0.03em;
@include media-breakpoint-down('xs') {
font-size: 14px;
}
}
}
}
.price-tables {
flex: 1 0 auto;
margin-top: -192px;
@include media-breakpoint-down('xs') {
margin-top: -128px;
}
.price-table {
margin: 12px;
}
}
.faq {
flex: 1 0 auto;
margin: 96px auto;
max-width: 840px;
.title {
font-size: 32px;
font-weight: 300;
text-align: center;
margin-bottom: 64px;
padding: 0 16px;
}
.item {
padding: 24px;
.question {
font-size: 18px;
margin-bottom: 8px;
}
.answer {
font-size: 16px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.54);
}
}
}
}
}

15
src/app/main/content/pages/pricing/style-1/style-1.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-pricing-style-1',
templateUrl: './style-1.component.html',
styleUrls : ['./style-1.component.scss']
})
export class FusePricingStyle1Component
{
constructor()
{
}
}

161
src/app/main/content/pages/pricing/style-2/style-2.component.html Normal file
View File

@ -0,0 +1,161 @@
<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="start start">
<div class="hero-text" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<div class="h1">Simple Pricing!</div>
<div class="h3">
The most advanced customer support tools with a simple and affordable pricing. And you can always try
for 30 days, free!
</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content" fxLayout="column">
<!-- PRICE TABLES -->
<div class="price-tables" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<div class="price-table style-2 mat-elevation-z4" fxLayout="column">
<div class="package-type mat-accent-fg">SILVER PACKAGE</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div class="value">99</div>
</div>
<div class="period">PER MONTH</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">
<span class="text-bold">10</span>
Projects
</div>
<div class="term">
<span class="text-bold">10</span>
Pages
</div>
<div class="term">
<span class="text-bold">100</span>
Mb Disk Space
</div>
</div>
<button mat-raised-button class="cta-button" color="accent">GET STARTED</button>
</div>
<div class="price-table style-2 mat-elevation-z12" fxLayout="column">
<div class="badge mat-warn-bg">BEST VALUE</div>
<div class="package-type mat-accent-fg">GOLD PACKAGE</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div class="value">299</div>
</div>
<div class="period">PER MONTH</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">
<span class="text-bold">20</span>
Projects
</div>
<div class="term">
<span class="text-bold">20</span>
Pages
</div>
<div class="term">
<span class="text-bold">200</span>
Mb Disk Space
</div>
</div>
<button mat-raised-button class="cta-button" color="accent">GET STARTED</button>
</div>
<div class="price-table style-2 mat-elevation-z4" fxLayout="column">
<div class="package-type mat-accent-fg">PLATINUM PACKAGE</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div class="value">499</div>
</div>
<div class="period">PER MONTH</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">
<span class="text-bold">40</span>
Projects
</div>
<div class="term">
<span class="text-bold">40</span>
Pages
</div>
<div class="term">
<span class="text-bold">500</span>
Mb Disk Space
</div>
</div>
<button mat-raised-button class="cta-button" color="accent">GET STARTED</button>
</div>
</div>
<!-- / PRICE TABLES -->
<div class="faq" fxLayout="row" fxLayoutWrap>
<div class="title" fxFlex="100">Frequently Asked Questions</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">How does free trial work?</div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
accumsan. In dignissim laoreet ipsum eu interdum.
</div>
</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">Can I cancel any time?</div>
<div class="answer">
Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
Donec maximus ipsum in malesuada hendrerit.
</div>
</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">What happens after my trial ended?</div>
<div class="answer">
Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
Donec maximus ipsum in malesuada hendrerit.
</div>
</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">Can I have a discount?</div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
accumsan. In dignissim laoreet ipsum eu interdum.
</div>
</div>
</div>
</div>
</div>

95
src/app/main/content/pages/pricing/style-2/style-2.component.scss Normal file
View File

@ -0,0 +1,95 @@
@import "src/app/core/scss/fuse";
:host {
#price-tables {
.header {
padding: 24px;
height: 600px;
min-height: 600px;
background: #1A237E;
background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
@include media-breakpoint-down('xs') {
height: 400px;
min-height: 400px;
}
.hero-text {
margin: 128px 24px;
@include media-breakpoint-down('xs') {
margin: 64px 24px;
}
.h1 {
color: white;
font-size: 48px;
font-weight: 300;
letter-spacing: 0.01em;
text-align: center;
@include media-breakpoint-down('xs') {
font-size: 32px;
}
}
.h3 {
color: rgba(255, 255, 255, 0.75);
max-width: 480px;
text-align: center;
margin-top: 16px;
font-weight: 300;
letter-spacing: 0.03em;
@include media-breakpoint-down('xs') {
font-size: 14px;
}
}
}
}
.price-tables {
flex: 1 0 auto;
margin-top: -192px;
@include media-breakpoint-down('xs') {
margin-top: -128px;
}
.price-table {
margin: 12px;
}
}
.faq {
flex: 1 0 auto;
margin: 96px auto;
max-width: 840px;
.title {
font-size: 32px;
font-weight: 300;
text-align: center;
margin-bottom: 64px;
padding: 0 16px;
}
.item {
padding: 24px;
.question {
font-size: 18px;
margin-bottom: 8px;
}
.answer {
font-size: 16px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.54);
}
}
}
}
}

15
src/app/main/content/pages/pricing/style-2/style-2.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-pricing-style-2',
templateUrl: './style-2.component.html',
styleUrls : ['./style-2.component.scss']
})
export class FusePricingStyle2Component
{
constructor()
{
}
}

156
src/app/main/content/pages/pricing/style-3/style-3.component.html Normal file
View File

@ -0,0 +1,156 @@
<div id="price-tables" class="page-layout simple fullwidth" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="start start">
<div class="hero-text" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<div class="h1">Simple Pricing!</div>
<div class="h3">
The most advanced customer support tools with a simple and affordable pricing. And you can always try
for 30 days, free!
</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content" fxLayout="column">
<!-- PRICE TABLES -->
<div class="price-tables" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<div class="price-table style-3 mat-elevation-z4" fxLayout="column">
<div class="package-type">
<div class="title">Starter</div>
<div class="subtitle">For small teams</div>
</div>
<div class="price mat-primary-300-bg" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">29</div>
<div class="period">monthly per user</div>
</div>
</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">Unlimited projects</div>
<div class="term">Unlimited pages</div>
<div class="term">Unlimited disk space</div>
<div class="term">24 / 7 Free support</div>
</div>
<button mat-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
<div class="note">7 day free trial to start</div>
</div>
<div class="price-table style-3 mat-elevation-z12" fxLayout="column">
<div class="package-type">
<div class="title">Pro</div>
<div class="subtitle">For larger teams</div>
</div>
<div class="price mat-primary-bg" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">59</div>
<div class="period">monthly per user</div>
</div>
</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">Unlimited projects</div>
<div class="term">Unlimited pages</div>
<div class="term">Unlimited disk space</div>
<div class="term">24 / 7 Free support</div>
<div class="term mat-warn-fg">Advanced reporting</div>
<div class="term mat-warn-fg">Customizable interface</div>
<div class="term mat-warn-fg">CRM Integration</div>
</div>
<button mat-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
<div class="note">30 day free trial to start</div>
</div>
<div class="price-table style-3 mat-elevation-z4" fxLayout="column">
<div class="package-type">
<div class="title">Enterprise</div>
<div class="subtitle">For big teams</div>
</div>
<div class="price mat-primary-300-bg" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">99</div>
<div class="period">monthly per user</div>
</div>
</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">Unlimited projects</div>
<div class="term">Unlimited pages</div>
<div class="term">Unlimited disk space</div>
<div class="term">For full feature list, call us</div>
</div>
<button mat-raised-button class="cta-button" color="accent">CALL US</button>
<div class="note">90 day free trial to start</div>
</div>
</div>
<!-- / PRICE TABLES -->
<div class="faq" fxLayout="row" fxLayoutWrap>
<div class="title" fxFlex="100">Frequently Asked Questions</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">How does free trial work?</div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
accumsan. In dignissim laoreet ipsum eu interdum.
</div>
</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">Can I cancel any time?</div>
<div class="answer">
Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
Donec maximus ipsum in malesuada hendrerit.
</div>
</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">What happens after my trial ended?</div>
<div class="answer">
Aliquam erat volutpat. Etiam luctus massa ex, at tempus tellus blandit quis. Sed quis neque tellus.
Donec maximus ipsum in malesuada hendrerit.
</div>
</div>
<div class="item" fxFlex="100" fxFlex.gt-xs="50">
<div class="question">Can I have a discount?</div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a diam nec augue tincidunt
accumsan. In dignissim laoreet ipsum eu interdum.
</div>
</div>
</div>
</div>
</div>

95
src/app/main/content/pages/pricing/style-3/style-3.component.scss Normal file
View File

@ -0,0 +1,95 @@
@import "src/app/core/scss/fuse";
:host {
#price-tables {
.header {
padding: 24px;
height: 600px;
min-height: 600px;
background: #1A237E;
background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
@include media-breakpoint-down('xs') {
height: 400px;
min-height: 400px;
}
.hero-text {
margin: 128px 24px;
@include media-breakpoint-down('xs') {
margin: 64px 24px;
}
.h1 {
color: white;
font-size: 48px;
font-weight: 300;
letter-spacing: 0.01em;
text-align: center;
@include media-breakpoint-down('xs') {
font-size: 32px;
}
}
.h3 {
color: rgba(255, 255, 255, 0.75);
max-width: 480px;
text-align: center;
margin-top: 16px;
font-weight: 300;
letter-spacing: 0.03em;
@include media-breakpoint-down('xs') {
font-size: 14px;
}
}
}
}
.price-tables {
flex: 1 0 auto;
margin-top: -192px;
@include media-breakpoint-down('xs') {
margin-top: -128px;
}
.price-table {
margin: 12px;
}
}
.faq {
flex: 1 0 auto;
margin: 96px auto;
max-width: 840px;
.title {
font-size: 32px;
font-weight: 300;
text-align: center;
margin-bottom: 64px;
padding: 0 16px;
}
.item {
padding: 24px;
.question {
font-size: 18px;
margin-bottom: 8px;
}
.answer {
font-size: 16px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.54);
}
}
}
}
}

15
src/app/main/content/pages/pricing/style-3/style-3.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-pricing-style-3',
templateUrl: './style-3.component.html',
styleUrls : ['./style-3.component.scss']
})
export class FusePricingStyle3Component
{
constructor()
{
}
}

2
src/app/main/content/ui/icons/icons.component.ts
View File

@ -20,7 +20,7 @@ export class FuseIconsComponent implements OnInit
{
this.http.get('api/icons')
.subscribe((icons: any) => {
this.icons = icons.data;
this.icons = icons;
this.filteredIcons = this.icons;
this.loading = false;
});

4
src/app/main/quick-panel/quick-panel.component.ts
View File

@ -29,12 +29,12 @@ export class FuseQuickPanelComponent implements OnInit
{
this.http.get('api/quick-panel-notes')
.subscribe((response: any) => {
this.notes = response.data;
this.notes = response;
});
this.http.get('api/quick-panel-events')
.subscribe((response: any) => {
this.events = response.data;
this.events = response;
});
}

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

@ -184,6 +184,28 @@ export class NavigationModel
'icon' : 'build',
'url' : '/pages/maintenance'
},
{
'title' : 'Pricing',
'type' : 'collapse',
'icon' : 'attach_money',
'children': [
{
'title': 'Style 1',
'type' : 'item',
'url' : '/pages/pricing/style-1'
},
{
'title': 'Style 2',
'type' : 'item',
'url' : '/pages/pricing/style-2'
},
{
'title': 'Style 3',
'type' : 'item',
'url' : '/pages/pricing/style-3'
}
]
},
{
'title': 'Profile',
'type' : 'item',