mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-23 08:24:07 +01:00
nebular update and structure refactoring
This commit is contained in:
Dmitry Nehaychik
parent
78e4d2cfe9
commit
df489ad17e
100 changed files with 736 additions and 3945 deletions
|
|
@ -1,4 +1,3 @@
|
|||
export * from './one-column/one-column.layout';
|
||||
export * from './two-columns/two-columns.layout';
|
||||
export * from './three-columns/three-columns.layout';
|
||||
export * from './sample/sample.layout';
|
||||
|
|
|
|||
|
|
@ -42,116 +42,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: nb-theme(sidebar-header-gap);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
::ng-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;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .scrollable {
|
||||
@include nb-for-theme(corporate) {
|
||||
padding-top: 0;
|
||||
|
||||
.menu-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
|
||||
.main-btn {
|
||||
padding: 0.75rem 2.5rem;
|
||||
margin-top: -2rem;
|
||||
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);
|
||||
}
|
||||
span {
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
::ng-deep nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 5px;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.main-content {
|
||||
padding: 0.75rem !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
::ng-deep .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
|
|
@ -13,10 +11,7 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<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>
|
||||
<nb-sidebar-header>
|
||||
</nb-sidebar-header>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
|
@ -31,21 +26,5 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
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;
|
||||
}
|
||||
export class OneColumnLayoutComponent {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,182 +0,0 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 19rem;
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
@include nb-ltr(transform, translate3d(100%, 0, 0));
|
||||
@include nb-rtl(transform, translate3d(-100%, 0, 0));
|
||||
&.start {
|
||||
@include nb-ltr(transform, translate3d(-100%, 0, 0));
|
||||
@include nb-rtl(transform, translate3d(100%, 0, 0));
|
||||
}
|
||||
|
||||
&.expanded, &.expanded.start {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
::ng-deep .scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 3.4rem 0.25rem;
|
||||
}
|
||||
|
||||
::ng-deep .main-container {
|
||||
width: $sidebar-width;
|
||||
background: nb-theme(color-bg);
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
background: nb-theme(layout-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: nb-theme(sidebar-header-gap);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
::ng-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;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .scrollable {
|
||||
@include nb-for-theme(corporate) {
|
||||
padding-top: 0;
|
||||
|
||||
.menu-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
|
||||
.main-btn {
|
||||
padding: 0.75rem 2.5rem;
|
||||
margin-top: -2rem;
|
||||
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);
|
||||
}
|
||||
span {
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep nb-menu {
|
||||
& > .menu-items {
|
||||
& > .menu-item:first-child {
|
||||
.menu-title {
|
||||
&::after {
|
||||
content: 'new';
|
||||
color: nb-theme(color-white);
|
||||
margin-left: 1rem;
|
||||
background: nb-theme(color-danger);
|
||||
padding: 0 0.5rem;
|
||||
border-radius: nb-theme(radius);
|
||||
font-size: nb-theme(font-size-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nb-e-commerce {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
::ng-deep nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 5px;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.main-content {
|
||||
padding: 0.75rem !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
::ng-deep .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
|
||||
import {
|
||||
NbMediaBreakpoint,
|
||||
NbMediaBreakpointsService,
|
||||
NbMenuItem,
|
||||
NbMenuService,
|
||||
NbSidebarService,
|
||||
NbThemeService,
|
||||
} from '@nebular/theme';
|
||||
|
||||
import { StateService } from '../../../@core/utils';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-sample-layout',
|
||||
styleUrls: ['./sample.layout.scss'],
|
||||
template: `
|
||||
<nb-layout [center]="layout.id === 'center-column'" windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar"
|
||||
tag="menu-sidebar"
|
||||
responsive
|
||||
[end]="sidebar.id === 'end'">
|
||||
<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>
|
||||
</nb-sidebar-header>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
<nb-layout-column class="main-content">
|
||||
<ng-content select="router-outlet"></ng-content>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column start class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column class="small" *ngIf="layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-footer fixed>
|
||||
<ngx-footer></ngx-footer>
|
||||
</nb-layout-footer>
|
||||
|
||||
<nb-sidebar class="settings-sidebar"
|
||||
tag="settings-sidebar"
|
||||
state="collapsed"
|
||||
fixed
|
||||
[end]="sidebar.id !== 'end'">
|
||||
<ngx-theme-settings></ngx-theme-settings>
|
||||
</nb-sidebar>
|
||||
</nb-layout>
|
||||
<ngx-toggle-settings-button></ngx-toggle-settings-button>
|
||||
`,
|
||||
})
|
||||
export class SampleLayoutComponent implements OnDestroy {
|
||||
|
||||
subMenu: NbMenuItem[] = [
|
||||
{
|
||||
title: 'PAGE LEVEL MENU',
|
||||
group: true,
|
||||
},
|
||||
{
|
||||
title: 'Buttons',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/buttons',
|
||||
},
|
||||
{
|
||||
title: 'Grid',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/grid',
|
||||
},
|
||||
{
|
||||
title: 'Icons',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/icons',
|
||||
},
|
||||
{
|
||||
title: 'Modals',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/modals',
|
||||
},
|
||||
{
|
||||
title: 'Typography',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/typography',
|
||||
},
|
||||
{
|
||||
title: 'Animated Searches',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/search-fields',
|
||||
},
|
||||
{
|
||||
title: 'Tabs',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/tabs',
|
||||
},
|
||||
];
|
||||
layout: any = {};
|
||||
sidebar: any = {};
|
||||
|
||||
private alive = true;
|
||||
|
||||
currentTheme: string;
|
||||
|
||||
constructor(protected stateService: StateService,
|
||||
protected menuService: NbMenuService,
|
||||
protected themeService: NbThemeService,
|
||||
protected bpService: NbMediaBreakpointsService,
|
||||
protected sidebarService: NbSidebarService) {
|
||||
this.stateService.onLayoutState()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((layout: string) => this.layout = layout);
|
||||
|
||||
this.stateService.onSidebarState()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((sidebar: string) => {
|
||||
this.sidebar = sidebar;
|
||||
});
|
||||
|
||||
const isBp = this.bpService.getByName('is');
|
||||
this.menuService.onItemSelect()
|
||||
.pipe(
|
||||
takeWhile(() => this.alive),
|
||||
withLatestFrom(this.themeService.onMediaQueryChange()),
|
||||
delay(20),
|
||||
)
|
||||
.subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
|
||||
|
||||
if (bpTo.width <= isBp.width) {
|
||||
this.sidebarService.collapse('menu-sidebar');
|
||||
}
|
||||
});
|
||||
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue