mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-28 02:44:07 +01:00
feat(layouts): layouts + theme settings panel preview
This commit is contained in:
Dmitry Nehaychik
parent
6fe593295d
commit
eef4d0633c
20 changed files with 636 additions and 19 deletions
80
src/app/@theme/layouts/sample/sample.layout.scss
Normal file
80
src/app/@theme/layouts/sample/sample.layout.scss
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
@import '../../styles/variables';
|
||||
|
||||
@include nga-install-root-component() {
|
||||
|
||||
nga-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nga-sidebar.settings-sidebar {
|
||||
width: 7rem;
|
||||
/deep/ .main-container {
|
||||
width: 7rem;
|
||||
background: #3a3850;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
/deep/ .main-container {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nga-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: nga-theme(sidebar-header-gap);
|
||||
|
||||
/deep/ .main-container {
|
||||
height:
|
||||
calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important;
|
||||
border-top-right-radius: 0.75rem;
|
||||
}
|
||||
|
||||
/deep/ nga-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);
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nga-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
121
src/app/@theme/layouts/sample/sample.layout.ts
Normal file
121
src/app/@theme/layouts/sample/sample.layout.ts
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
import { Component, Input, OnDestroy } from '@angular/core';
|
||||
import { List } from 'immutable';
|
||||
import { NgaMenuItem } from '@akveo/nga-theme';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
import { StateService } from '../../../@core/data/state.service';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-sample-layout',
|
||||
styleUrls: ['./sample.layout.scss'],
|
||||
template: `
|
||||
<nga-layout [center]="layout.id === 'center-column'">
|
||||
<nga-layout-header fixed>
|
||||
<ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header>
|
||||
</nga-layout-header>
|
||||
|
||||
<nga-sidebar class="menu-sidebar"
|
||||
tag="menu-sidebar"
|
||||
responsive
|
||||
[right]="sidebar.id === 'right'">
|
||||
<nga-sidebar-header>
|
||||
<button class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</button>
|
||||
</nga-sidebar-header>
|
||||
<ng-content select="nga-menu"></ng-content>
|
||||
</nga-sidebar>
|
||||
|
||||
<nga-layout-column>
|
||||
<ng-content select="router-outlet"></ng-content>
|
||||
</nga-layout-column>
|
||||
|
||||
<nga-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
|
||||
<nga-menu [items]="subMenu"></nga-menu>
|
||||
</nga-layout-column>
|
||||
|
||||
<nga-layout-column right class="small" *ngIf="layout.id === 'three-column'">
|
||||
<nga-menu [items]="subMenu"></nga-menu>
|
||||
</nga-layout-column>
|
||||
|
||||
<nga-layout-footer fixed>
|
||||
<ngx-footer></ngx-footer>
|
||||
</nga-layout-footer>
|
||||
|
||||
<nga-sidebar class="settings-sidebar"
|
||||
tag="settings-sidebar"
|
||||
state="collapsed"
|
||||
fixed
|
||||
[right]="sidebar.id !== 'right'">
|
||||
<ngx-theme-settings></ngx-theme-settings>
|
||||
</nga-sidebar>
|
||||
</nga-layout>
|
||||
`,
|
||||
})
|
||||
export class SampleLayoutComponent implements OnDestroy {
|
||||
|
||||
subMenu: List<NgaMenuItem> = List(
|
||||
[
|
||||
{
|
||||
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 = {};
|
||||
|
||||
protected layoutState$: Subscription;
|
||||
protected sidebarState$: Subscription;
|
||||
|
||||
constructor(protected stateService: StateService) {
|
||||
this.layoutState$ = this.stateService.onLayoutState()
|
||||
.subscribe((layout: string) => this.layout = layout);
|
||||
|
||||
this.sidebarState$ = this.stateService.onSidebarState()
|
||||
.subscribe((sidebar: string) => {
|
||||
this.sidebar = sidebar
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.layoutState$.unsubscribe();
|
||||
this.sidebarState$.unsubscribe();
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue