diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html index 5aa0a235..28c3e36b 100644 --- a/src/app/@theme/components/header/header.component.html +++ b/src/app/@theme/components/header/header.component.html @@ -7,9 +7,7 @@ [matRippleUnbounded]="true" [matRippleCentered]="true" (click)="toggleSidebar()" - > - - + > = new Subject(); - public readonly materialTheme$: Observable; userPictureOnly: boolean = false; user: any; - themes = [ - { - value: 'default', - name: 'Light', - }, - { - value: 'dark', - name: 'Dark', - }, - { - value: 'cosmic', - name: 'Cosmic', - }, - { - value: 'corporate', - name: 'Corporate', - }, - { - value: 'material-light', - name: 'Material Light', - }, - { - value: 'material-dark', - name: 'Material Dark', - }, + public currentTheme = 'material-light'; + public readonly themes = [ + { value: 'material-light', name: 'Material Light' }, + { value: 'material-dark', name: 'Material Dark' }, ]; - currentTheme = 'default'; - userMenu = [ { title: 'Profile' }, { title: 'Log out' } ]; public constructor( @@ -58,13 +34,7 @@ export class HeaderComponent implements OnInit, OnDestroy { private layoutService: LayoutService, private breakpointService: NbMediaBreakpointsService, private rippleService: RippleService, - ) { - this.materialTheme$ = this.themeService.onThemeChange() - .pipe(map(theme => { - const themeName: string = theme?.name || ''; - return themeName.startsWith('material'); - })); - } + ) {} ngOnInit() { this.currentTheme = this.themeService.currentTheme; diff --git a/src/app/@theme/styles/_angular-material.scss b/src/app/@theme/styles/_angular-material.scss new file mode 100644 index 00000000..bbcbcdf7 --- /dev/null +++ b/src/app/@theme/styles/_angular-material.scss @@ -0,0 +1,15 @@ +@import '~@angular/material/theming'; + +@mixin angular-material() { + @include mat-core(); + + @include nb-for-theme(material-dark) { + $custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey)); + @include angular-material-theme($custom-dark-theme); + } + + @include nb-for-theme(material-light) { + $custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink)); + @include angular-material-theme($custom-light-theme); + } +} diff --git a/src/app/@theme/styles/material/_material-dark.scss b/src/app/@theme/styles/_material-dark.scss similarity index 97% rename from src/app/@theme/styles/material/_material-dark.scss rename to src/app/@theme/styles/_material-dark.scss index 6f7bead5..d495f21d 100644 --- a/src/app/@theme/styles/material/_material-dark.scss +++ b/src/app/@theme/styles/_material-dark.scss @@ -363,6 +363,8 @@ $theme: ( font-family-primary: unquote('Roboto, sans-serif'), + layout-padding-top: 2.25rem, + shadow: unquote('0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'), card-shadow: shadow, header-shadow: unquote( @@ -375,8 +377,6 @@ $theme: ( footer-text-color: text-basic-color, footer-text-highlight-color: footer-text-color, sidebar-background-color: background-basic-color-2, - actions-icon-color: text-basic-color, - actions-text-color: text-basic-color, material-regular-font-weight: 400, menu-text-font-weight: material-regular-font-weight, @@ -387,6 +387,7 @@ $theme: ( menu-item-icon-color: rgba(255, 255, 255, 0.7), menu-item-icon-hover-color: rgba(255, 255, 255, 0.7), + menu-item-icon-margin: 0 0.5rem 0 0, menu-submenu-item-hover-background-color: rgba(255, 255, 255, 0.04), menu-submenu-item-active-hover-background-color: rgba(255, 255, 255, 0.1), @@ -395,6 +396,20 @@ $theme: ( card-border-style: none, card-background-color: color-basic-800, card-divider-color: color-basic-700, + 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, #1f1f1f 0%, #292929 100%), + slide-out-shadow-color: 0 4px 14px 0 #292929, + slide-out-shadow-color-rtl: 0 4px 14px 0 #292929, input-border-width: 0 0 1px 0, input-basic-border-color: rgba(255, 255, 255, 0.7), @@ -493,4 +508,4 @@ $theme: ( option-giant-text-font-weight: material-regular-font-weight ); -$nb-themes: nb-register-theme($theme, material-dark, dark); +$nb-themes: nb-register-theme($theme, material-dark, default); diff --git a/src/app/@theme/styles/material/_material-light.scss b/src/app/@theme/styles/_material-light.scss similarity index 97% rename from src/app/@theme/styles/material/_material-light.scss rename to src/app/@theme/styles/_material-light.scss index 169fdb19..36a5b0ae 100644 --- a/src/app/@theme/styles/material/_material-light.scss +++ b/src/app/@theme/styles/_material-light.scss @@ -363,6 +363,8 @@ $theme: ( font-family-primary: unquote('Roboto, sans-serif'), + layout-padding-top: 2.25rem, + shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'), card-shadow: shadow, header-shadow: unquote( @@ -375,8 +377,6 @@ $theme: ( footer-text-color: text-alternate-color, footer-text-highlight-color: footer-text-color, sidebar-background-color: background-basic-color-2, - actions-icon-color: text-alternate-color, - actions-text-color: text-alternate-color, menu-text-font-weight: 400, menu-text-color: rgba(0, 0, 0, 0.87), @@ -386,6 +386,7 @@ $theme: ( menu-item-icon-color: rgba(0, 0, 0, 0.87), menu-item-icon-hover-color: rgba(0, 0, 0, 0.87), + menu-item-icon-margin: 0 0.5rem 0 0, menu-submenu-item-hover-background-color: rgba(0, 0, 0, 0.04), menu-submenu-item-active-hover-background-color: rgba(0, 0, 0, 0.1), @@ -393,6 +394,20 @@ $theme: ( card-border-style: none, card-divider-color: color-basic-200, + 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, #e0e0e0 0%, #ebebeb 100%), + slide-out-shadow-color: 0 4px 14px 0 #ebebeb, + slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb, input-border-width: 0 0 1px 0, input-basic-border-color: rgba(0, 0, 0, 0.42), diff --git a/src/app/@theme/styles/_overrides.scss b/src/app/@theme/styles/_overrides.scss index 8ba44121..79164996 100644 --- a/src/app/@theme/styles/_overrides.scss +++ b/src/app/@theme/styles/_overrides.scss @@ -12,4 +12,33 @@ .table { color: nb-theme(text-basic-color) !important; } + + nb-sidebar { + transition: width 0.3s; + + .main-container { + transition: width 0.3s; + } + } + + nb-card { + border-bottom-left-radius: 0.125rem; + border-bottom-right-radius: 0.125rem; + + nb-card-header, .tabset { + background-color: nb-theme(card-divider-color); + } + } + + [nbinput] { + font-weight: 400; + + &.status-basic:focus:hover { + border-color: nb-theme(color-primary-focus) !important; + } + } + + [nbbutton] { + box-shadow: none !important; + } } diff --git a/src/app/@theme/styles/material/_material.scss b/src/app/@theme/styles/material/_material.scss deleted file mode 100644 index 4d228533..00000000 --- a/src/app/@theme/styles/material/_material.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import '~@angular/material/theming'; - -@include nb-install() { - @include nb-for-theme(material-dark) { - $custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey)); - @include angular-material-theme($custom-dark-theme); - } - - @include nb-for-theme(material-light) { - $custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink)); - @include angular-material-theme($custom-light-theme); - } - - @include nb-for-themes(material-dark, material-light) { - @include mat-core(); - - nb-layout-header { - .logo-container nb-icon { - color: nb-theme(text-control-color); - } - - .select-button { - background-color: nb-theme(background-basic-color-3) !important; - } - } - - - nb-sidebar { - transition: width 0.3s; - - .main-container { - transition: width 0.3s; - } - } - - nb-card { - border-bottom-left-radius: 0.125rem; - border-bottom-right-radius: 0.125rem; - - nb-card-header, .tabset { - background-color: nb-theme(card-divider-color); - } - } - - [nbinput] { - font-weight: 400; - - &.status-basic:focus:hover { - border-color: nb-theme(color-primary-focus) !important; - } - } - - [nbbutton] { - box-shadow: none !important; - } - } -} diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss index 42369947..d9aa10d8 100644 --- a/src/app/@theme/styles/styles.scss +++ b/src/app/@theme/styles/styles.scss @@ -4,6 +4,8 @@ // themes - our custom or/and out of the box themes @import 'themes'; +@import 'angular-material'; + // framework component themes (styles tied to theme variables) @import '~@nebular/theme/styles/globals'; @import '~@nebular/auth/styles/all'; @@ -18,12 +20,12 @@ @import './layout'; @import './overrides'; -@import './material/material'; // install the framework and custom global styles @include nb-install() { // framework global styles + @include angular-material(); @include nb-theme-global(); @include nb-auth-global(); @@ -31,5 +33,6 @@ // loading progress bar @include ngx-pace-theme(); + @include nb-overrides(); }; diff --git a/src/app/@theme/styles/theme.corporate.ts b/src/app/@theme/styles/theme.corporate.ts deleted file mode 100644 index ea360a1e..00000000 --- a/src/app/@theme/styles/theme.corporate.ts +++ /dev/null @@ -1,308 +0,0 @@ -import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme'; - -const baseThemeVariables = baseTheme.variables; - -export const CORPORATE_THEME = { - name: 'corporate', - base: 'corporate', - variables: { - temperature: { - arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ], - arcEmpty: baseThemeVariables.bg2, - thumbBg: baseThemeVariables.bg2, - thumbBorder: '#ffa36b', - }, - - solar: { - gradientLeft: baseThemeVariables.primary, - gradientRight: baseThemeVariables.primary, - shadowColor: 'rgba(0, 0, 0, 0)', - secondSeriesFill: baseThemeVariables.bg2, - radius: ['80%', '90%'], - }, - - traffic: { - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - yAxisSplitLine: 'rgba(0, 0, 0, 0)', - - lineBg: baseThemeVariables.primary, - lineShadowBlur: '0', - itemColor: baseThemeVariables.border4, - itemBorderColor: baseThemeVariables.border4, - itemEmphasisBorderColor: baseThemeVariables.primaryLight, - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - shadowLineShadow: 'rgba(0, 0, 0, 0)', - gradFrom: baseThemeVariables.bg, - gradTo: baseThemeVariables.bg, - }, - - electricity: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: baseThemeVariables.fgText, - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - axisLineColor: baseThemeVariables.border3, - xAxisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - lineGradFrom: baseThemeVariables.primary, - lineGradTo: baseThemeVariables.primary, - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: 'rgba(0, 0, 0, 0)', - areaGradTo: 'rgba(0, 0, 0, 0)', - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - bubbleMap: { - titleColor: baseThemeVariables.fgText, - areaColor: baseThemeVariables.bg4, - areaHoverColor: baseThemeVariables.fgHighlight, - areaBorderColor: baseThemeVariables.border5, - }, - - profitBarAnimationEchart: { - textColor: baseThemeVariables.fgText, - - firstAnimationBarColor: baseThemeVariables.primary, - secondAnimationBarColor: baseThemeVariables.success, - - splitLineStyleOpacity: '1', - splitLineStyleWidth: '1', - splitLineStyleColor: baseThemeVariables.separator, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - - trafficBarEchart: { - gradientFrom: baseThemeVariables.warningLight, - gradientTo: baseThemeVariables.warning, - shadow: baseThemeVariables.warningLight, - shadowBlur: '0', - - axisTextColor: baseThemeVariables.fgText, - axisFontSize: '12', - - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - }, - - countryOrders: { - countryBorderColor: baseThemeVariables.border4, - countryFillColor: baseThemeVariables.bg4, - countryBorderWidth: '1', - hoveredCountryBorderColor: baseThemeVariables.primary, - hoveredCountryFillColor: baseThemeVariables.primaryLight, - hoveredCountryBorderWidth: '1', - - chartAxisLineColor: baseThemeVariables.border4, - chartAxisTextColor: baseThemeVariables.fg, - chartAxisFontSize: '16', - chartGradientTo: baseThemeVariables.primary, - chartGradientFrom: baseThemeVariables.primaryLight, - chartAxisSplitLine: baseThemeVariables.separator, - chartShadowLineColor: baseThemeVariables.primaryLight, - - chartLineBottomShadowColor: baseThemeVariables.primary, - - chartInnerLineColor: baseThemeVariables.bg2, - }, - - echarts: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.fgText, - splitLineColor: baseThemeVariables.separator, - itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', - tooltipBackgroundColor: baseThemeVariables.primary, - areaOpacity: '0.7', - }, - - chartjs: { - axisLineColor: baseThemeVariables.separator, - textColor: baseThemeVariables.fgText, - }, - - orders: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - - // first line - firstAreaGradFrom: baseThemeVariables.bg3, - firstAreaGradTo: baseThemeVariables.bg3, - firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // second line - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - - secondAreaGradFrom: 'rgba(0, 0, 0, 0)', - secondAreaGradTo: 'rgba(0, 0, 0, 0)', - secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // third line - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - - thirdAreaGradFrom: 'rgba(0, 0, 0, 0)', - thirdAreaGradTo: 'rgba(0, 0, 0, 0)', - thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - profit: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.border4, - splitLineColor: baseThemeVariables.separator, - areaOpacity: '1', - - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - - // first bar - firstLineGradFrom: baseThemeVariables.bg3, - firstLineGradTo: baseThemeVariables.bg3, - firstLineShadow: 'rgba(0, 0, 0, 0)', - - // second bar - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - secondLineShadow: 'rgba(0, 0, 0, 0)', - - // third bar - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.success, - thirdLineShadow: 'rgba(0, 0, 0, 0)', - }, - - orderProfitLegend: { - firstItem: baseThemeVariables.success, - secondItem: baseThemeVariables.primary, - thirdItem: baseThemeVariables.bg3, - }, - - visitors: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '1', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'dotted', - lineWidth: '6', - lineGradFrom: '#ffffff', - lineGradTo: '#ffffff', - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.primary, - areaGradTo: baseThemeVariables.primaryLight, - - innerLineStyle: 'solid', - innerLineWidth: '1', - - innerAreaGradFrom: baseThemeVariables.success, - innerAreaGradTo: baseThemeVariables.success, - }, - - visitorsLegend: { - firstIcon: baseThemeVariables.success, - secondIcon: baseThemeVariables.primary, - }, - - visitorsPie: { - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - firstPieRadius: ['65%', '90%'], - - secondPieGradientLeft: baseThemeVariables.warning, - secondPieGradientRight: baseThemeVariables.warningLight, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - secondPieRadius: ['63%', '92%'], - shadowOffsetX: '-4', - shadowOffsetY: '-4', - }, - - visitorsPieLegend: { - firstSection: baseThemeVariables.warning, - secondSection: baseThemeVariables.success, - }, - - earningPie: { - radius: ['65%', '100%'], - center: ['50%', '50%'], - - fontSize: '22', - - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - - secondPieGradientLeft: baseThemeVariables.primary, - secondPieGradientRight: baseThemeVariables.primary, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - - thirdPieGradientLeft: baseThemeVariables.warning, - thirdPieGradientRight: baseThemeVariables.warning, - thirdPieShadowColor: 'rgba(0, 0, 0, 0)', - }, - - earningLine: { - gradFrom: baseThemeVariables.primary, - gradTo: baseThemeVariables.primary, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - }, -} as NbJSThemeOptions; diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts deleted file mode 100644 index 0add1e2d..00000000 --- a/src/app/@theme/styles/theme.cosmic.ts +++ /dev/null @@ -1,308 +0,0 @@ -import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme'; - -const baseThemeVariables = baseTheme.variables; - -export const COSMIC_THEME = { - name: 'cosmic', - base: 'cosmic', - variables: { - temperature: { - arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ], - arcEmpty: baseThemeVariables.bg2, - thumbBg: '#ffffff', - thumbBorder: '#ffffff', - }, - - solar: { - gradientLeft: baseThemeVariables.primary, - gradientRight: baseThemeVariables.primary, - shadowColor: 'rgba(0, 0, 0, 0)', - secondSeriesFill: baseThemeVariables.bg2, - radius: ['70%', '90%'], - }, - - traffic: { - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - yAxisSplitLine: baseThemeVariables.separator, - - lineBg: baseThemeVariables.border2, - lineShadowBlur: '14', - itemColor: baseThemeVariables.border2, - itemBorderColor: baseThemeVariables.border2, - itemEmphasisBorderColor: baseThemeVariables.primary, - shadowLineDarkBg: baseThemeVariables.border3, - shadowLineShadow: baseThemeVariables.border3, - gradFrom: baseThemeVariables.bg, - gradTo: baseThemeVariables.bg2, - }, - - electricity: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: baseThemeVariables.fgText, - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - axisLineColor: baseThemeVariables.border3, - xAxisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.border2, - lineStyle: 'dotted', - lineWidth: '6', - lineGradFrom: baseThemeVariables.success, - lineGradTo: baseThemeVariables.warning, - lineShadow: baseThemeVariables.bg4, - - areaGradFrom: baseThemeVariables.bg2, - areaGradTo: baseThemeVariables.bg3, - shadowLineDarkBg: baseThemeVariables.bg3, - }, - - bubbleMap: { - titleColor: baseThemeVariables.fgText, - areaColor: baseThemeVariables.bg4, - areaHoverColor: baseThemeVariables.fgHighlight, - areaBorderColor: baseThemeVariables.border5, - }, - - profitBarAnimationEchart: { - textColor: baseThemeVariables.fgText, - - firstAnimationBarColor: baseThemeVariables.primary, - secondAnimationBarColor: baseThemeVariables.success, - - splitLineStyleOpacity: '1', - splitLineStyleWidth: '1', - splitLineStyleColor: baseThemeVariables.border2, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - - trafficBarEchart: { - gradientFrom: baseThemeVariables.warningLight, - gradientTo: baseThemeVariables.warning, - shadow: baseThemeVariables.warningLight, - shadowBlur: '5', - - axisTextColor: baseThemeVariables.fgText, - axisFontSize: '12', - - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - }, - - countryOrders: { - countryBorderColor: baseThemeVariables.border4, - countryFillColor: baseThemeVariables.bg3, - countryBorderWidth: '1', - hoveredCountryBorderColor: baseThemeVariables.primary, - hoveredCountryFillColor: baseThemeVariables.primaryLight, - hoveredCountryBorderWidth: '1', - - chartAxisLineColor: baseThemeVariables.border4, - chartAxisTextColor: baseThemeVariables.fg, - chartAxisFontSize: '16', - chartGradientTo: baseThemeVariables.primary, - chartGradientFrom: baseThemeVariables.primaryLight, - chartAxisSplitLine: baseThemeVariables.separator, - chartShadowLineColor: baseThemeVariables.primaryLight, - - chartLineBottomShadowColor: baseThemeVariables.primary, - - chartInnerLineColor: baseThemeVariables.bg2, - }, - - echarts: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.fgText, - splitLineColor: baseThemeVariables.separator, - itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', - tooltipBackgroundColor: baseThemeVariables.primary, - areaOpacity: '1', - }, - - chartjs: { - axisLineColor: baseThemeVariables.separator, - textColor: baseThemeVariables.fgText, - }, - - orders: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - - // first line - firstAreaGradFrom: baseThemeVariables.bg2, - firstAreaGradTo: baseThemeVariables.bg2, - firstShadowLineDarkBg: baseThemeVariables.bg2, - - // second line - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - - secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)', - secondAreaGradTo: 'rgba(161, 110, 255, 0.5)', - secondShadowLineDarkBg: baseThemeVariables.primary, - - // third line - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - - thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)', - thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)', - thirdShadowLineDarkBg: baseThemeVariables.success, - }, - - profit: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.border4, - splitLineColor: baseThemeVariables.separator, - areaOpacity: '1', - - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - - // first bar - firstLineGradFrom: baseThemeVariables.bg2, - firstLineGradTo: baseThemeVariables.bg2, - firstLineShadow: 'rgba(0, 0, 0, 0)', - - // second bar - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - secondLineShadow: 'rgba(0, 0, 0, 0)', - - // third bar - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - thirdLineShadow: 'rgba(0, 0, 0, 0)', - }, - - orderProfitLegend: { - firstItem: baseThemeVariables.success, - secondItem: baseThemeVariables.primary, - thirdItem: baseThemeVariables.bg2, - }, - - visitors: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '1', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'dotted', - lineWidth: '6', - lineGradFrom: '#ffffff', - lineGradTo: '#ffffff', - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.primary, - areaGradTo: baseThemeVariables.primaryLight, - - innerLineStyle: 'solid', - innerLineWidth: '1', - - innerAreaGradFrom: baseThemeVariables.success, - innerAreaGradTo: baseThemeVariables.success, - }, - - visitorsLegend: { - firstIcon: baseThemeVariables.success, - secondIcon: baseThemeVariables.primary, - }, - - visitorsPie: { - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.successLight, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - firstPieRadius: ['70%', '90%'], - - secondPieGradientLeft: baseThemeVariables.warning, - secondPieGradientRight: baseThemeVariables.warningLight, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - secondPieRadius: ['60%', '95%'], - shadowOffsetX: '0', - shadowOffsetY: '3', - }, - - visitorsPieLegend: { - firstSection: baseThemeVariables.warning, - secondSection: baseThemeVariables.success, - }, - - earningPie: { - radius: ['65%', '100%'], - center: ['50%', '50%'], - - fontSize: '22', - - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - - secondPieGradientLeft: baseThemeVariables.primary, - secondPieGradientRight: baseThemeVariables.primary, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - - thirdPieGradientLeft: baseThemeVariables.warning, - thirdPieGradientRight: baseThemeVariables.warning, - thirdPieShadowColor: 'rgba(0, 0, 0, 0)', - }, - - earningLine: { - gradFrom: baseThemeVariables.primary, - gradTo: baseThemeVariables.primary, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - }, -} as NbJSThemeOptions; diff --git a/src/app/@theme/styles/theme.dark.ts b/src/app/@theme/styles/theme.dark.ts deleted file mode 100644 index 8280791e..00000000 --- a/src/app/@theme/styles/theme.dark.ts +++ /dev/null @@ -1,314 +0,0 @@ -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; diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts deleted file mode 100644 index 30e5d9e5..00000000 --- a/src/app/@theme/styles/theme.default.ts +++ /dev/null @@ -1,314 +0,0 @@ -import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme'; - -const baseThemeVariables = baseTheme.variables; - -export const DEFAULT_THEME = { - name: 'default', - base: 'default', - variables: { - temperature: { - arcFill: [ - baseThemeVariables.primary, - baseThemeVariables.primary, - baseThemeVariables.primary, - baseThemeVariables.primary, - baseThemeVariables.primary, - ], - arcEmpty: baseThemeVariables.bg2, - thumbBg: baseThemeVariables.bg2, - thumbBorder: baseThemeVariables.primary, - }, - - solar: { - gradientLeft: baseThemeVariables.primary, - gradientRight: baseThemeVariables.primary, - shadowColor: 'rgba(0, 0, 0, 0)', - secondSeriesFill: baseThemeVariables.bg2, - radius: ['80%', '90%'], - }, - - traffic: { - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - yAxisSplitLine: baseThemeVariables.separator, - - lineBg: baseThemeVariables.border4, - lineShadowBlur: '1', - itemColor: baseThemeVariables.border4, - itemBorderColor: baseThemeVariables.border4, - itemEmphasisBorderColor: baseThemeVariables.primary, - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - shadowLineShadow: 'rgba(0, 0, 0, 0)', - gradFrom: baseThemeVariables.bg2, - gradTo: baseThemeVariables.bg2, - }, - - electricity: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: baseThemeVariables.fgText, - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - axisLineColor: baseThemeVariables.border3, - xAxisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - lineGradFrom: baseThemeVariables.primary, - lineGradTo: baseThemeVariables.primary, - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.bg2, - areaGradTo: baseThemeVariables.bg2, - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - bubbleMap: { - titleColor: baseThemeVariables.fgText, - areaColor: baseThemeVariables.bg4, - areaHoverColor: baseThemeVariables.fgHighlight, - areaBorderColor: baseThemeVariables.border5, - }, - - profitBarAnimationEchart: { - textColor: baseThemeVariables.fgText, - - firstAnimationBarColor: baseThemeVariables.primary, - secondAnimationBarColor: baseThemeVariables.success, - - splitLineStyleOpacity: '1', - splitLineStyleWidth: '1', - splitLineStyleColor: baseThemeVariables.separator, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - - trafficBarEchart: { - gradientFrom: baseThemeVariables.warningLight, - gradientTo: baseThemeVariables.warning, - shadow: baseThemeVariables.warningLight, - shadowBlur: '0', - - axisTextColor: baseThemeVariables.fgText, - axisFontSize: '12', - - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - }, - - countryOrders: { - countryBorderColor: baseThemeVariables.border4, - countryFillColor: baseThemeVariables.bg3, - countryBorderWidth: '1', - hoveredCountryBorderColor: baseThemeVariables.primary, - hoveredCountryFillColor: baseThemeVariables.primaryLight, - hoveredCountryBorderWidth: '1', - - chartAxisLineColor: baseThemeVariables.border4, - chartAxisTextColor: baseThemeVariables.fg, - chartAxisFontSize: '16', - chartGradientTo: baseThemeVariables.primary, - chartGradientFrom: baseThemeVariables.primaryLight, - chartAxisSplitLine: baseThemeVariables.separator, - chartShadowLineColor: baseThemeVariables.primaryLight, - - chartLineBottomShadowColor: baseThemeVariables.primary, - - chartInnerLineColor: baseThemeVariables.bg2, - }, - - echarts: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.fgText, - splitLineColor: baseThemeVariables.separator, - itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', - tooltipBackgroundColor: baseThemeVariables.primary, - areaOpacity: '0.7', - }, - - chartjs: { - axisLineColor: baseThemeVariables.separator, - textColor: baseThemeVariables.fgText, - }, - - orders: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - - // first line - firstAreaGradFrom: baseThemeVariables.bg3, - firstAreaGradTo: baseThemeVariables.bg3, - firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // second line - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - - secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)', - secondAreaGradTo: 'rgba(51, 102, 255, 0)', - secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // third line - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - - thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)', - thirdAreaGradTo: 'rgba(0, 214, 143, 0)', - thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - profit: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.border4, - splitLineColor: baseThemeVariables.separator, - areaOpacity: '1', - - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - - // first bar - firstLineGradFrom: baseThemeVariables.bg3, - firstLineGradTo: baseThemeVariables.bg3, - firstLineShadow: 'rgba(0, 0, 0, 0)', - - // second bar - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - secondLineShadow: 'rgba(0, 0, 0, 0)', - - // third bar - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - thirdLineShadow: 'rgba(0, 0, 0, 0)', - }, - - orderProfitLegend: { - firstItem: baseThemeVariables.success, - secondItem: baseThemeVariables.primary, - thirdItem: baseThemeVariables.bg3, - }, - - visitors: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '1', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'dotted', - lineWidth: '6', - lineGradFrom: '#ffffff', - lineGradTo: '#ffffff', - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.primary, - areaGradTo: baseThemeVariables.primaryLight, - - innerLineStyle: 'solid', - innerLineWidth: '1', - - innerAreaGradFrom: baseThemeVariables.success, - innerAreaGradTo: baseThemeVariables.success, - }, - - visitorsLegend: { - firstIcon: baseThemeVariables.success, - secondIcon: baseThemeVariables.primary, - }, - - visitorsPie: { - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - firstPieRadius: ['70%', '90%'], - - secondPieGradientLeft: baseThemeVariables.warning, - secondPieGradientRight: baseThemeVariables.warningLight, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - secondPieRadius: ['60%', '97%'], - shadowOffsetX: '0', - shadowOffsetY: '0', - }, - - visitorsPieLegend: { - firstSection: baseThemeVariables.warning, - secondSection: baseThemeVariables.success, - }, - - earningPie: { - radius: ['65%', '100%'], - center: ['50%', '50%'], - - fontSize: '22', - - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - - secondPieGradientLeft: baseThemeVariables.primary, - secondPieGradientRight: baseThemeVariables.primary, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - - thirdPieGradientLeft: baseThemeVariables.warning, - thirdPieGradientRight: baseThemeVariables.warning, - thirdPieShadowColor: 'rgba(0, 0, 0, 0)', - }, - - earningLine: { - gradFrom: baseThemeVariables.primary, - gradTo: baseThemeVariables.primary, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - }, -} as NbJSThemeOptions; diff --git a/src/app/@theme/styles/material/theme.material-dark.ts b/src/app/@theme/styles/theme.material-dark.ts similarity index 99% rename from src/app/@theme/styles/material/theme.material-dark.ts rename to src/app/@theme/styles/theme.material-dark.ts index 28fad118..680174e5 100644 --- a/src/app/@theme/styles/material/theme.material-dark.ts +++ b/src/app/@theme/styles/theme.material-dark.ts @@ -10,7 +10,7 @@ const palette = { export const baseTheme: NbJSThemeOptions = { name: 'material-dark', - base: 'dark', + base: 'default', variables: { fontMain: 'Roboto, sans-serif', fontSecondary: 'Roboto, sans-serif', diff --git a/src/app/@theme/styles/material/theme.material-light.ts b/src/app/@theme/styles/theme.material-light.ts similarity index 100% rename from src/app/@theme/styles/material/theme.material-light.ts rename to src/app/@theme/styles/theme.material-light.ts diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss index 0be07815..75e2f81d 100644 --- a/src/app/@theme/styles/themes.scss +++ b/src/app/@theme/styles/themes.scss @@ -2,132 +2,5 @@ @import '~@nebular/theme/styles/theming'; // @nebular out of the box themes @import '~@nebular/theme/styles/themes'; -// material themes -@import './material/material-dark'; -@import './material/material-light'; - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: #f7f9fc, - slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, - slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, -), default, default); - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: #252547, - slide-out-shadow-color: 2px 0 3px #29157a, - slide-out-shadow-color-rtl: -2px 0 3px #29157a, -), cosmic, cosmic); - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%), - slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, - slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, -), corporate, corporate); - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%), - slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, - slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, -), dark, dark); - -$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, #e0e0e0 0%, #ebebeb 100%), - slide-out-shadow-color: 0 4px 14px 0 #ebebeb, - slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb, -), material-light, material-light); - -$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, #1f1f1f 0%, #292929 100%), - slide-out-shadow-color: 0 4px 14px 0 #292929, - slide-out-shadow-color-rtl: 0 4px 14px 0 #292929, -), material-dark, material-dark); +@import './material-dark'; +@import './material-light'; diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index f5731098..89c3a467 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -35,12 +35,8 @@ import { 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'; -import { DARK_THEME } from './styles/theme.dark'; -import { MATERIAL_LIGHT_THEME } from './styles/material/theme.material-light'; -import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark'; +import { MATERIAL_LIGHT_THEME } from './styles/theme.material-light'; +import { MATERIAL_DARK_THEME } from './styles/theme.material-dark'; const NB_MODULES = [ NbLayoutModule, @@ -84,10 +80,8 @@ export class ThemeModule { ngModule: ThemeModule, providers: [ ...NbThemeModule.forRoot( - { - name: 'default', - }, - [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME ], + { name: 'material-light' }, + [MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME], ).providers, ], }; diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 083d3bdd..0809bebc 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -50,34 +50,9 @@ export class DashboardComponent implements OnDestroy { ]; statusCardsByThemes: { - default: CardSettings[]; - cosmic: CardSettings[]; - corporate: CardSettings[]; - dark: CardSettings[]; 'material-dark': CardSettings[]; 'material-light': CardSettings[]; } = { - default: this.commonStatusCardsSet, - cosmic: this.commonStatusCardsSet, - corporate: [ - { - ...this.lightCard, - type: 'warning', - }, - { - ...this.rollerShadesCard, - type: 'primary', - }, - { - ...this.wirelessAudioCard, - type: 'danger', - }, - { - ...this.coffeeMakerCard, - type: 'info', - }, - ], - dark: this.commonStatusCardsSet, 'material-dark': this.commonStatusCardsSet, 'material-light': this.commonStatusCardsSet, }; diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts new file mode 100644 index 00000000..62a35f18 --- /dev/null +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts @@ -0,0 +1,90 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { Location, LocationStrategy } from '@angular/common'; + +@Component({ + selector: 'ngx-room-selector', + templateUrl: './room-selector.component.html', + styleUrls: ['./room-selector.component.scss'], +}) +export class RoomSelectorComponent { + @Output() select: EventEmitter = new EventEmitter(); + + selectedRoom = null; + sortedRooms = []; + viewBox = '-20 -20 618.88 407.99'; + isIE = !!(navigator.userAgent.match(/Trident/) + || navigator.userAgent.match(/MSIE/) + || navigator.userAgent.match(/Edge/)); + isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') >= 0; + roomSvg = { + borders: [{ + d: 'M186.21,130.05H216.37V160H186.21Z', + }], + stokedAreas: [ + { d: 'M562.71,225V354h-290V319H418.37a6.09,6.09,0,0,0,6.09-6.09V225Z' }, + { d: 'M8.09,130V347.91A6.09,6.09,0,0,0,14.18,354h54V130Z' }, + { d: 'M216.37,49.82H358.8V92.5H216.37Z' }, + ], + rooms: [ + { + id: '0', + name: { text: 'Kitchen', x: 142, y: 240.8 }, + area: { d: 'M68.18,130V359.9A6.09,6.09,0,0,0,74.27,366h136a6.09,6.09,0,0,0,6.09-6.09V160H186.21V130Z' }, + border: { d: 'M96,130H68.18V359.9A6.09,6.09,0,0,0,74.27,366h136a6.09,6.09,0,0,0,6.09-6.09V225 M152.71,' + + '130H186.21V160H218.5' }, + }, + { + id: '1', + name: { text: 'Bedroom', x: 109, y: 66 }, + area: { d: 'M152.71,130h63.66V8.09A6.09,6.09,0,0,0,210.27,2H8.09A6.09,6.09,0,0,0,2,8.09V123.95A6.09,' + + '6.09,0,0,0,8.09,130H96Z' }, + border: { d: 'M152.71,130h63.66V8.09A6.09,6.09,0,0,0,210.27,2H8.09A6.09,6.09,0,0,0,2,8.09V123.95A6.09' + + ',6.09,0,0,0,8.09,130H96' }, + }, + { + id: '2', + name: { text: 'Living Room', x: 468, y: 134 }, + area: { d: 'M358.8,160V49.82a6.09,6.09,0,0,1,6.09-6.09H570.78a6.09,6.09,0,0,1,6.09,6.09V218.9a6.09' + + ',6.09,0,0,1-6.09,6.09h-212Z' }, + border: { d: 'M358.8,160V49.82a6.09,6.09,0,0,1,6.09-6.09H570.78a6.09,6.09,0,0,1,6.09,6.09V218.9a6.09' + + ',6.09,0,0,1-6.09,6.09h-212' }, + }, + { + id: '3', + name: { text: 'Hallway', x: 320, y: 273 }, + area: { d: 'M216.37,354V92.5H358.8V225H424.39V319H272.71V354Z' }, + border: { d: 'M216.37,225V356 M216.21,162V92.5H358.8V160 M358.8,225H424.39V312.91a6.09,' + + '6.09,0,0,1,-6.09,6.09H272.71V356' }, + }, + ], + }; + + constructor(private location: Location, private locationStrategy: LocationStrategy) { + this.selectRoom('2'); + } + + private sortRooms() { + this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => { + if (a.id === this.selectedRoom) { + return 1; + } + if (b.id === this.selectedRoom) { + return -1; + } + return 0; + }); + } + + selectRoom(roomNumber) { + this.select.emit(roomNumber); + this.selectedRoom = roomNumber; + this.sortRooms(); + } + + getUrlPath(id: string) { + const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, ''); + const path = this.location.path().replace(/\/$/, ''); + + return `url(${baseHref}${path}${id})`; + } +} diff --git a/src/app/pages/dashboard/rooms/rooms.component.ts b/src/app/pages/dashboard/rooms/rooms.component.ts new file mode 100644 index 00000000..a242f51d --- /dev/null +++ b/src/app/pages/dashboard/rooms/rooms.component.ts @@ -0,0 +1,77 @@ +import { Component, HostBinding, OnDestroy } from '@angular/core'; +import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme'; +import { map } from 'rxjs/operators'; + +@Component({ + selector: 'ngx-rooms', + styleUrls: ['./rooms.component.scss'], + template: ` + + + + + + + `, +}) +export class RoomsComponent implements OnDestroy { + + @HostBinding('class.expanded') + private expanded: boolean; + private selected: number; + + isDarkTheme: boolean; + + breakpoint: NbMediaBreakpoint; + breakpoints: any; + themeSubscription: any; + themeChangeSubscription: any; + + constructor(private themeService: NbThemeService, + private breakpointService: NbMediaBreakpointsService) { + + this.breakpoints = this.breakpointService.getBreakpointsMap(); + this.themeSubscription = this.themeService.onMediaQueryChange() + .subscribe(([, newValue]) => { + this.breakpoint = newValue; + }); + + this.themeChangeSubscription = this.themeService.onThemeChange() + .pipe(map(({ name }) => name === 'material-dark')) + .subscribe((isDark: boolean) => this.isDarkTheme = isDark); + } + + select(roomNumber) { + if (this.isSelected(roomNumber)) { + this.expand(); + } else { + this.collapse(); + } + + this.selected = roomNumber; + } + + expand() { + this.expanded = true; + } + + collapse() { + this.expanded = false; + } + + isCollapsed() { + return !this.expanded; + } + + private isSelected(roomNumber): boolean { + return this.selected === roomNumber; + } + + ngOnDestroy() { + this.themeSubscription.unsubscribe(); + this.themeChangeSubscription.unsubscribe(); + } +} diff --git a/src/app/pages/forms/buttons/buttons.component.html b/src/app/pages/forms/buttons/buttons.component.html index a4673f5d..c1dd2df9 100644 --- a/src/app/pages/forms/buttons/buttons.component.html +++ b/src/app/pages/forms/buttons/buttons.component.html @@ -120,7 +120,7 @@ - + diff --git a/src/app/pages/forms/buttons/buttons.component.ts b/src/app/pages/forms/buttons/buttons.component.ts index 52e8506b..2108b9f2 100644 --- a/src/app/pages/forms/buttons/buttons.component.ts +++ b/src/app/pages/forms/buttons/buttons.component.ts @@ -1,7 +1,5 @@ import { Component } from '@angular/core'; -import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme'; @Component({ selector: 'ngx-buttons', @@ -9,18 +7,7 @@ import { map } from 'rxjs/operators'; templateUrl: './buttons.component.html', }) export class ButtonsComponent { - public constructor(private readonly themeService: NbThemeService) { - this.materialTheme$ = this.themeService.onThemeChange() - .pipe(map(theme => { - const themeName: string = theme?.name || ''; - return themeName.startsWith('material'); - })); - } - - public readonly materialTheme$: Observable; - public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ]; public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ]; public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; - } diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html index b0adf3a2..20684dda 100644 --- a/src/app/pages/forms/form-inputs/form-inputs.component.html +++ b/src/app/pages/forms/form-inputs/form-inputs.component.html @@ -10,10 +10,6 @@ - - - - @@ -87,7 +83,7 @@ -
+
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts index 5ede35ff..3b9c5161 100644 --- a/src/app/pages/forms/form-inputs/form-inputs.component.ts +++ b/src/app/pages/forms/form-inputs/form-inputs.component.ts @@ -1,7 +1,4 @@ import { Component } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; @Component({ selector: 'ngx-form-inputs', @@ -9,16 +6,6 @@ import { map } from 'rxjs/operators'; templateUrl: './form-inputs.component.html', }) export class FormInputsComponent { - public constructor(private readonly themeService: NbThemeService) { - this.materialTheme$ = this.themeService.onThemeChange() - .pipe(map(theme => { - const themeName: string = theme?.name || ''; - return themeName.startsWith('material'); - })); - } - - public readonly materialTheme$: Observable; - public starRate: number = 2; public heartRate: number = 4; public radioGroupValue: string = 'This is value 2';