mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-07 22:22:33 +01:00
feat: update to Angular 8, Nebular 4 (#2114)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
537e6a77b0
commit
e9600b4a07
323 changed files with 7421 additions and 14161 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';
|
||||
|
|
|
|||
|
|
@ -3,155 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 7.5rem;
|
||||
|
||||
transition: width 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
width: 0;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
width: $sidebar-width;
|
||||
background: nb-theme(color-bg);
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/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 {
|
||||
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 {
|
||||
|
||||
/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;
|
||||
|
||||
/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;
|
||||
}
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-padding-top);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,19 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { AfterViewInit, Component, Inject, PLATFORM_ID, ViewChild } from '@angular/core';
|
||||
import { isPlatformBrowser } from '@angular/common';
|
||||
import { NbLayoutComponent } from '@nebular/theme';
|
||||
|
||||
import { WindowModeBlockScrollService } from '../../services/window-mode-block-scroll.service';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-one-column-layout',
|
||||
styleUrls: ['./one-column.layout.scss'],
|
||||
template: `
|
||||
<nb-layout>
|
||||
<nb-layout windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</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>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
|
|
@ -31,21 +27,18 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class OneColumnLayoutComponent implements OnDestroy {
|
||||
export class OneColumnLayoutComponent implements AfterViewInit {
|
||||
|
||||
private alive = true;
|
||||
@ViewChild(NbLayoutComponent, { static: false }) layout: NbLayoutComponent;
|
||||
|
||||
currentTheme: string;
|
||||
constructor(
|
||||
@Inject(PLATFORM_ID) private platformId,
|
||||
private windowModeBlockScrollService: WindowModeBlockScrollService,
|
||||
) {}
|
||||
|
||||
constructor(protected themeService: NbThemeService) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
ngAfterViewInit() {
|
||||
if (isPlatformBrowser(this.platformId)) {
|
||||
this.windowModeBlockScrollService.register(this.layout);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
/deep/ .scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 3.4rem 0.25rem;
|
||||
}
|
||||
|
||||
/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;
|
||||
}
|
||||
|
||||
/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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/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 {
|
||||
|
||||
/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;
|
||||
|
||||
/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;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,155 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 7.5rem;
|
||||
|
||||
transition: width 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
width: 0;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
width: $sidebar-width;
|
||||
background: nb-theme(color-bg);
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/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 {
|
||||
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 {
|
||||
|
||||
/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;
|
||||
|
||||
/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;
|
||||
}
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-padding-top);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,15 @@
|
|||
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({
|
||||
selector: 'ngx-three-columns-layout',
|
||||
styleUrls: ['./three-columns.layout.scss'],
|
||||
template: `
|
||||
<nb-layout>
|
||||
<nb-layout windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</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 class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
|
|
@ -37,21 +29,4 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
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;
|
||||
}
|
||||
}
|
||||
export class ThreeColumnsLayoutComponent {}
|
||||
|
|
|
|||
|
|
@ -3,156 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 7.5rem;
|
||||
|
||||
transition: width 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
width: 0;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
width: $sidebar-width;
|
||||
background: nb-theme(color-bg);
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/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 {
|
||||
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 {
|
||||
|
||||
/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;
|
||||
|
||||
/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;
|
||||
}
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-padding-top);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,15 @@
|
|||
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({
|
||||
selector: 'ngx-two-columns-layout',
|
||||
styleUrls: ['./two-columns.layout.scss'],
|
||||
template: `
|
||||
<nb-layout>
|
||||
<nb-layout windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</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 class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
|
|
@ -35,21 +27,4 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
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;
|
||||
}
|
||||
}
|
||||
export class TwoColumnsLayoutComponent {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue