Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-10 10:24:20 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(theme): add corporate theme (#1727)

Browse source
This commit is contained in:
Denis Strigo 2018-06-21 15:16:53 +03:00 • committed by Dmitry Nehaychik
parent 6d705d2786
commit e37f12dfc9
45 changed files with 3747 additions and 2960 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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>

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

@ -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;
}

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

@ -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'

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

@ -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);
}
}
}

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

@ -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>

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

@ -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>

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

@ -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;
}
}
}
}

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

@ -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;
}
}

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

@ -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;
}
}
}

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

@ -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();
}
}