diff --git a/src/app/api/appconfig.ts b/src/app/api/appconfig.ts new file mode 100644 index 0000000..f10fc54 --- /dev/null +++ b/src/app/api/appconfig.ts @@ -0,0 +1,6 @@ +export interface AppConfig { + inputStyle?: string; + dark?: boolean; + theme?: string; + ripple?: boolean; +} \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 53c9af7..2ffcb3f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -8,22 +8,10 @@ export class AppComponent { menuMode = 'static'; - inputStyle = 'outlined'; - - ripple: boolean; - - darkMode: boolean = false; - - lightMode: boolean = true; - - theme = 'light'; - - constructor(private primengConfig: PrimeNGConfig) { - } + constructor(private primengConfig: PrimeNGConfig) { } ngOnInit() { this.primengConfig.ripple = true; - this.ripple = true; document.documentElement.style.fontSize = '14px'; } } diff --git a/src/app/app.config.component.html b/src/app/app.config.component.html index 6b54fab..92296fc 100644 --- a/src/app/app.config.component.html +++ b/src/app/app.config.component.html @@ -14,19 +14,19 @@
Input Style
-
-
Ripple Effect
- +
Menu Type
@@ -44,22 +44,22 @@
Bootstrap
-
-
-
-
@@ -68,22 +68,22 @@
Material Design
-
-
-
-
@@ -92,22 +92,22 @@
Material Design Compact
-
-
-
-
@@ -116,7 +116,7 @@
Tailwind
-
@@ -125,7 +125,7 @@
Fluent UI
-
@@ -134,42 +134,42 @@
PrimeOne Design - 2022
-
-
-
-
-
-
-
-
@@ -178,62 +178,62 @@
PrimeOne Design - 2021
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/app.config.component.ts b/src/app/app.config.component.ts index 726941f..2513072 100644 --- a/src/app/app.config.component.ts +++ b/src/app/app.config.component.ts @@ -1,50 +1,35 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { PrimeNGConfig } from 'primeng/api'; +import { Subscription } from 'rxjs'; +import { AppConfig } from './api/appconfig'; import { AppComponent } from './app.component'; import { AppMainComponent } from './app.main.component'; +import { ConfigService } from './service/app.config.service'; @Component({ selector: 'app-config', - templateUrl:'./app.config.component.html' + templateUrl: './app.config.component.html' }) -export class AppConfigComponent implements OnInit{ +export class AppConfigComponent implements OnInit, OnDestroy { - topbarThemes: any[]; + scale: number = 14; - componentThemes: any[]; + scales: any[] = [12, 13, 14, 15, 16]; - topbarColor = 'light'; + config: AppConfig; - componentColor = 'blue'; + subscription: Subscription; - scale:number = 14; - - scales:any[] = [12,13,14,15,16]; + constructor(public app: AppComponent, public appMain: AppMainComponent, public configService: ConfigService, public primengConfig: PrimeNGConfig) { } - constructor(public app: AppComponent, public appMain: AppMainComponent) {} + ngOnInit() { + this.config = this.configService.config; + this.subscription = this.configService.configUpdate$.subscribe(config => { + this.config = config; + this.scale = 14; - ngOnInit() { } - replaceLink(linkElement, href) { - if (this.isIE()) { - linkElement.setAttribute('href', href); - } - else { - const id = linkElement.getAttribute('id'); - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('href', href); - cloneLinkElement.setAttribute('id', id + '-clone'); - - linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); - - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', id); - }); - } - } - - isIE() { - return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent); + this.applyScale(); + }); } onConfigButtonClick(event) { @@ -53,18 +38,38 @@ export class AppConfigComponent implements OnInit{ event.preventDefault(); } - incrementScale(){ + incrementScale() { this.scale++; this.applyScale(); } - decrementScale(){ + decrementScale() { this.scale--; this.applyScale(); } - applyScale(){ + applyScale() { document.documentElement.style.fontSize = this.scale + 'px'; } + onRippleChange(ripple) { + this.primengConfig.ripple = ripple; + this.configService.updateConfig({...this.config, ...{ripple}}); + } + + onInputStyleChange() { + this.configService.updateConfig(this.config); + } + + changeTheme(theme:string, dark:boolean){ + let themeElement = document.getElementById('theme-css'); + themeElement.setAttribute('href', 'assets/theme/' + theme + '/theme.css'); + this.configService.updateConfig({...this.config, ...{theme, dark}}); + } + + ngOnDestroy() { + if (this.subscription) { + this.subscription.unsubscribe(); + } + } } \ No newline at end of file diff --git a/src/app/app.footer.component.html b/src/app/app.footer.component.html index 34d29da..b887fcd 100644 --- a/src/app/app.footer.component.html +++ b/src/app/app.footer.component.html @@ -1,5 +1,5 @@
- Logo + Logo by PrimeNG
\ No newline at end of file diff --git a/src/app/app.footer.component.ts b/src/app/app.footer.component.ts index dece5ec..a99898e 100644 --- a/src/app/app.footer.component.ts +++ b/src/app/app.footer.component.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { AppComponent } from './app.component'; +import { AppMainComponent } from './app.main.component'; @Component({ selector: 'app-footer', templateUrl: './app.footer.component.html' }) export class AppFooterComponent{ - constructor(public app: AppComponent) {} + constructor(public appMain: AppMainComponent) {} } diff --git a/src/app/app.main.component.html b/src/app/app.main.component.html index 91ba382..b055634 100644 --- a/src/app/app.main.component.html +++ b/src/app/app.main.component.html @@ -1,11 +1,11 @@
+ 'p-ripple-disabled': !config.ripple, 'p-input-filled': config.inputStyle === 'filled'}">
diff --git a/src/app/app.main.component.ts b/src/app/app.main.component.ts index 31359eb..ebbcb07 100644 --- a/src/app/app.main.component.ts +++ b/src/app/app.main.component.ts @@ -1,7 +1,9 @@ import { Component, AfterViewInit, OnDestroy, Renderer2, OnInit } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; -import { PrimeNGConfig } from 'primeng/api'; import { AppComponent } from './app.component'; +import { ConfigService } from './service/app.config.service'; +import { AppConfig } from './api/appconfig'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-main', @@ -47,10 +49,15 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit { configClick: boolean; - constructor(public renderer: Renderer2, private primengConfig: PrimeNGConfig, public app: AppComponent) {} + config: AppConfig; + + subscription: Subscription; + + constructor(public renderer: Renderer2, public app: AppComponent, public configService: ConfigService) { } ngOnInit() { - this.primengConfig.ripple = true; + this.config = this.configService.config; + this.subscription = this.configService.configUpdate$.subscribe(config => this.config = config); } ngAfterViewInit() { @@ -69,6 +76,9 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit { if (!this.menuClick && this.isOverlay()) { this.menuInactiveDesktop = true; } + if (!this.menuClick){ + this.overlayMenuActive = false; + } } if (this.configActive && !this.configClick) { @@ -135,11 +145,6 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit { this.menuClick = true; } - onRippleChange(event) { - this.app.ripple = event.checked; - this.primengConfig.ripple = event.checked; - } - onConfigClick(event) { this.configClick = true; } @@ -168,11 +173,10 @@ export class AppMainComponent implements AfterViewInit, OnDestroy, OnInit { if (this.documentClickListener) { this.documentClickListener(); } - } - changeTheme(theme:string, darkMode:boolean){ - let themeElement = document.getElementById('theme-css'); - themeElement.setAttribute('href', 'assets/theme/' + theme + '/theme.css'); - this.app.darkMode = darkMode; + + if (this.subscription) { + this.subscription.unsubscribe(); + } } } diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts index 3dc1b9f..8c9f0ff 100644 --- a/src/app/app.menu.component.ts +++ b/src/app/app.menu.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { AppComponent } from './app.component'; +import { AppMainComponent } from './app.main.component'; @Component({ selector: 'app-menu', @@ -13,7 +13,7 @@ import { AppComponent } from './app.component'; - Prime Blocks + Prime Blocks
@@ -23,10 +23,9 @@ export class AppMenuComponent implements OnInit { model: any[]; - constructor(public app: AppComponent){} + constructor(public appMain: AppMainComponent) { } ngOnInit() { - this.model = [ { label: 'Home', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4e32704..f29be03 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -97,6 +97,7 @@ import { AppFooterComponent } from './app.footer.component'; import { AppConfigComponent } from './app.config.component'; import { AppMenuComponent } from './app.menu.component'; import { AppMenuitemComponent } from './app.menuitem.component'; + import { DashboardComponent } from './components/dashboard/dashboard.component'; import { FormLayoutComponent } from './components/formlayout/formlayout.component'; import { FloatLabelComponent } from './components/floatlabel/floatlabel.component'; @@ -120,11 +121,11 @@ import { CrudComponent } from './components/crud/crud.component'; import { TimelineComponent } from './components/timeline/timeline.component'; import { IconsComponent } from './components/icons/icons.component'; import { BlocksComponent } from './components/blocks/blocks.component'; - import { PaymentComponent} from './components/menus/payment.component'; import { ConfirmationComponent } from './components/menus/confirmation.component'; import { PersonalComponent } from './components/menus/personal.component'; import { SeatComponent } from './components/menus/seat.component'; + import { CountryService } from './service/countryservice'; import { CustomerService } from './service/customerservice'; import { EventService } from './service/eventservice'; @@ -133,7 +134,11 @@ import { NodeService } from './service/nodeservice'; import { PhotoService } from './service/photoservice'; import { ProductService } from './service/productservice'; import { MenuService } from './service/app.menu.service'; +<<<<<<< HEAD import { LandingComponent } from './components/landing/landing.component'; +======= +import { ConfigService } from './service/app.config.service'; +>>>>>>> ffd58ddc301f2db09fb646ebb6e97e77fc2ab70e @NgModule({ imports: [ @@ -267,7 +272,7 @@ import { LandingComponent } from './components/landing/landing.component'; providers: [ {provide: LocationStrategy, useClass: HashLocationStrategy}, CountryService, CustomerService, EventService, IconService, NodeService, - PhotoService, ProductService, MenuService + PhotoService, ProductService, MenuService, ConfigService ], bootstrap: [AppComponent] }) diff --git a/src/app/app.topbar.component.html b/src/app/app.topbar.component.html index 35d4174..0e1698a 100644 --- a/src/app/app.topbar.component.html +++ b/src/app/app.topbar.component.html @@ -1,6 +1,6 @@
diff --git a/src/app/app.topbar.component.ts b/src/app/app.topbar.component.ts index 5622d60..a9b3a34 100644 --- a/src/app/app.topbar.component.ts +++ b/src/app/app.topbar.component.ts @@ -1,5 +1,4 @@ import { Component, OnDestroy } from '@angular/core'; -import { AppComponent } from './app.component'; import { AppMainComponent } from './app.main.component'; import { Subscription } from 'rxjs'; import { MenuItem } from 'primeng/api'; @@ -8,17 +7,9 @@ import { MenuItem } from 'primeng/api'; selector: 'app-topbar', templateUrl: './app.topbar.component.html' }) -export class AppTopBarComponent implements OnDestroy{ - - subscription: Subscription; +export class AppTopBarComponent { items: MenuItem[]; - constructor(public app: AppComponent, public appMain: AppMainComponent) {} - - ngOnDestroy() { - if (this.subscription) { - this.subscription.unsubscribe(); - } - } + constructor(public appMain: AppMainComponent) { } } diff --git a/src/app/components/blockviewer/blockviewer.component.ts b/src/app/components/blockviewer/blockviewer.component.ts index 94f11d1..73ae3ba 100644 --- a/src/app/components/blockviewer/blockviewer.component.ts +++ b/src/app/components/blockviewer/blockviewer.component.ts @@ -1,5 +1,4 @@ import { Component, Input } from '@angular/core'; -import { environment } from '../../../environments/environment'; enum BlockView { PREVIEW, @@ -18,19 +17,18 @@ enum BlockView {
Preview - - + Code - +
-
+
{{code}}
@@ -49,7 +47,7 @@ export class BlockViewer { @Input() previewStyle: string; - @Input() free: boolean = false; + @Input() free: boolean = true; @Input() new: boolean = false; @@ -58,23 +56,14 @@ export class BlockViewer { blockView: BlockView = BlockView.PREVIEW; activateView(event: Event, blockView: BlockView) { - if (!this.codeDisabled) { - this.blockView = blockView; - } - - event.preventDefault(); + + this.blockView = blockView; + event.preventDefault(); } async copyCode(event: Event) { - if (!this.codeDisabled) { - await navigator.clipboard.writeText(this.code); - } - - event.preventDefault(); - } - - get codeDisabled() { - return this.free ? false : (environment ? environment.production: false); + await navigator.clipboard.writeText(this.code); + event.preventDefault(); } } diff --git a/src/app/components/charts/charts.component.ts b/src/app/components/charts/charts.component.ts index b246a45..23748dd 100755 --- a/src/app/components/charts/charts.component.ts +++ b/src/app/components/charts/charts.component.ts @@ -1,9 +1,12 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subscription } from 'rxjs'; +import { AppConfig } from 'src/app/api/appconfig'; +import { ConfigService } from 'src/app/service/app.config.service'; @Component({ templateUrl: './charts.component.html' }) -export class ChartsComponent implements OnInit { +export class ChartsComponent implements OnInit, OnDestroy { lineData: any; @@ -25,7 +28,19 @@ export class ChartsComponent implements OnInit { radarOptions: any; + config: AppConfig; + + subscription: Subscription; + + constructor(public configService: ConfigService) { } + ngOnInit() { + this.config = this.configService.config; + this.subscription = this.configService.configUpdate$.subscribe(config => { + this.config = config; + this.updateChartOptions(); + }); + this.lineData = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ @@ -52,7 +67,7 @@ export class ChartsComponent implements OnInit { plugins: { legend: { labels: { - fontColor: '#FFFFFF' + color: '#A0A7B5' } } }, @@ -96,7 +111,7 @@ export class ChartsComponent implements OnInit { plugins: { legend: { labels: { - fontColor: '#A0A7B5' + color: '#A0A7B5' } } }, @@ -143,7 +158,7 @@ export class ChartsComponent implements OnInit { plugins: { legend: { labels: { - fontColor: '#A0A7B5' + color: '#A0A7B5' } } } @@ -180,7 +195,7 @@ export class ChartsComponent implements OnInit { plugins: { legend: { labels: { - fontColor: '#A0A7B5' + color: '#A0A7B5' } } }, @@ -223,7 +238,7 @@ export class ChartsComponent implements OnInit { plugins: { legend: { labels: { - fontColor: '#A0A7B5' + color: '#A0A7B5' } } }, @@ -236,4 +251,222 @@ export class ChartsComponent implements OnInit { } }; } + + updateChartOptions() { + if (this.config.dark) + this.applyDarkTheme(); + else + this.applyLightTheme(); + } + + applyLightTheme() { + this.lineOptions = { + plugins: { + legend: { + labels: { + color: '#A0A7B5' + } + } + }, + scales: { + x: { + ticks: { + color: '#A0A7B5' + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + } + }, + y: { + ticks: { + color: '#A0A7B5' + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + } + }, + } + }; + + this.barOptions = { + plugins: { + legend: { + labels: { + color: '#A0A7B5' + } + } + }, + scales: { + x: { + ticks: { + color: '#A0A7B5' + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + } + }, + y: { + ticks: { + color: '#A0A7B5' + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + } + }, + } + }; + + this.pieOptions = { + plugins: { + legend: { + labels: { + color: '#A0A7B5' + } + } + } + }; + + this.polarOptions = { + plugins: { + legend: { + labels: { + color: '#A0A7B5' + } + } + }, + scales: { + r: { + grid: { + color: 'rgba(160, 167, 181, .3)' + } + } + } + }; + + this.radarOptions = { + plugins: { + legend: { + labels: { + color: '#A0A7B5' + } + } + }, + scales: { + r: { + grid: { + color: 'rgba(160, 167, 181, .3)' + } + } + } + }; + + } + + applyDarkTheme() { + this.lineOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef' + } + } + }, + scales: { + x: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + } + }, + y: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + } + }, + } + }; + + this.barOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef' + } + } + }, + scales: { + x: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + } + }, + y: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + } + }, + } + }; + + this.pieOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef' + } + } + } + }; + + this.polarOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef' + } + } + }, + scales: { + r: { + grid: { + color: 'rgba(160, 167, 181, .3)' + } + } + } + }; + + this.radarOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef' + } + } + }, + scales: { + r: { + grid: { + color: 'rgba(160, 167, 181, .3)' + } + } + } + }; + } + + ngOnDestroy() { + if (this.subscription) { + this.subscription.unsubscribe(); + } + } } diff --git a/src/app/service/app.config.service.ts b/src/app/service/app.config.service.ts new file mode 100644 index 0000000..0a165d6 --- /dev/null +++ b/src/app/service/app.config.service.ts @@ -0,0 +1,27 @@ +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs'; +import { AppConfig } from '../api/appconfig'; + +@Injectable() +export class ConfigService { + + config: AppConfig = { + theme: 'lara-light-indigo', + dark: false, + inputStyle: 'outlined', + ripple: true + }; + + private configUpdate = new Subject(); + + configUpdate$ = this.configUpdate.asObservable(); + + updateConfig(config: AppConfig) { + this.config = config; + this.configUpdate.next(config); + } + + getConfig() { + return this.config; + } +} diff --git a/src/app/service/app.menu.service.ts b/src/app/service/app.menu.service.ts index 0163ecf..ba552db 100644 --- a/src/app/service/app.menu.service.ts +++ b/src/app/service/app.menu.service.ts @@ -15,6 +15,6 @@ export class MenuService { } reset() { - // this.resetSource.next(true); + this.resetSource.next(true); } }