mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02:00
feat(theme): add corporate theme (#1727)
This commit is contained in:
Denis Strigo
Dmitry Nehaychik
parent
6d705d2786
commit
e37f12dfc9
45 changed files with 3747 additions and 2960 deletions
|
|
@ -11,6 +11,7 @@
|
|||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"preserveSymlinks": true,
|
||||
"outputPath": "dist",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
|
|
|
|||
5638
package-lock.json
generated
5638
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -9,6 +9,11 @@
|
|||
"bugs": {
|
||||
"url": "https://github.com/akveo/ngx-admin/issues"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"IE 11"
|
||||
],
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"conventional-changelog": "conventional-changelog",
|
||||
|
|
|
|||
|
|
@ -6,21 +6,22 @@
|
|||
<div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
|
||||
</div>
|
||||
<ngx-theme-switcher></ngx-theme-switcher>
|
||||
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
|
||||
</div>
|
||||
|
||||
<nb-actions
|
||||
size="medium"
|
||||
class="header-container"
|
||||
[class.right]="position === 'normal'"
|
||||
[class.left]="position === 'inverse'">
|
||||
<nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
|
||||
<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-action class="control-item">
|
||||
<nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
<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 icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
|
||||
<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-action class="control-item">
|
||||
<nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
.logo-containter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
|
||||
}
|
||||
|
||||
.control-item {
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
width: auto;
|
||||
|
||||
.navigation {
|
||||
@include nb-ltr(padding-right, nb-theme(padding));
|
||||
|
|
@ -58,9 +59,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
ngx-layout-direction-switcher,
|
||||
@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: 0 1em;
|
||||
margin: nb-theme(layout-padding);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
|
|
@ -142,10 +167,13 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
ngx-layout-direction-switcher,
|
||||
ngx-theme-switcher {
|
||||
ngx-layout-direction-switcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ngx-theme-switcher {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
|
@ -167,6 +195,10 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
ngx-theme-switcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nb-action:not(.toggle-layout) {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,3 +6,4 @@ 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'
|
||||
|
|
|
|||
|
|
@ -62,16 +62,16 @@
|
|||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 4rem;
|
||||
height: 1.75rem;
|
||||
width: 3rem;
|
||||
height: 1.5rem;
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked + .slider::before {
|
||||
@include nb-ltr(transform, translateX(2.25rem));
|
||||
@include nb-rtl(transform, translateX(-2.25rem));
|
||||
@include nb-ltr(transform, translateX(1.5rem));
|
||||
@include nb-rtl(transform, translateX(-1.5rem));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -88,8 +88,8 @@
|
|||
.slider::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: nb-theme(color-success);
|
||||
transition: 0.2s;
|
||||
|
|
@ -99,6 +99,10 @@
|
|||
@include nb-for-theme(cosmic) {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,10 +26,6 @@ import { StateService } from '../../../@core/data/state.service';
|
|||
<i [attr.class]="sidebar.icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
<h6 class="settings">SETTINGS</h6>
|
||||
<div class="switcher">
|
||||
<ngx-theme-switcher [vertical]="true"></ngx-theme-switcher>
|
||||
</div>
|
||||
<div class="switcher">
|
||||
<ngx-layout-direction-switcher [vertical]="true"></ngx-layout-direction-switcher>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<div class="themes-switcher"
|
||||
[nbPopover]="switcherListComponent"
|
||||
nbPopoverPlacement="bottom"
|
||||
[nbPopoverContext]="{popover: popover}">
|
||||
<i class="nb-drops"></i>
|
||||
<span *ngIf="showTitle">Themes</span>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
@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);
|
||||
|
||||
background-color: tint($color, 14%);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,57 +1,19 @@
|
|||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { Component, Input, ViewChild } from '@angular/core';
|
||||
import { NbPopoverDirective } from '@nebular/theme';
|
||||
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
|
||||
import { AnalyticsService } from '../../../@core/utils/analytics.service';
|
||||
|
||||
import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-theme-switcher',
|
||||
template: `
|
||||
<ngx-switcher
|
||||
[firstValue]="false"
|
||||
[secondValue]="true"
|
||||
[firstValueLabel]="'Light'"
|
||||
[secondValueLabel]="'Cosmic'"
|
||||
[value]="currentBoolTheme()"
|
||||
(valueChange)="toggleTheme($event)"
|
||||
[vertical]="vertical"
|
||||
>
|
||||
</ngx-switcher>
|
||||
`,
|
||||
templateUrl: './theme-switcher.component.html',
|
||||
styleUrls: ['./theme-switcher.component.scss'],
|
||||
})
|
||||
export class ThemeSwitcherComponent implements OnInit {
|
||||
export class ThemeSwitcherComponent {
|
||||
@ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
|
||||
|
||||
@Input() showTitle: boolean = true;
|
||||
|
||||
switcherListComponent = ThemeSwitcherListComponent;
|
||||
theme: NbJSThemeOptions;
|
||||
|
||||
firstTheme = 'default';
|
||||
secondTheme = 'cosmic';
|
||||
|
||||
@Input() vertical: boolean = false;
|
||||
|
||||
constructor(
|
||||
private themeService: NbThemeService,
|
||||
private analyticsService: AnalyticsService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.themeService.getJsTheme()
|
||||
.subscribe((theme: NbJSThemeOptions) => this.theme = theme);
|
||||
}
|
||||
|
||||
toggleTheme(theme: boolean) {
|
||||
const themeName = this.boolToTheme(theme);
|
||||
this.themeService.changeTheme(themeName);
|
||||
|
||||
this.analyticsService.trackEvent('switchTheme');
|
||||
}
|
||||
|
||||
currentBoolTheme() {
|
||||
return this.themeToBool(this.theme);
|
||||
}
|
||||
|
||||
private themeToBool(theme: NbJSThemeOptions) {
|
||||
return theme.name === this.secondTheme;
|
||||
}
|
||||
|
||||
private boolToTheme(theme: boolean) {
|
||||
return theme ? this.secondTheme : this.firstTheme;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
@import '../../../styles/themes';
|
||||
@import '~@nebular/theme/styles/core/mixins';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
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();
|
||||
}
|
||||
}
|
||||
|
|
@ -47,11 +47,31 @@
|
|||
|
||||
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 {
|
||||
|
|
@ -67,6 +87,10 @@
|
|||
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);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators/takeWhile';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
|
|
@ -11,7 +13,7 @@ import { Component } from '@angular/core';
|
|||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<nb-sidebar-header>
|
||||
<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>
|
||||
|
|
@ -29,5 +31,21 @@ import { Component } from '@angular/core';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class OneColumnLayoutComponent {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,11 +47,31 @@
|
|||
|
||||
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 {
|
||||
|
|
@ -67,6 +87,10 @@
|
|||
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);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { delay, withLatestFrom } from 'rxjs/operators';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
|
||||
import {
|
||||
NbMediaBreakpoint,
|
||||
NbMediaBreakpointsService,
|
||||
|
|
@ -26,7 +25,7 @@ import { StateService } from '../../../@core/data/state.service';
|
|||
tag="menu-sidebar"
|
||||
responsive
|
||||
[end]="sidebar.id === 'end'">
|
||||
<nb-sidebar-header>
|
||||
<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>
|
||||
|
|
@ -106,26 +105,29 @@ export class SampleLayoutComponent implements OnDestroy {
|
|||
layout: any = {};
|
||||
sidebar: any = {};
|
||||
|
||||
protected layoutState$: Subscription;
|
||||
protected sidebarState$: Subscription;
|
||||
protected menuClick$: Subscription;
|
||||
private alive = true;
|
||||
|
||||
currentTheme: string;
|
||||
|
||||
constructor(protected stateService: StateService,
|
||||
protected menuService: NbMenuService,
|
||||
protected themeService: NbThemeService,
|
||||
protected bpService: NbMediaBreakpointsService,
|
||||
protected sidebarService: NbSidebarService) {
|
||||
this.layoutState$ = this.stateService.onLayoutState()
|
||||
this.stateService.onLayoutState()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((layout: string) => this.layout = layout);
|
||||
|
||||
this.sidebarState$ = this.stateService.onSidebarState()
|
||||
this.stateService.onSidebarState()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((sidebar: string) => {
|
||||
this.sidebar = sidebar;
|
||||
});
|
||||
|
||||
const isBp = this.bpService.getByName('is');
|
||||
this.menuClick$ = this.menuService.onItemSelect()
|
||||
this.menuService.onItemSelect()
|
||||
.pipe(
|
||||
takeWhile(() => this.alive),
|
||||
withLatestFrom(this.themeService.onMediaQueryChange()),
|
||||
delay(20),
|
||||
)
|
||||
|
|
@ -135,11 +137,15 @@ export class SampleLayoutComponent implements OnDestroy {
|
|||
this.sidebarService.collapse('menu-sidebar');
|
||||
}
|
||||
});
|
||||
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.layoutState$.unsubscribe();
|
||||
this.sidebarState$.unsubscribe();
|
||||
this.menuClick$.unsubscribe();
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,11 +47,31 @@
|
|||
|
||||
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 {
|
||||
|
|
@ -67,6 +87,10 @@
|
|||
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);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators/takeWhile';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
|
|
@ -11,7 +13,7 @@ import { Component } from '@angular/core';
|
|||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nb-sidebar-header>
|
||||
<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>
|
||||
|
|
@ -35,5 +37,21 @@ import { Component } from '@angular/core';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class ThreeColumnsLayoutComponent {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,11 +47,32 @@
|
|||
|
||||
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 {
|
||||
|
|
@ -67,6 +88,10 @@
|
|||
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);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators/takeWhile';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
|
|
@ -11,7 +13,7 @@ import { Component } from '@angular/core';
|
|||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nb-sidebar-header>
|
||||
<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>
|
||||
|
|
@ -33,5 +35,21 @@ import { Component } from '@angular/core';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class TwoColumnsLayoutComponent {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
86
src/app/@theme/styles/theme.corporate.ts
Normal file
86
src/app/@theme/styles/theme.corporate.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
export const CORPORATE_THEME = {
|
||||
name: 'corporate',
|
||||
base: 'default',
|
||||
variables: {
|
||||
temperature: [
|
||||
'#ffa36b',
|
||||
'#ffa36b',
|
||||
'#ff9e7a',
|
||||
'#ff9888',
|
||||
'#ff8ea0',
|
||||
],
|
||||
|
||||
solar: {
|
||||
gradientLeft: '#ff8ea0',
|
||||
gradientRight: '#ffa36b',
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
colorBlack: '#000000',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
|
||||
lineBg: '#c0c8d1',
|
||||
lineShadowBlur: '0',
|
||||
itemColor: '#bcc3cc',
|
||||
itemBorderColor: '#bcc3cc',
|
||||
itemEmphasisBorderColor: '#74a2ff',
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: '#ffffff',
|
||||
gradTo: '#ffffff',
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: '#edf0f4',
|
||||
tooltipLineColor: '#bdc4cd',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
|
||||
axisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
xAxisTextColor: '#2a2a2a',
|
||||
yAxisSplitLine: '#ebeef2',
|
||||
|
||||
itemBorderColor: '#73a1ff',
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: '#bdc4cd',
|
||||
lineGradTo: '#c0c8d1',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(255, 255, 255, 0)',
|
||||
areaGradTo: 'rgba(255, 255, 255, 0)',
|
||||
shadowLineDarkBg: 'rgba(255, 255, 255, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: '#484848',
|
||||
areaColor: '#dddddd',
|
||||
areaHoverColor: '#cccccc',
|
||||
areaBorderColor: '#ebeef2',
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#484848',
|
||||
axisLineColor: '#bbbbbb',
|
||||
splitLineColor: '#ebeef2',
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: '#6a7985',
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: '#cccccc',
|
||||
textColor: '#484848',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
@import '~@nebular/theme/styles/themes';
|
||||
|
||||
// which themes you what to enable (empty to enable all)
|
||||
$nb-enabled-themes: (default, cosmic);
|
||||
$nb-enabled-themes: (default, cosmic, corporate);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
// app wise variables for each theme
|
||||
|
|
@ -14,6 +14,9 @@ $nb-themes: nb-register-theme((
|
|||
|
||||
font-main: Roboto,
|
||||
font-secondary: Exo,
|
||||
|
||||
switcher-background: #ebeff5,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
|
||||
), default, default);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
|
|
@ -24,4 +27,20 @@ $nb-themes: nb-register-theme((
|
|||
|
||||
font-main: Roboto,
|
||||
font-secondary: Exo,
|
||||
|
||||
switcher-background: #4e41a5,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
|
||||
), 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,
|
||||
|
||||
font-main: Roboto,
|
||||
font-secondary: Exo,
|
||||
|
||||
switcher-background: #2b2d34,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
|
||||
), corporate, corporate);
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ import {
|
|||
LayoutDirectionSwitcherComponent,
|
||||
ThemeSwitcherComponent,
|
||||
TinyMCEComponent,
|
||||
ThemeSwitcherListComponent,
|
||||
} from './components';
|
||||
import { CapitalizePipe, PluralPipe, RoundPipe, TimingPipe } from './pipes';
|
||||
import {
|
||||
|
|
@ -40,6 +41,7 @@ import {
|
|||
} 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];
|
||||
|
||||
|
|
@ -64,6 +66,7 @@ const COMPONENTS = [
|
|||
SwitcherComponent,
|
||||
LayoutDirectionSwitcherComponent,
|
||||
ThemeSwitcherComponent,
|
||||
ThemeSwitcherListComponent,
|
||||
HeaderComponent,
|
||||
FooterComponent,
|
||||
SearchInputComponent,
|
||||
|
|
@ -75,6 +78,10 @@ const COMPONENTS = [
|
|||
TwoColumnsLayoutComponent,
|
||||
];
|
||||
|
||||
const ENTRY_COMPONENTS = [
|
||||
ThemeSwitcherListComponent,
|
||||
];
|
||||
|
||||
const PIPES = [
|
||||
CapitalizePipe,
|
||||
PluralPipe,
|
||||
|
|
@ -87,7 +94,7 @@ const NB_THEME_PROVIDERS = [
|
|||
{
|
||||
name: 'cosmic',
|
||||
},
|
||||
[ DEFAULT_THEME, COSMIC_THEME ],
|
||||
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
|
||||
).providers,
|
||||
...NbSidebarModule.forRoot().providers,
|
||||
...NbMenuModule.forRoot().providers,
|
||||
|
|
@ -97,6 +104,7 @@ const NB_THEME_PROVIDERS = [
|
|||
imports: [...BASE_MODULES, ...NB_MODULES],
|
||||
exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
|
||||
declarations: [...COMPONENTS, ...PIPES],
|
||||
entryComponents: [...ENTRY_COMPONENTS],
|
||||
})
|
||||
export class ThemeModule {
|
||||
static forRoot(): ModuleWithProviders {
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@
|
|||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid nb-theme(separator);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-bottom-color: nb-theme(tabs-separator);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,8 @@
|
|||
<div class="row">
|
||||
<div class="col-xxxl-3 col-md-6">
|
||||
<ngx-status-card title="Light" type="primary">
|
||||
<i class="nb-lightbulb"></i>
|
||||
</ngx-status-card>
|
||||
</div>
|
||||
|
||||
<div class="col-xxxl-3 col-md-6">
|
||||
<ngx-status-card title="Roller Shades" type="success">
|
||||
<i class="nb-roller-shades"></i>
|
||||
</ngx-status-card>
|
||||
</div>
|
||||
|
||||
<div class="col-xxxl-3 col-md-6">
|
||||
<ngx-status-card title="Wireless Audio" type="info">
|
||||
<i class="nb-audio"></i>
|
||||
</ngx-status-card>
|
||||
</div>
|
||||
|
||||
<div class="col-xxxl-3 col-md-6">
|
||||
<ngx-status-card title="Coffee Maker" type="warning">
|
||||
<i class="nb-coffee-maker"></i>
|
||||
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
|
||||
<ngx-status-card [title]="statusCard.title"
|
||||
[type]="statusCard.type">
|
||||
<i [ngClass]="statusCard.iconClass"></i>
|
||||
</ngx-status-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,88 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {Component, OnDestroy} from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators/takeWhile' ;
|
||||
|
||||
interface ICardSettings {
|
||||
title: string;
|
||||
iconClass: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-dashboard',
|
||||
styleUrls: ['./dashboard.component.scss'],
|
||||
templateUrl: './dashboard.component.html',
|
||||
})
|
||||
export class DashboardComponent {
|
||||
export class DashboardComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
lightCard: ICardSettings = {
|
||||
title: 'Light',
|
||||
iconClass: 'nb-lightbulb',
|
||||
type: 'primary',
|
||||
};
|
||||
rollerShadesCard: ICardSettings = {
|
||||
title: 'Roller Shades',
|
||||
iconClass: 'nb-roller-shades',
|
||||
type: 'success',
|
||||
};
|
||||
wirelessAudioCard: ICardSettings = {
|
||||
title: 'Wireless Audio',
|
||||
iconClass: 'nb-audio',
|
||||
type: 'info',
|
||||
};
|
||||
coffeeMakerCard: ICardSettings = {
|
||||
title: 'Coffee Maker',
|
||||
iconClass: 'nb-coffee-maker',
|
||||
type: 'warning',
|
||||
};
|
||||
|
||||
statusCards: string;
|
||||
|
||||
commonStatusCardsSet: ICardSettings[] = [
|
||||
this.lightCard,
|
||||
this.rollerShadesCard,
|
||||
this.wirelessAudioCard,
|
||||
this.coffeeMakerCard,
|
||||
];
|
||||
|
||||
statusCardsByThemes: {
|
||||
default: ICardSettings[];
|
||||
cosmic: ICardSettings[];
|
||||
corporate: ICardSettings[];
|
||||
} = {
|
||||
default: this.commonStatusCardsSet,
|
||||
cosmic: this.commonStatusCardsSet,
|
||||
corporate: [
|
||||
{
|
||||
...this.lightCard,
|
||||
type: 'warning',
|
||||
},
|
||||
{
|
||||
...this.rollerShadesCard,
|
||||
type: 'primary',
|
||||
},
|
||||
{
|
||||
...this.wirelessAudioCard,
|
||||
type: 'danger',
|
||||
},
|
||||
{
|
||||
...this.coffeeMakerCard,
|
||||
type: 'secondary',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
constructor(private themeService: NbThemeService) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.statusCards = this.statusCardsByThemes[theme.name];
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-block">
|
||||
<div class="stats-block currency">
|
||||
<div class="subtitle">Spent</div>
|
||||
<div>
|
||||
<span class="value">291</span>
|
||||
|
|
@ -40,7 +40,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown" ngbDropdown>
|
||||
<div class="dropdown"
|
||||
[ngClass]="{ 'ghost-dropdown': currentTheme === 'corporate' }"
|
||||
ngbDropdown>
|
||||
<button type="button" ngbDropdownToggle class="btn"
|
||||
[ngClass]="{ 'btn-outline-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
|
||||
{{ type }}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/typography/typography';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
|
|
@ -22,6 +23,10 @@
|
|||
height: 100%;
|
||||
z-index: 2;
|
||||
box-shadow: nb-theme(card-shadow);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-right: 1px solid nb-theme(card-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
|
|
@ -88,9 +93,29 @@
|
|||
justify-content: space-between;
|
||||
padding: nb-theme(padding);
|
||||
color: nb-theme(color-fg);
|
||||
position: relative;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid nb-theme(separator);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-top-color: nb-theme(tabs-separator);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: nb-theme(layout-bg);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: nb-theme(color-success);
|
||||
border-radius: nb-theme(radius);
|
||||
}
|
||||
}
|
||||
|
||||
.month {
|
||||
|
|
@ -169,7 +194,7 @@
|
|||
.stats-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: normal;
|
||||
color: nb-theme(color-fg);
|
||||
padding: 0 1.5rem;
|
||||
border-right: 1px solid nb-theme(separator);
|
||||
|
|
@ -210,6 +235,48 @@
|
|||
.stats-block .value {
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
}
|
||||
|
||||
.stats-month {
|
||||
&:hover {
|
||||
&::before {
|
||||
$color-top: nb-theme(btn-success-bg);
|
||||
$color-bottom: btn-hero-success-left-color();
|
||||
|
||||
background-image: linear-gradient(to top, $color-top, $color-bottom);
|
||||
box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
nb-tabset /deep/ ul li.active {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-block {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.stats-month {
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.delta {
|
||||
&.down {
|
||||
color: text-primary();
|
||||
|
||||
&::before {
|
||||
border-top: 8px solid text-primary();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
|
|
|
|||
|
|
@ -67,6 +67,10 @@
|
|||
@include nb-for-theme(cosmic) {
|
||||
background-color: nb-theme(link-color);
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
|
|
@ -99,6 +103,12 @@
|
|||
background: nb-theme(link-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
@include install-thumb() {
|
||||
background: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -92,4 +92,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.selected-room {
|
||||
.room-border {
|
||||
stroke: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,11 @@
|
|||
@include nb-for-theme(cosmic) {
|
||||
background-image: url('../../../../assets/images/square_pattern_cosmic.svg');
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background: none;
|
||||
border-right-color: nb-theme(tabs-separator);
|
||||
}
|
||||
}
|
||||
|
||||
ngx-player {
|
||||
|
|
|
|||
|
|
@ -115,6 +115,10 @@
|
|||
color: nb-theme(color-fg);
|
||||
font-size: 3rem;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(actions-fg);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -145,6 +149,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.cameras-filter a {
|
||||
&.active {
|
||||
color: nb-theme(color-primary);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@include nb-ltr(border-left, 1px solid nb-theme(border-color));
|
||||
@include nb-rtl(border-right, 1px solid nb-theme(border-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
nb-action {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -47,6 +47,26 @@
|
|||
@include btn-hero-warning-gradient();
|
||||
@include btn-hero-warning-bevel-glow-shadow();
|
||||
}
|
||||
&.danger {
|
||||
@include btn-hero-danger-gradient();
|
||||
@include btn-hero-danger-bevel-glow-shadow();
|
||||
}
|
||||
&.secondary {
|
||||
@include btn-hero-secondary-bg();
|
||||
@include btn-hero-secondary-bevel-glow-shadow();
|
||||
color: nb-theme(card-fg);
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
&.primary,
|
||||
&.success,
|
||||
&.info,
|
||||
&.warning,
|
||||
&.danger,
|
||||
&.secondary {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -65,6 +85,12 @@
|
|||
&.warning {
|
||||
background-image: btn-hero-warning-light-gradient();
|
||||
}
|
||||
&.danger {
|
||||
background-image: btn-hero-danger-light-gradient();
|
||||
}
|
||||
&.secondary {
|
||||
background-image: btn-hero-secondary-light-gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,10 +100,14 @@
|
|||
.icon {
|
||||
color: nb-theme(card-fg);
|
||||
|
||||
&.primary, &.success, &.info, &.warning {
|
||||
&.primary, &.success, &.info, &.warning, &.danger {
|
||||
box-shadow: none;
|
||||
background-image: linear-gradient(to right, transparent, transparent);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -143,4 +173,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
nb-card {
|
||||
.icon-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,4 +91,14 @@
|
|||
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.circle {
|
||||
stroke: nb-theme(color-warning);
|
||||
}
|
||||
|
||||
.power-bg {
|
||||
color: nb-theme(separator);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,6 +124,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.btn-icon.active {
|
||||
color: nb-theme(color-primary);
|
||||
border: none;
|
||||
background-color: nb-theme(layout-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-temperature-dragger {
|
||||
max-width: 250px;
|
||||
|
|
|
|||
|
|
@ -59,6 +59,10 @@
|
|||
0 4px 10px rgba(33, 7, 77, 0.5),
|
||||
0 2px 10px #928dff;
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(color-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@
|
|||
width: $button-size;
|
||||
height: $button-size;
|
||||
border-radius: nb-theme(btn-border-radius);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(btn-semi-round-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.state-details {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,13 @@
|
|||
<span class="subheader">{{ hb[themeName].border }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].color">
|
||||
<div class="state-value color"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Color</span>
|
||||
<span class="subheader">{{ hb[themeName].color }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].gradientLeft">
|
||||
<div class="state-value gradient"></div>
|
||||
<div class="state-details">
|
||||
|
|
@ -51,8 +58,8 @@
|
|||
<div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].glow">
|
||||
<span class="header">Glow</span>
|
||||
<span class="subheader">0 2px 12px 0</span>
|
||||
<span class="subheader">{{ hb[themeName].glow }}</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.params }}</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.color }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].glow">
|
||||
<span class="header">No Glow</span>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,9 @@
|
|||
}
|
||||
|
||||
.primary-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
|
|
@ -51,6 +54,9 @@
|
|||
}
|
||||
|
||||
.warning-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-warning);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-warning-gradient();
|
||||
}
|
||||
|
|
@ -63,6 +69,9 @@
|
|||
}
|
||||
|
||||
.success-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-success);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-success-gradient();
|
||||
}
|
||||
|
|
@ -75,6 +84,9 @@
|
|||
}
|
||||
|
||||
.info-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-info);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-info-gradient();
|
||||
}
|
||||
|
|
@ -87,6 +99,9 @@
|
|||
}
|
||||
|
||||
.danger-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-danger);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-danger-gradient();
|
||||
}
|
||||
|
|
@ -99,6 +114,9 @@
|
|||
}
|
||||
|
||||
.secondary-container {
|
||||
.color {
|
||||
background-color: nb-theme(btn-secondary-bg);
|
||||
}
|
||||
.border {
|
||||
color: nb-theme(btn-secondary-color);
|
||||
border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-hero-buttons',
|
||||
|
|
@ -10,7 +11,7 @@ export class HeroButtonComponent implements OnDestroy {
|
|||
|
||||
themeName = 'default';
|
||||
settings: Array<any>;
|
||||
themeSubscription: any;
|
||||
themeSubscription: Subscription;
|
||||
|
||||
constructor(private themeService: NbThemeService) {
|
||||
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
|
||||
|
|
@ -29,12 +30,22 @@ export class HeroButtonComponent implements OnDestroy {
|
|||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.primary,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (115, 161, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
bevel: `shade(${colors.primary}, 14%)`,
|
||||
shadow: 'rgba (6, 7, 64, 0.5)',
|
||||
glow: `adjust-hue(${colors.primary}, 10deg)`,
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.primary}, 10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-warning',
|
||||
|
|
@ -45,12 +56,22 @@ export class HeroButtonComponent implements OnDestroy {
|
|||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.warning,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (256, 163, 107, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
bevel: `shade(${colors.warning}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: `adjust-hue(${colors.warning}, 5deg)`,
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.warning}, 5deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-success',
|
||||
|
|
@ -61,12 +82,22 @@ export class HeroButtonComponent implements OnDestroy {
|
|||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.success,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (93, 207, 227, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
bevel: `shade(${colors.success}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: `adjust-hue(${colors.success}, 10deg)`,
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.success}, 10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-info',
|
||||
|
|
@ -77,12 +108,22 @@ export class HeroButtonComponent implements OnDestroy {
|
|||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.info,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (186, 127, 236, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
bevel: `shade(${colors.info}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: `adjust-hue(${colors.info}, -5deg)`,
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.info}, -5deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-danger',
|
||||
|
|
@ -93,12 +134,22 @@ export class HeroButtonComponent implements OnDestroy {
|
|||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.danger,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (255, 107, 131, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
bevel: `shade(${colors.danger}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: `adjust-hue(${colors.danger}, -10deg)`,
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.danger}, -10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-secondary',
|
||||
|
|
@ -108,11 +159,17 @@ export class HeroButtonComponent implements OnDestroy {
|
|||
default: {
|
||||
border: '#dadfe6',
|
||||
},
|
||||
corporate: {
|
||||
color: '#edf2f5',
|
||||
},
|
||||
cosmic: {
|
||||
border: colors.primary,
|
||||
bevel: '#665ebd',
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: 'rgba (146, 141, 255, 1)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: 'rgba (146, 141, 255, 1)',
|
||||
},
|
||||
},
|
||||
}];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@
|
|||
font-size: 2.5rem;
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(actions-fg);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
padding: 0 0 29px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.shape-container {
|
||||
|
|
|
|||
BIN
src/assets/images/kitten-corporate.png
Normal file
BIN
src/assets/images/kitten-corporate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
|
|
@ -16,6 +16,12 @@
|
|||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
"**/*.spec.ts",
|
||||
"../node_modules/@nebular/**/*.spec.ts"
|
||||
],
|
||||
"include": [
|
||||
"../src/*.ts",
|
||||
"../src/**/*.ts",
|
||||
"../node_modules/@nebular/**/*.ts"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue