ChrisChen/ChurchAngular
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Chris Chen
2022-09-30 10:53:48 -07:00
commit 911b45739d
1026 changed files with 149872 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/@theme/components/footer/footer.component.scss
+30
View File
@@ -0,0 +1,30 @@
@import '../../styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@import '~bootstrap/scss/mixins/breakpoints';
@include nb-install-component() {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.socials {
font-size: 2rem;
a {
padding: 0.4rem;
color: nb-theme(text-hint-color);
transition: color ease-out 0.1s;
&:hover {
color: nb-theme(text-basic-color);
}
}
}
@include media-breakpoint-down(is) {
.socials {
font-size: 1.5rem;
}
}
}
src/app/@theme/components/footer/footer.component.ts
+19
View File
@@ -0,0 +1,19 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-footer',
styleUrls: ['./footer.component.scss'],
template: `
<span class="created-by">
Created with ♥ by <b><a href="#" target="_blank">Chris</a></b> 2022
</span>
<!-- <div class="socials">
<a href="#" target="_blank" class="ion ion-social-github"></a>
<a href="#" target="_blank" class="ion ion-social-facebook"></a>
<a href="#" target="_blank" class="ion ion-social-twitter"></a>
<a href="#" target="_blank" class="ion ion-social-linkedin"></a>
</div> -->
`,
})
export class FooterComponent {
}
src/app/@theme/components/header/header.component.html
+28
View File
@@ -0,0 +1,28 @@
<div class="header-container">
<div class="logo-container">
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
<nb-icon icon="menu-2-outline"></nb-icon>
</a>
<a class="logo" href="#" (click)="navigateHome()"><img class="h-100" src='/assets/images/ArkLogo.svg' />
{{header}}</a>
</div>
<!-- <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
</nb-select> -->
</div>
<div class="header-container">
<nb-actions size="small">
<!--
<nb-action class="control-item">
<nb-search type="rotate-layout"></nb-search>
</nb-action>
<nb-action class="control-item" icon="email-outline"></nb-action>
<nb-action class="control-item" icon="bell-outline"></nb-action> -->
<nb-action class="user-action" *ngIf="user">
<nb-user [nbContextMenu]="userMenu" nbContextMenuTag="UserProfileMenu" [onlyPicture]="userPictureOnly"
[name]="userFullName" [picture]="avatarImage">
</nb-user>
</nb-action>
</nb-actions>
</div>
src/app/@theme/components/header/header.component.scss
+76
View File
@@ -0,0 +1,76 @@
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@import '../../styles/themes';
@include nb-install-component() {
display: flex;
justify-content: space-between;
width: 100%;
.logo-container {
display: flex;
align-items: center;
width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
}
nb-action {
height: auto;
display: flex;
align-content: center;
}
nb-user {
cursor: pointer;
}
::ng-deep nb-search button {
padding: 0!important;
}
.header-container {
display: flex;
align-items: center;
width: auto;
.sidebar-toggle {
@include nb-ltr(padding-right, 1.25rem);
@include nb-rtl(padding-left, 1.25rem);
text-decoration: none;
color: nb-theme(text-hint-color);
nb-icon {
font-size: 1.75rem;
}
}
.logo {
//padding: 0 1.25rem;
padding: 3px 0.25rem;
font-size: 1.75rem;
@include nb-ltr(border-left, 1px solid nb-theme(divider-color));
@include nb-rtl(border-right, 1px solid nb-theme(divider-color));
white-space: nowrap;
text-decoration: none;
height: 58px;
color: #c0d9b4;
font-size: 21px;
font-weight: 600;
}
}
@include media-breakpoint-down(sm) {
.control-item {
display: none;
}
.user-action {
border: none;
padding: 0;
}
}
@include media-breakpoint-down(is) {
nb-select {
display: none;
}
}
}
src/app/@theme/components/header/header.component.ts
+137
View File
@@ -0,0 +1,137 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { NbMediaBreakpointsService, NbMenuItem, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
import { UserData } from '../../../@core/data/users';
import { LayoutService } from '../../../@core/utils';
import { map, takeUntil, first } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { HeaderService } from '../../../services/header.service';
import { NbAuthService } from '@nebular/auth';
import { AuthService } from '../../../services/auth.service';
import { UserProfileAction } from '../../../entity/Auth';
@Component({
selector: 'ngx-header',
styleUrls: ['./header.component.scss'],
templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit, OnDestroy {
header: string = '';
private destroy$: Subject<void> = new Subject<void>();
userPictureOnly: boolean = false;
themes = [
{
value: 'default',
name: 'Light',
},
{
value: 'dark',
name: 'Dark',
},
{
value: 'cosmic',
name: 'Cosmic',
},
{
value: 'corporate',
name: 'Corporate',
},
];
currentTheme = 'default';
userMenu: NbMenuItem[] = [
{
title: 'Profile',
data: UserProfileAction.GoToProfile
},
{
title: 'Log out',
data: UserProfileAction.LogOut
}];
public get user() {
return this.authService.userAccess;
}
public get userFullName() {
if (this.user) {
return `${this.user.firstName} ${this.user.lastName}`;
} else {
return null;
}
}
public get avatarImage() {
if (this.user && this.user.avatarImage) {
return this.user.avatarImage
} else {
return null;
}
}
constructor(private sidebarService: NbSidebarService,
private menuService: NbMenuService,
private themeService: NbThemeService,
private userService: UserData,
private layoutService: LayoutService,
private breakpointService: NbMediaBreakpointsService,
private headerService: HeaderService,
private oAuthService: NbAuthService,
private authService: AuthService,
) {
this.headerService.headerChange$.pipe(takeUntil(this.destroy$)).subscribe(result => {
this.header = result;
});
this.menuService.onItemClick().pipe(takeUntil(this.destroy$))
.subscribe(result => {
if (result.item.title == 'Log out') this.logout();
});
}
ngOnInit() {
this.currentTheme = this.themeService.currentTheme;
const { xl } = this.breakpointService.getBreakpointsMap();
this.themeService.onMediaQueryChange()
.pipe(
map(([, currentBreakpoint]) => currentBreakpoint.width < xl),
takeUntil(this.destroy$),
)
.subscribe((isLessThanXl: boolean) => this.userPictureOnly = isLessThanXl);
this.themeService.onThemeChange()
.pipe(
map(({ name }) => name),
takeUntil(this.destroy$),
)
.subscribe(themeName => this.currentTheme = themeName);
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
changeTheme(themeName: string) {
this.themeService.changeTheme(themeName);
}
toggleSidebar(): boolean {
this.sidebarService.toggle(true, 'menu-sidebar');
this.layoutService.changeLayoutSize();
return false;
}
navigateHome() {
this.menuService.navigateHome();
return false;
}
logout() {
this.authService.logout();
}
}
src/app/@theme/components/index.ts
+4
View File
@@ -0,0 +1,4 @@
export * from './header/header.component';
export * from './footer/footer.component';
export * from './search-input/search-input.component';
export * from './tiny-mce/tiny-mce.component';
src/app/@theme/components/search-input/search-input.component.scss
+33
View File
@@ -0,0 +1,33 @@
:host {
display: flex;
align-items: center;
i.control-icon {
&::before {
font-size: 2.3rem;
}
&:hover {
cursor: pointer;
}
}
input {
border: none;
outline: none;
margin-left: 1rem;
width: 15rem;
transition: width 0.2s ease;
&.hidden {
width: 0;
margin: 0;
}
}
::ng-deep search-input {
input {
background: transparent;
}
}
}
src/app/@theme/components/search-input/search-input.component.ts
+35
View File
@@ -0,0 +1,35 @@
import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
@Component({
selector: 'ngx-search-input',
styleUrls: ['./search-input.component.scss'],
template: `
<i class="control-icon ion ion-ios-search"
(click)="showInput()"></i>
<input placeholder="Type your search request here..."
#input
[class.hidden]="!isInputShown"
(blur)="hideInput()"
(input)="onInput($event)">
`,
})
export class SearchInputComponent {
@ViewChild('input', { static: true }) input: ElementRef;
@Output() search: EventEmitter<string> = new EventEmitter<string>();
isInputShown = false;
showInput() {
this.isInputShown = true;
this.input.nativeElement.focus();
}
hideInput() {
this.isInputShown = false;
}
onInput(val: string) {
this.search.emit(val);
}
}
src/app/@theme/components/tiny-mce/tiny-mce.component.ts
+37
View File
@@ -0,0 +1,37 @@
import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
import { LocationStrategy } from '@angular/common';
@Component({
selector: 'ngx-tiny-mce',
template: '',
})
export class TinyMCEComponent implements OnDestroy, AfterViewInit {
@Output() editorKeyup = new EventEmitter<any>();
editor: any;
constructor(
private host: ElementRef,
private locationStrategy: LocationStrategy,
) { }
ngAfterViewInit() {
tinymce.init({
target: this.host.nativeElement,
plugins: ['link', 'paste', 'table'],
skin_url: `${this.locationStrategy.getBaseHref()}assets/skins/lightgray`,
setup: editor => {
this.editor = editor;
editor.on('keyup', () => {
this.editorKeyup.emit(editor.getContent());
});
},
height: '320',
});
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}
src/app/@theme/directives/.gitkeep
View File
src/app/@theme/layouts/index.ts
+4
View File
@@ -0,0 +1,4 @@
export * from './one-column/one-column.layout';
export * from './two-columns/two-columns.layout';
export * from './three-columns/three-columns.layout';
export * from './plain/plain.layout';
src/app/@theme/layouts/one-column/one-column.layout.scss
+9
View File
@@ -0,0 +1,9 @@
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.menu-sidebar ::ng-deep .scrollable {
padding-top: nb-theme(layout-padding-top);
}
}
src/app/@theme/layouts/one-column/one-column.layout.ts
+26
View File
@@ -0,0 +1,26 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-one-column-layout',
styleUrls: ['./one-column.layout.scss'],
template: `
<nb-layout windowMode>
<nb-layout-header fixed>
<ngx-header></ngx-header>
</nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
<ng-content select="nb-menu"></ng-content>
</nb-sidebar>
<nb-layout-column>
<ng-content select="router-outlet"></ng-content>
</nb-layout-column>
<nb-layout-footer fixed>
<ngx-footer></ngx-footer>
</nb-layout-footer>
</nb-layout>
`,
})
export class OneColumnLayoutComponent {}
src/app/@theme/layouts/plain/plain.layout.scss
+9
View File
@@ -0,0 +1,9 @@
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.menu-sidebar ::ng-deep .scrollable {
padding-top: nb-theme(layout-padding-top);
}
}
src/app/@theme/layouts/plain/plain.layout.ts
+20
View File
@@ -0,0 +1,20 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-plain-layout',
styleUrls: ['./plain.layout.scss'],
template: `
<nb-layout>
<nb-layout-column>
<ng-content select="router-outlet"></ng-content>
</nb-layout-column>
<nb-layout-footer fixed>
<ngx-footer></ngx-footer>
</nb-layout-footer>
</nb-layout>
`,
})
export class PlainLayoutComponent { }
src/app/@theme/layouts/three-columns/three-columns.layout.scss
+9
View File
@@ -0,0 +1,9 @@
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.menu-sidebar ::ng-deep .scrollable {
padding-top: nb-theme(layout-padding-top);
}
}
src/app/@theme/layouts/three-columns/three-columns.layout.ts
+32
View File
@@ -0,0 +1,32 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-three-columns-layout',
styleUrls: ['./three-columns.layout.scss'],
template: `
<nb-layout windowMode>
<nb-layout-header fixed>
<ngx-header></ngx-header>
</nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
<ng-content select="nb-menu"></ng-content>
</nb-sidebar>
<nb-layout-column class="small">
</nb-layout-column>
<nb-layout-column>
<ng-content select="router-outlet"></ng-content>
</nb-layout-column>
<nb-layout-column class="small">
</nb-layout-column>
<nb-layout-footer fixed>
<ngx-footer></ngx-footer>
</nb-layout-footer>
</nb-layout>
`,
})
export class ThreeColumnsLayoutComponent {}
src/app/@theme/layouts/two-columns/two-columns.layout.scss
+9
View File
@@ -0,0 +1,9 @@
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.menu-sidebar ::ng-deep .scrollable {
padding-top: nb-theme(layout-padding-top);
}
}
src/app/@theme/layouts/two-columns/two-columns.layout.ts
+30
View File
@@ -0,0 +1,30 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-two-columns-layout',
styleUrls: ['./two-columns.layout.scss'],
template: `
<nb-layout windowMode>
<nb-layout-header fixed>
<ngx-header></ngx-header>
</nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
<ng-content select="nb-menu"></ng-content>
</nb-sidebar>
<nb-layout-column class="small">
</nb-layout-column>
<nb-layout-column>
<ng-content select="router-outlet"></ng-content>
</nb-layout-column>
<nb-layout-footer fixed>
<ngx-footer></ngx-footer>
</nb-layout-footer>
</nb-layout>
`,
})
export class TwoColumnsLayoutComponent {}
src/app/@theme/pipes/.gitkeep
View File
src/app/@theme/pipes/capitalize.pipe.ts
+11
View File
@@ -0,0 +1,11 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'ngxCapitalize' })
export class CapitalizePipe implements PipeTransform {
transform(input: string): string {
return input && input.length
? (input.charAt(0).toUpperCase() + input.slice(1).toLowerCase())
: input;
}
}
src/app/@theme/pipes/index.ts
+5
View File
@@ -0,0 +1,5 @@
export * from './capitalize.pipe';
export * from './plural.pipe';
export * from './round.pipe';
export * from './timing.pipe';
export * from './number-with-commas.pipe';
src/app/@theme/pipes/number-with-commas.pipe.ts
+9
View File
@@ -0,0 +1,9 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'ngxNumberWithCommas' })
export class NumberWithCommasPipe implements PipeTransform {
transform(input: number): string {
return new Intl.NumberFormat().format(input);
}
}
src/app/@theme/pipes/plural.pipe.ts
+14
View File
@@ -0,0 +1,14 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'ngxPlural' })
export class PluralPipe implements PipeTransform {
transform(input: number, label: string, pluralLabel: string = ''): string {
input = input || 0;
return input === 1
? `${input} ${label}`
: pluralLabel
? `${input} ${pluralLabel}`
: `${input} ${label}s`;
}
}
src/app/@theme/pipes/round.pipe.ts
+9
View File
@@ -0,0 +1,9 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'ngxRound' })
export class RoundPipe implements PipeTransform {
transform(input: number): number {
return Math.round(input);
}
}
src/app/@theme/pipes/timing.pipe.ts
+18
View File
@@ -0,0 +1,18 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'timing' })
export class TimingPipe implements PipeTransform {
transform(time: number): string {
if (time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${this.initZero(minutes)}${minutes}:${this.initZero(seconds)}${seconds}`;
}
return '00:00';
}
private initZero(time: number): string {
return time < 10 ? '0' : '';
}
}
src/app/@theme/styles/_layout.scss
+8
View File
@@ -0,0 +1,8 @@
@mixin ngx-layout() {
@include media-breakpoint-down(is) {
.row {
margin-left: -10px;
margin-right: -10px;
}
}
}
src/app/@theme/styles/_overrides.scss
+11
View File
@@ -0,0 +1,11 @@
@import './themes';
@mixin nb-overrides() {
nb-select.size-medium button {
padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
nb-icon {
right: 0.41rem !important;
}
}
}
src/app/@theme/styles/pace.theme.scss
+20
View File
@@ -0,0 +1,20 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@mixin ngx-pace-theme() {
.pace .pace-progress {
background: nb-theme(color-primary-default);
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default);
}
.pace .pace-activity {
display: none;
}
}
src/app/@theme/styles/styles.scss
+33
View File
@@ -0,0 +1,33 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
// themes - our custom or/and out of the box themes
@import 'themes';
// framework component themes (styles tied to theme variables)
@import '~@nebular/theme/styles/globals';
@import '~@nebular/auth/styles/globals';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/grid';
// loading progress bar theme
@import './pace.theme';
@import './layout';
@import './overrides';
// install the framework and custom global styles
@include nb-install() {
// framework global styles
@include nb-theme-global();
@include nb-auth-global();
@include ngx-layout();
// loading progress bar
@include ngx-pace-theme();
@include nb-overrides();
};
src/app/@theme/styles/theme.corporate.ts
+308
View File
@@ -0,0 +1,308 @@
import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme';
const baseThemeVariables = baseTheme.variables;
export const CORPORATE_THEME = {
name: 'corporate',
base: 'corporate',
variables: {
temperature: {
arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
arcEmpty: baseThemeVariables.bg2,
thumbBg: baseThemeVariables.bg2,
thumbBorder: '#ffa36b',
},
solar: {
gradientLeft: baseThemeVariables.primary,
gradientRight: baseThemeVariables.primary,
shadowColor: 'rgba(0, 0, 0, 0)',
secondSeriesFill: baseThemeVariables.bg2,
radius: ['80%', '90%'],
},
traffic: {
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
yAxisSplitLine: 'rgba(0, 0, 0, 0)',
lineBg: baseThemeVariables.primary,
lineShadowBlur: '0',
itemColor: baseThemeVariables.border4,
itemBorderColor: baseThemeVariables.border4,
itemEmphasisBorderColor: baseThemeVariables.primaryLight,
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
shadowLineShadow: 'rgba(0, 0, 0, 0)',
gradFrom: baseThemeVariables.bg,
gradTo: baseThemeVariables.bg,
},
electricity: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: baseThemeVariables.fgText,
tooltipLineWidth: '0',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
axisLineColor: baseThemeVariables.border3,
xAxisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
lineGradFrom: baseThemeVariables.primary,
lineGradTo: baseThemeVariables.primary,
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: 'rgba(0, 0, 0, 0)',
areaGradTo: 'rgba(0, 0, 0, 0)',
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
bubbleMap: {
titleColor: baseThemeVariables.fgText,
areaColor: baseThemeVariables.bg4,
areaHoverColor: baseThemeVariables.fgHighlight,
areaBorderColor: baseThemeVariables.border5,
},
profitBarAnimationEchart: {
textColor: baseThemeVariables.fgText,
firstAnimationBarColor: baseThemeVariables.primary,
secondAnimationBarColor: baseThemeVariables.success,
splitLineStyleOpacity: '1',
splitLineStyleWidth: '1',
splitLineStyleColor: baseThemeVariables.separator,
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
trafficBarEchart: {
gradientFrom: baseThemeVariables.warningLight,
gradientTo: baseThemeVariables.warning,
shadow: baseThemeVariables.warningLight,
shadowBlur: '0',
axisTextColor: baseThemeVariables.fgText,
axisFontSize: '12',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
},
countryOrders: {
countryBorderColor: baseThemeVariables.border4,
countryFillColor: baseThemeVariables.bg4,
countryBorderWidth: '1',
hoveredCountryBorderColor: baseThemeVariables.primary,
hoveredCountryFillColor: baseThemeVariables.primaryLight,
hoveredCountryBorderWidth: '1',
chartAxisLineColor: baseThemeVariables.border4,
chartAxisTextColor: baseThemeVariables.fg,
chartAxisFontSize: '16',
chartGradientTo: baseThemeVariables.primary,
chartGradientFrom: baseThemeVariables.primaryLight,
chartAxisSplitLine: baseThemeVariables.separator,
chartShadowLineColor: baseThemeVariables.primaryLight,
chartLineBottomShadowColor: baseThemeVariables.primary,
chartInnerLineColor: baseThemeVariables.bg2,
},
echarts: {
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.fgText,
splitLineColor: baseThemeVariables.separator,
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
tooltipBackgroundColor: baseThemeVariables.primary,
areaOpacity: '0.7',
},
chartjs: {
axisLineColor: baseThemeVariables.separator,
textColor: baseThemeVariables.fgText,
},
orders: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
// first line
firstAreaGradFrom: baseThemeVariables.bg3,
firstAreaGradTo: baseThemeVariables.bg3,
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// second line
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// third line
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
profit: {
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.border4,
splitLineColor: baseThemeVariables.separator,
areaOpacity: '1',
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
// first bar
firstLineGradFrom: baseThemeVariables.bg3,
firstLineGradTo: baseThemeVariables.bg3,
firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.success,
thirdLineShadow: 'rgba(0, 0, 0, 0)',
},
orderProfitLegend: {
firstItem: baseThemeVariables.success,
secondItem: baseThemeVariables.primary,
thirdItem: baseThemeVariables.bg3,
},
visitors: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '1',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: '#ffffff',
lineGradTo: '#ffffff',
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: baseThemeVariables.primary,
areaGradTo: baseThemeVariables.primaryLight,
innerLineStyle: 'solid',
innerLineWidth: '1',
innerAreaGradFrom: baseThemeVariables.success,
innerAreaGradTo: baseThemeVariables.success,
},
visitorsLegend: {
firstIcon: baseThemeVariables.success,
secondIcon: baseThemeVariables.primary,
},
visitorsPie: {
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['65%', '90%'],
secondPieGradientLeft: baseThemeVariables.warning,
secondPieGradientRight: baseThemeVariables.warningLight,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['63%', '92%'],
shadowOffsetX: '-4',
shadowOffsetY: '-4',
},
visitorsPieLegend: {
firstSection: baseThemeVariables.warning,
secondSection: baseThemeVariables.success,
},
earningPie: {
radius: ['65%', '100%'],
center: ['50%', '50%'],
fontSize: '22',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieGradientLeft: baseThemeVariables.primary,
secondPieGradientRight: baseThemeVariables.primary,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
thirdPieGradientLeft: baseThemeVariables.warning,
thirdPieGradientRight: baseThemeVariables.warning,
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
},
earningLine: {
gradFrom: baseThemeVariables.primary,
gradTo: baseThemeVariables.primary,
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
},
} as NbJSThemeOptions;
src/app/@theme/styles/theme.cosmic.ts
+308
View File
@@ -0,0 +1,308 @@
import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme';
const baseThemeVariables = baseTheme.variables;
export const COSMIC_THEME = {
name: 'cosmic',
base: 'cosmic',
variables: {
temperature: {
arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
arcEmpty: baseThemeVariables.bg2,
thumbBg: '#ffffff',
thumbBorder: '#ffffff',
},
solar: {
gradientLeft: baseThemeVariables.primary,
gradientRight: baseThemeVariables.primary,
shadowColor: 'rgba(0, 0, 0, 0)',
secondSeriesFill: baseThemeVariables.bg2,
radius: ['70%', '90%'],
},
traffic: {
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
yAxisSplitLine: baseThemeVariables.separator,
lineBg: baseThemeVariables.border2,
lineShadowBlur: '14',
itemColor: baseThemeVariables.border2,
itemBorderColor: baseThemeVariables.border2,
itemEmphasisBorderColor: baseThemeVariables.primary,
shadowLineDarkBg: baseThemeVariables.border3,
shadowLineShadow: baseThemeVariables.border3,
gradFrom: baseThemeVariables.bg,
gradTo: baseThemeVariables.bg2,
},
electricity: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: baseThemeVariables.fgText,
tooltipLineWidth: '0',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
axisLineColor: baseThemeVariables.border3,
xAxisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.border2,
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: baseThemeVariables.success,
lineGradTo: baseThemeVariables.warning,
lineShadow: baseThemeVariables.bg4,
areaGradFrom: baseThemeVariables.bg2,
areaGradTo: baseThemeVariables.bg3,
shadowLineDarkBg: baseThemeVariables.bg3,
},
bubbleMap: {
titleColor: baseThemeVariables.fgText,
areaColor: baseThemeVariables.bg4,
areaHoverColor: baseThemeVariables.fgHighlight,
areaBorderColor: baseThemeVariables.border5,
},
profitBarAnimationEchart: {
textColor: baseThemeVariables.fgText,
firstAnimationBarColor: baseThemeVariables.primary,
secondAnimationBarColor: baseThemeVariables.success,
splitLineStyleOpacity: '1',
splitLineStyleWidth: '1',
splitLineStyleColor: baseThemeVariables.border2,
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
trafficBarEchart: {
gradientFrom: baseThemeVariables.warningLight,
gradientTo: baseThemeVariables.warning,
shadow: baseThemeVariables.warningLight,
shadowBlur: '5',
axisTextColor: baseThemeVariables.fgText,
axisFontSize: '12',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
},
countryOrders: {
countryBorderColor: baseThemeVariables.border4,
countryFillColor: baseThemeVariables.bg3,
countryBorderWidth: '1',
hoveredCountryBorderColor: baseThemeVariables.primary,
hoveredCountryFillColor: baseThemeVariables.primaryLight,
hoveredCountryBorderWidth: '1',
chartAxisLineColor: baseThemeVariables.border4,
chartAxisTextColor: baseThemeVariables.fg,
chartAxisFontSize: '16',
chartGradientTo: baseThemeVariables.primary,
chartGradientFrom: baseThemeVariables.primaryLight,
chartAxisSplitLine: baseThemeVariables.separator,
chartShadowLineColor: baseThemeVariables.primaryLight,
chartLineBottomShadowColor: baseThemeVariables.primary,
chartInnerLineColor: baseThemeVariables.bg2,
},
echarts: {
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.fgText,
splitLineColor: baseThemeVariables.separator,
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
tooltipBackgroundColor: baseThemeVariables.primary,
areaOpacity: '1',
},
chartjs: {
axisLineColor: baseThemeVariables.separator,
textColor: baseThemeVariables.fgText,
},
orders: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
// first line
firstAreaGradFrom: baseThemeVariables.bg2,
firstAreaGradTo: baseThemeVariables.bg2,
firstShadowLineDarkBg: baseThemeVariables.bg2,
// second line
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
secondShadowLineDarkBg: baseThemeVariables.primary,
// third line
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
thirdShadowLineDarkBg: baseThemeVariables.success,
},
profit: {
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.border4,
splitLineColor: baseThemeVariables.separator,
areaOpacity: '1',
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
// first bar
firstLineGradFrom: baseThemeVariables.bg2,
firstLineGradTo: baseThemeVariables.bg2,
firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdLineShadow: 'rgba(0, 0, 0, 0)',
},
orderProfitLegend: {
firstItem: baseThemeVariables.success,
secondItem: baseThemeVariables.primary,
thirdItem: baseThemeVariables.bg2,
},
visitors: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '1',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: '#ffffff',
lineGradTo: '#ffffff',
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: baseThemeVariables.primary,
areaGradTo: baseThemeVariables.primaryLight,
innerLineStyle: 'solid',
innerLineWidth: '1',
innerAreaGradFrom: baseThemeVariables.success,
innerAreaGradTo: baseThemeVariables.success,
},
visitorsLegend: {
firstIcon: baseThemeVariables.success,
secondIcon: baseThemeVariables.primary,
},
visitorsPie: {
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.successLight,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['70%', '90%'],
secondPieGradientLeft: baseThemeVariables.warning,
secondPieGradientRight: baseThemeVariables.warningLight,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['60%', '95%'],
shadowOffsetX: '0',
shadowOffsetY: '3',
},
visitorsPieLegend: {
firstSection: baseThemeVariables.warning,
secondSection: baseThemeVariables.success,
},
earningPie: {
radius: ['65%', '100%'],
center: ['50%', '50%'],
fontSize: '22',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieGradientLeft: baseThemeVariables.primary,
secondPieGradientRight: baseThemeVariables.primary,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
thirdPieGradientLeft: baseThemeVariables.warning,
thirdPieGradientRight: baseThemeVariables.warning,
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
},
earningLine: {
gradFrom: baseThemeVariables.primary,
gradTo: baseThemeVariables.primary,
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
},
} as NbJSThemeOptions;
src/app/@theme/styles/theme.dark.ts
+314
View File
@@ -0,0 +1,314 @@
import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme';
const baseThemeVariables = baseTheme.variables;
export const DARK_THEME = {
name: 'dark',
base: 'dark',
variables: {
temperature: {
arcFill: [
baseThemeVariables.primary,
baseThemeVariables.primary,
baseThemeVariables.primary,
baseThemeVariables.primary,
baseThemeVariables.primary,
],
arcEmpty: baseThemeVariables.bg2,
thumbBg: baseThemeVariables.bg2,
thumbBorder: baseThemeVariables.primary,
},
solar: {
gradientLeft: baseThemeVariables.primary,
gradientRight: baseThemeVariables.primary,
shadowColor: 'rgba(0, 0, 0, 0)',
secondSeriesFill: baseThemeVariables.bg2,
radius: ['80%', '90%'],
},
traffic: {
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
yAxisSplitLine: baseThemeVariables.separator,
lineBg: baseThemeVariables.border4,
lineShadowBlur: '1',
itemColor: baseThemeVariables.border4,
itemBorderColor: baseThemeVariables.border4,
itemEmphasisBorderColor: baseThemeVariables.primary,
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
shadowLineShadow: 'rgba(0, 0, 0, 0)',
gradFrom: baseThemeVariables.bg2,
gradTo: baseThemeVariables.bg2,
},
electricity: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: baseThemeVariables.fgText,
tooltipLineWidth: '0',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
axisLineColor: baseThemeVariables.border3,
xAxisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
lineGradFrom: baseThemeVariables.primary,
lineGradTo: baseThemeVariables.primary,
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: baseThemeVariables.bg2,
areaGradTo: baseThemeVariables.bg2,
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
bubbleMap: {
titleColor: baseThemeVariables.fgText,
areaColor: baseThemeVariables.bg4,
areaHoverColor: baseThemeVariables.fgHighlight,
areaBorderColor: baseThemeVariables.border5,
},
profitBarAnimationEchart: {
textColor: baseThemeVariables.fgText,
firstAnimationBarColor: baseThemeVariables.primary,
secondAnimationBarColor: baseThemeVariables.success,
splitLineStyleOpacity: '1',
splitLineStyleWidth: '1',
splitLineStyleColor: baseThemeVariables.separator,
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
trafficBarEchart: {
gradientFrom: baseThemeVariables.warningLight,
gradientTo: baseThemeVariables.warning,
shadow: baseThemeVariables.warningLight,
shadowBlur: '0',
axisTextColor: baseThemeVariables.fgText,
axisFontSize: '12',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
},
countryOrders: {
countryBorderColor: baseThemeVariables.border4,
countryFillColor: baseThemeVariables.bg3,
countryBorderWidth: '1',
hoveredCountryBorderColor: baseThemeVariables.primary,
hoveredCountryFillColor: baseThemeVariables.primaryLight,
hoveredCountryBorderWidth: '1',
chartAxisLineColor: baseThemeVariables.border4,
chartAxisTextColor: baseThemeVariables.fg,
chartAxisFontSize: '16',
chartGradientTo: baseThemeVariables.primary,
chartGradientFrom: baseThemeVariables.primaryLight,
chartAxisSplitLine: baseThemeVariables.separator,
chartShadowLineColor: baseThemeVariables.primaryLight,
chartLineBottomShadowColor: baseThemeVariables.primary,
chartInnerLineColor: baseThemeVariables.bg2,
},
echarts: {
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.fgText,
splitLineColor: baseThemeVariables.separator,
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
tooltipBackgroundColor: baseThemeVariables.primary,
areaOpacity: '0.7',
},
chartjs: {
axisLineColor: baseThemeVariables.separator,
textColor: baseThemeVariables.fgText,
},
orders: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
// first line
firstAreaGradFrom: baseThemeVariables.bg3,
firstAreaGradTo: baseThemeVariables.bg3,
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// second line
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// third line
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
profit: {
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.border4,
splitLineColor: baseThemeVariables.separator,
areaOpacity: '1',
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
// first bar
firstLineGradFrom: baseThemeVariables.bg3,
firstLineGradTo: baseThemeVariables.bg3,
firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdLineShadow: 'rgba(0, 0, 0, 0)',
},
orderProfitLegend: {
firstItem: baseThemeVariables.success,
secondItem: baseThemeVariables.primary,
thirdItem: baseThemeVariables.bg3,
},
visitors: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: '#ffffff',
lineGradTo: '#ffffff',
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: baseThemeVariables.primary,
areaGradTo: baseThemeVariables.primaryLight,
innerLineStyle: 'solid',
innerLineWidth: '1',
innerAreaGradFrom: baseThemeVariables.success,
innerAreaGradTo: baseThemeVariables.success,
},
visitorsLegend: {
firstIcon: baseThemeVariables.success,
secondIcon: baseThemeVariables.primary,
},
visitorsPie: {
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['70%', '90%'],
secondPieGradientLeft: baseThemeVariables.warning,
secondPieGradientRight: baseThemeVariables.warningLight,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['60%', '97%'],
shadowOffsetX: '0',
shadowOffsetY: '0',
},
visitorsPieLegend: {
firstSection: baseThemeVariables.warning,
secondSection: baseThemeVariables.success,
},
earningPie: {
radius: ['65%', '100%'],
center: ['50%', '50%'],
fontSize: '22',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieGradientLeft: baseThemeVariables.primary,
secondPieGradientRight: baseThemeVariables.primary,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
thirdPieGradientLeft: baseThemeVariables.warning,
thirdPieGradientRight: baseThemeVariables.warning,
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
},
earningLine: {
gradFrom: baseThemeVariables.primary,
gradTo: baseThemeVariables.primary,
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
},
} as NbJSThemeOptions;
src/app/@theme/styles/theme.default.ts
+314
View File
@@ -0,0 +1,314 @@
import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
const baseThemeVariables = baseTheme.variables;
export const DEFAULT_THEME = {
name: 'default',
base: 'default',
variables: {
temperature: {
arcFill: [
baseThemeVariables.primary,
baseThemeVariables.primary,
baseThemeVariables.primary,
baseThemeVariables.primary,
baseThemeVariables.primary,
],
arcEmpty: baseThemeVariables.bg2,
thumbBg: baseThemeVariables.bg2,
thumbBorder: baseThemeVariables.primary,
},
solar: {
gradientLeft: baseThemeVariables.primary,
gradientRight: baseThemeVariables.primary,
shadowColor: 'rgba(0, 0, 0, 0)',
secondSeriesFill: baseThemeVariables.bg2,
radius: ['80%', '90%'],
},
traffic: {
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
yAxisSplitLine: baseThemeVariables.separator,
lineBg: baseThemeVariables.border4,
lineShadowBlur: '1',
itemColor: baseThemeVariables.border4,
itemBorderColor: baseThemeVariables.border4,
itemEmphasisBorderColor: baseThemeVariables.primary,
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
shadowLineShadow: 'rgba(0, 0, 0, 0)',
gradFrom: baseThemeVariables.bg2,
gradTo: baseThemeVariables.bg2,
},
electricity: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: baseThemeVariables.fgText,
tooltipLineWidth: '0',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
axisLineColor: baseThemeVariables.border3,
xAxisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
lineGradFrom: baseThemeVariables.primary,
lineGradTo: baseThemeVariables.primary,
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: baseThemeVariables.bg2,
areaGradTo: baseThemeVariables.bg2,
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
bubbleMap: {
titleColor: baseThemeVariables.fgText,
areaColor: baseThemeVariables.bg4,
areaHoverColor: baseThemeVariables.fgHighlight,
areaBorderColor: baseThemeVariables.border5,
},
profitBarAnimationEchart: {
textColor: baseThemeVariables.fgText,
firstAnimationBarColor: baseThemeVariables.primary,
secondAnimationBarColor: baseThemeVariables.success,
splitLineStyleOpacity: '1',
splitLineStyleWidth: '1',
splitLineStyleColor: baseThemeVariables.separator,
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
trafficBarEchart: {
gradientFrom: baseThemeVariables.warningLight,
gradientTo: baseThemeVariables.warning,
shadow: baseThemeVariables.warningLight,
shadowBlur: '0',
axisTextColor: baseThemeVariables.fgText,
axisFontSize: '12',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
},
countryOrders: {
countryBorderColor: baseThemeVariables.border4,
countryFillColor: baseThemeVariables.bg3,
countryBorderWidth: '1',
hoveredCountryBorderColor: baseThemeVariables.primary,
hoveredCountryFillColor: baseThemeVariables.primaryLight,
hoveredCountryBorderWidth: '1',
chartAxisLineColor: baseThemeVariables.border4,
chartAxisTextColor: baseThemeVariables.fg,
chartAxisFontSize: '16',
chartGradientTo: baseThemeVariables.primary,
chartGradientFrom: baseThemeVariables.primaryLight,
chartAxisSplitLine: baseThemeVariables.separator,
chartShadowLineColor: baseThemeVariables.primaryLight,
chartLineBottomShadowColor: baseThemeVariables.primary,
chartInnerLineColor: baseThemeVariables.bg2,
},
echarts: {
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.fgText,
splitLineColor: baseThemeVariables.separator,
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
tooltipBackgroundColor: baseThemeVariables.primary,
areaOpacity: '0.7',
},
chartjs: {
axisLineColor: baseThemeVariables.separator,
textColor: baseThemeVariables.fgText,
},
orders: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
// first line
firstAreaGradFrom: baseThemeVariables.bg3,
firstAreaGradTo: baseThemeVariables.bg3,
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// second line
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// third line
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
profit: {
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.border4,
splitLineColor: baseThemeVariables.separator,
areaOpacity: '1',
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
// first bar
firstLineGradFrom: baseThemeVariables.bg3,
firstLineGradTo: baseThemeVariables.bg3,
firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdLineShadow: 'rgba(0, 0, 0, 0)',
},
orderProfitLegend: {
firstItem: baseThemeVariables.success,
secondItem: baseThemeVariables.primary,
thirdItem: baseThemeVariables.bg3,
},
visitors: {
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '1',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: '#ffffff',
lineGradTo: '#ffffff',
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: baseThemeVariables.primary,
areaGradTo: baseThemeVariables.primaryLight,
innerLineStyle: 'solid',
innerLineWidth: '1',
innerAreaGradFrom: baseThemeVariables.success,
innerAreaGradTo: baseThemeVariables.success,
},
visitorsLegend: {
firstIcon: baseThemeVariables.success,
secondIcon: baseThemeVariables.primary,
},
visitorsPie: {
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['70%', '90%'],
secondPieGradientLeft: baseThemeVariables.warning,
secondPieGradientRight: baseThemeVariables.warningLight,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['60%', '97%'],
shadowOffsetX: '0',
shadowOffsetY: '0',
},
visitorsPieLegend: {
firstSection: baseThemeVariables.warning,
secondSection: baseThemeVariables.success,
},
earningPie: {
radius: ['65%', '100%'],
center: ['50%', '50%'],
fontSize: '22',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieGradientLeft: baseThemeVariables.primary,
secondPieGradientRight: baseThemeVariables.primary,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
thirdPieGradientLeft: baseThemeVariables.warning,
thirdPieGradientRight: baseThemeVariables.warning,
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
},
earningLine: {
gradFrom: baseThemeVariables.primary,
gradTo: baseThemeVariables.primary,
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
},
} as NbJSThemeOptions;
src/app/@theme/styles/themes.scss
+88
View File
@@ -0,0 +1,88 @@
// @nebular theming framework
@import '~@nebular/theme/styles/theming';
// @nebular out of the box themes
@import '~@nebular/theme/styles/themes';
$nb-themes: nb-register-theme((
layout-padding-top: 2.25rem,
menu-item-icon-margin: 0 0.5rem 0 0,
card-height-tiny: 13.5rem,
card-height-small: 21.1875rem,
card-height-medium: 28.875rem,
card-height-large: 36.5625rem,
card-height-giant: 44.25rem,
card-margin-bottom: 1.875rem,
card-header-with-select-padding-top: 0.5rem,
card-header-with-select-padding-bottom: 0.5rem,
select-min-width: 6rem,
slide-out-background: #f7f9fc,
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
), default, default);
$nb-themes: nb-register-theme((
layout-padding-top: 2.25rem,
menu-item-icon-margin: 0 0.5rem 0 0,
card-height-tiny: 13.5rem,
card-height-small: 21.1875rem,
card-height-medium: 28.875rem,
card-height-large: 36.5625rem,
card-height-giant: 44.25rem,
card-margin-bottom: 1.875rem,
card-header-with-select-padding-top: 0.5rem,
card-header-with-select-padding-bottom: 0.5rem,
select-min-width: 6rem,
slide-out-background: #252547,
slide-out-shadow-color: 2px 0 3px #29157a,
slide-out-shadow-color-rtl: -2px 0 3px #29157a,
), cosmic, cosmic);
$nb-themes: nb-register-theme((
layout-padding-top: 2.25rem,
menu-item-icon-margin: 0 0.5rem 0 0,
card-height-tiny: 13.5rem,
card-height-small: 21.1875rem,
card-height-medium: 28.875rem,
card-height-large: 36.5625rem,
card-height-giant: 44.25rem,
card-margin-bottom: 1.875rem,
card-header-with-select-padding-top: 0.5rem,
card-header-with-select-padding-bottom: 0.5rem,
select-min-width: 6rem,
slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
), corporate, corporate);
$nb-themes: nb-register-theme((
layout-padding-top: 2.25rem,
menu-item-icon-margin: 0 0.5rem 0 0,
card-height-tiny: 13.5rem,
card-height-small: 21.1875rem,
card-height-medium: 28.875rem,
card-height-large: 36.5625rem,
card-height-giant: 44.25rem,
card-margin-bottom: 1.875rem,
card-header-with-select-padding-top: 0.5rem,
card-header-with-select-padding-bottom: 0.5rem,
select-min-width: 6rem,
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
), dark, dark);
src/app/@theme/theme.module.ts
+94
View File
@@ -0,0 +1,94 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
NbActionsModule,
NbLayoutModule,
NbMenuModule,
NbSearchModule,
NbSidebarModule,
NbUserModule,
NbContextMenuModule,
NbButtonModule,
NbSelectModule,
NbIconModule,
NbThemeModule,
} from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { NbSecurityModule } from '@nebular/security';
import {
FooterComponent,
HeaderComponent,
SearchInputComponent,
TinyMCEComponent,
} from './components';
import {
CapitalizePipe,
PluralPipe,
RoundPipe,
TimingPipe,
NumberWithCommasPipe,
} from './pipes';
import {
OneColumnLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
PlainLayoutComponent
} from './layouts';
import { DEFAULT_THEME } from './styles/theme.default';
import { COSMIC_THEME } from './styles/theme.cosmic';
import { CORPORATE_THEME } from './styles/theme.corporate';
import { DARK_THEME } from './styles/theme.dark';
const NB_MODULES = [
NbLayoutModule,
NbMenuModule,
NbUserModule,
NbActionsModule,
NbSearchModule,
NbSidebarModule,
NbContextMenuModule,
NbSecurityModule,
NbButtonModule,
NbSelectModule,
NbIconModule,
NbEvaIconsModule,
];
const COMPONENTS = [
HeaderComponent,
FooterComponent,
SearchInputComponent,
TinyMCEComponent,
OneColumnLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
PlainLayoutComponent
];
const PIPES = [
CapitalizePipe,
PluralPipe,
RoundPipe,
TimingPipe,
NumberWithCommasPipe,
];
@NgModule({
imports: [CommonModule, ...NB_MODULES],
exports: [CommonModule, ...PIPES, ...COMPONENTS],
declarations: [...COMPONENTS, ...PIPES],
})
export class ThemeModule {
static forRoot(): ModuleWithProviders<ThemeModule> {
return {
ngModule: ThemeModule,
providers: [
...NbThemeModule.forRoot(
{
name: 'default',
},
[DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME],
).providers,
],
};
}
}