Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1 from akveo/master

Browse source 
merge to update
This commit is contained in:
LIANGGUANGMING 2019-08-11 19:41:30 +08:00 • committed by GitHub
commit 5c47d7b6ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
377 changed files with 12469 additions and 16496 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.travis.yml
View file

@ -4,8 +4,6 @@ sudo: false
dist: trusty
node_js:
- '8'
- '9'
- '10'
branches:

78
CHANGELOG.md
View file

@ -1,3 +1,81 @@
<a name="4.0.1"></a>
## [4.0.1](https://github.com/akveo/ngx-admin/compare/v4.0.0...v4.0.1) (2019-07-16)
### Bug Fixes
* **typography:** prevent bootstrap color override ([#2161](https://github.com/akveo/ngx-admin/issues/2161)) ([243390c](https://github.com/akveo/ngx-admin/commit/243390c))
### Features
* update Nebular to 4.1.2 ([#5451](https://github.com/akveo/ngx-admin/issues/5451)) ([a2e93f9](https://github.com/akveo/ngx-admin/commit/a2e93f9))
<a name="4.0.0"></a>
# [4.0.0](https://github.com/akveo/ngx-admin/compare/v3.2.0...v4.0.0) (2019-07-02)
- Update to Nebular 4 based on Eva Design System
- New Dark theme
- Angular 8
### Features
* update to Angular 8, Nebular 4 ([#2114](https://github.com/akveo/ngx-admin/issues/2114)) ([e9600b4](https://github.com/akveo/ngx-admin/commit/e9600b4))
<a name="3.2.1"></a>
## [3.2.1](https://github.com/akveo/ngx-admin/compare/v3.2.0...v3.2.1) (2019-04-02)
### Bug Fixes
* update [@angular-devkit](https://github.com/angular-devkit)/build-angular to fix import aliases ([78695cd](https://github.com/akveo/ngx-admin/commit/78695cd))
<a name="3.2.0"></a>
# [3.2.0](https://github.com/akveo/ngx-admin/compare/v3.1.0...v3.2.0) (2019-04-02)
### Bug Fixes
* **dashboard:** update title country->region the orders list component ([#1987](https://github.com/akveo/ngx-admin/issues/1987)) ([cf1bf4d](https://github.com/akveo/ngx-admin/commit/cf1bf4d))
* **readme:** fix demo links ([#2028](https://github.com/akveo/ngx-admin/issues/2028)) ([1fb3205](https://github.com/akveo/ngx-admin/commit/1fb3205))
* **rtl:** remove duplicate of nebular styles ([#1824](https://github.com/akveo/ngx-admin/issues/1824)) ([d8e7092](https://github.com/akveo/ngx-admin/commit/d8e7092))
* **setting-sidebar:** Ie and firefox position bugs, linter ([#2023](https://github.com/akveo/ngx-admin/issues/2023)) ([8d471ba](https://github.com/akveo/ngx-admin/commit/8d471ba))
* **sidebar:** Add Form Inputs extra component menu item ([#1966](https://github.com/akveo/ngx-admin/issues/1966)) ([658aa19](https://github.com/akveo/ngx-admin/commit/658aa19)), closes [#1965](https://github.com/akveo/ngx-admin/issues/1965)
### Features
* update dependencies (Angular, Nebular) ([#2072](https://github.com/akveo/ngx-admin/issues/2072)) ([db2f451](https://github.com/akveo/ngx-admin/commit/db2f451))
<a name="3.1.0"></a>
# [3.1.0](https://github.com/akveo/ngx-admin/compare/v3.0.0...v3.1.0) (2019-01-23)
### Bug Fixes
* **datepicker:** fix datepicker arrow style ([#1925](https://github.com/akveo/ngx-admin/issues/1925)) ([a878197](https://github.com/akveo/ngx-admin/commit/a878197))
* **toggle-settings-button:** position while search open ([#1993](https://github.com/akveo/ngx-admin/issues/1993)) ([f17aa32](https://github.com/akveo/ngx-admin/commit/f17aa32))
### Features
* **animation:** add fade in animation by route change ([#1958](https://github.com/akveo/ngx-admin/issues/1958)) ([773c14e](https://github.com/akveo/ngx-admin/commit/773c14e))
* **data:** update data module, add new mock data ([#1960](https://github.com/akveo/ngx-admin/issues/1960)) ([47d232b](https://github.com/akveo/ngx-admin/commit/47d232b))
* **layout config:** reduce gear button size ([#2002](https://github.com/akveo/ngx-admin/issues/2002)) ([1f56f2a](https://github.com/akveo/ngx-admin/commit/1f56f2a))
* **settings:** redesign setting sidebar ([#1982](https://github.com/akveo/ngx-admin/issues/1982)) ([a73662f](https://github.com/akveo/ngx-admin/commit/a73662f))
* **sidebar:** remove label new from sidebar ([#1921](https://github.com/akveo/ngx-admin/issues/1921)) ([d80c8da](https://github.com/akveo/ngx-admin/commit/d80c8da))
* update Nebular to 3.1.0 ([33db902](https://github.com/akveo/ngx-admin/commit/33db902))
<a name="3.0.0"></a>
# [3.0.0](https://github.com/akveo/ngx-admin/compare/v2.3.0...v3.0.0) (2018-11-19)

38
README.md
View file

@ -1,28 +1,33 @@
[![Build Status](https://travis-ci.org/akveo/ngx-admin.svg?branch=master)](https://travis-ci.org/akveo/ngx-admin)
[![Join the chat at https://gitter.im/ng2-admin/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ng2-admin/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Dependency Status](https://david-dm.org/akveo/ngx-admin/status.svg)](https://david-dm.org/akveo/ng2-admin)
# ngx-admin [<img src="https://i.imgur.com/oMcxwZ0.png" alt="Eva Design System" height="20px" />](https://eva.design) [![Build Status](https://travis-ci.org/akveo/ngx-admin.svg?branch=master)](https://travis-ci.org/akveo/ngx-admin) [![Dependency Status](https://david-dm.org/akveo/ngx-admin/status.svg)](https://david-dm.org/akveo/ng2-admin)
[Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645)| [Documentation](https://akveo.github.io/ngx-admin/?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes)
# Admin template based on Angular 7+, Bootstrap 4 and <a href="https://github.com/akveo/nebular">Nebular</a>
<a target="_blank" href="http://akveo.com/ngx-admin/#/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=main_pic"><img src="https://i.imgur.com/OIL7rt8.png"/></a>
# Admin template based on Angular 8+ and <a href="https://github.com/akveo/nebular">Nebular</a>
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=main_pic"><img src="https://i.imgur.com/mFdqvgG.png"/></a>
### Backend Integration Bundles
Easy way to integrate ngx-admin with .NET, Node.js, Java or PHP. [Checkout our Store](https://store.akveo.com/?utm_source=github&utm_medium=ngx_admin_readme) for ready to use Backend Bundles.
### With 3 stunning visual themes
### With 4 stunning visual themes
#### Default
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=default&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/Kn3xDKQ.png"/></a>
#### Dark
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/FAn5iXY.png"/></a>
#### Cosmic
<a target="_blank" href="http://akveo.com/ngx-admin/?theme=cosmic&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes#/pages/dashboard"><img src="https://i.imgur.com/tvAJJhW.png"/></a>
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/iJu2YDF.png"/></a>
#### Corporate
<a target="_blank" href="http://akveo.com/ngx-admin/?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes#/pages/dashboard"><img src="https://i.imgur.com/wbEtUX4.jpg"/></a>
#### Light
<a target="_blank" href="http://akveo.com/ngx-admin/?theme=default&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes#/pages/dashboard"><img src="https://i.imgur.com/cb9U34M.jpg"/></a>
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/GpUt6NW.png"/></a>
### What's included:
- Angular 7+ & Typescript
- Angular 8+ & Typescript
- Bootstrap 4+ & SCSS
- Responsive layout
- RTL support
@ -32,10 +37,6 @@
- 40+ Angular Components
- 60+ Usage Examples
### Hot Themes Reload
<a target="_blank" href="http://akveo.com/ngx-admin/#/pages/dashboard?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=demo"><img src="https://i.imgur.com/XoJtfvK.gif"/></a>
### Demo
<a target="_blank" href="http://akveo.com/ngx-admin/">Live Demo</a>
@ -46,9 +47,6 @@ This template is using [Nebular](https://github.com/akveo/nebular) modules set,
### Empty starter kit
Don't need all the pages and modules and just looking for an empty starter kit for your next project? Check out our [starter-kit branch](https://github.com/akveo/ngx-admin/tree/starter-kit).
### AngularJS 1.x version
Here you can find AngularJS 1.x based version: [Blur Admin](http://akveo.github.io/blur-admin/)
## BrowserStack
This project runs its tests on multiple desktop and mobile browsers using [BrowserStack](http://www.browserstack.com).

1
angular.json
View file

@ -12,6 +12,7 @@
"builder": "@angular-devkit/build-angular:browser",
"options": {
"preserveSymlinks": true,
"rebaseRootRelativeCssUrls": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",

12
browserslist Normal file
View file

@ -0,0 +1,12 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 11

14478
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

61
package.json
View file

@ -1,6 +1,6 @@
{
"name": "ngx-admin",
"version": "3.0.0",
"version": "4.0.1",
"license": "MIT",
"repository": {
"type": "git",
@ -9,11 +9,6 @@
"bugs": {
"url": "https://github.com/akveo/ngx-admin/issues"
},
"browserslist": [
"> 1%",
"last 2 versions",
"IE 11"
],
"scripts": {
"ng": "ng",
"conventional-changelog": "conventional-changelog",
@ -35,27 +30,25 @@
},
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.0.3",
"@angular/cdk": "^7.0.3",
"@angular/common": "^7.0.3",
"@angular/compiler": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/forms": "^7.0.3",
"@angular/http": "^7.0.3",
"@angular/platform-browser": "^7.0.3",
"@angular/platform-browser-dynamic": "^7.0.3",
"@angular/router": "^7.0.3",
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/common": "^8.0.0",
"@angular/compiler": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/forms": "^8.0.0",
"@angular/platform-browser": "^8.0.0",
"@angular/platform-browser-dynamic": "^8.0.0",
"@angular/router": "^8.0.0",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "3.0.0",
"@nebular/bootstrap": "3.0.0",
"@nebular/security": "3.0.0",
"@nebular/theme": "3.0.0",
"@ng-bootstrap/ng-bootstrap": "^4.0.0",
"@nebular/auth": "4.1.2",
"@nebular/eva-icons": "4.1.2",
"@nebular/security": "4.1.2",
"@nebular/theme": "4.1.2",
"@swimlane/ngx-charts": "^10.0.0",
"angular-tree-component": "7.2.0",
"angular2-chartjs": "0.4.1",
"angular2-toaster": "^6.1.0",
"bootstrap": "4.0.0",
"angular2-toaster": "^7.0.0",
"bootstrap": "4.3.1",
"chart.js": "2.7.1",
"ckeditor": "4.7.3",
"classlist.js": "1.1.20150312",
@ -70,22 +63,24 @@
"ng2-completer": "2.0.8",
"ng2-smart-table": "1.3.5",
"ngx-echarts": "^4.0.1",
"node-sass": "^4.12.0",
"normalize.css": "6.0.0",
"pace-js": "1.0.2",
"roboto-fontface": "0.8.0",
"rxjs": "6.3.0",
"rxjs": "6.5.2",
"rxjs-compat": "6.3.0",
"socicon": "3.0.5",
"tinymce": "4.5.7",
"tslib": "^1.9.0",
"typeface-exo": "0.0.22",
"web-animations-js": "2.2.5",
"zone.js": "^0.8.26"
"web-animations-js": "github:angular/web-animations-js#release_pr208",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.10.2",
"@angular/compiler-cli": "^7.0.3",
"@angular/cli": "^7.0.3",
"@angular/language-service": "7.0.0",
"@angular-devkit/build-angular": "~0.800.2",
"@angular/cli": "^8.0.2",
"@angular/compiler-cli": "^8.0.0",
"@angular/language-service": "8.0.0",
"@compodoc/compodoc": "1.0.1",
"@fortawesome/fontawesome-free": "^5.2.0",
"@types/d3-color": "1.0.5",
@ -94,7 +89,7 @@
"@types/jasminewd2": "2.0.3",
"@types/leaflet": "1.2.3",
"@types/node": "6.0.90",
"codelyzer": "^4.5.0",
"codelyzer": "^5.0.1",
"conventional-changelog-cli": "1.3.4",
"husky": "0.13.3",
"jasmine-core": "2.6.4",
@ -110,8 +105,8 @@
"rimraf": "2.6.1",
"stylelint": "7.13.0",
"ts-node": "3.2.2",
"tslint": "5.7.0",
"tslint": "^5.7.0",
"tslint-language-service": "^0.9.9",
"typescript": "3.1.3"
"typescript": "3.4.5"
}
}

72
src/app/@core/core.module.ts
View file

@ -5,32 +5,93 @@ import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
import { of as observableOf } from 'rxjs';
import { throwIfAlreadyLoaded } from './module-import-guard';
import { DataModule } from './data/data.module';
import {
AnalyticsService,
LayoutService,
PlayerService,
StateService,
} from './utils';
import { UserData } from './data/users';
import { ElectricityData } from './data/electricity';
import { SmartTableData } from './data/smart-table';
import { UserActivityData } from './data/user-activity';
import { OrdersChartData } from './data/orders-chart';
import { ProfitChartData } from './data/profit-chart';
import { TrafficListData } from './data/traffic-list';
import { EarningData } from './data/earning';
import { OrdersProfitChartData } from './data/orders-profit-chart';
import { TrafficBarData } from './data/traffic-bar';
import { ProfitBarAnimationChartData } from './data/profit-bar-animation-chart';
import { TemperatureHumidityData } from './data/temperature-humidity';
import { SolarData } from './data/solar';
import { TrafficChartData } from './data/traffic-chart';
import { StatsBarData } from './data/stats-bar';
import { CountryOrderData } from './data/country-order';
import { StatsProgressBarData } from './data/stats-progress-bar';
import { VisitorsAnalyticsData } from './data/visitors-analytics';
import { SecurityCamerasData } from './data/security-cameras';
import { UserService } from './mock/users.service';
import { ElectricityService } from './mock/electricity.service';
import { SmartTableService } from './mock/smart-table.service';
import { UserActivityService } from './mock/user-activity.service';
import { OrdersChartService } from './mock/orders-chart.service';
import { ProfitChartService } from './mock/profit-chart.service';
import { TrafficListService } from './mock/traffic-list.service';
import { EarningService } from './mock/earning.service';
import { OrdersProfitChartService } from './mock/orders-profit-chart.service';
import { TrafficBarService } from './mock/traffic-bar.service';
import { ProfitBarAnimationChartService } from './mock/profit-bar-animation-chart.service';
import { TemperatureHumidityService } from './mock/temperature-humidity.service';
import { SolarService } from './mock/solar.service';
import { TrafficChartService } from './mock/traffic-chart.service';
import { StatsBarService } from './mock/stats-bar.service';
import { CountryOrderService } from './mock/country-order.service';
import { StatsProgressBarService } from './mock/stats-progress-bar.service';
import { VisitorsAnalyticsService } from './mock/visitors-analytics.service';
import { SecurityCamerasService } from './mock/security-cameras.service';
import { MockDataModule } from './mock/mock-data.module';
const socialLinks = [
{
url: 'https://github.com/akveo/nebular',
target: '_blank',
icon: 'socicon-github',
icon: 'github',
},
{
url: 'https://www.facebook.com/akveo/',
target: '_blank',
icon: 'socicon-facebook',
icon: 'facebook',
},
{
url: 'https://twitter.com/akveo_inc',
target: '_blank',
icon: 'socicon-twitter',
icon: 'twitter',
},
];
const DATA_SERVICES = [
{ provide: UserData, useClass: UserService },
{ provide: ElectricityData, useClass: ElectricityService },
{ provide: SmartTableData, useClass: SmartTableService },
{ provide: UserActivityData, useClass: UserActivityService },
{ provide: OrdersChartData, useClass: OrdersChartService },
{ provide: ProfitChartData, useClass: ProfitChartService },
{ provide: TrafficListData, useClass: TrafficListService },
{ provide: EarningData, useClass: EarningService },
{ provide: OrdersProfitChartData, useClass: OrdersProfitChartService },
{ provide: TrafficBarData, useClass: TrafficBarService },
{ provide: ProfitBarAnimationChartData, useClass: ProfitBarAnimationChartService },
{ provide: TemperatureHumidityData, useClass: TemperatureHumidityService },
{ provide: SolarData, useClass: SolarService },
{ provide: TrafficChartData, useClass: TrafficChartService },
{ provide: StatsBarData, useClass: StatsBarService },
{ provide: CountryOrderData, useClass: CountryOrderService },
{ provide: StatsProgressBarData, useClass: StatsProgressBarService },
{ provide: VisitorsAnalyticsData, useClass: VisitorsAnalyticsService },
{ provide: SecurityCamerasData, useClass: SecurityCamerasService },
];
export class NbSimpleRoleProvider extends NbRoleProvider {
getRole() {
// here you could provide any role based on any auth flow
@ -39,7 +100,8 @@ export class NbSimpleRoleProvider extends NbRoleProvider {
}
export const NB_CORE_PROVIDERS = [
...DataModule.forRoot().providers,
...MockDataModule.forRoot().providers,
...DATA_SERVICES,
...NbAuthModule.forRoot({
strategies: [

6
src/app/@core/data/country-order.ts Normal file
View file

@ -0,0 +1,6 @@
import { Observable } from 'rxjs';
export abstract class CountryOrderData {
abstract getCountriesCategories(): Observable<string[]>;
abstract getCountriesCategoriesData(country: string): Observable<number[]>;
}

21
src/app/@core/data/earning.ts Normal file
View file

@ -0,0 +1,21 @@
import { Observable } from 'rxjs';
export interface LiveUpdateChart {
liveChart: { value: [string, number] }[];
delta: {
up: boolean;
value: number;
};
dailyIncome: number;
}
export interface PieChart {
value: number;
name: string;
}
export abstract class EarningData {
abstract getEarningLiveUpdateCardData(currency: string): Observable<any[]>;
abstract getEarningCardData(currency: string): Observable<LiveUpdateChart>;
abstract getEarningPieChartData(): Observable<PieChart[]>;
}

25
src/app/@core/data/electricity.ts Normal file
View file

@ -0,0 +1,25 @@
import { Observable } from 'rxjs';
export interface Month {
month: string;
delta: string;
down: boolean;
kWatts: string;
cost: string;
}
export interface Electricity {
title: string;
active?: boolean;
months: Month[];
}
export interface ElectricityChart {
label: string;
value: number;
}
export abstract class ElectricityData {
abstract getListData(): Observable<Electricity[]>;
abstract getChartData(): Observable<ElectricityChart[]>;
}

8
src/app/@core/data/orders-chart.ts Normal file
View file

@ -0,0 +1,8 @@
export interface OrdersChart {
chartLabel: string[];
linesData: number[][];
}
export abstract class OrdersChartData {
abstract getOrdersChartData(period: string): OrdersChart;
}

14
src/app/@core/data/orders-profit-chart.ts Normal file
View file

@ -0,0 +1,14 @@
import { Observable } from 'rxjs';
import { OrdersChart } from './orders-chart';
import { ProfitChart } from './profit-chart';
export interface OrderProfitChartSummary {
title: string;
value: number;
}
export abstract class OrdersProfitChartData {
abstract getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]>;
abstract getOrdersChartData(period: string): Observable<OrdersChart>;
abstract getProfitChartData(period: string): Observable<ProfitChart>;
}

5
src/app/@core/data/profit-bar-animation-chart.ts Normal file
View file

@ -0,0 +1,5 @@
import { Observable } from 'rxjs';
export abstract class ProfitBarAnimationChartData {
abstract getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }>;
}

8
src/app/@core/data/profit-chart.ts Normal file
View file

@ -0,0 +1,8 @@
export interface ProfitChart {
chartLabel: string[];
data: number[][];
}
export abstract class ProfitChartData {
abstract getProfitChartData(period: string): ProfitChart;
}

10
src/app/@core/data/security-cameras.ts Normal file
View file

@ -0,0 +1,10 @@
import { Observable } from 'rxjs';
export interface Camera {
title: string;
source: string;
}
export abstract class SecurityCamerasData {
abstract getCamerasData(): Observable<Camera[]>;
}

4
src/app/@core/data/smart-table.ts Normal file
View file

@ -0,0 +1,4 @@
export abstract class SmartTableData {
abstract getData(): any[];
}

5
src/app/@core/data/solar.ts Normal file
View file

@ -0,0 +1,5 @@
import { Observable } from 'rxjs';
export abstract class SolarData {
abstract getSolarData(): Observable<number>;
}

5
src/app/@core/data/stats-bar.ts Normal file
View file

@ -0,0 +1,5 @@
import { Observable } from 'rxjs';
export abstract class StatsBarData {
abstract getStatsBarData(): Observable<number[]>;
}

12
src/app/@core/data/stats-progress-bar.ts Normal file
View file

@ -0,0 +1,12 @@
import { Observable } from 'rxjs';
export interface ProgressInfo {
title: string;
value: number;
activeProgress: number;
description: string;
}
export abstract class StatsProgressBarData {
abstract getProgressInfoData(): Observable<ProgressInfo[]>;
}

12
src/app/@core/data/temperature-humidity.ts Normal file
View file

@ -0,0 +1,12 @@
import { Observable } from 'rxjs';
export interface Temperature {
value: number;
min: number;
max: number;
}
export abstract class TemperatureHumidityData {
abstract getTemperatureData(): Observable<Temperature>;
abstract getHumidityData(): Observable<Temperature>;
}

11
src/app/@core/data/traffic-bar.ts Normal file
View file

@ -0,0 +1,11 @@
import { Observable } from 'rxjs';
export interface TrafficBar {
data: number[];
labels: string[];
formatter: string;
}
export abstract class TrafficBarData {
abstract getTrafficBarData(period: string): Observable<TrafficBar>;
}

5
src/app/@core/data/traffic-chart.ts Normal file
View file

@ -0,0 +1,5 @@
import { Observable } from 'rxjs';
export abstract class TrafficChartData {
abstract getTrafficChartData(): Observable<number[]>;
}

20
src/app/@core/data/traffic-list.ts Normal file
View file

@ -0,0 +1,20 @@
import { Observable } from 'rxjs';
export interface TrafficList {
date: string;
value: number;
delta: {
up: boolean;
value: number;
};
comparison: {
prevDate: string;
prevValue: number;
nextDate: string;
nextValue: number;
};
}
export abstract class TrafficListData {
abstract getTrafficListData(period: string): Observable<TrafficList>;
}

12
src/app/@core/data/user-activity.ts Normal file
View file

@ -0,0 +1,12 @@
import { Observable } from 'rxjs';
export interface UserActive {
date: string;
pagesVisitCount: number;
deltaUp: boolean;
newVisits: number;
}
export abstract class UserActivityData {
abstract getUserActivityData(period: string): Observable<UserActive[]>;
}

21
src/app/@core/data/users.ts Normal file
View file

@ -0,0 +1,21 @@
import { Observable } from 'rxjs';
export interface User {
name: string;
picture: string;
}
export interface Contacts {
user: User;
type: string;
}
export interface RecentUsers extends Contacts {
time: number;
}
export abstract class UserData {
abstract getUsers(): Observable<User[]>;
abstract getContacts(): Observable<Contacts[]>;
abstract getRecentUsers(): Observable<RecentUsers[]>;
}

12
src/app/@core/data/visitors-analytics.ts Normal file
View file

@ -0,0 +1,12 @@
import { Observable } from 'rxjs';
export interface OutlineData {
label: string;
value: number;
}
export abstract class VisitorsAnalyticsData {
abstract getInnerLineChartData(): Observable<number[]>;
abstract getOutlineLineChartData(): Observable<OutlineData[]>;
abstract getPieChartData(): Observable<number>;
}

1
src/app/@core/mock/README.md Normal file
View file

@ -0,0 +1 @@
Application-wise data providers.

5
src/app/@core/data/country-order.service.ts → src/app/@core/mock/country-order.service.ts
View file

@ -1,8 +1,9 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { CountryOrderData } from '../data/country-order';
@Injectable()
export class CountryOrderService {
export class CountryOrderService extends CountryOrderData {
private countriesCategories = [
'Sofas',
@ -22,7 +23,7 @@ export class CountryOrderService {
return observableOf(this.countriesCategories);
}
getCountriesCategoriesData(): Observable<number[]> {
getCountriesCategoriesData(country: string): Observable<number[]> {
return observableOf(this.generateRandomData(this.countriesCategoriesLength));
}
}

21
src/app/@core/data/earning.service.ts → src/app/@core/mock/earning.service.ts
View file

@ -1,22 +1,9 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
export class LiveUpdateChart {
liveChart: { value: [string, number] }[];
delta: {
up: boolean;
value: number;
};
dailyIncome: number;
}
export class PieChart {
value: number;
name: string;
}
import { LiveUpdateChart, PieChart, EarningData } from '../data/earning';
@Injectable()
export class EarningService {
export class EarningService extends EarningData {
private currentDate: Date = new Date();
private currentValue = Math.random() * 1000;
@ -92,7 +79,7 @@ export class EarningService {
};
}
generateRandomEarningData(currency) {
getEarningLiveUpdateCardData(currency): Observable<any[]> {
const data = this.liveUpdateChartData[currency.toLowerCase()];
const newValue = this.generateRandomLiveChartData();
@ -102,7 +89,7 @@ export class EarningService {
return observableOf(data.liveChart);
}
getEarningLiveUpdateCardData(currency: string) {
getEarningCardData(currency: string): Observable<LiveUpdateChart> {
const data = this.liveUpdateChartData[currency.toLowerCase()];
data.liveChart = this.getDefaultLiveChartData(150);

23
src/app/@core/data/electricity.service.ts → src/app/@core/mock/electricity.service.ts
View file

@ -1,27 +1,9 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
class Month {
month: string;
delta: string;
down: boolean;
kWatts: string;
cost: string;
}
export class Electricity {
title: string;
active?: boolean;
months: Month[];
}
export class ElectricityChart {
label: string;
value: number;
}
import { Electricity, ElectricityChart, ElectricityData } from '../data/electricity';
@Injectable()
export class ElectricityService {
export class ElectricityService extends ElectricityData {
private listData: Electricity[] = [
{
@ -96,6 +78,7 @@ export class ElectricityService {
chartData: ElectricityChart[];
constructor() {
super();
this.chartData = this.chartPoints.map((p, index) => ({
label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
value: p,

4
src/app/@core/data/data.module.ts → src/app/@core/mock/mock-data.module.ts
View file

@ -53,10 +53,10 @@ const SERVICES = [
...SERVICES,
],
})
export class DataModule {
export class MockDataModule {
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
ngModule: DataModule,
ngModule: MockDataModule,
providers: [
...SERVICES,
],

9
src/app/@core/data/orders-chart.service.ts → src/app/@core/mock/orders-chart.service.ts
View file

@ -1,13 +1,9 @@
import { Injectable } from '@angular/core';
import { PeriodsService } from './periods.service';
export class OrdersChart {
chartLabel: string[];
linesData: number[][];
}
import { OrdersChart, OrdersChartData } from '../data/orders-chart';
@Injectable()
export class OrdersChartService {
export class OrdersChartService extends OrdersChartData {
private year = [
'2012',
@ -22,6 +18,7 @@ export class OrdersChartService {
private data = { };
constructor(private period: PeriodsService) {
super();
this.data = {
week: this.getDataForWeekPeriod(),
month: this.getDataForMonthPeriod(),

17
src/app/@core/data/orders-profit-chart.service.ts → src/app/@core/mock/orders-profit-chart.service.ts
View file

@ -1,15 +1,11 @@
import { of as observableOf, Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { OrdersChart, OrdersChartService } from './orders-chart.service';
import { ProfitChart, ProfitChartService } from './profit-chart.service';
export class OrderProfitChartSummary {
title: string;
value: number;
}
import { OrdersChart, OrdersChartData } from '../data/orders-chart';
import { OrderProfitChartSummary, OrdersProfitChartData } from '../data/orders-profit-chart';
import { ProfitChart, ProfitChartData } from '../data/profit-chart';
@Injectable()
export class OrdersProfitChartService {
export class OrdersProfitChartService extends OrdersProfitChartData {
private summary = [
{
@ -30,8 +26,9 @@ export class OrdersProfitChartService {
},
];
constructor(private ordersChartService: OrdersChartService,
private profitChartService: ProfitChartService) {
constructor(private ordersChartService: OrdersChartData,
private profitChartService: ProfitChartData) {
super();
}
getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]> {

0
src/app/@core/data/periods.service.ts → src/app/@core/mock/periods.service.ts
View file

4
src/app/@core/data/profit-bar-animation-chart.service.ts → src/app/@core/mock/profit-bar-animation-chart.service.ts
View file

@ -1,12 +1,14 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { ProfitBarAnimationChartData } from '../data/profit-bar-animation-chart';
@Injectable()
export class ProfitBarAnimationChartService {
export class ProfitBarAnimationChartService extends ProfitBarAnimationChartData {
private data: any;
constructor() {
super();
this.data = {
firstLine: this.getDataForFirstLine(),
secondLine: this.getDataForSecondLine(),

9
src/app/@core/data/profit-chart.service.ts → src/app/@core/mock/profit-chart.service.ts
View file

@ -1,13 +1,9 @@
import { Injectable } from '@angular/core';
import { PeriodsService } from './periods.service';
export class ProfitChart {
chartLabel: string[];
data: number[][];
}
import { ProfitChart, ProfitChartData } from '../data/profit-chart';
@Injectable()
export class ProfitChartService {
export class ProfitChartService extends ProfitChartData {
private year = [
'2012',
@ -22,6 +18,7 @@ export class ProfitChartService {
private data = { };
constructor(private period: PeriodsService) {
super();
this.data = {
week: this.getDataForWeekPeriod(),
month: this.getDataForMonthPeriod(),

8
src/app/@core/data/security-cameras.service.ts → src/app/@core/mock/security-cameras.service.ts
View file

@ -1,13 +1,9 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
export class Camera {
title: string;
source: string;
}
import { Camera, SecurityCamerasData } from '../data/security-cameras';
@Injectable()
export class SecurityCamerasService {
export class SecurityCamerasService extends SecurityCamerasData {
private cameras: Camera[] = [
{

3
src/app/@core/data/smart-table.service.ts → src/app/@core/mock/smart-table.service.ts
View file

@ -1,7 +1,8 @@
import { Injectable } from '@angular/core';
import { SmartTableData } from '../data/smart-table';
@Injectable()
export class SmartTableService {
export class SmartTableService extends SmartTableData {
data = [{
id: 1,

3
src/app/@core/data/solar.service.ts → src/app/@core/mock/solar.service.ts
View file

@ -1,8 +1,9 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { SolarData } from '../data/solar';
@Injectable()
export class SolarService {
export class SolarService extends SolarData {
private value = 42;
getSolarData(): Observable<number> {

3
src/app/@core/data/stats-bar.service.ts → src/app/@core/mock/stats-bar.service.ts
View file

@ -1,8 +1,9 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { StatsBarData } from '../data/stats-bar';
@Injectable()
export class StatsBarService {
export class StatsBarService extends StatsBarData {
private statsBarData: number[] = [
300, 520, 435, 530,

10
src/app/@core/data/stats-progress-bar.service.ts → src/app/@core/mock/stats-progress-bar.service.ts
View file

@ -1,15 +1,9 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
export class ProgressInfo {
title: string;
value: number;
activeProgress: number;
description: string;
}
import { ProgressInfo, StatsProgressBarData } from '../data/stats-progress-bar';
@Injectable()
export class StatsProgressBarService {
export class StatsProgressBarService extends StatsProgressBarData {
private progressInfoData: ProgressInfo[] = [
{
title: 'Today’s Profit',

9
src/app/@core/data/temperature-humidity.service.ts → src/app/@core/mock/temperature-humidity.service.ts
View file

@ -1,14 +1,9 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
export class Temperature {
value: number;
min: number;
max: number;
}
import { TemperatureHumidityData, Temperature } from '../data/temperature-humidity';
@Injectable()
export class TemperatureHumidityService {
export class TemperatureHumidityService extends TemperatureHumidityData {
private temperatureDate: Temperature = {
value: 24,

10
src/app/@core/data/traffic-bar.service.ts → src/app/@core/mock/traffic-bar.service.ts
View file

@ -1,19 +1,15 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { PeriodsService } from './periods.service';
export class TrafficBar {
data: number[];
labels: string[];
formatter: string;
}
import { TrafficBarData, TrafficBar } from '../data/traffic-bar';
@Injectable()
export class TrafficBarService {
export class TrafficBarService extends TrafficBarData {
private data = { };
constructor(private period: PeriodsService) {
super();
this.data = {
week: this.getDataForWeekPeriod(),
month: this.getDataForMonthPeriod(),

4
src/app/@core/data/traffic-chart.service.ts → src/app/@core/mock/traffic-chart.service.ts
View file

@ -1,9 +1,9 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { TrafficChartData } from '../data/traffic-chart';
@Injectable()
export class TrafficChartService {
export class TrafficChartService extends TrafficChartData {
private data: number[] = [
300, 520, 435, 530,

23
src/app/@core/data/traffic-list.service.ts → src/app/@core/mock/traffic-list.service.ts
View file

@ -1,29 +1,16 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { PeriodsService } from './periods.service';
export class TrafficList {
date: string;
value: number;
delta: {
up: boolean;
value: number;
};
comparison: {
prevDate: string;
prevValue: number;
nextDate: string;
nextValue: number;
};
}
import { TrafficList, TrafficListData } from '../data/traffic-list';
@Injectable()
export class TrafficListService {
export class TrafficListService extends TrafficListData {
private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
private data = {};
constructor(private period: PeriodsService) {
super();
this.data = {
week: this.getDataWeek(),
month: this.getDataMonth(),
@ -44,10 +31,8 @@ export class TrafficListService {
private getDataMonth(): TrafficList[] {
const getFirstDateInPeriod = () => {
const months = this.period.getMonths();
const date = new Date();
const prevYear = date.getFullYear() - 1;
return `${months[months.length - 1]}, ${prevYear}`;
return months[months.length - 1];
};
return this.reduceData(this.period.getMonths(), getFirstDateInPeriod);

11
src/app/@core/data/user-activity.service.ts → src/app/@core/mock/user-activity.service.ts
View file

@ -1,16 +1,10 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { PeriodsService } from './periods.service';
export class UserActive {
date: string;
pagesVisitCount: number;
deltaUp: boolean;
newVisits: number;
}
import { UserActive, UserActivityData } from '../data/user-activity';
@Injectable()
export class UserActivityService {
export class UserActivityService extends UserActivityData {
private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
private generateUserActivityRandomData(date) {
@ -25,6 +19,7 @@ export class UserActivityService {
data = {};
constructor(private periods: PeriodsService) {
super();
this.data = {
week: this.getDataWeek(),
month: this.getDataMonth(),

18
src/app/@core/data/users.service.ts → src/app/@core/mock/users.service.ts
View file

@ -1,23 +1,9 @@
import { of as observableOf, Observable } from 'rxjs';
import { Injectable } from '@angular/core';
class User {
name: string;
picture: string;
}
export class Contacts {
user: User;
type: string;
}
export class RecentUsers extends Contacts {
time: number;
}
import { Contacts, RecentUsers, UserData } from '../data/users';
@Injectable()
export class UserService {
export class UserService extends UserData {
private time: Date = new Date;

9
src/app/@core/data/visitors-analytics.service.ts → src/app/@core/mock/visitors-analytics.service.ts
View file

@ -1,16 +1,13 @@
import { Injectable } from '@angular/core';
import { of as observableOf, Observable } from 'rxjs';
import { PeriodsService } from './periods.service';
export class OutlineData {
label: string;
value: number;
}
import { OutlineData, VisitorsAnalyticsData } from '../data/visitors-analytics';
@Injectable()
export class VisitorsAnalyticsService {
export class VisitorsAnalyticsService extends VisitorsAnalyticsData {
constructor(private periodService: PeriodsService) {
super();
}
private pieChartValue = 75;

4
src/app/@theme/components/footer/footer.component.scss
View file

@ -13,11 +13,11 @@
a {
padding: 0.4rem;
color: nb-theme(color-fg);
color: nb-theme(text-hint-color);
transition: color ease-out 0.1s;
&:hover {
color: nb-theme(color-fg-heading);
color: nb-theme(text-basic-color);
}
}
}

2
src/app/@theme/components/footer/footer.component.ts
View file

@ -4,7 +4,7 @@ import { Component } from '@angular/core';
selector: 'ngx-footer',
styleUrls: ['./footer.component.scss'],
template: `
<span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
<span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2019</span>
<div class="socials">
<a href="#" target="_blank" class="ion ion-social-github"></a>
<a href="#" target="_blank" class="ion ion-social-facebook"></a>

39
src/app/@theme/components/header/header.component.html
View file

@ -1,26 +1,29 @@
<div class="header-container"
[class.left]="position === 'normal'"
[class.right]="position === 'inverse'">
<div class="logo-containter">
<a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
<div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
<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()">ngx-<span>admin</span></a>
</div>
<ngx-theme-switcher></ngx-theme-switcher>
<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">
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
<nb-actions
size="medium"
[class.right]="position === 'normal'"
[class.left]="position === 'inverse'">
<nb-action *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action>
<nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
<nb-action class="control-item" icon="nb-email"></nb-action>
<nb-actions size="small">
<nb-action class="control-item">
<nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
<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" *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu"
[onlyPicture]="userPictureOnly"
[name]="user?.name"
[picture]="user?.picture">
</nb-user>
</nb-action>
</nb-actions>
</div>

200
src/app/@theme/components/header/header.component.scss
View file

@ -1,31 +1,30 @@
@import '../../styles/themes';
@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%;
.left {
display: flex;
width: 100%;
order: 0;
flex-direction: row;
}
.right {
order: 1;
flex-direction: row-reverse;
}
.logo-containter {
.logo-container {
display: flex;
align-items: center;
width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
}
.control-item {
display: block;
nb-action {
height: auto;
display: flex;
align-content: center;
}
nb-user {
cursor: pointer;
}
::ng-deep nb-search button {
padding: 0!important;
}
.header-container {
@ -33,179 +32,38 @@
align-items: center;
width: auto;
.navigation {
@include nb-ltr(padding-right, nb-theme(padding));
@include nb-rtl(padding-left, nb-theme(padding));
font-size: 2.5rem;
.sidebar-toggle {
@include nb-ltr(padding-right, 1.25rem);
@include nb-rtl(padding-left, 1.25rem);
text-decoration: none;
i {
display: block;
color: nb-theme(text-hint-color);
nb-icon {
font-size: 1.75rem;
}
}
.logo {
padding: 0 nb-theme(padding);
padding: 0 1.25rem;
font-size: 1.75rem;
font-weight: nb-theme(font-weight-bolder);
@include nb-ltr(border-left, 1px solid nb-theme(separator));
@include nb-rtl(border-right, 1px solid nb-theme(separator));
@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;
span {
font-weight: nb-theme(font-weight-normal);
}
}
}
@include nb-for-theme(corporate) {
$menu-action-separator-color: #3f4550;
nb-action {
@include nb-ltr(border-left-color, $menu-action-separator-color);
@include nb-rtl(border-right-color, $menu-action-separator-color);
}
.header-container .logo {
@include nb-ltr(border, none);
@include nb-rtl(border, none);
}
.header-container /deep/ ngx-theme-switcher .dropdown-toggle {
color: nb-theme(color-white);
background: transparent;
}
}
ngx-layout-direction-switcher {
margin: 0 1.5rem;
}
ngx-theme-switcher {
margin: nb-theme(layout-padding);
margin-top: 0;
margin-bottom: 0;
}
@include media-breakpoint-down(xl) {
ngx-layout-direction-switcher {
display: none;
}
}
.toggle-settings /deep/ a {
display: block;
text-decoration: none;
line-height: 1;
i {
color: nb-theme(color-fg-highlight);
font-size: 2.25rem;
border-radius: 50%;
position: relative;
animation-name: pulse-light;
&::after {
content: ' ';
// hack to be able to set border-radius
background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
border-radius: 50%;
pointer-events: none;
position: absolute;
top: 52.3%;
left: 50%;
transform: translate(-50%, -50%);
width: 13%;
height: 13%;
animation: 3s linear infinite pulse;
@include nb-for-theme(default) {
animation-name: pulse-light;
}
}
}
}
@include keyframes(pulse) {
0% {
box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
}
20% {
box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
}
100% {
box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
}
}
@include keyframes(pulse-light) {
0% {
box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
}
20% {
box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
}
100% {
box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
}
}
@include media-breakpoint-down(md) {
nb-action:not(.toggle-settings) {
border: none;
}
.control-item {
display: none;
}
.toggle-settings {
padding: 0;
}
ngx-layout-direction-switcher {
display: none;
}
ngx-theme-switcher {
margin: 0 0.5rem;
text-decoration: none;
}
}
@include media-breakpoint-down(sm) {
nb-user /deep/ .user-name {
.control-item {
display: none;
}
}
@include media-breakpoint-down(is) {
.header-container {
.logo {
font-size: 1.25rem;
}
}
.toggle-settings {
display: none;
}
ngx-theme-switcher {
display: none;
}
nb-action:not(.toggle-settings) {
.user-action {
border: none;
padding: 0;
}
}
@include media-breakpoint-down(xs) {
.right /deep/ {
@include media-breakpoint-down(is) {
nb-select {
display: none;
}
}

85
src/app/@theme/components/header/header.component.ts
View file

@ -1,33 +1,83 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
import { NbMenuService, NbSidebarService } from '@nebular/theme';
import { UserService } from '../../../@core/data/users.service';
import { AnalyticsService } from '../../../@core/utils';
import { UserData } from '../../../@core/data/users';
import { LayoutService } from '../../../@core/utils';
import { map, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
selector: 'ngx-header',
styleUrls: ['./header.component.scss'],
templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit {
@Input() position = 'normal';
export class HeaderComponent implements OnInit, OnDestroy {
private destroy$: Subject<void> = new Subject<void>();
userPictureOnly: boolean = false;
user: any;
userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
themes = [
{
value: 'default',
name: 'Light',
},
{
value: 'dark',
name: 'Dark',
},
{
value: 'cosmic',
name: 'Cosmic',
},
{
value: 'corporate',
name: 'Corporate',
},
];
currentTheme = 'default';
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
constructor(private sidebarService: NbSidebarService,
private menuService: NbMenuService,
private userService: UserService,
private analyticsService: AnalyticsService,
private layoutService: LayoutService) {
private themeService: NbThemeService,
private userService: UserData,
private layoutService: LayoutService,
private breakpointService: NbMediaBreakpointsService) {
}
ngOnInit() {
this.currentTheme = this.themeService.currentTheme;
this.userService.getUsers()
.pipe(takeUntil(this.destroy$))
.subscribe((users: any) => this.user = users.nick);
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 {
@ -37,17 +87,8 @@ export class HeaderComponent implements OnInit {
return false;
}
toggleSettings(): boolean {
this.sidebarService.toggle(false, 'settings-sidebar');
navigateHome() {
this.menuService.navigateHome();
return false;
}
goToHome() {
this.menuService.navigateHome();
}
startSearch() {
this.analyticsService.trackEvent('startSearch');
}
}

6
src/app/@theme/components/index.ts
View file

@ -2,9 +2,3 @@ export * from './header/header.component';
export * from './footer/footer.component';
export * from './search-input/search-input.component';
export * from './tiny-mce/tiny-mce.component';
export * from './theme-settings/theme-settings.component';
export * from './theme-switcher/theme-switcher.component';
export * from './switcher/switcher.component';
export * from './layout-direction-switcher/layout-direction-switcher.component';
export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
export * from './toggle-settings-button/toggle-settings-button.component';

42
src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts
View file

@ -1,42 +0,0 @@
import { Component, OnDestroy, Input } from '@angular/core';
import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
@Component({
selector: 'ngx-layout-direction-switcher',
template: `
<ngx-switcher
[firstValue]="directions.RTL"
[secondValue]="directions.LTR"
[firstValueLabel]="'RTL'"
[secondValueLabel]="'LTR'"
[value]="currentDirection"
(valueChange)="toggleDirection($event)"
[vertical]="vertical"
>
</ngx-switcher>
`,
})
export class LayoutDirectionSwitcherComponent implements OnDestroy {
directions = NbLayoutDirection;
currentDirection: NbLayoutDirection;
alive = true;
@Input() vertical: boolean = false;
constructor(private directionService: NbLayoutDirectionService) {
this.currentDirection = this.directionService.getDirection();
this.directionService.onDirectionChange()
.pipe(takeWhile(() => this.alive))
.subscribe(newDirection => this.currentDirection = newDirection);
}
toggleDirection(newDirection) {
this.directionService.setDirection(newDirection);
}
ngOnDestroy() {
this.alive = false;
}
}

2
src/app/@theme/components/search-input/search-input.component.scss
View file

@ -25,7 +25,7 @@
}
}
/deep/ search-input {
::ng-deep search-input {
input {
background: transparent;
}

2
src/app/@theme/components/search-input/search-input.component.ts
View file

@ -14,7 +14,7 @@ import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular
`,
})
export class SearchInputComponent {
@ViewChild('input') input: ElementRef;
@ViewChild('input', { static: true }) input: ElementRef;
@Output() search: EventEmitter<string> = new EventEmitter<string>();

112
src/app/@theme/components/switcher/switcher.component.scss
View file

@ -1,112 +0,0 @@
@import '../../styles/themes';
@import '~@nebular/bootstrap/styles/hero-buttons';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.switch-label {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin: 0;
&.vertical {
flex-direction: column;
align-items: flex-start;
.first,
.second {
padding: 0;
}
.switch {
margin-top: 0.5em;
}
}
& > span {
font-size: 1.125rem;
font-weight: nb-theme(font-weight-bold);
transition: opacity 0.3s ease;
color: nb-theme(color-fg);
&.first {
@include nb-ltr(padding-right, 10px);
@include nb-rtl(padding-left, 10px);
}
&.second {
@include nb-ltr(padding-left, 10px);
@include nb-rtl(padding-right, 10px);
}
&.active {
color: nb-theme(color-fg-text);
}
@include nb-for-theme(cosmic) {
color: nb-theme(color-fg);
&.active {
color: nb-theme(color-white);
}
}
&:active {
opacity: 0.78;
}
}
}
.switch {
position: relative;
display: inline-block;
width: 3rem;
height: 1.5rem;
margin: 0;
input {
display: none;
&:checked + .slider::before {
@include nb-ltr(transform, translateX(1.5rem));
@include nb-rtl(transform, translateX(-1.5rem));
}
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1.75rem;
background-color: nb-theme(layout-bg);
}
.slider::before {
position: absolute;
content: '';
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
background-color: nb-theme(color-success);
transition: 0.2s;
box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
@include nb-for-theme(cosmic) {
@include btn-hero-primary-gradient();
}
@include nb-for-theme(corporate) {
background-color: nb-theme(color-primary);
}
}
}
@include media-breakpoint-down(xs) {
align-items: flex-end;
}
}

60
src/app/@theme/components/switcher/switcher.component.ts
View file

@ -1,60 +0,0 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'ngx-switcher',
styleUrls: ['./switcher.component.scss'],
template: `
<label class="switch-label" [class.vertical]="vertical">
<span class="first" [class.active]="vertical || isFirstValue()">
{{vertical ? currentValueLabel() : firstValueLabel}}
</span>
<div class="switch">
<input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
<span class="slider"></span>
</div>
<span
*ngIf="!vertical"
class="second"
[class.active]="isSecondValue()"
>
{{secondValueLabel}}
</span>
</label>
`,
})
export class SwitcherComponent {
@Input() firstValue: any;
@Input() secondValue: any;
@Input() firstValueLabel: string;
@Input() secondValueLabel: string;
@Input() vertical: boolean;
@Input() value: any;
@Output() valueChange = new EventEmitter<any>();
isFirstValue() {
return this.value === this.firstValue;
}
isSecondValue() {
return this.value === this.secondValue;
}
currentValueLabel() {
return this.isFirstValue()
? this.firstValueLabel
: this.secondValueLabel;
}
changeValue() {
this.value = this.isFirstValue()
? this.secondValue
: this.firstValue;
this.valueChange.emit(this.value);
}
}

91
src/app/@theme/components/theme-settings/theme-settings.component.scss
View file

@ -1,91 +0,0 @@
@import '../../styles/themes';
@include nb-install-component() {
h6 {
margin-bottom: 0.875rem;
text-align: center;
font-weight: bold;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
}
.settings-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin: 0 0 2.575rem;
a {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
width: 4.15rem;
height: 4.15rem;
border-radius: nb-theme(radius);
background-color: nb-theme(color-white);
border: 2px solid transparent;
margin: 0.875rem;
text-decoration: none;
font-size: 2.25rem;
color: nb-theme(color-fg);
&.selected {
color: nb-theme(color-success);
border-color: nb-theme(color-success);
}
@include nb-for-theme(cosmic) {
box-shadow: 0 4px 14px 0 rgba(19, 19, 94, 0.4);
background-color: #3e367e;
border: 2px solid #3e367e;
&.selected {
color: nb-theme(link-color);
}
}
}
}
.settings {
margin-bottom: 1em;
}
.switcher {
margin-bottom: 1rem;
font-size: 1.524rem;
width: 12rem;
/deep/ ngx-switcher {
.switch-label span {
font-size: 1em;
font-weight: normal;
&.first, &.second {
font-size: 1rem;
}
}
.switch {
height: 1.5em;
width: 3em;
.slider::before {
height: 1.5em;
width: 1.5em;
}
input:checked + .slider::before {
@include nb-ltr(transform, translateX(1.5em)!important);
@include nb-rtl(transform, translateX(-1.5em)!important);
}
}
@include nb-for-theme(cosmic) {
.switch .slider {
background-color: nb-theme(color-bg);
}
}
}
}
}

70
src/app/@theme/components/theme-settings/theme-settings.component.ts
View file

@ -1,70 +0,0 @@
import { Component } from '@angular/core';
import { StateService } from '../../../@core/utils';
@Component({
selector: 'ngx-theme-settings',
styleUrls: ['./theme-settings.component.scss'],
template: `
<h6>LAYOUTS</h6>
<div class="settings-row">
<a *ngFor="let layout of layouts"
href="#"
[class.selected]="layout.selected"
[attr.title]="layout.name"
(click)="layoutSelect(layout)">
<i [attr.class]="layout.icon"></i>
</a>
</div>
<h6>SIDEBAR</h6>
<div class="settings-row">
<a *ngFor="let sidebar of sidebars"
href="#"
[class.selected]="sidebar.selected"
[attr.title]="sidebar.name"
(click)="sidebarSelect(sidebar)">
<i [attr.class]="sidebar.icon"></i>
</a>
</div>
<div class="settings-row">
<div class="switcher">
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
</div>
</div>
`,
})
export class ThemeSettingsComponent {
layouts = [];
sidebars = [];
constructor(protected stateService: StateService) {
this.stateService.getLayoutStates()
.subscribe((layouts: any[]) => this.layouts = layouts);
this.stateService.getSidebarStates()
.subscribe((sidebars: any[]) => this.sidebars = sidebars);
}
layoutSelect(layout: any): boolean {
this.layouts = this.layouts.map((l: any) => {
l.selected = false;
return l;
});
layout.selected = true;
this.stateService.setLayoutState(layout);
return false;
}
sidebarSelect(sidebars: any): boolean {
this.sidebars = this.sidebars.map((s: any) => {
s.selected = false;
return s;
});
sidebars.selected = true;
this.stateService.setSidebarState(sidebars);
return false;
}
}

7
src/app/@theme/components/theme-switcher/theme-switcher.component.html
View file

@ -1,7 +0,0 @@
<div class="themes-switcher"
[nbPopover]="switcherListComponent"
nbPopoverPlacement="bottom"
[nbPopoverContext]="{popover: popover}">
<i class="nb-drops"></i>
<span *ngIf="showTitle">Themes</span>
</div>

50
src/app/@theme/components/theme-switcher/theme-switcher.component.scss
View file

@ -1,50 +0,0 @@
@import '../../styles/themes';
@import '~@nebular/theme/styles/core/mixins';
@import '~@nebular/theme/styles/core/functions';
@include nb-install-component() {
.themes-switcher {
display: flex;
font-size: 1.25rem;
padding: 0.8rem 1.25rem;
align-items: center;
cursor: pointer;
background-color: nb-theme(switcher-background);
border-radius: nb-theme(radius);
&:hover {
$color: nb-theme(switcher-background);
$percentage: nb-theme(switcher-background-percentage);
background-color: tint($color, $percentage);
}
span {
margin: 0 1.2rem;
}
i {
color: nb-theme(color-primary);
font-size: 1.8rem;
border-radius: 50%;
position: relative;
@include nb-for-theme(default) {
color: nb-theme(color-success);
}
@include nb-for-theme(corporate) {
color: nb-theme(color-fg-highlight);
}
&::before {
// Hack for IE11, IE11 should not set background
background: nb-theme(drops-icon-line-gadient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}

19
src/app/@theme/components/theme-switcher/theme-switcher.component.ts
View file

@ -1,19 +0,0 @@
import { Component, Input, ViewChild } from '@angular/core';
import { NbPopoverDirective } from '@nebular/theme';
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
@Component({
selector: 'ngx-theme-switcher',
templateUrl: './theme-switcher.component.html',
styleUrls: ['./theme-switcher.component.scss'],
})
export class ThemeSwitcherComponent {
@ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
@Input() showTitle: boolean = true;
switcherListComponent = ThemeSwitcherListComponent;
theme: NbJSThemeOptions;
}

76
src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss
View file

@ -1,76 +0,0 @@
@import '../../../styles/themes';
@import '~@nebular/theme/styles/core/mixins';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
$icon-color-default: #0bbb79;
$icon-color-cosmic: #7958fa;
$icon-color-corporate: #a7a2be;
$icon-top-color-default: #01dbb5;
$icon-top-color-cosmic: #a258fe;
$icon-top-color-corporate: #e9e8eb;
@include nb-install-component() {
/deep/ .themes-switcher-list {
padding: 1rem 2rem 1.25rem 0.5rem;
margin: 0;
@include nb-ltr(text-align, start);
@include nb-rtl(text-align, end);
.themes-switcher-item {
list-style: none;
cursor: pointer;
&:hover span {
opacity: 0.5;
}
i {
font-size: 2rem;
&.drop-icon-default {
color: $icon-color-default;
// Hack for IE11, IE11 should not set background
background: -webkit-linear-gradient($icon-top-color-default, $icon-color-default);
}
&.drop-icon-cosmic {
color: $icon-color-cosmic;
// Hack for IE11, IE11 should not set background
background: -webkit-linear-gradient($icon-top-color-cosmic, $icon-color-cosmic);
}
&.drop-icon-corporate {
color: $icon-color-corporate;
// Hack for IE11, IE11 should not set background
background: -webkit-linear-gradient($icon-top-color-corporate, $icon-color-corporate);
}
&.drop-icon-default,
&.drop-icon-cosmic,
&.drop-icon-corporate {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
span {
font-weight: 300;
vertical-align: super;
padding-left: 1rem;
color: nb-theme(color-fg-heading);
}
}
}
@include media-breakpoint-down(is) {
/deep/ .themes-switcher-list {
display: none;
}
}
}

51
src/app/@theme/components/theme-switcher/themes-switcher-list/themes-switcher-list.component.ts
View file

@ -1,51 +0,0 @@
import {Component, Input} from '@angular/core';
import { NbThemeService, NbPopoverDirective } from '@nebular/theme';
import { AnalyticsService } from '../../../../@core/utils/analytics.service';
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
@Component({
selector: 'ngx-theme-switcher-list',
template: `
<ul class="themes-switcher-list">
<li class="themes-switcher-item"
*ngFor="let theme of themes"
(click)="onToggleTheme(theme.key)">
<i class="nb-drop" [ngClass]="'drop-icon-' + theme.key"></i>
<span>{{ theme.title }}</span>
</li>
</ul>
`,
styleUrls: ['./theme-switcher-list.component.scss'],
})
export class ThemeSwitcherListComponent {
@Input() popover: NbPopoverDirective;
theme: NbJSThemeOptions;
themes = [
{
title: 'Light',
key: 'default',
},
{
title: 'Cosmic',
key: 'cosmic',
},
{
title: 'Corporate',
key: 'corporate',
},
];
constructor(
private themeService: NbThemeService,
private analyticsService: AnalyticsService,
) {}
onToggleTheme(themeKey: string) {
this.themeService.changeTheme(themeKey);
this.analyticsService.trackEvent('switchTheme');
this.popover.hide();
}
}

97
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
View file

@ -1,97 +0,0 @@
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.toggle-settings {
position: fixed;
top: 50%;
height: 8.575rem;
width: 8.575rem;
border: none;
transition: transform 0.3s ease, background-image 0.3s ease;
transform: translate(0, -50%);
z-index: 998;
@include nb-ltr() {
border-top-left-radius: nb-theme(radius);
border-bottom-left-radius: nb-theme(radius);
right: 0;
&.sidebarEnd {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
right: auto;
border-top-right-radius: nb-theme(radius);
border-bottom-right-radius: nb-theme(radius);
left: 0;
}
}
@include nb-rtl() {
border-top-right-radius: nb-theme(radius);
border-bottom-right-radius: nb-theme(radius);
left: 0;
&.sidebarEnd {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
left: auto;
border-top-left-radius: nb-theme(radius);
border-bottom-left-radius: nb-theme(radius);
right: 0;
}
}
&.expanded {
@include nb-ltr(transform, translate(-19rem, -50%));
@include nb-rtl(transform, translate(19rem, -50%));
&.sidebarEnd {
@include nb-rtl(transform, translate(-19rem, -50%));
@include nb-ltr(transform, translate(19rem, -50%));
}
}
@include nb-for-theme(cosmic) {
box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
background-image: linear-gradient(to right, #a054fe 0%, #7a58ff 100%);
&.expanded {
background-image: linear-gradient(to right, #2f296b 0%, #2f296b 100%);
}
}
@include nb-for-theme(default) {
border: 1px solid #d5dbe0;
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
background-color: #ffffff;
}
@include nb-for-theme(corporate) {
border: 1px solid #d5dbe0;
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
color: nb-theme(color-danger);
background-color: #ffffff;
}
i {
font-size: 6rem;
color: #ffffff;
@include nb-for-theme(default) {
color: nb-theme(color-danger);
}
@include nb-for-theme(corporate) {
color: nb-theme(color-warning);
}
}
}
@include media-breakpoint-down(sm) {
.toggle-settings {
display: none;
}
}
}

33
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
View file

@ -1,33 +0,0 @@
import { Component } from '@angular/core';
import { NbSidebarService } from '@nebular/theme';
import { StateService } from '../../../@core/utils';
@Component({
selector: 'ngx-toggle-settings-button',
styleUrls: ['./toggle-settings-button.component.scss'],
template: `
<button class="toggle-settings"
(click)="toggleSettings()"
[class.expanded]="expanded"
[class.sidebarEnd]="sidebarEnd">
<i class="nb-gear"></i>
</button>
`,
})
export class ToggleSettingsButtonComponent {
sidebarEnd = false;
expanded = false;
constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
this.stateService.onSidebarState()
.subscribe(({id}) => {
this.sidebarEnd = id === 'end';
});
}
toggleSettings() {
this.sidebarService.toggle(false, 'settings-sidebar');
this.expanded = !this.expanded;
}
}

1
src/app/@theme/layouts/index.ts
View file

@ -1,4 +1,3 @@
export * from './one-column/one-column.layout';
export * from './two-columns/two-columns.layout';
export * from './three-columns/three-columns.layout';
export * from './sample/sample.layout';

152
src/app/@theme/layouts/one-column/one-column.layout.scss
View file

@ -3,155 +3,7 @@
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
nb-layout-column.small {
flex: 0.15 !important;
}
nb-sidebar.settings-sidebar {
$sidebar-width: 7.5rem;
transition: width 0.3s ease;
width: $sidebar-width;
overflow: hidden;
&.collapsed {
width: 0;
/deep/ .main-container {
width: 0;
.scrollable {
width: $sidebar-width;
padding: 1.25rem;
}
}
}
/deep/ .main-container {
width: $sidebar-width;
background: nb-theme(color-bg);
transition: width 0.3s ease;
overflow: hidden;
.scrollable {
width: $sidebar-width;
}
@include nb-for-theme(cosmic) {
background: nb-theme(layout-bg);
}
}
}
nb-sidebar.menu-sidebar {
margin-top: nb-theme(sidebar-header-gap);
@include nb-for-theme(corporate) {
margin-top: 0;
}
/deep/ .main-container {
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
@include nb-ltr(border-top-right-radius, nb-theme(radius));
@include nb-rtl(border-top-left-radius, nb-theme(radius));
@include nb-for-theme(corporate) {
border: 1px solid nb-theme(separator);
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
}
}
/deep/ .scrollable {
@include nb-for-theme(corporate) {
padding-top: 0;
.menu-item:first-child {
border-top: none;
}
}
}
/deep/ nb-sidebar-header {
padding-bottom: 0.5rem;
text-align: center;
}
background: transparent;
.main-btn {
padding: 0.75rem 2.5rem;
margin-top: -2rem;
font-weight: bold;
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
@include nb-for-theme(corporate) {
border-radius: nb-theme(radius);
}
i {
font-size: 2rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
span {
@include nb-ltr(padding-left, 0.25rem);
@include nb-rtl(padding-right, 0.25rem);
}
i, span {
vertical-align: middle;
}
}
&.compacted {
/deep/ nb-sidebar-header {
padding-left: 0;
padding-right: 0;
}
.main-btn {
width: 46px;
height: 44px;
padding: 0.375rem;
border-radius: 5px;
transition: none;
span {
display: none;
}
}
}
}
@include media-breakpoint-down(xs) {
.main-content {
padding: 0.75rem !important;
}
}
@include media-breakpoint-down(sm) {
nb-sidebar.menu-sidebar {
margin-top: 0;
/deep/ .main-container {
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
@include nb-ltr(border-top-right-radius, 0);
@include nb-rtl(border-top-left-radius, 0);
.scrollable {
padding-top: 0;
}
}
}
.main-btn {
display: none;
}
.menu-sidebar ::ng-deep .scrollable {
padding-top: nb-theme(layout-padding-top);
}
}

31
src/app/@theme/layouts/one-column/one-column.layout.ts
View file

@ -1,23 +1,15 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { Component } from '@angular/core';
// TODO: move layouts into the framework
@Component({
selector: 'ngx-one-column-layout',
styleUrls: ['./one-column.layout.scss'],
template: `
<nb-layout>
<nb-layout windowMode>
<nb-layout-header fixed>
<ngx-header></ngx-header>
</nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
<a href="#" class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span>
</a>
</nb-sidebar-header>
<ng-content select="nb-menu"></ng-content>
</nb-sidebar>
@ -31,21 +23,4 @@ import { takeWhile } from 'rxjs/operators';
</nb-layout>
`,
})
export class OneColumnLayoutComponent implements OnDestroy {
private alive = true;
currentTheme: string;
constructor(protected themeService: NbThemeService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.alive = false;
}
}
export class OneColumnLayoutComponent {}

181
src/app/@theme/layouts/sample/sample.layout.scss
View file

@ -1,181 +0,0 @@
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
nb-layout-column.small {
flex: 0.15 !important;
}
nb-sidebar.settings-sidebar {
$sidebar-width: 19rem;
transition: transform 0.3s ease;
width: $sidebar-width;
overflow: hidden;
@include nb-ltr(transform, translateX(100%));
@include nb-rtl(transform, translateX(-100%));
&.start {
@include nb-ltr(transform, translateX(-100%));
@include nb-rtl(transform, translateX(100%));
}
&.expanded, &.expanded.start {
transform: translateX(0);
}
/deep/ .scrollable {
width: $sidebar-width;
padding: 3.4rem 0.25rem;
}
/deep/ .main-container {
width: $sidebar-width;
background: nb-theme(color-bg);
transition: width 0.3s ease;
overflow: hidden;
.scrollable {
width: $sidebar-width;
}
@include nb-for-theme(cosmic) {
background: nb-theme(layout-bg);
}
}
}
nb-sidebar.menu-sidebar {
margin-top: nb-theme(sidebar-header-gap);
@include nb-for-theme(corporate) {
margin-top: 0;
}
/deep/ .main-container {
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
@include nb-ltr(border-top-right-radius, nb-theme(radius));
@include nb-rtl(border-top-left-radius, nb-theme(radius));
@include nb-for-theme(corporate) {
border: 1px solid nb-theme(separator);
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
}
}
/deep/ .scrollable {
@include nb-for-theme(corporate) {
padding-top: 0;
.menu-item:first-child {
border-top: none;
}
}
}
/deep/ nb-sidebar-header {
padding-bottom: 0.5rem;
text-align: center;
}
background: transparent;
.main-btn {
padding: 0.75rem 2.5rem;
margin-top: -2rem;
font-weight: bold;
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
@include nb-for-theme(corporate) {
border-radius: nb-theme(radius);
}
i {
font-size: 2rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
span {
@include nb-ltr(padding-left, 0.25rem);
@include nb-rtl(padding-right, 0.25rem);
}
i, span {
vertical-align: middle;
}
}
/deep/ nb-menu {
& > .menu-items {
& > .menu-item:first-child {
.menu-title {
&::after {
content: 'new';
color: nb-theme(color-white);
margin-left: 1rem;
background: nb-theme(color-danger);
padding: 0 0.5rem;
border-radius: nb-theme(radius);
font-size: nb-theme(font-size-sm);
}
}
}
}
.nb-e-commerce {
font-size: 2rem;
}
}
&.compacted {
/deep/ nb-sidebar-header {
padding-left: 0;
padding-right: 0;
}
.main-btn {
width: 46px;
height: 44px;
padding: 0.375rem;
border-radius: 5px;
transition: none;
span {
display: none;
}
}
}
}
@include media-breakpoint-down(xs) {
.main-content {
padding: 0.75rem !important;
}
}
@include media-breakpoint-down(sm) {
nb-sidebar.menu-sidebar {
margin-top: 0;
/deep/ .main-container {
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
@include nb-ltr(border-top-right-radius, 0);
@include nb-rtl(border-top-left-radius, 0);
.scrollable {
padding-top: 0;
}
}
}
.main-btn {
display: none;
}
}
}

152
src/app/@theme/layouts/sample/sample.layout.ts
View file

@ -1,152 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
import {
NbMediaBreakpoint,
NbMediaBreakpointsService,
NbMenuItem,
NbMenuService,
NbSidebarService,
NbThemeService,
} from '@nebular/theme';
import { StateService } from '../../../@core/utils';
// TODO: move layouts into the framework
@Component({
selector: 'ngx-sample-layout',
styleUrls: ['./sample.layout.scss'],
template: `
<nb-layout [center]="layout.id === 'center-column'" windowMode>
<nb-layout-header fixed>
<ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
</nb-layout-header>
<nb-sidebar class="menu-sidebar"
tag="menu-sidebar"
responsive
[end]="sidebar.id === 'end'">
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
<a href="#" class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span>
</a>
</nb-sidebar-header>
<ng-content select="nb-menu"></ng-content>
</nb-sidebar>
<nb-layout-column class="main-content">
<ng-content select="router-outlet"></ng-content>
</nb-layout-column>
<nb-layout-column start class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
<nb-menu [items]="subMenu"></nb-menu>
</nb-layout-column>
<nb-layout-column class="small" *ngIf="layout.id === 'three-column'">
<nb-menu [items]="subMenu"></nb-menu>
</nb-layout-column>
<nb-layout-footer fixed>
<ngx-footer></ngx-footer>
</nb-layout-footer>
<nb-sidebar class="settings-sidebar"
tag="settings-sidebar"
state="collapsed"
fixed
[end]="sidebar.id !== 'end'">
<ngx-theme-settings></ngx-theme-settings>
</nb-sidebar>
</nb-layout>
<ngx-toggle-settings-button></ngx-toggle-settings-button>
`,
})
export class SampleLayoutComponent implements OnDestroy {
subMenu: NbMenuItem[] = [
{
title: 'PAGE LEVEL MENU',
group: true,
},
{
title: 'Buttons',
icon: 'ion ion-android-radio-button-off',
link: '/pages/ui-features/buttons',
},
{
title: 'Grid',
icon: 'ion ion-android-radio-button-off',
link: '/pages/ui-features/grid',
},
{
title: 'Icons',
icon: 'ion ion-android-radio-button-off',
link: '/pages/ui-features/icons',
},
{
title: 'Modals',
icon: 'ion ion-android-radio-button-off',
link: '/pages/ui-features/modals',
},
{
title: 'Typography',
icon: 'ion ion-android-radio-button-off',
link: '/pages/ui-features/typography',
},
{
title: 'Animated Searches',
icon: 'ion ion-android-radio-button-off',
link: '/pages/ui-features/search-fields',
},
{
title: 'Tabs',
icon: 'ion ion-android-radio-button-off',
link: '/pages/ui-features/tabs',
},
];
layout: any = {};
sidebar: any = {};
private alive = true;
currentTheme: string;
constructor(protected stateService: StateService,
protected menuService: NbMenuService,
protected themeService: NbThemeService,
protected bpService: NbMediaBreakpointsService,
protected sidebarService: NbSidebarService) {
this.stateService.onLayoutState()
.pipe(takeWhile(() => this.alive))
.subscribe((layout: string) => this.layout = layout);
this.stateService.onSidebarState()
.pipe(takeWhile(() => this.alive))
.subscribe((sidebar: string) => {
this.sidebar = sidebar;
});
const isBp = this.bpService.getByName('is');
this.menuService.onItemSelect()
.pipe(
takeWhile(() => this.alive),
withLatestFrom(this.themeService.onMediaQueryChange()),
delay(20),
)
.subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
if (bpTo.width <= isBp.width) {
this.sidebarService.collapse('menu-sidebar');
}
});
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.alive = false;
}
}

152
src/app/@theme/layouts/three-columns/three-columns.layout.scss
View file

@ -3,155 +3,7 @@
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
nb-layout-column.small {
flex: 0.15 !important;
}
nb-sidebar.settings-sidebar {
$sidebar-width: 7.5rem;
transition: width 0.3s ease;
width: $sidebar-width;
overflow: hidden;
&.collapsed {
width: 0;
/deep/ .main-container {
width: 0;
.scrollable {
width: $sidebar-width;
padding: 1.25rem;
}
}
}
/deep/ .main-container {
width: $sidebar-width;
background: nb-theme(color-bg);
transition: width 0.3s ease;
overflow: hidden;
.scrollable {
width: $sidebar-width;
}
@include nb-for-theme(cosmic) {
background: nb-theme(layout-bg);
}
}
}
nb-sidebar.menu-sidebar {
margin-top: nb-theme(sidebar-header-gap);
@include nb-for-theme(corporate) {
margin-top: 0;
}
/deep/ .main-container {
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
@include nb-ltr(border-top-right-radius, nb-theme(radius));
@include nb-rtl(border-top-left-radius, nb-theme(radius));
@include nb-for-theme(corporate) {
border: 1px solid nb-theme(separator);
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
}
}
/deep/ .scrollable {
@include nb-for-theme(corporate) {
padding-top: 0;
.menu-item:first-child {
border-top: none;
}
}
}
/deep/ nb-sidebar-header {
padding-bottom: 0.5rem;
text-align: center;
}
background: transparent;
.main-btn {
padding: 0.75rem 2.5rem;
margin-top: -2rem;
font-weight: bold;
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
@include nb-for-theme(corporate) {
border-radius: nb-theme(radius);
}
i {
font-size: 2rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
span {
@include nb-ltr(padding-left, 0.25rem);
@include nb-rtl(padding-right, 0.25rem);
}
i, span {
vertical-align: middle;
}
}
&.compacted {
/deep/ nb-sidebar-header {
padding-left: 0;
padding-right: 0;
}
.main-btn {
width: 46px;
height: 44px;
padding: 0.375rem;
border-radius: 5px;
transition: none;
span {
display: none;
}
}
}
}
@include media-breakpoint-down(xs) {
.main-content {
padding: 0.75rem !important;
}
}
@include media-breakpoint-down(sm) {
nb-sidebar.menu-sidebar {
margin-top: 0;
/deep/ .main-container {
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
@include nb-ltr(border-top-right-radius, 0);
@include nb-rtl(border-top-left-radius, 0);
.scrollable {
padding-top: 0;
}
}
}
.main-btn {
display: none;
}
.menu-sidebar ::ng-deep .scrollable {
padding-top: nb-theme(layout-padding-top);
}
}

33
src/app/@theme/layouts/three-columns/three-columns.layout.ts
View file

@ -1,23 +1,15 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { Component } from '@angular/core';
// TODO: move layouts into the framework
@Component({
selector: 'ngx-three-columns-layout',
styleUrls: ['./three-columns.layout.scss'],
template: `
<nb-layout>
<nb-layout windowMode>
<nb-layout-header fixed>
<ngx-header></ngx-header>
</nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
<a href="#" class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span>
</a>
</nb-sidebar-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
<ng-content select="nb-menu"></ng-content>
</nb-sidebar>
@ -37,21 +29,4 @@ import { takeWhile } from 'rxjs/operators';
</nb-layout>
`,
})
export class ThreeColumnsLayoutComponent implements OnDestroy {
private alive = true;
currentTheme: string;
constructor(protected themeService: NbThemeService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.alive = false;
}
}
export class ThreeColumnsLayoutComponent {}

153
src/app/@theme/layouts/two-columns/two-columns.layout.scss
View file

@ -3,156 +3,7 @@
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
nb-layout-column.small {
flex: 0.15 !important;
}
nb-sidebar.settings-sidebar {
$sidebar-width: 7.5rem;
transition: width 0.3s ease;
width: $sidebar-width;
overflow: hidden;
&.collapsed {
width: 0;
/deep/ .main-container {
width: 0;
.scrollable {
width: $sidebar-width;
padding: 1.25rem;
}
}
}
/deep/ .main-container {
width: $sidebar-width;
background: nb-theme(color-bg);
transition: width 0.3s ease;
overflow: hidden;
.scrollable {
width: $sidebar-width;
}
@include nb-for-theme(cosmic) {
background: nb-theme(layout-bg);
}
}
}
nb-sidebar.menu-sidebar {
margin-top: nb-theme(sidebar-header-gap);
@include nb-for-theme(corporate) {
margin-top: 0;
}
/deep/ .main-container {
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
@include nb-ltr(border-top-right-radius, nb-theme(radius));
@include nb-rtl(border-top-left-radius, nb-theme(radius));
@include nb-for-theme(corporate) {
border: 1px solid nb-theme(separator);
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
}
}
/deep/ .scrollable {
@include nb-for-theme(corporate) {
padding-top: 0;
.menu-item:first-child {
border-top: none;
}
}
}
/deep/ nb-sidebar-header {
padding-bottom: 0.5rem;
text-align: center;
}
background: transparent;
.main-btn {
padding: 0.75rem 2.5rem;
margin-top: -2rem;
font-weight: bold;
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
@include nb-for-theme(corporate) {
border-radius: nb-theme(radius);
}
i {
font-size: 2rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
span {
@include nb-ltr(padding-left, 0.25rem);
@include nb-rtl(padding-right, 0.25rem);
}
i, span {
vertical-align: middle;
}
}
&.compacted {
/deep/ nb-sidebar-header {
padding-left: 0;
padding-right: 0;
}
.main-btn {
width: 46px;
height: 44px;
padding: 0.375rem;
border-radius: 5px;
transition: none;
span {
display: none;
}
}
}
}
@include media-breakpoint-down(xs) {
.main-content {
padding: 0.75rem !important;
}
}
@include media-breakpoint-down(sm) {
nb-sidebar.menu-sidebar {
margin-top: 0;
/deep/ .main-container {
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
@include nb-ltr(border-top-right-radius, 0);
@include nb-rtl(border-top-left-radius, 0);
.scrollable {
padding-top: 0;
}
}
}
.main-btn {
display: none;
}
.menu-sidebar ::ng-deep .scrollable {
padding-top: nb-theme(layout-padding-top);
}
}

33
src/app/@theme/layouts/two-columns/two-columns.layout.ts
View file

@ -1,23 +1,15 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { Component } from '@angular/core';
// TODO: move layouts into the framework
@Component({
selector: 'ngx-two-columns-layout',
styleUrls: ['./two-columns.layout.scss'],
template: `
<nb-layout>
<nb-layout windowMode>
<nb-layout-header fixed>
<ngx-header></ngx-header>
</nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
<a href="#" class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span>
</a>
</nb-sidebar-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
<ng-content select="nb-menu"></ng-content>
</nb-sidebar>
@ -35,21 +27,4 @@ import { takeWhile } from 'rxjs/operators';
</nb-layout>
`,
})
export class TwoColumnsLayoutComponent implements OnDestroy {
private alive = true;
currentTheme: string;
constructor(protected themeService: NbThemeService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.alive = false;
}
}
export class TwoColumnsLayoutComponent {}

50
src/app/@theme/pipes/eva-icons.pipe.ts
View file

@ -1,50 +0,0 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { DomSanitizer } from '@angular/platform-browser';
import { Pipe, PipeTransform } from '@angular/core';
import { icons } from 'eva-icons';
@Pipe({ name: 'eva' })
export class EvaIconsPipe implements PipeTransform {
private defaultOptions = {
height: 24,
width: 24,
fill: 'inherit',
animationHover: true,
animationInfinity: false,
};
constructor(private sanitizer: DomSanitizer) {}
transform(icon: string,
options: {
height: number;
width: number;
fill: string;
animationType?: string;
animationHover?: boolean;
animationInfinity?: boolean;
},
) {
const mergedOptions = {
...this.defaultOptions,
...options,
};
const { width, height, fill, animationType, animationHover, animationInfinity } = mergedOptions;
const animation = animationType ?
{ type: animationType, hover: animationHover, infinite: animationInfinity } :
null;
return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
width,
height,
fill,
animation,
}));
}
}

1
src/app/@theme/pipes/index.ts
View file

@ -3,4 +3,3 @@ export * from './plural.pipe';
export * from './round.pipe';
export * from './timing.pipe';
export * from './number-with-commas.pipe';
export * from './eva-icons.pipe';

8
src/app/@theme/styles/_layout.scss Normal file
View file

@ -0,0 +1,8 @@
@mixin ngx-layout() {
@include media-breakpoint-down(is) {
.row {
margin-left: -10px;
margin-right: -10px;
}
}
}

11
src/app/@theme/styles/_overrides.scss Normal file
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;
}
}
}

193
src/app/@theme/styles/bootstrap-rtl.scss vendored
View file

@ -1,193 +0,0 @@
@import './themes';
@mixin bootstrap-rtl() {
.btn-group:not(.btn-divided-group) > .btn:not(.dropdown-toggle) {
&:first-child {
@include nb-ltr() {
border-top-left-radius: nb-theme(btn-border-radius);
border-bottom-left-radius: nb-theme(btn-border-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
};
@include nb-rtl() {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: nb-theme(btn-border-radius);
border-bottom-right-radius: nb-theme(btn-border-radius);
};
}
&:last-child {
@include nb-ltr() {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: nb-theme(btn-border-radius);
border-bottom-right-radius: nb-theme(btn-border-radius);
};
@include nb-rtl() {
border-top-left-radius: nb-theme(btn-border-radius);
border-bottom-left-radius: nb-theme(btn-border-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
};
}
}
.btn-group.dropdown {
& > .btn:first-of-type.dropdown-toggle {
@include nb-ltr() {
border-top-left-radius: nb-theme(btn-border-radius);
border-top-right-radius: 0;
};
@include nb-rtl() {
border-top-left-radius: 0;
border-top-right-radius: nb-theme(btn-border-radius);
};
}
& > .btn:last-of-type.dropdown-toggle {
@include nb-ltr() {
border-top-left-radius: 0;
border-top-right-radius: nb-theme(btn-border-radius);
};
@include nb-rtl() {
border-top-left-radius: nb-theme(btn-border-radius);
border-top-right-radius: 0;
};
}
&:not(.show) {
& > .btn:first-of-type.dropdown-toggle {
@include nb-ltr() {
border-bottom-left-radius: nb-theme(btn-border-radius);
border-bottom-right-radius: 0;
};
@include nb-rtl() {
border-bottom-left-radius: 0;
border-bottom-right-radius: nb-theme(btn-border-radius);
};
}
& > .btn:last-of-type.dropdown-toggle {
@include nb-ltr() {
border-bottom-left-radius: 0;
border-bottom-right-radius: nb-theme(btn-border-radius);
};
@include nb-rtl() {
border-bottom-left-radius: nb-theme(btn-border-radius);
border-bottom-right-radius: 0;
};
}
}
}
.btn-group.dropup {
& > .btn:first-of-type.dropdown-toggle {
@include nb-ltr() {
border-bottom-left-radius: nb-theme(btn-border-radius);
border-bottom-right-radius: 0;
};
@include nb-rtl() {
border-bottom-left-radius: 0;
border-bottom-right-radius: nb-theme(btn-border-radius);
};
}
& > .btn:last-of-type.dropdown-toggle {
@include nb-ltr() {
border-bottom-left-radius: 0;
border-bottom-right-radius: nb-theme(btn-border-radius);
};
@include nb-rtl() {
border-bottom-left-radius: nb-theme(btn-border-radius);
border-bottom-right-radius: 0;
};
}
&:not(.show) {
& > .btn:first-of-type.dropdown-toggle {
@include nb-ltr() {
border-top-left-radius: nb-theme(btn-border-radius);
border-top-right-radius: 0;
};
@include nb-rtl() {
border-top-left-radius: 0;
border-top-right-radius: nb-theme(btn-border-radius);
};
}
& > .btn:last-of-type.dropdown-toggle {
@include nb-ltr() {
border-top-left-radius: 0;
border-top-right-radius: nb-theme(btn-border-radius);
};
@include nb-rtl() {
border-top-left-radius: nb-theme(btn-border-radius);
border-top-right-radius: 0;
};
}
}
}
.btn-divided-group {
.btn:not(:first-child) {
@include nb-ltr(margin-left, 0.5rem);
@include nb-rtl(margin-right, 0.5rem);
border-radius: nb-theme(btn-border-radius);
}
}
.input-group-addon,
.input-group-icon {
@include nb-ltr() {
border-left: nb-theme(form-control-border);
border-right: none;
};
@include nb-rtl() {
border-left: none;
border-right: nb-theme(form-control-border);
};
}
.input-group {
.form-control:first-child:not(:only-child),
.input-group-addon:first-child,
.input-group-prepend .btn:first-child,
.input-group-btn .btn:first-child {
@include nb-ltr() {
border-top-left-radius: nb-theme(form-control-border-radius);
border-bottom-left-radius: nb-theme(form-control-border-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
};
@include nb-rtl() {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: nb-theme(form-control-border-radius);
border-bottom-right-radius: nb-theme(form-control-border-radius);
};
}
.form-control:last-child:not(:only-child),
.input-group-addon:last-child,
.input-group-append .btn:last-child,
.input-group-btn .btn:last-child {
@include nb-ltr() {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: nb-theme(form-control-border-radius);
border-bottom-right-radius: nb-theme(form-control-border-radius);
};
@include nb-rtl() {
border-top-left-radius: nb-theme(form-control-border-radius);
border-bottom-left-radius: nb-theme(form-control-border-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
};
}
.dropdown.show .btn.dropdown-toggle {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropup.show .btn.dropdown-toggle {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}

3
src/app/@theme/styles/font-size.scss
View file

@ -1,3 +0,0 @@
html {
font-size: 14px;
}

6
src/app/@theme/styles/pace.theme.scss
View file

@ -7,16 +7,14 @@
@mixin ngx-pace-theme() {
.pace .pace-progress {
background: nb-theme(color-fg-highlight);
background: nb-theme(color-primary-default);
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight);
box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default);
}
.pace .pace-activity {
display: none;
// border-top-color: nb-theme(color-fg-highlight);
// border-left-color: nb-theme(color-fg-highlight);
}
}

21
src/app/@theme/styles/styles.scss
View file

@ -1,19 +1,22 @@
@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/all';
@import '~@nebular/bootstrap/styles/globals';
// ...
// global app font size
@import './font-size';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/grid';
// loading progress bar theme
@import './pace.theme';
@import './bootstrap-rtl';
@import './layout';
@import './overrides';
// install the framework and custom global styles
@include nb-install() {
@ -21,14 +24,10 @@
// framework global styles
@include nb-theme-global();
@include nb-auth-global();
@include nb-bootstrap-global();
@include ngx-layout();
// loading progress bar
@include ngx-pace-theme();
// fixed in rc.9 and can be removed after upgrade
.custom-control .custom-control-indicator {
border-radius: 50%; // TODO: quickfix for https://github.com/akveo/nebular/issues/275
}
@include bootstrap-rtl();
@include nb-overrides();
};

298
src/app/@theme/styles/theme.corporate.ts
View file

@ -1,179 +1,184 @@
import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme';
const baseThemeVariables = baseTheme.variables;
export const CORPORATE_THEME = {
name: 'corporate',
base: 'default',
base: 'corporate',
variables: {
temperature: [
'#ffa36b',
'#ffa36b',
'#ff9e7a',
'#ff9888',
'#ff8ea0',
],
temperature: {
arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
arcEmpty: baseThemeVariables.bg2,
thumbBg: baseThemeVariables.bg2,
thumbBorder: '#ffa36b',
},
solar: {
gradientLeft: '#ff8ea0',
gradientRight: '#ffa36b',
gradientLeft: baseThemeVariables.primary,
gradientRight: baseThemeVariables.primary,
shadowColor: 'rgba(0, 0, 0, 0)',
secondSeriesFill: baseThemeVariables.bg2,
radius: ['80%', '90%'],
},
traffic: {
colorBlack: '#ffffff',
tooltipBg: '#eef2f5',
tooltipBorderColor: '#eef2f5',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: '400',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
lineBg: '#cae6f3',
yAxisSplitLine: 'rgba(0, 0, 0, 0)',
lineBg: baseThemeVariables.primary,
lineShadowBlur: '0',
itemColor: '#bcc3cc',
itemBorderColor: '#bcc3cc',
itemEmphasisBorderColor: '#74a2ff',
itemColor: baseThemeVariables.border4,
itemBorderColor: baseThemeVariables.border4,
itemEmphasisBorderColor: baseThemeVariables.primaryLight,
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
shadowLineShadow: 'rgba(0, 0, 0, 0)',
gradFrom: '#ffffff',
gradTo: '#ffffff',
gradFrom: baseThemeVariables.bg,
gradTo: baseThemeVariables.bg,
},
electricity: {
tooltipBg: '#edf0f4',
tooltipLineColor: '#bdc4cd',
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: baseThemeVariables.fgText,
tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
axisLineColor: 'rgba(0, 0, 0, 0)',
xAxisTextColor: '#2a2a2a',
yAxisSplitLine: '#ebeef2',
axisLineColor: baseThemeVariables.border3,
xAxisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: '#73a1ff',
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
lineGradFrom: '#bdc4cd',
lineGradTo: '#c0c8d1',
lineGradFrom: baseThemeVariables.primary,
lineGradTo: baseThemeVariables.primary,
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: 'rgba(255, 255, 255, 0)',
areaGradTo: 'rgba(255, 255, 255, 0)',
shadowLineDarkBg: 'rgba(255, 255, 255, 0)',
areaGradFrom: 'rgba(0, 0, 0, 0)',
areaGradTo: 'rgba(0, 0, 0, 0)',
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
bubbleMap: {
titleColor: '#484848',
areaColor: '#dddddd',
areaHoverColor: '#cccccc',
areaBorderColor: '#ebeef2',
titleColor: baseThemeVariables.fgText,
areaColor: baseThemeVariables.bg4,
areaHoverColor: baseThemeVariables.fgHighlight,
areaBorderColor: baseThemeVariables.border5,
},
profitBarAnimationEchart: {
textColor: '#b2bac2',
textColor: baseThemeVariables.fgText,
firstAnimationBarColor: '#719efc',
secondAnimationBarColor: '#5dcfe3',
firstAnimationBarColor: baseThemeVariables.primary,
secondAnimationBarColor: baseThemeVariables.success,
splitLineStyleOpacity: '0.06',
splitLineStyleOpacity: '1',
splitLineStyleWidth: '1',
splitLineStyleColor: '#000000',
splitLineStyleColor: baseThemeVariables.separator,
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: '400',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: '#eef2f5',
tooltipBorderColor: '#eef2f5',
tooltipBorderWidth: '3',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
trafficBarEchart: {
gradientFrom: '#ff8ea0',
gradientTo: '#ffa36b',
shadow: 'rgba(0, 0, 0, 0)',
gradientFrom: baseThemeVariables.warningLight,
gradientTo: baseThemeVariables.warning,
shadow: baseThemeVariables.warningLight,
shadowBlur: '0',
axisTextColor: '#b2bac2',
axisTextColor: baseThemeVariables.fgText,
axisFontSize: '12',
tooltipBg: '#edf0f4',
tooltipBorderColor: '#ebeef2',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
},
countryOrders: {
countryBorderColor: 'rgba(255, 255, 255, 1)',
countryFillColor: 'rgba(236, 242, 245, 1)',
countryBorderColor: baseThemeVariables.border4,
countryFillColor: baseThemeVariables.bg4,
countryBorderWidth: '1',
hoveredCountryBorderColor: 'rgba(113, 158, 252, 1)',
hoveredCountryFillColor: 'rgba(199, 216, 247, 1)',
hoveredCountryBorderWidth: '3',
hoveredCountryBorderColor: baseThemeVariables.primary,
hoveredCountryFillColor: baseThemeVariables.primaryLight,
hoveredCountryBorderWidth: '1',
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
chartAxisTextColor: '#b2bac2',
chartAxisLineColor: baseThemeVariables.border4,
chartAxisTextColor: baseThemeVariables.fg,
chartAxisFontSize: '16',
chartGradientTo: 'rgba(113, 158, 252, 1)',
chartGradientFrom: 'rgba(113, 158, 252, 1)',
chartAxisSplitLine: '#ebeef2',
chartShadowLineColor: '#2f296b',
chartGradientTo: baseThemeVariables.primary,
chartGradientFrom: baseThemeVariables.primaryLight,
chartAxisSplitLine: baseThemeVariables.separator,
chartShadowLineColor: baseThemeVariables.primaryLight,
chartLineBottomShadowColor: 'rgba(113, 158, 252, 1)',
chartLineBottomShadowColor: baseThemeVariables.primary,
chartInnerLineColor: '#eceff4',
chartInnerLineColor: baseThemeVariables.bg2,
},
echarts: {
bg: '#ffffff',
textColor: '#484848',
axisLineColor: '#bbbbbb',
splitLineColor: '#ebeef2',
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.fgText,
splitLineColor: baseThemeVariables.separator,
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
tooltipBackgroundColor: '#6a7985',
tooltipBackgroundColor: baseThemeVariables.primary,
areaOpacity: '0.7',
},
chartjs: {
axisLineColor: '#cccccc',
textColor: '#484848',
axisLineColor: baseThemeVariables.separator,
textColor: baseThemeVariables.fgText,
},
orders: {
tooltipBg: '#ffffff',
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: '#b2bac2',
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: '#73a1ff',
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
// first line
firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)',
firstAreaGradTo: 'rgba(227, 236, 254, 0.7)',
firstAreaGradFrom: baseThemeVariables.bg3,
firstAreaGradTo: baseThemeVariables.bg3,
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// second line
secondLineGradFrom: 'rgba(93, 207, 227, 1)',
secondLineGradTo: 'rgba(93, 207, 227, 1)',
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: 'rgba(113, 158, 252, 1)',
thirdLineGradTo: 'rgba(113, 158, 252, 1)',
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
@ -181,92 +186,91 @@ export const CORPORATE_THEME = {
},
profit: {
bg: '#ffffff',
textColor: '#ffffff',
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.border4,
splitLineColor: baseThemeVariables.separator,
areaOpacity: '1',
axisFontSize: '16',
axisTextColor: '#b2bac2',
axisTextColor: baseThemeVariables.fg,
// first bar
firstLineGradFrom: '#719efc',
firstLineGradTo: '#719efc',
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
firstLineGradFrom: baseThemeVariables.bg3,
firstLineGradTo: baseThemeVariables.bg3,
firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar
secondLineGradFrom: '#5dcfe3',
secondLineGradTo: '#5dcfe3',
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar
thirdLineGradFrom: '#e3ecfe',
thirdLineGradTo: '#e3ecfe',
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.success,
thirdLineShadow: 'rgba(0, 0, 0, 0)',
},
orderProfitLegend: {
firstItem: '#719efc',
secondItem: '#5dcfe3',
thirdItem: '#e3ecfe',
firstItem: baseThemeVariables.success,
secondItem: baseThemeVariables.primary,
thirdItem: baseThemeVariables.bg3,
},
visitors: {
tooltipBg: '#ffffff',
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2',
tooltipLineWidth: '1',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: '#b2bac2',
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: '#73a1ff',
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: '#73a1ff',
lineGradTo: '#73a1ff',
lineGradFrom: '#ffffff',
lineGradTo: '#ffffff',
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: 'rgba(146, 181, 252, 1)',
areaGradTo: 'rgba(146, 181, 252, 1)',
shadowLineDarkBg: '#a695ff',
areaGradFrom: baseThemeVariables.primary,
areaGradTo: baseThemeVariables.primaryLight,
innerLineStyle: 'solid',
innerLineWidth: '1',
innerAreaGradFrom: 'rgba(227, 236, 254, 1)',
innerAreaGradTo: 'rgba(227, 236, 254, 1)',
innerAreaGradFrom: baseThemeVariables.success,
innerAreaGradTo: baseThemeVariables.success,
},
visitorsLegend: {
firstIcon: '#e3ecfe',
secondIcon: '#719efc',
firstIcon: baseThemeVariables.success,
secondIcon: baseThemeVariables.primary,
},
visitorsPie: {
firstPieGradientLeft: '#94e2ed',
firstPieGradientRight: '#94e2ed',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['65%', '90%'],
secondPieGradientLeft: '#719efc',
secondPieGradientRight: '#719efc',
secondPieShadowColor: '#b2cafb',
secondPieGradientLeft: baseThemeVariables.warning,
secondPieGradientRight: baseThemeVariables.warningLight,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['63%', '92%'],
shadowOffsetX: '-4',
shadowOffsetY: '-4',
},
visitorsPieLegend: {
firstSection: '#719efc',
secondSection: '#99e5ee',
firstSection: baseThemeVariables.warning,
secondSection: baseThemeVariables.success,
},
earningPie: {
@ -275,30 +279,30 @@ export const CORPORATE_THEME = {
fontSize: '22',
firstPieGradientLeft: '#719efc',
firstPieGradientRight: '#719efc',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieGradientLeft: '#ff9f6f',
secondPieGradientRight: '#ff9f6f',
secondPieGradientLeft: baseThemeVariables.primary,
secondPieGradientRight: baseThemeVariables.primary,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
thirdPieGradientLeft: '#ff5e83',
thirdPieGradientRight: '#ff5e83',
thirdPieGradientLeft: baseThemeVariables.warning,
thirdPieGradientRight: baseThemeVariables.warning,
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
},
earningLine: {
gradFrom: '#e3ecfe',
gradTo: '#e3ecfe',
gradFrom: baseThemeVariables.primary,
gradTo: baseThemeVariables.primary,
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: '400',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: '#eef2f5',
tooltipBorderColor: '#eef2f5',
tooltipBorderWidth: '3',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
},
};
} as NbJSThemeOptions;

328
src/app/@theme/styles/theme.cosmic.ts
View file

@ -1,272 +1,276 @@
import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme';
const baseThemeVariables = baseTheme.variables;
export const COSMIC_THEME = {
name: 'cosmic',
base: 'default',
base: 'cosmic',
variables: {
temperature: [
'#2ec7fe',
'#31ffad',
'#7bff24',
'#fff024',
'#f7bd59',
],
temperature: {
arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
arcEmpty: baseThemeVariables.bg2,
thumbBg: '#ffffff',
thumbBorder: '#ffffff',
},
solar: {
gradientLeft: '#7bff24',
gradientRight: '#2ec7fe',
shadowColor: '#19977E',
gradientLeft: baseThemeVariables.primary,
gradientRight: baseThemeVariables.primary,
shadowColor: 'rgba(0, 0, 0, 0)',
secondSeriesFill: baseThemeVariables.bg2,
radius: ['70%', '90%'],
},
traffic: {
colorBlack: '#000000',
tooltipBg: 'rgba(0, 255, 170, 0.35)',
tooltipBorderColor: '#00d977',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: '#ffffff',
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',
lineBg: '#d1d1ff',
yAxisSplitLine: baseThemeVariables.separator,
lineBg: baseThemeVariables.border2,
lineShadowBlur: '14',
itemColor: '#BEBBFF',
itemBorderColor: '#ffffff',
itemEmphasisBorderColor: '#ffffff',
shadowLineDarkBg: '#655ABD',
shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
gradFrom: 'rgba(118, 89, 255, 0.4)',
gradTo: 'rgba(164, 84, 255, 0.5)',
itemColor: baseThemeVariables.border2,
itemBorderColor: baseThemeVariables.border2,
itemEmphasisBorderColor: baseThemeVariables.primary,
shadowLineDarkBg: baseThemeVariables.border3,
shadowLineShadow: baseThemeVariables.border3,
gradFrom: baseThemeVariables.bg,
gradTo: baseThemeVariables.bg2,
},
electricity: {
tooltipBg: 'rgba(0, 255, 170, 0.35)',
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
tooltipLineWidth: '1',
tooltipBorderColor: '#00d977',
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: '#ffffff',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
xAxisTextColor: '#a1a1e5',
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
axisLineColor: baseThemeVariables.border3,
xAxisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: '#ffffff',
itemBorderColor: baseThemeVariables.border2,
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: '#00ffaa',
lineGradTo: '#fff835',
lineShadow: 'rgba(14, 16, 48, 0.4)',
lineGradFrom: baseThemeVariables.success,
lineGradTo: baseThemeVariables.warning,
lineShadow: baseThemeVariables.bg4,
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
areaGradTo: 'rgba(188, 92, 255, 0)',
shadowLineDarkBg: '#a695ff',
areaGradFrom: baseThemeVariables.bg2,
areaGradTo: baseThemeVariables.bg3,
shadowLineDarkBg: baseThemeVariables.bg3,
},
bubbleMap: {
titleColor: '#ffffff',
areaColor: '#2c2961',
areaHoverColor: '#a1a1e5',
areaBorderColor: '#654ddb',
titleColor: baseThemeVariables.fgText,
areaColor: baseThemeVariables.bg4,
areaHoverColor: baseThemeVariables.fgHighlight,
areaBorderColor: baseThemeVariables.border5,
},
profitBarAnimationEchart: {
textColor: '#ffffff',
textColor: baseThemeVariables.fgText,
firstAnimationBarColor: '#0088ff',
secondAnimationBarColor: '#7659ff',
firstAnimationBarColor: baseThemeVariables.primary,
secondAnimationBarColor: baseThemeVariables.success,
splitLineStyleOpacity: '0.06',
splitLineStyleOpacity: '1',
splitLineStyleWidth: '1',
splitLineStyleColor: '#000000',
splitLineStyleColor: baseThemeVariables.border2,
tooltipTextColor: '#ffffff',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: 'rgba(0, 255, 170, 0.35)',
tooltipBorderColor: '#00d977',
tooltipBorderWidth: '3',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
trafficBarEchart: {
gradientFrom: '#fc0',
gradientTo: '#ffa100',
shadow: '#ffb600',
gradientFrom: baseThemeVariables.warningLight,
gradientTo: baseThemeVariables.warning,
shadow: baseThemeVariables.warningLight,
shadowBlur: '5',
axisTextColor: '#a1a1e5',
axisTextColor: baseThemeVariables.fgText,
axisFontSize: '12',
tooltipBg: 'rgba(0, 255, 170, 0.35)',
tooltipBorderColor: '#00d977',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: '#ffffff',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
},
countryOrders: {
countryBorderColor: '#525dbd',
countryFillColor: '#4f41a6',
countryBorderWidth: '2',
hoveredCountryBorderColor: '#00f9a6',
hoveredCountryFillColor: '#377aa7',
hoveredCountryBorderWidth: '3',
countryBorderColor: baseThemeVariables.border4,
countryFillColor: baseThemeVariables.bg3,
countryBorderWidth: '1',
hoveredCountryBorderColor: baseThemeVariables.primary,
hoveredCountryFillColor: baseThemeVariables.primaryLight,
hoveredCountryBorderWidth: '1',
chartAxisLineColor: 'rgba(161, 161 ,229, 0.3)',
chartAxisTextColor: '#a1a1e5',
chartAxisLineColor: baseThemeVariables.border4,
chartAxisTextColor: baseThemeVariables.fg,
chartAxisFontSize: '16',
chartGradientTo: '#00c7c7',
chartGradientFrom: '#00d977',
chartAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
chartShadowBarColor: '#2f296b',
chartGradientTo: baseThemeVariables.primary,
chartGradientFrom: baseThemeVariables.primaryLight,
chartAxisSplitLine: baseThemeVariables.separator,
chartShadowLineColor: baseThemeVariables.primaryLight,
chartLineBottomShadowColor: '#00977e',
chartLineBottomShadowColor: baseThemeVariables.primary,
chartInnerLineColor: '#2f296b',
chartInnerLineColor: baseThemeVariables.bg2,
},
echarts: {
bg: '#3d3780',
textColor: '#ffffff',
axisLineColor: '#a1a1e5',
splitLineColor: '#342e73',
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.fgText,
splitLineColor: baseThemeVariables.separator,
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
tooltipBackgroundColor: '#6a7985',
tooltipBackgroundColor: baseThemeVariables.primary,
areaOpacity: '1',
},
chartjs: {
axisLineColor: '#a1a1e5',
textColor: '#ffffff',
axisLineColor: baseThemeVariables.separator,
textColor: baseThemeVariables.fgText,
},
orders: {
tooltipBg: 'rgba(0, 255, 170, 0.35)',
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
tooltipLineWidth: '1',
tooltipBorderColor: '#00d977',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#ffffff',
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: 'rgba(161, 161 ,229, 0.3)',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: '#a1a1e5',
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: '#ffffff',
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
// first line
firstAreaGradFrom: 'rgba(78, 64, 164, 1)',
firstAreaGradTo: 'rgba(78, 64, 164, 1)',
firstShadowLineDarkBg: '#018dff',
firstAreaGradFrom: baseThemeVariables.bg2,
firstAreaGradTo: baseThemeVariables.bg2,
firstShadowLineDarkBg: baseThemeVariables.bg2,
// second line
secondLineGradFrom: '#00bece',
secondLineGradTo: '#00da78',
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)',
secondAreaGradTo: 'rgba(38, 139, 145, 0.5)',
secondShadowLineDarkBg: '#2c5a85',
secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
secondShadowLineDarkBg: baseThemeVariables.primary,
// third line
thirdLineGradFrom: '#8069ff',
thirdLineGradTo: '#8357ff',
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)',
thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)',
thirdShadowLineDarkBg: '#a695ff',
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
thirdShadowLineDarkBg: baseThemeVariables.success,
},
profit: {
bg: '#3d3780',
textColor: '#ffffff',
axisLineColor: '#a1a1e5',
splitLineColor: '#342e73',
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.border4,
splitLineColor: baseThemeVariables.separator,
areaOpacity: '1',
axisFontSize: '16',
axisTextColor: '#a1a1e5',
axisTextColor: baseThemeVariables.fg,
// first bar
firstLineGradFrom: '#00bece',
firstLineGradTo: '#00da78',
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
firstLineGradFrom: baseThemeVariables.bg2,
firstLineGradTo: baseThemeVariables.bg2,
firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar
secondLineGradFrom: '#8069ff',
secondLineGradTo: '#8357ff',
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar
thirdLineGradFrom: '#4e40a4',
thirdLineGradTo: '#4e40a4',
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdLineShadow: 'rgba(0, 0, 0, 0)',
},
orderProfitLegend: {
firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
thirdItem: '#4e40a4',
firstItem: baseThemeVariables.success,
secondItem: baseThemeVariables.primary,
thirdItem: baseThemeVariables.bg2,
},
visitors: {
tooltipBg: 'rgba(0, 255, 170, 0.35)',
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '1',
tooltipBorderColor: '#00d977',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#ffffff',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: '#a1a1e5',
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: '#ffffff',
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: '#ffffff',
lineGradTo: '#ffffff',
lineShadow: 'rgba(14, 16, 48, 0.4)',
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: 'rgba(188, 92, 255, 1)',
areaGradTo: 'rgba(188, 92, 255, 0.5)',
shadowLineDarkBg: '#a695ff',
areaGradFrom: baseThemeVariables.primary,
areaGradTo: baseThemeVariables.primaryLight,
innerLineStyle: 'solid',
innerLineWidth: '1',
innerAreaGradFrom: 'rgba(59, 165, 243, 1)',
innerAreaGradTo: 'rgba(4, 133, 243 , 1)',
innerAreaGradFrom: baseThemeVariables.success,
innerAreaGradTo: baseThemeVariables.success,
},
visitorsLegend: {
firstIcon: 'linear-gradient(90deg, #0088ff 0%, #3dafff 100%)',
secondIcon: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
firstIcon: baseThemeVariables.success,
secondIcon: baseThemeVariables.primary,
},
visitorsPie: {
firstPieGradientLeft: '#7bff24',
firstPieGradientRight: '#2ec7fe',
firstPieShadowColor: '#19977E',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.successLight,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['70%', '90%'],
secondPieGradientLeft: '#ff894a',
secondPieGradientRight: '#ffcc10',
secondPieShadowColor: '#cf7c1c',
secondPieGradientLeft: baseThemeVariables.warning,
secondPieGradientRight: baseThemeVariables.warningLight,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['60%', '95%'],
shadowOffsetX: '0',
shadowOffsetY: '3',
},
visitorsPieLegend: {
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
secondSection: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
firstSection: baseThemeVariables.warning,
secondSection: baseThemeVariables.success,
},
earningPie: {
@ -275,30 +279,30 @@ export const COSMIC_THEME = {
fontSize: '22',
firstPieGradientLeft: '#00d77f',
firstPieGradientRight: '#00d77f',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieGradientLeft: '#7756f7',
secondPieGradientRight: '#7756f7',
secondPieGradientLeft: baseThemeVariables.primary,
secondPieGradientRight: baseThemeVariables.primary,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
thirdPieGradientLeft: '#ffca00',
thirdPieGradientRight: '#ffca00',
thirdPieGradientLeft: baseThemeVariables.warning,
thirdPieGradientRight: baseThemeVariables.warning,
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
},
earningLine: {
gradFrom: 'rgba(118, 89, 255, 0.4)',
gradTo: 'rgba(164, 84, 255, 0.5)',
gradFrom: baseThemeVariables.primary,
gradTo: baseThemeVariables.primary,
tooltipTextColor: '#ffffff',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: 'rgba(0, 255, 170, 0.35)',
tooltipBorderColor: '#00d977',
tooltipBorderWidth: '3',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
},
};
} as NbJSThemeOptions;

314
src/app/@theme/styles/theme.dark.ts Normal file
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;

309
src/app/@theme/styles/theme.default.ts
View file

@ -1,266 +1,273 @@
import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
const baseThemeVariables = baseTheme.variables;
export const DEFAULT_THEME = {
name: 'default',
base: null,
base: 'default',
variables: {
// Safari fix
temperature: [
'#42db7d',
'#42db7d',
'#42db7d',
'#42db7d',
'#42db7d',
],
temperature: {
arcFill: [
baseThemeVariables.primary,
baseThemeVariables.primary,
baseThemeVariables.primary,
baseThemeVariables.primary,
baseThemeVariables.primary,
],
arcEmpty: baseThemeVariables.bg2,
thumbBg: baseThemeVariables.bg2,
thumbBorder: baseThemeVariables.primary,
},
solar: {
gradientLeft: '#42db7d',
gradientRight: '#42db7d',
gradientLeft: baseThemeVariables.primary,
gradientRight: baseThemeVariables.primary,
shadowColor: 'rgba(0, 0, 0, 0)',
secondSeriesFill: baseThemeVariables.bg2,
radius: ['80%', '90%'],
},
traffic: {
colorBlack: '#000000',
tooltipBg: '#ffffff',
tooltipBorderColor: '#c0c8d1',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
lineBg: '#c0c8d1',
yAxisSplitLine: baseThemeVariables.separator,
lineBg: baseThemeVariables.border4,
lineShadowBlur: '1',
itemColor: '#bcc3cc',
itemBorderColor: '#bcc3cc',
itemEmphasisBorderColor: '#42db7d',
itemColor: baseThemeVariables.border4,
itemBorderColor: baseThemeVariables.border4,
itemEmphasisBorderColor: baseThemeVariables.primary,
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
shadowLineShadow: 'rgba(0, 0, 0, 0)',
gradFrom: '#ebeef2',
gradTo: '#ebeef2',
gradFrom: baseThemeVariables.bg2,
gradTo: baseThemeVariables.bg2,
},
electricity: {
tooltipBg: '#ffffff',
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: baseThemeVariables.fgText,
tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
axisLineColor: 'rgba(0, 0, 0, 0)',
xAxisTextColor: '#2a2a2a',
yAxisSplitLine: '#ebeef2',
axisLineColor: baseThemeVariables.border3,
xAxisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: '#42db7d',
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
lineGradFrom: '#42db7d',
lineGradTo: '#42db7d',
lineGradFrom: baseThemeVariables.primary,
lineGradTo: baseThemeVariables.primary,
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: 'rgba(235, 238, 242, 0.5)',
areaGradTo: 'rgba(235, 238, 242, 0.5)',
areaGradFrom: baseThemeVariables.bg2,
areaGradTo: baseThemeVariables.bg2,
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
bubbleMap: {
titleColor: '#484848',
areaColor: '#dddddd',
areaHoverColor: '#cccccc',
areaBorderColor: '#ebeef2',
titleColor: baseThemeVariables.fgText,
areaColor: baseThemeVariables.bg4,
areaHoverColor: baseThemeVariables.fgHighlight,
areaBorderColor: baseThemeVariables.border5,
},
profitBarAnimationEchart: {
textColor: '#484848',
textColor: baseThemeVariables.fgText,
firstAnimationBarColor: '#3edd81',
secondAnimationBarColor: '#8d7fff',
firstAnimationBarColor: baseThemeVariables.primary,
secondAnimationBarColor: baseThemeVariables.success,
splitLineStyleOpacity: '0.06',
splitLineStyleOpacity: '1',
splitLineStyleWidth: '1',
splitLineStyleColor: '#000000',
splitLineStyleColor: baseThemeVariables.separator,
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: '#ffffff',
tooltipBorderColor: '#c0c8d1',
tooltipBorderWidth: '3',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
trafficBarEchart: {
gradientFrom: '#fc0',
gradientTo: '#ffa100',
shadow: '#ffb600',
gradientFrom: baseThemeVariables.warningLight,
gradientTo: baseThemeVariables.warning,
shadow: baseThemeVariables.warningLight,
shadowBlur: '0',
axisTextColor: '#b2bac2',
axisTextColor: baseThemeVariables.fgText,
axisFontSize: '12',
tooltipBg: '#ffffff',
tooltipBorderColor: '#c0c8d1',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
},
countryOrders: {
countryBorderColor: 'rgba(255, 255, 255, 1)',
countryFillColor: 'rgba(236, 242, 245, 1)',
countryBorderColor: baseThemeVariables.border4,
countryFillColor: baseThemeVariables.bg3,
countryBorderWidth: '1',
hoveredCountryBorderColor: '#40dc7e',
hoveredCountryFillColor: '#c7f4d9',
hoveredCountryBorderWidth: '3',
hoveredCountryBorderColor: baseThemeVariables.primary,
hoveredCountryFillColor: baseThemeVariables.primaryLight,
hoveredCountryBorderWidth: '1',
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
chartAxisTextColor: '#b2bac2',
chartAxisLineColor: baseThemeVariables.border4,
chartAxisTextColor: baseThemeVariables.fg,
chartAxisFontSize: '16',
chartGradientTo: '#3edd81',
chartGradientFrom: '#3bddaf',
chartAxisSplitLine: '#ebeef2',
chartShadowLineColor: '#2f296b',
chartGradientTo: baseThemeVariables.primary,
chartGradientFrom: baseThemeVariables.primaryLight,
chartAxisSplitLine: baseThemeVariables.separator,
chartShadowLineColor: baseThemeVariables.primaryLight,
chartLineBottomShadowColor: '#eceff4',
chartLineBottomShadowColor: baseThemeVariables.primary,
chartInnerLineColor: '#eceff4',
chartInnerLineColor: baseThemeVariables.bg2,
},
echarts: {
bg: '#ffffff',
textColor: '#484848',
axisLineColor: '#bbbbbb',
splitLineColor: '#ebeef2',
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.fgText,
splitLineColor: baseThemeVariables.separator,
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
tooltipBackgroundColor: '#6a7985',
tooltipBackgroundColor: baseThemeVariables.primary,
areaOpacity: '0.7',
},
chartjs: {
axisLineColor: '#cccccc',
textColor: '#484848',
axisLineColor: baseThemeVariables.separator,
textColor: baseThemeVariables.fgText,
},
orders: {
tooltipBg: '#ffffff',
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: '#b2bac2',
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: '#42db7d',
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'solid',
lineWidth: '4',
// first line
firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)',
firstAreaGradTo: 'rgba(236, 242, 245, 0.8)',
firstAreaGradFrom: baseThemeVariables.bg3,
firstAreaGradTo: baseThemeVariables.bg3,
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// second line
secondLineGradFrom: 'rgba(164, 123, 255, 1)',
secondLineGradTo: 'rgba(164, 123, 255, 1)',
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)',
secondAreaGradTo: 'rgba(188, 92, 255, 0)',
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
// third line
thirdLineGradFrom: 'rgba(55, 220, 136, 1)',
thirdLineGradTo: 'rgba(55, 220, 136, 1)',
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)',
thirdAreaGradTo: 'rgba(4, 126, 230, 0)',
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
// TODO: need design for default theme
profit: {
bg: '#ffffff',
textColor: '#ffffff',
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
bg: baseThemeVariables.bg,
textColor: baseThemeVariables.fgText,
axisLineColor: baseThemeVariables.border4,
splitLineColor: baseThemeVariables.separator,
areaOpacity: '1',
axisFontSize: '16',
axisTextColor: '#b2bac2',
axisTextColor: baseThemeVariables.fg,
// first bar
firstLineGradFrom: '#00bece',
firstLineGradTo: '#00da78',
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
firstLineGradFrom: baseThemeVariables.bg3,
firstLineGradTo: baseThemeVariables.bg3,
firstLineShadow: 'rgba(0, 0, 0, 0)',
// second bar
secondLineGradFrom: '#8069ff',
secondLineGradTo: '#8357ff',
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
secondLineGradFrom: baseThemeVariables.primary,
secondLineGradTo: baseThemeVariables.primary,
secondLineShadow: 'rgba(0, 0, 0, 0)',
// third bar
thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)',
thirdLineGradTo: 'rgba(236, 242, 245, 0.8)',
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
thirdLineGradFrom: baseThemeVariables.success,
thirdLineGradTo: baseThemeVariables.successLight,
thirdLineShadow: 'rgba(0, 0, 0, 0)',
},
orderProfitLegend: {
firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
thirdItem: 'rgba(236, 242, 245, 0.8)',
firstItem: baseThemeVariables.success,
secondItem: baseThemeVariables.primary,
thirdItem: baseThemeVariables.bg3,
},
visitors: {
tooltipBg: '#ffffff',
tooltipBg: baseThemeVariables.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2',
tooltipLineWidth: '1',
tooltipBorderColor: baseThemeVariables.border2,
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '20',
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
axisLineColor: baseThemeVariables.border4,
axisFontSize: '16',
axisTextColor: '#b2bac2',
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
axisTextColor: baseThemeVariables.fg,
yAxisSplitLine: baseThemeVariables.separator,
itemBorderColor: '#42db7d',
itemBorderColor: baseThemeVariables.primary,
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: '#ffffff',
lineGradTo: '#ffffff',
lineShadow: 'rgba(14, 16, 48, 0)',
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: 'rgba(188, 92, 255, 1)',
areaGradTo: 'rgba(188, 92, 255, 0.5)',
shadowLineDarkBg: '#a695ff',
areaGradFrom: baseThemeVariables.primary,
areaGradTo: baseThemeVariables.primaryLight,
innerLineStyle: 'solid',
innerLineWidth: '1',
innerAreaGradFrom: 'rgba(60, 221, 156, 1)',
innerAreaGradTo: 'rgba(60, 221, 156, 1)',
innerAreaGradFrom: baseThemeVariables.success,
innerAreaGradTo: baseThemeVariables.success,
},
visitorsLegend: {
firstIcon: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
secondIcon: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
firstIcon: baseThemeVariables.success,
secondIcon: baseThemeVariables.primary,
},
visitorsPie: {
firstPieGradientLeft: '#8defbb',
firstPieGradientRight: '#8defbb',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['70%', '90%'],
secondPieGradientLeft: '#ff894a',
secondPieGradientRight: '#ffcc10',
secondPieGradientLeft: baseThemeVariables.warning,
secondPieGradientRight: baseThemeVariables.warningLight,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['60%', '97%'],
shadowOffsetX: '0',
@ -268,8 +275,8 @@ export const DEFAULT_THEME = {
},
visitorsPieLegend: {
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
secondSection: '#8defbb',
firstSection: baseThemeVariables.warning,
secondSection: baseThemeVariables.success,
},
earningPie: {
@ -278,30 +285,30 @@ export const DEFAULT_THEME = {
fontSize: '22',
firstPieGradientLeft: '#00d77f',
firstPieGradientRight: '#00d77f',
firstPieGradientLeft: baseThemeVariables.success,
firstPieGradientRight: baseThemeVariables.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieGradientLeft: '#7756f7',
secondPieGradientRight: '#7756f7',
secondPieGradientLeft: baseThemeVariables.primary,
secondPieGradientRight: baseThemeVariables.primary,
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
thirdPieGradientLeft: '#ffca00',
thirdPieGradientRight: '#ffca00',
thirdPieGradientLeft: baseThemeVariables.warning,
thirdPieGradientRight: baseThemeVariables.warning,
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
},
earningLine: {
gradFrom: 'rgba(188, 92, 255, 0.5)',
gradTo: 'rgba(188, 92, 255, 0.5)',
gradFrom: baseThemeVariables.primary,
gradTo: baseThemeVariables.primary,
tooltipTextColor: '#2a2a2a',
tooltipFontWeight: 'bolder',
tooltipTextColor: baseThemeVariables.fgText,
tooltipFontWeight: 'normal',
tooltipFontSize: '16',
tooltipBg: '#ffffff',
tooltipBorderColor: '#c0c8d1',
tooltipBorderWidth: '3',
tooltipBg: baseThemeVariables.bg,
tooltipBorderColor: baseThemeVariables.border2,
tooltipBorderWidth: '1',
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
},
},
};
} as NbJSThemeOptions;

135
src/app/@theme/styles/themes.scss
View file

@ -3,95 +3,86 @@
// @nebular out of the box themes
@import '~@nebular/theme/styles/themes';
// which themes you what to enable (empty to enable all)
$nb-enabled-themes: (default, cosmic, corporate);
$nb-themes: nb-register-theme((
// app wise variables for each theme
sidebar-header-gap: 2rem,
sidebar-header-height: initial,
layout-content-width: 1400px,
layout-padding-top: 2.25rem,
font-main: Roboto,
font-secondary: Exo,
menu-item-icon-margin: 0 0.5rem 0 0,
switcher-background: #ebeff5,
switcher-background-percentage: 50%,
drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
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,
list-item-border-width: 1px,
select-min-width: 6rem,
slide-out-container-width: 30%,
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
chart-panel-summary-box-shadow: none,
chart-panel-summary-background-color: #ecf2f5,
chart-panel-summary-border-color: #ebeff1,
chart-panel-summary-border-width: 1px,
ecommerce-card-border-width: 1px,
progress-bar-background: linear-gradient(90deg, #3edd81 0%, #3bddaf 100%),
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((
// app wise variables for each theme
sidebar-header-gap: 2rem,
sidebar-header-height: initial,
layout-content-width: 1400px,
layout-padding-top: 2.25rem,
font-main: Roboto,
font-secondary: Exo,
menu-item-icon-margin: 0 0.5rem 0 0,
switcher-background: #4e41a5,
switcher-background-percentage: 14%,
drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
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,
list-item-border-width: 1px,
select-min-width: 6rem,
slide-out-container-width: 30%,
slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
chart-panel-summary-box-shadow: none,
chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
chart-panel-summary-border-color: #332e73,
chart-panel-summary-border-width: 1px,
ecommerce-card-border-width: 1px,
progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
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((
// app wise variables for each theme
sidebar-header-gap: 2rem,
sidebar-header-height: initial,
layout-content-width: 1400px,
layout-padding-top: 2.25rem,
font-main: Roboto,
font-secondary: Exo,
menu-item-icon-margin: 0 0.5rem 0 0,
switcher-background: #2b2d34,
switcher-background-percentage: 14%,
drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
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,
list-item-border-width: 1px,
select-min-width: 6rem,
slide-out-container-width: 30%,
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
chart-panel-summary-box-shadow: none,
chart-panel-summary-background-color: #f7fafb,
chart-panel-summary-border-color: #ebeff1,
chart-panel-summary-border-width: 1px,
ecommerce-card-border-width: 1px,
progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
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);

114
src/app/@theme/theme.module.ts
View file

@ -1,56 +1,26 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {
NbActionsModule,
NbCardModule,
NbLayoutModule,
NbMenuModule,
NbRouteTabsetModule,
NbSearchModule,
NbSidebarModule,
NbTabsetModule,
NbThemeModule,
NbUserModule,
NbCheckboxModule,
NbPopoverModule,
NbContextMenuModule,
NbProgressBarModule,
NbCalendarModule,
NbCalendarRangeModule,
NbStepperModule,
NbButtonModule,
NbInputModule,
NbAccordionModule,
NbDatepickerModule,
NbDialogModule,
NbWindowModule,
NbListModule,
NbToastrModule,
NbAlertModule,
NbSpinnerModule,
NbRadioModule,
NbSelectModule,
NbChatModule,
NbTooltipModule,
NbCalendarKitModule,
NbIconModule,
NbThemeModule,
} from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { NbSecurityModule } from '@nebular/security';
import {
FooterComponent,
HeaderComponent,
SearchInputComponent,
ThemeSettingsComponent,
SwitcherComponent,
LayoutDirectionSwitcherComponent,
ThemeSwitcherComponent,
TinyMCEComponent,
ThemeSwitcherListComponent,
ToggleSettingsButtonComponent,
} from './components';
import {
CapitalizePipe,
@ -58,115 +28,65 @@ import {
RoundPipe,
TimingPipe,
NumberWithCommasPipe,
EvaIconsPipe,
} from './pipes';
import {
OneColumnLayoutComponent,
SampleLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
} from './layouts';
import { DEFAULT_THEME } from './styles/theme.default';
import { COSMIC_THEME } from './styles/theme.cosmic';
import { CORPORATE_THEME } from './styles/theme.corporate';
const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
import { DARK_THEME } from './styles/theme.dark';
const NB_MODULES = [
NbCardModule,
NbLayoutModule,
NbTabsetModule,
NbRouteTabsetModule,
NbMenuModule,
NbUserModule,
NbActionsModule,
NbSearchModule,
NbSidebarModule,
NbCheckboxModule,
NbPopoverModule,
NbContextMenuModule,
NgbModule,
NbSecurityModule, // *nbIsGranted directive,
NbProgressBarModule,
NbCalendarModule,
NbCalendarRangeModule,
NbStepperModule,
NbSecurityModule,
NbButtonModule,
NbListModule,
NbToastrModule,
NbInputModule,
NbAccordionModule,
NbDatepickerModule,
NbDialogModule,
NbWindowModule,
NbAlertModule,
NbSpinnerModule,
NbRadioModule,
NbSelectModule,
NbChatModule,
NbTooltipModule,
NbCalendarKitModule,
NbIconModule,
NbEvaIconsModule,
];
const COMPONENTS = [
SwitcherComponent,
LayoutDirectionSwitcherComponent,
ThemeSwitcherComponent,
ThemeSwitcherListComponent,
HeaderComponent,
FooterComponent,
SearchInputComponent,
ThemeSettingsComponent,
TinyMCEComponent,
OneColumnLayoutComponent,
SampleLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
ToggleSettingsButtonComponent,
];
const ENTRY_COMPONENTS = [
ThemeSwitcherListComponent,
];
const PIPES = [
CapitalizePipe,
PluralPipe,
RoundPipe,
TimingPipe,
NumberWithCommasPipe,
EvaIconsPipe,
];
const NB_THEME_PROVIDERS = [
...NbThemeModule.forRoot(
{
name: 'cosmic',
},
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
).providers,
...NbSidebarModule.forRoot().providers,
...NbMenuModule.forRoot().providers,
...NbDatepickerModule.forRoot().providers,
...NbDialogModule.forRoot().providers,
...NbWindowModule.forRoot().providers,
...NbToastrModule.forRoot().providers,
...NbChatModule.forRoot({
messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
}).providers,
];
@NgModule({
imports: [...BASE_MODULES, ...NB_MODULES],
exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
imports: [CommonModule, ...NB_MODULES],
exports: [CommonModule, ...PIPES, ...COMPONENTS],
declarations: [...COMPONENTS, ...PIPES],
entryComponents: [...ENTRY_COMPONENTS],
})
export class ThemeModule {
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
ngModule: ThemeModule,
providers: [...NB_THEME_PROVIDERS],
providers: [
...NbThemeModule.forRoot(
{
name: 'default',
},
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
).providers,
],
};
}
}

8
src/app/app-routing.module.ts
View file

@ -10,7 +10,11 @@ import {
} from '@nebular/auth';
const routes: Routes = [
{ path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
{
path: 'pages',
loadChildren: () => import('app/pages/pages.module')
.then(m => m.PagesModule),
},
{
path: 'auth',
component: NbAuthComponent,
@ -46,7 +50,7 @@ const routes: Routes = [
];
const config: ExtraOptions = {
useHash: true,
useHash: false,
};
@NgModule({

28
src/app/app.module.ts
View file

@ -3,17 +3,23 @@
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CoreModule } from './@core/core.module';
import { ThemeModule } from './@theme/theme.module';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ThemeModule } from './@theme/theme.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {
NbChatModule,
NbDatepickerModule,
NbDialogModule,
NbMenuModule,
NbSidebarModule,
NbToastrModule,
NbWindowModule,
} from '@nebular/theme';
@NgModule({
declarations: [AppComponent],
@ -23,14 +29,20 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
HttpClientModule,
AppRoutingModule,
NgbModule.forRoot(),
ThemeModule.forRoot(),
NbSidebarModule.forRoot(),
NbMenuModule.forRoot(),
NbDatepickerModule.forRoot(),
NbDialogModule.forRoot(),
NbWindowModule.forRoot(),
NbToastrModule.forRoot(),
NbChatModule.forRoot({
messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
}),
CoreModule.forRoot(),
],
bootstrap: [AppComponent],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
],
})
export class AppModule {
}

33
src/app/pages/bootstrap/bootstrap-routing.module.ts
View file

@ -1,33 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BootstrapComponent } from './bootstrap.component';
import { ModalsComponent } from './modals/modals.component';
import { ButtonsComponent } from './buttons/buttons.component';
import { FormInputsComponent } from './form-inputs/form-inputs.component';
const routes: Routes = [{
path: '',
component: BootstrapComponent,
children: [
{
path: 'inputs',
component: FormInputsComponent,
},
{
path: 'buttons',
component: ButtonsComponent,
},
{
path: 'modal',
component: ModalsComponent,
},
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class BootstrapRoutingModule { }

36
src/app/pages/bootstrap/bootstrap.module.ts
View file

@ -1,36 +0,0 @@
import { NgModule } from '@angular/core';
import { ThemeModule } from '../../@theme/theme.module';
import { BootstrapRoutingModule } from './bootstrap-routing.module';
import { ModalsComponent } from './modals/modals.component';
import { ModalComponent } from './modals/modal/modal.component';
import { BootstrapComponent } from './bootstrap.component';
import { ButtonsModule } from './buttons/buttons.module';
import { FormInputsComponent } from './form-inputs/form-inputs.component';
const COMPONENTS = [
BootstrapComponent,
ModalsComponent,
ModalComponent,
FormInputsComponent,
];
const ENTRY_COMPONENTS = [
ModalComponent,
];
@NgModule({
imports: [
ThemeModule,
BootstrapRoutingModule,
ButtonsModule,
],
declarations: [
...COMPONENTS,
],
entryComponents: [
...ENTRY_COMPONENTS,
],
})
export class BootstrapModule { }

16
src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html
View file

@ -1,16 +0,0 @@
<nb-card>
<nb-card-header>Block Level Buttons</nb-card-header>
<nb-card-body>
<div class="row block-level-buttons">
<div class="col-md-12">
<div class="btn-group btn-group-full-width" role="group">
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
<i class="nb-home"></i>
</button>
<button type="button" class="btn btn-primary">Icon Block Button</button>
</div>
<button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
</div>
</div>
</nb-card-body>
</nb-card>

8
src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts
View file

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-block-level-buttons',
templateUrl: './block-level-buttons.component.html',
})
export class BlockLevelButtonsComponent {
}

144
src/app/pages/bootstrap/buttons/button-groups/button-groups.component.html
View file

@ -1,144 +0,0 @@
<nb-card>
<nb-card-header>Button Groups</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-md-12">
<div class="example-container toggle-types">
<div class="container-title">Toggle Types</div>
<div [(ngModel)]="radioModel" ngbRadioGroup
class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="left"> Left
</label>
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="middle"> Middle
</label>
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="right"> Right
</label>
</div>
<div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.left">
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.middle">
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
</label>
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.right">
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label>
</div>
</div>
<div class="example-container toolbars-container">
<div class="pagination-container">
<div class="container-title">Pagination</div>
<div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons"
[(ngModel)]="paginationModel" ngbRadioGroup>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="1"> 1
</label>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="2"> 2
</label>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="3"> 3
</label>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="4"> 4
</label>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="5"> 5
</label>
</div>
</div>
<div class="icon-toolbar-container">
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.one">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
</label>
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.two">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
</label>
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.three">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
</label>
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.four">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
</label>
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.five">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
</label>
</div>
</div>
</div>
<div class="example-container">
<div class="container-title divided-button-group">Divided Button Group</div>
<div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
data-toggle="buttons">
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
class="nb-arrow-thin-down"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
class="nb-arrow-thin-up"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
class="nb-arrow-thin-right"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
class="nb-arrow-right"></i>
</label>
</div>
</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div class="row">
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="left"> Left
</label>
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="middle"> Middle
</label>
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="right"> Right
</label>
</div>
</div>
<div class="btn-group btn-group-toggle btn-divided-group btn-group-full-width" data-toggle="buttons">
<label ngbButtonLabel
class="btn btn-primary"
[class.active]="dividedButtonGroupTwo.left"
[class.focus]="dividedButtonGroupTwo.left">
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
</label>
<label ngbButtonLabel
class="btn btn-primary"
[class.active]="dividedButtonGroupTwo.middle"
[class.focus]="dividedButtonGroupTwo.middle">
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
</label>
<label ngbButtonLabel
class="btn btn-primary"
[class.active]="dividedButtonGroupTwo.right"
[class.focus]="dividedButtonGroupTwo.right">
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
</label>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>

67
src/app/pages/bootstrap/buttons/button-groups/button-groups.component.scss
View file

@ -1,67 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.toolbars-container {
display: flex;
flex-direction: column;
}
.pagination-container {
@include nb-ltr(margin-right, 1rem);
@include nb-rtl(margin-left, 1rem);
.btn-group > .btn {
padding-left: 1.125rem;
padding-right: 1.125rem;
}
}
.icon-toolbar-container {
.btn-group > .btn {
padding-left: 1.125rem;
padding-right: 1.125rem;
}
}
.toggle-types {
.btn-toggle-radio-group {
margin-bottom: 1rem;
}
}
.divided-button-group {
.btn-divided-checkbox-group {
margin-bottom: 1rem;
flex-wrap: wrap;
}
}
.example-container:not(:last-child) {
margin-bottom: 1.5rem;
}
.example-container > div {
&:not(:last-child) {
margin-bottom: 1rem;
}
}
.example-container > .btn-divided-checkbox-group {
flex-wrap: wrap;
> label {
flex-basis: 10%;
@include nb-ltr(margin, 0 0.25rem 0.5rem 0);
@include nb-rtl(margin, 0 0 0.5rem 0.25rem);
}
}
@include media-breakpoint-down(sm) {
.btn {
padding: 0.75rem 0.7rem;
}
}
}

Some files were not shown because too many files have changed in this diff Show more