mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-21 21:40:49 +02:00
Merge remote-tracking branch 'origin/master'
This commit is contained in:
KostyaDanovsky
commit
987a2da1a7
7 changed files with 152 additions and 114 deletions
|
|
@ -5,16 +5,7 @@
|
|||
<a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
|
||||
<div class="logo" (click)="goToHome()">NgX <span>Admin</span></div>
|
||||
</div>
|
||||
<div class="switcher-container">
|
||||
<label class="theme-switch">
|
||||
<span class="light">Light</span>
|
||||
<div class="switch">
|
||||
<input type="checkbox" (change)="toggleTheme(theme.checked)" #theme>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
<span class="cosmic">Cosmic</span>
|
||||
</label>
|
||||
</div>
|
||||
<ngx-theme-switcher></ngx-theme-switcher>
|
||||
</div>
|
||||
|
||||
<nb-actions
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
|
||||
|
||||
|
|
@ -24,13 +23,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.switcher-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -63,86 +55,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.theme-switch {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
& > span {
|
||||
font-size: 1.125rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&.light {
|
||||
color: nb-theme(color-fg-text);
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&.cosmic {
|
||||
color: nb-theme(color-fg);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
&.light {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
&.cosmic {
|
||||
color: nb-theme(color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 4rem;
|
||||
height: 1.75rem;
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked + .slider::before {
|
||||
transform: translateX(2.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 1.75rem;
|
||||
background-color: nb-theme(layout-bg);
|
||||
}
|
||||
|
||||
.slider::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
border-radius: 50%;
|
||||
background-color: nb-theme(color-success);
|
||||
transition: 0.2s;
|
||||
|
||||
box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-layout /deep/ a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
|
@ -188,12 +100,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.switcher-container {
|
||||
.light, .cosmic {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nb-action:not(.toggle-layout) {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -203,10 +109,6 @@
|
|||
.right /deep/ {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switcher-container {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
|
||||
import { NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
|
||||
import { NbMenuService, NbSidebarService } from '@nebular/theme';
|
||||
import { UserService } from '../../../@core/data/users.service';
|
||||
|
||||
@Component({
|
||||
|
|
@ -19,7 +19,6 @@ export class HeaderComponent implements OnInit {
|
|||
|
||||
constructor(private sidebarService: NbSidebarService,
|
||||
private menuService: NbMenuService,
|
||||
private themeService: NbThemeService,
|
||||
private userService: UserService) {
|
||||
}
|
||||
|
||||
|
|
@ -41,8 +40,4 @@ export class HeaderComponent implements OnInit {
|
|||
goToHome() {
|
||||
this.menuService.navigateHome();
|
||||
}
|
||||
|
||||
toggleTheme(theme: boolean) {
|
||||
this.themeService.changeTheme(theme ? 'cosmic' : 'default');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,3 +3,4 @@ export * from './footer/footer.component';
|
|||
export * from './search-input/search-input.component';
|
||||
export * from './tiny-mce/tiny-mce.component';
|
||||
export * from './theme-settings/theme-settings.component';
|
||||
export * from './theme-switcher/theme-switcher.component';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
|
||||
.theme-switch {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
& > span {
|
||||
font-size: 1.125rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&.light {
|
||||
color: nb-theme(color-fg-text);
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&.cosmic {
|
||||
color: nb-theme(color-fg);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
&.light {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
&.cosmic {
|
||||
color: nb-theme(color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 4rem;
|
||||
height: 1.75rem;
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked + .slider::before {
|
||||
transform: translateX(2.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 1.75rem;
|
||||
background-color: nb-theme(layout-bg);
|
||||
}
|
||||
|
||||
.slider::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
border-radius: 50%;
|
||||
background-color: nb-theme(color-success);
|
||||
transition: 0.2s;
|
||||
|
||||
box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
.light, .cosmic {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-theme-switcher',
|
||||
styleUrls: ['./theme-switcher.component.scss'],
|
||||
template: `
|
||||
<label class="theme-switch">
|
||||
<span class="light">Light</span>
|
||||
<div class="switch">
|
||||
<input type="checkbox" [checked]="currentBoolTheme()" (change)="toggleTheme(theme.checked)" #theme>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
<span class="cosmic">Cosmic</span>
|
||||
</label>
|
||||
`,
|
||||
})
|
||||
export class ThemeSwitcherComponent implements OnInit {
|
||||
theme: NbJSThemeOptions;
|
||||
|
||||
constructor(private themeService: NbThemeService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.themeService.getJsTheme()
|
||||
.subscribe((theme: NbJSThemeOptions) => this.theme = theme);
|
||||
}
|
||||
|
||||
toggleTheme(theme: boolean) {
|
||||
const boolTheme = this.boolToTheme(theme);
|
||||
this.themeService.changeTheme(boolTheme);
|
||||
}
|
||||
|
||||
currentBoolTheme() {
|
||||
return this.themeToBool(this.theme);
|
||||
}
|
||||
|
||||
private themeToBool(theme: NbJSThemeOptions) {
|
||||
return theme.name === 'cosmic';
|
||||
}
|
||||
|
||||
private boolToTheme(theme: boolean) {
|
||||
return theme ? 'cosmic' : 'default';
|
||||
}
|
||||
}
|
||||
|
|
@ -22,6 +22,7 @@ import {
|
|||
HeaderComponent,
|
||||
SearchInputComponent,
|
||||
ThemeSettingsComponent,
|
||||
ThemeSwitcherComponent,
|
||||
TinyMCEComponent,
|
||||
} from './components';
|
||||
import { CapitalizePipe, PluralPipe, RoundPipe, TimingPipe } from './pipes';
|
||||
|
|
@ -51,6 +52,7 @@ const NB_MODULES = [
|
|||
];
|
||||
|
||||
const COMPONENTS = [
|
||||
ThemeSwitcherComponent,
|
||||
HeaderComponent,
|
||||
FooterComponent,
|
||||
SearchInputComponent,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue