fix conflict
This commit is contained in:
@@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user