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

feat: update to Angular 8, Nebular 4 (#2114)

Browse source
This commit is contained in:
Dmitry Nehaychik 2019-07-02 16:18:09 +03:00 • committed by Sergey Andrievskiy
parent 537e6a77b0
commit e9600b4a07
323 changed files with 7421 additions and 14161 deletions
Download patch file Download diff file Expand all files Collapse all files

153
src/app/@theme/layouts/two-columns/two-columns.layout.scss
View file

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

33
src/app/@theme/layouts/two-columns/two-columns.layout.ts
View file

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