fix conflict

This commit is contained in:
Çetin
2022-01-07 16:08:27 +03:00
16 changed files with 400 additions and 153 deletions

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

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