mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-22 02:10:12 +01: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
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue