f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix conflict

Browse Source
This commit is contained in:
Çetin 2022-01-07 16:08:27 +03:00
commit 497a529c7b
16 changed files with 400 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/api/appconfig.ts Normal file
View File

@ -0,0 +1,6 @@
export interface AppConfig {
inputStyle?: string;
dark?: boolean;
theme?: string;
ripple?: boolean;
}

14
src/app/app.component.ts
View File

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

74
src/app/app.config.component.html
View File

@ -14,19 +14,19 @@
<h6>Input Style</h6>
<div class="p-formgroup-inline">
<div class="field-radiobutton">
<p-radioButton name="inputStyle" value="outlined" [(ngModel)]="app.inputStyle"
<p-radioButton name="inputStyle" value="outlined" [(ngModel)]="config.inputStyle" (onClick)="onInputStyleChange()"
inputId="inputStyle1"></p-radioButton>
<label for="inputStyle1">Outlined</label>
</div>
<div class="field-radiobutton">
<p-radioButton name="inputStyle" value="filled" [(ngModel)]="app.inputStyle"
<p-radioButton name="inputStyle" value="filled" [(ngModel)]="config.inputStyle" (onClick)="onInputStyleChange()"
inputId="inputStyle2"></p-radioButton>
<label for="inputStyle2">Filled</label>
</div>
</div>
<h6>Ripple Effect</h6>
<p-inputSwitch [ngModel]="app.ripple" (onChange)="appMain.onRippleChange($event)"></p-inputSwitch>
<p-inputSwitch [ngModel]="config.ripple" (onChange)="onRippleChange($event.checked)"></p-inputSwitch>
<h6>Menu Type</h6>
<div class="p-formgroup-inline">
@ -44,22 +44,22 @@
<h6>Bootstrap</h6>
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('bootstrap4-light-blue', false)">
<button class="p-link" (click)="changeTheme('bootstrap4-light-blue', false)">
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('bootstrap4-light-purple', false)">
<button class="p-link" (click)="changeTheme('bootstrap4-light-purple', false)">
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Purple">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('bootstrap4-dark-blue', true)">
<button class="p-link" (click)="changeTheme('bootstrap4-dark-blue', true)">
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('bootstrap4-dark-purple', true)">
<button class="p-link" (click)="changeTheme('bootstrap4-dark-purple', true)">
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Purple">
</button>
</div>
@ -68,22 +68,22 @@
<h6>Material Design</h6>
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('md-light-indigo', false)">
<button class="p-link" (click)="changeTheme('md-light-indigo', false)">
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('md-light-deeppurple', false)">
<button class="p-link" (click)="changeTheme('md-light-deeppurple', false)">
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('md-dark-indigo', true)">
<button class="p-link" (click)="changeTheme('md-dark-indigo', true)">
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('md-dark-deeppurple', true)">
<button class="p-link" (click)="changeTheme('md-dark-deeppurple', true)">
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple">
</button>
</div>
@ -92,22 +92,22 @@
<h6>Material Design Compact</h6>
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('mdc-light-indigo', false)">
<button class="p-link" (click)="changeTheme('mdc-light-indigo', false)">
<img src="assets/layout/images/themes/md-light-indigo.svg" alt="Material Light Indigo">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('mdc-light-deeppurple', false)">
<button class="p-link" (click)="changeTheme('mdc-light-deeppurple', false)">
<img src="assets/layout/images/themes/md-light-deeppurple.svg" alt="Material Light DeepPurple">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('mdc-dark-indigo', true)">
<button class="p-link" (click)="changeTheme('mdc-dark-indigo', true)">
<img src="assets/layout/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('mdc-dark-deeppurple', true)">
<button class="p-link" (click)="changeTheme('mdc-dark-deeppurple', true)">
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" alt="Material Dark DeepPurple">
</button>
</div>
@ -116,7 +116,7 @@
<h6>Tailwind</h6>
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('tailwind-light', false)">
<button class="p-link" (click)="changeTheme('tailwind-light', false)">
<img src="assets/layout/images/themes/tailwind-light.png" alt="Tailwind Light">
</button>
</div>
@ -125,7 +125,7 @@
<h6>Fluent UI</h6>
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('fluent-light', false)">
<button class="p-link" (click)="changeTheme('fluent-light', false)">
<img src="assets/layout/images/themes/fluent-light.png" alt="Fluent Light">
</button>
</div>
@ -134,42 +134,42 @@
<h6>PrimeOne Design - 2022</h6>
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('lara-light-indigo', false)">
<button class="p-link" (click)="changeTheme('lara-light-indigo', false)">
<img src="assets/layout/images/themes/lara-light-indigo.png" alt="Lara Light Indigo">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('lara-light-blue', false)">
<button class="p-link" (click)="changeTheme('lara-light-blue', false)">
<img src="assets/layout/images/themes/lara-light-blue.png" alt="Lara Light Blue">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('lara-light-purple', false)">
<button class="p-link" (click)="changeTheme('lara-light-purple', false)">
<img src="assets/layout/images/themes/lara-light-purple.png" alt="Lara Light Purple">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('lara-light-teal', false)">
<button class="p-link" (click)="changeTheme('lara-light-teal', false)">
<img src="assets/layout/images/themes/lara-light-teal.png" alt="Lara Light Teal">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('lara-dark-indigo', true)">
<button class="p-link" (click)="changeTheme('lara-dark-indigo', true)">
<img src="assets/layout/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('lara-dark-blue', true)">
<button class="p-link" (click)="changeTheme('lara-dark-blue', true)">
<img src="assets/layout/images/themes/lara-dark-blue.png" alt="Lara Dark Blue">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('lara-dark-purple', true)">
<button class="p-link" (click)="changeTheme('lara-dark-purple', true)">
<img src="assets/layout/images/themes/lara-dark-purple.png" alt="Lara Dark Purple">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('lara-dark-teal', true)">
<button class="p-link" (click)="changeTheme('lara-dark-teal', true)">
<img src="assets/layout/images/themes/lara-dark-teal.png" alt="Lara Dark Teal">
</button>
</div>
@ -178,62 +178,62 @@
<h6>PrimeOne Design - 2021</h6>
<div class="grid free-themes">
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('saga-blue', false)">
<button class="p-link" (click)="changeTheme('saga-blue', false)">
<img src="assets/layout/images/themes/saga-blue.png" alt="Saga Blue">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('saga-green', false)">
<button class="p-link" (click)="changeTheme('saga-green', false)">
<img src="assets/layout/images/themes/saga-green.png" alt="Saga Green">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('saga-orange', false)">
<button class="p-link" (click)="changeTheme('saga-orange', false)">
<img src="assets/layout/images/themes/saga-orange.png" alt="Saga Orange">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('saga-purple', false)">
<button class="p-link" (click)="changeTheme('saga-purple', false)">
<img src="assets/layout/images/themes/saga-purple.png" alt="Saga Purple">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('vela-blue', true)">
<button class="p-link" (click)="changeTheme('vela-blue', true)">
<img src="assets/layout/images/themes/vela-blue.png" alt="Vela Blue">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('vela-green', true)">
<button class="p-link" (click)="changeTheme('vela-green', true)">
<img src="assets/layout/images/themes/vela-green.png" alt="Vela Green">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('vela-orange', true)">
<button class="p-link" (click)="changeTheme('vela-orange', true)">
<img src="assets/layout/images/themes/vela-orange.png" alt="Vela Orange">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('vela-purple', true)">
<button class="p-link" (click)="changeTheme('vela-purple', true)">
<img src="assets/layout/images/themes/vela-purple.png" alt="Vela Purple">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('arya-blue', true)">
<button class="p-link" (click)="changeTheme('arya-blue', true)">
<img src="assets/layout/images/themes/arya-blue.png" alt="Arya Blue">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('arya-green', true)">
<button class="p-link" (click)="changeTheme('arya-green', true)">
<img src="assets/layout/images/themes/arya-green.png" alt="Arya Green">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('arya-orange', true)">
<button class="p-link" (click)="changeTheme('arya-orange', true)">
<img src="assets/layout/images/themes/arya-orange.png" alt="Arya Orange">
</button>
</div>
<div class="col-3 text-center">
<button class="p-link" (click)="appMain.changeTheme('arya-purple', true)">
<button class="p-link" (click)="changeTheme('arya-purple', true)">
<img src="assets/layout/images/themes/arya-purple.png" alt="Arya Purple">
</button>
</div>

79
src/app/app.config.component.ts
View File

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

2
src/app/app.footer.component.html
View File

@ -1,5 +1,5 @@
<div class="layout-footer">
<img src="assets/layout/images/{{app.darkMode ? 'logo-white' : 'logo-dark'}}.svg" alt="Logo" height="20" class="mr-2"/>
<img src="assets/layout/images/{{appMain.config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Logo" height="20" class="mr-2"/>
by
<span class="font-medium ml-2">PrimeNG</span>
</div>

4
src/app/app.footer.component.ts
View File

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

6
src/app/app.main.component.html
View File

@ -1,11 +1,11 @@
<div class="layout-wrapper" [ngClass]="{'layout-overlay':isOverlay(),
'layout-static':isStatic(),
'layout-theme-light':!app.darkMode,
'layout-theme-dark':app.darkMode,
'layout-theme-light':!config.dark,
'layout-theme-dark':config.dark,
'layout-overlay-sidebar-active': overlayMenuActive,
'layout-static-sidebar-inactive': staticMenuInactive,
'layout-mobile-sidebar-active':menuActiveMobile,
'p-ripple-disabled': !app.ripple, 'p-input-filled': app.inputStyle === 'filled'}">
'p-ripple-disabled': !config.ripple, 'p-input-filled': config.inputStyle === 'filled'}">
<app-topbar></app-topbar>
<div class="layout-sidebar">
<app-menu></app-menu>

30
src/app/app.main.component.ts
View File

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

7
src/app/app.menu.component.ts
View File

@ -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';
</ul>
</li>
<a href="https://www.primefaces.org/primeblocks-ng/#/">
<img src="assets/layout/images/{{app.darkMode ? 'banner-primeblocks-dark' : 'banner-primeblocks'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
<img src="assets/layout/images/{{appMain.config.dark ? 'banner-primeblocks-dark' : 'banner-primeblocks'}}.png" alt="Prime Blocks" class="w-full mt-3"/>
</a>
</ul>
</div>
@ -23,10 +23,9 @@ export class AppMenuComponent implements OnInit {
model: any[];
constructor(public app: AppComponent){}
constructor(public appMain: AppMainComponent) { }
ngOnInit() {
this.model = [
{
label: 'Home',

9
src/app/app.module.ts
View File

@ -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]
})

2
src/app/app.topbar.component.html
View File

@ -1,6 +1,6 @@
<div class="layout-topbar">
<a class="layout-topbar-logo" routerLink="">
<img src="assets/layout/images/{{app.darkMode ? 'logo-white' : 'logo-dark'}}.svg" alt="logo">
<img src="assets/layout/images/{{appMain.config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="logo">
<span>SAKAI</span>
</a>

13
src/app/app.topbar.component.ts
View File

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

31
src/app/components/blockviewer/blockviewer.component.ts
View File

@ -1,5 +1,4 @@
import { Component, Input } from '@angular/core';
import { environment } from '../../../environments/environment';
enum BlockView {
PREVIEW,
@ -18,19 +17,18 @@ enum BlockView {
</span>
<div class="block-actions">
<a tabindex="0" [ngClass]="{'block-action-active': blockView == BlockView.PREVIEW}" (click)="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
<a [attr.tabindex]="codeDisabled ? null: '0'" [ngClass]="{'block-action-active': blockView == BlockView.CODE, 'block-action-disabled': codeDisabled}" (click)="activateView($event, BlockView.CODE)">
<i class="pi pi-lock" *ngIf="codeDisabled"></i>
<a [attr.tabindex]="'0'" [ngClass]="{'block-action-active': blockView == BlockView.CODE}" (click)="activateView($event, BlockView.CODE)">
<span>Code</span>
</a>
<a [attr.tabindex]="codeDisabled ? null: '0'" class="block-action-copy" [ngClass]="{'block-action-disabled': codeDisabled}" (click)="copyCode($event)"
pTooltip="Copied to clipboard" tooltipEvent="focus" tooltipPosition="bottom" [tooltipDisabled]="codeDisabled"><i class="pi pi-copy"></i></a>
<a [attr.tabindex]="'0'" class="block-action-copy" (click)="copyCode($event)"
pTooltip="Copied to clipboard" tooltipEvent="focus" tooltipPosition="bottom"><i class="pi pi-copy m-0"></i></a>
</div>
</div>
<div class="block-content">
<div [class]="containerClass" [ngStyle]="previewStyle" *ngIf="blockView == BlockView.PREVIEW">
<ng-content></ng-content>
</div>
<div *ngIf="blockView == BlockView.CODE && !codeDisabled">
<div *ngIf="blockView == BlockView.CODE">
<app-code lang="markup" ngPreserveWhitespaces>{{code}}
</app-code>
</div>
@ -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();
}
}

247
src/app/components/charts/charts.component.ts
View File

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

27
src/app/service/app.config.service.ts Normal file
View File

@ -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<AppConfig>();
configUpdate$ = this.configUpdate.asObservable();
updateConfig(config: AppConfig) {
this.config = config;
this.configUpdate.next(config);
}
getConfig() {
return this.config;
}
}

2
src/app/service/app.menu.service.ts
View File

@ -15,6 +15,6 @@ export class MenuService {
}
reset() {
// this.resetSource.next(true);
this.resetSource.next(true);
}
}